undefined

HTML에 자바스크립트 적용 방법

JavaScripter — Sun, 23 Oct 2022 12:53:17 +0900

작동원리

HTML이 파싱 중에 script 태그를 만나면 파싱을 일시적으로 멈추고 script를 로드한다.

script의 위치 및 설정에 따라 파싱진행 과정이 달라지게 된다.

*파싱 : 브라우저가 코드를 이해하고 사용할 수 있도록 DOM tree구조로 변환시키는 것

[위치에 따른 분류]

설정이 없는 상태를 전제한다.

맨위

자바스크립트의 패치와 실행이 된 후 html 파싱이 진행되기 때문에 비교적 느리다.

맨아래

HTML 파싱이 완료된 이후에 자바스크립의 패칭과 실행이 된다. 다만 HTML이 로드 되었지만 자바스크립트가 아직 로드가 되지 않은 경우 브라우저의 화면구현은 완료되었지만 JavaScript기능은 작동하지 않는다.

[설정에 따른 분류]

script 태그의 속성에 추가하여 사용

위치에 상관없다.

async

HTML의 파싱과 JavaScript의 패칭이 병렬적으로 이루어 진다. 패칭이 완료되면 즉시 JavaScript가 실행되어 HTML의 파싱이 멈추게 된다.

defer

async와 동일하게 HTML의 파싱과 JavaScript의 패칭이 병렬적으로 이루어진다. 다만 패칭으로 그치고 실행은 HTML의 파싱이 완료 된 이후에 진행되어 중간에 끊기지 않는다.

디자인 패턴(design pattern)에 대하여

JavaScripter — Sat, 22 Oct 2022 15:23:52 +0900

소프트웨어의 재사용성과 호환성 그리고 유지보수성을 위함

원칙

객체지향적으로 설계되어야함

객체지향적이란?

하나의 클래스는 하나의 역할을 수행한다.
상속에는 열려있으나 수정에는 닫혀있다.
자식은 부모를 대체할 수 있어야 한다.
인터페이스가 분리되어 클래스는 최소한의 구현만 해야한다.
상위 모듈은 하위모듈에 의존적이면 안된다.

종류

생성 패턴 - 객체의 생성 방식을 결정한다
구조 패턴 - 객체간의 관계를 조직한다.
행위 패턴 - 객체의 행위를 조직, 관리한다.

어댑터 패턴

현재 진행중인 클라이언트에서 사용하지 못하는 클래스를 사용하기 위해 어댑터 패턴을 거치면서 변환시킨다.

방식 : 상속

특징 : 기존의 클라이언트는 바뀔 필요가 없다.

싱글톤 패턴

클래스가 하나의 메모리를 할당하고 그 메모리에 인스턴스를 생성한다.

하나의 객체만 사용하기 때문에 메모리 낭비를 막을 수 있다.

또한 싱글톤 패턴의 객체는 전역적이기 때문에 데이터를 공유하는데 용이하다.

하지만 하나의 인스턴스에서 너무 많은 일을 하거나 많은 데이터를 처리한다면 유지보수하는데 힘들고 테스트에도 용이하지 못할 수 있다.

템플릿 메소드 패턴

상황에 맞게 변경하거나 확장한다.

추상 클래스와 구현 클래스가 있다.

추상 클래스 : 핵심 로직을 메소드로 선언한다.

구현 클래스 : 메소드를 호출한다.

구현 클래스에서는 추상 클래스에서 선언 했던 메소드만 사용하기에 핵심 로직을 관리하기에 용이하다.

그러나 추상메소드가 많아 진다면 관리가 복잡해진다.

팩토리 메소드 패턴

객체의 생성을 다른 클래스에서 수행한다.

옵저버 패턴

상태를 변경하는 주체 객체와 상태의 변경을 알아야 하는 관찰 객체로 이루어져있다.

주체 객체의 상태가 변경되면 그 객체에 의존하고 있던 객체에 연락이 가고 정보가 갱신된다.

스트레티지 패턴

같은 동작을 하는 객체 끼리 묶어 캡슐화 한다.

새로운 로직을 수정할 때 효율적인 변경이 가능하다.

컴포지트 패턴

객체를 계층화 시켜 동일한 인터페이스에서 독립적으로 정의된 하위 객체들을 관리한다.

참고자료 : https://github.com/gyoogle/tech-interview-for-developer

사용자 로그인 인증 방법 알아보기 - React Authentication

JavaScripter — Fri, 21 Oct 2022 08:18:17 +0900

Server side session (서버 사이드 세션)

서버쪽에 유저의 고유 ID를 저장한다.

프론트와 그 ID를 통해 통신함

서버 - 클라이언트는 연결된 상태로 존재해야함

백 - 프론트는 서로 긴밀히 연결되어 있어야함

구글 맵스 API의 경우에는 적합하지 않음

서버는 유동적이면 안되고 무상태를 유지해야함

고유 ID는 서버와 클라이언트가 알기 때문에 보안에 취약

Auth Token (인증 토큰)

유효성이 검증되면 서버측에서 데이터가 문자열로 인코딩 된 토큰을 발행

토큰은 서버측에서 변형해서 보내기 때문에 고유 ID는 서버만 안다

클라이언트는 요청과 함께 토큰을 보내야함

JSON형식의 웹 토큰 형식으로 생성

참고 : JWT에 관한 내용

https://fcscode.tistory.com/89?category=1067454

WEB CS 기술면접 대비 간단 정리

JavaScripter — Thu, 20 Oct 2022 20:54:50 +0900

브라우저 동작 방법

사용자가 선택한 자원을 서버에 요청 ⇒ 브라우저에 표시

자원의 주소는 URI에 의해 결정됨

브라우저는 웹표준기구인 w3c에서 정한 명세에 따라 자원을 해석한다.

사용자가 서버에 요청함
해당 페이지의 자원이 보내짐
렌더링 엔진을 통해 HTML과 CSS를 명세에 따라 해석
HTML의 파싱을 통해 DOM Tree 구축
CSS의 파싱을 통해 스타일구조체 생성
렌더트리 구축
렌더트리 배치
UI 백엔드의 그리기 시작

렌더링

HTML 파싱 → 콘텐츠 트리 내부에서 태그를 DOM Node로 변환 → CSS와 함께 스타일 파싱 → 렌더링 트리 구축 → 렌더링 트리 배치 (정확한 위치에 표시) → 백엔드 UI가 그리기 시작

모든 렌더링이 끝날 때 까지 대기하는 것이 아니라 실시간으로 받은 내용을 화면에 표시한다

DOM

문서객체모델

웹브라우저가 HTML페이지를 인식하는 방식

파싱: 브라우저가 코드를 이해하고 사용할 수 있도록 DOM tree구조로 변환시키는 것

BOM

브라우저 - 자바스크립트의 소통을 위해 만들어진 모델

다큐먼트 히스토리 등이 있다.

HTTP Request Method

GET

URL 형식으로 서버에 리소스 요청

HEAD

문서에대한 요청이아닌 문서의 정보 요청

Body는 비어있고 Head만 반환

POST

서버에 리소스를 보냄

Body에 반환

PUT

리소스를 갱신

Delete

리소스 삭제

CONNECT

클라이언트와 서버의 중간 경유를 위함

Proxy 의 SSL 통신을 위해 사용

OPTIONS

서버측의 정보에대한 질의를 위함

TRACE

리퀘스트의 경로를 알기위함

PATCH

일부분만 갱신

PUT과 다름

HTTP Status Code

10X → 정보확인

20X → 통신성공

30X → 리다이렉트

40X → 클라이언트오류

50X → 서버오류

Web Server 와 WAS

정적인 페이지 : 요청된 리소스 그대로 반환

동적인 페이지 : 요청된 리소스를 동적인 컨텐츠로 반환

웹서버의 기능

정적인 컨텐츠 제공
동적인 컨텐츠 제공 = WAS에 전달

WAS = web application server

HTTP 통신을 통해 어플리케이션을 실행하는 미들웨어

WAS의 기능

실행환경 및 데이터베이스 접근
트랜잭션 관리
비즈니스 로직 수행

웹서버가 필요한 이유

정적인 컨텐츠만 처리하도록 하여 서버의 부담을 줄임

WAS가 필요한 이유

WAS를 통해 요청이 들어올 때마다 비즈니스 로직에 따른 동적인 컨텐츠를 반환하여 자원을 효율적으로 사용

*모든 결과값을 미리 만들어 놓지 않아도 된다.

즉, 웹서버와 WAS를 병행하여 서버의 부담을 분산시킴으로써 서버의 부하를 방지시키는 것이 옳다.

WEB SERVER - WAS - SERVLET

웹서버에서 요청을 받고 WAS로 보냄

WAS는 서블릿리퀘스트로 변환하여 서블릿으로 보냄

서블릿은 동적컨텐츠를 WAS에 반환

WAS는 HTTP리퀘스트로 웹서버에 보냄

OAuth

다른 웹사이트에서의 사용자의 정보에 대한 접근권한을 부여할 수 있는 개방형 표준 방법

소비자가 서비스제공자에 요청토큰 요청

서비스제공자가 소바지에게 요청토큰 발급

소비자는 사용자를 서비스제공자로 이동시켜 사용자 인증을 요구

서비스 제공자는 소비자에게 이동시킨다.

소비자는 접근토근 요청

서비스제공자는 접근토큰 발급

소비자는 사용자정보에 접근

JWT

Json Web Token

가볍고 안정성있게 정보를 전달한다.

구성요소

헤더
페이로드
- 토큰에 담을 정보저장, 정보의 조각 = 클레임
- 등록된 클레임, 공개된 클레임, 비공개된 클레임
- 등록된클레임: 토큰정보, 나머지 : 서비스를 위한 정보
시그니쳐
- 해쉬키 생성하여 base64의 형태로 표현

로그인 시의 JWP

Access토큰과 RefreshToken

엑세스 토큰은 말그대로 접근을 위한 토큰 ⇒ 도난 방지를 위한 짧은 만료시간이 특징

리프레시 토큰은 엑세스 토큰을 발급받기 위한 토큰 ⇒ 엑세스 보단 길다

엑세스 토큰이 탈취되어도 짧은 만료시간이 지나면 훔친자는 더는 사용할 수 없다.

다만 사용자는 리프레시 토큰으로 다시 발급받아 사용가능

UI와 UX

UI : 사용자가 앱을 사용할 때 마주하는 인터페이스

UX : 사용자를 더 편리하고 효율적인 방향으로 프로세스를 진행시키는것

데이터와 통계를 바탕으로 앱을 사용하는 사용자를 분석하여 상황에 맞도록 변화시켜야함

CSR vs SSR

csr : 클라이언트 사이드 렌더링

ssr : 서버 사이드 렌더링

csr은 대표적으로 SPA가 있다.

csr은 필요한 데이터만 받아와 서버의 트래픽을 감소시킬 수 있다.

따라서 UX에 도움이 된다.

하지만 SEO에 대하여 크롤러가 데이터 수집을 못할 가능성이 있다.

그리고 자바스크립트가 화면을 그리는 시간까지 기다려야 하기 때문에 초기구동시간이 느리다.

ssr은 렌더링된 html을 초기화면에서 바로 보여줄 수 있으므로 초기구동시간이 빠르다

하지만 유저가 요청할 때마다 JS가 다운로드되어 페이지 전환이 느리다.

SEO에 문제가 없다.

네이티브앱 웹앱 하이브리드앱

네이티브앱

안드로이드 앱, 아이폰 앱이 있으며 성능이 다른 앱보다 가장 뛰어나나 플랫폼에 한정적이다.

모바일 웹앱

웹앱을 모바일의 크기로 줄여놓은것

간편함

플랫폼 API는 X / 브라우저 API만 사용가능 함

친화적 터치앱 제작에 불편

하이브리드 앱

내용을 웹앱의 형식으로 만들고 네이티브앱의 형식으로 배포

플랫폼API + 브라우저API 가능

네이티브 개발지식을 요한다

PWA

progressive web app

앱 수준의 사용자경험을 웹에서 구현하기 위한 환경

OSI 7계층

물리 - 데이터 링크 - 네트워크 - 전송 - 세션 - 표현 - 응용

참고 : https://github.com/gyoogle/tech-interview-for-developer

[백준 - Node.js] 토마토 7576번

JavaScripter — Sun, 2 Oct 2022 15:32:49 +0900

문제

https://www.acmicpc.net/problem/7576

7576번: 토마토

첫 줄에는 상자의 크기를 나타내는 두 정수 M,N이 주어진다. M은 상자의 가로 칸의 수, N은 상자의 세로 칸의 수를 나타낸다. 단, 2 ≤ M,N ≤ 1,000 이다. 둘째 줄부터는 하나의 상자에 저장된 토마토

www.acmicpc.net

문제 풀이

키포인트

1. 시간제한을 해결하기 위한 큐 구현

2. 익은 토마토의 전염은 동시에 진행되어야 한다.

3. 전부 익지 못하는 경우를 어떻게 체크할 것인가?

// 큐 구현
class Node {
  constructor(val) {
    this.val = val;
    this.next = null;
  }
}

class Queue {
  constructor() {
    this.first = null;
    this.last = null;
    this.size = 0;
  }

  enqueue(val) {
    const newNode = new Node(val);
    if (this.size === 0) {
      this.first = newNode;
      this.last = newNode;
    } else {
      this.last.next = newNode;
      this.last = newNode;
    }
    this.size++;
  }

  dequeue() {
    const oldFirst = this.first;
    if (this.size === 0) return undefined;
    if (this.size === 1) {
      this.first = null;
      this.last = null;
    } else {
      this.first = oldFirst.next;
    }
    this.size--;
    return oldFirst;
  }
}

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = [];
let N = 0;
let M = 0;
let count = 0;

rl.on('line', function (line) {
  if (!count) {
    const [m, n] = line.split(' ').map(Number);
    N = n;
    M = m;
  } else {
    input.push(line.split(' ').map(Number));
  }
  count++;
}).on('close', function () {
  solution(input);
  process.exit();
});

const solution = input => {
  // 기본세팅
  const visited = [];
  const queue = new Queue();
  const dy = [-1, 0, 1, 0];
  const dx = [0, 1, 0, -1];
  // 최소일수
  let minDay = 1;
  // 0이 포함되는지 여부 확인용
  let check = true;

  // 방문배열 생성
  for (let i = 0; i < N; i++) {
    visited[i] = new Array(M).fill(0);
  }

  // bfs
  const bfs = () => {
    while (queue.size) {
      const [y, x] = queue.dequeue().val;

      // 4방향 순회
      for (let i = 0; i < 4; i++) {
        const ny = y + dy[i];
        const nx = x + dx[i];
        // 그래프의 범위안에 들어온다면 실행
        if (ny >= 0 && nx >= 0 && ny < N && nx < M) {
          // 방문하지 않았고 값이 0 인경우에 (=익혀야할 토마토)
          if (!visited[ny][nx] && input[ny][nx] === 0) {
            // 일수 계산
            visited[ny][nx] = visited[y][x] + 1;
            queue.enqueue([ny, nx]);
            // minday 갱신
            if (minDay < visited[ny][nx]) minDay = visited[ny][nx];
          }
        }
      }
    }
  };
  // 실행
  // 익은 토마토가 여러개인 경우에 동시에 실행되어야 하므로
  // bfs시작전에 queue에 1인 경우를 모두 넣어준다
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < M; j++) {
      // 방문X인동시에 익은토마토인경우에
      if (!visited[i][j] && input[i][j] === 1) {
        //  방문체크
        // 익지않은 토마토 0을 체크하기 위하여 1부터 시작 (나중에 -1 빼줘야함)
        visited[i][j] = 1;
        queue.enqueue([i, j]);
        // 따로 토마토가 없는 경우는 -1로 미리 체크해준다
      } else if (input[i][j] === -1) {
        visited[i][j] = -1;
      }
    }
  }

  bfs();

  // 출력
  // visited 그래프에서 0인 경우란 방문하지 않은경우이므로
  // check변수를 false 전환
  for (let i = 0; i < N; i++) {
    for (let j = 0; j < M; j++) {
      if (visited[i][j] === 0) {
        check = false;
      }
    }
  }
  // check가 true인경우에는 최소일수에서 1 빼고
  // false인경우에는 -1 출력
  console.log(check ? minDay - 1 : -1);
};

변수, 표현식과 문 - Day 02

JavaScripter — Tue, 27 Sep 2022 20:24:58 +0900

1. 변수란 무엇인가

변수는 값을 저장하기 위한 메모리 공간 또는 그 공간을 식별하기 위한 이름을 말한다.

선언에 의해서 변수는 정의된다.

2. 변수의 선언이란

변수의 선언이란 변수를 생성하는 것을 뜻하며

변수를 생성하는 것은 변수를 위한 메모리 공간의 확보 & 메모리 공간의 주소연결을 위한 준비작업을 뜻한다.

*자바 스크립트에서의 대표적인 변수는 선언 키워드는 var const let 이 존재한다.

ES5

var = 함수 레벨 스코프

ES6

const , let = 블록 레벨 스코프

ES6란 ES5의 기능의 호환성을 유지하면서 새로운 기능을 추가한 것이므로 var는 현재에도 작동한다.

3. 변수 선언 이후에 대하여

변수가 선언이 되면 변수를 위한 메모리 공간이 확보되고 정해진 변수명으로 메모리 주소가 연결이 된다.

그리고 변수를 위한 메모리 공간은 빈공간이 아닌 undefined로 초기화 되는 작업이 진행된다.

해당 작업이 진행 되는 이유는 이전에 선언 되었던 값이 남아 있을 가능성이 있기 때문이다.

자바스크립트는 매니지드 언어로써 개발자가 직접 메모리 관리를 할 수 없다.

따라서 메모리의 할당과 해제는 전적으로 자바스크립트에 내장된 가비지 콜렉터에 의해 제어된다.

언매니지드 언어의 에로는 C언어가 있다.

C언어는 메모리 관리를 개발자가 직접 담당해야 하며 개발자의 숙련도에 따라 프로그램의 성능이 크게 갈릴 수 있다.

반대로 매니지드 언어의 메모리관리는 평균적인 성능으로 수렴하나 어느정도의 손실은 감수해야한다.

선언은 필수적이며 만약 선언을 하지 않은 변수명을 호출했을 경우 ReferenceError가 출력이 된다.

*참조 오류라고 하며 참조란 변수에 해당하는 값을 불러오는 작업을 의미한다.

4. 변수 호이스팅

호이스팅은 자바스크립트 고유의 특징이다.

한줄씩 실행되는 싱글 스레드 형식의 자바스크립트에서 코드 위치에 상관없이

코드의 제일 위에서 선언되는 것처럼 동작하는 것 호이스팅이라고 한다.

변수의 선언은 호이스팅의 좋은 예이다.

console.log(one)  // undefined

var one
one = 1

console.log(one)  // 1

변수의 선언은 코드가 런타임 되기 전에 먼저 선언되어진다

그래서 위의 예시에서 첫번째의 출력은 참조 오류가 발생하지 않은 것이다.

호이스팅이 진행되지 않았다면 출력은 변수의 선언보다 먼저 실행되기에 참조 오류가 떴을 것이다.

전체적인 실행 순서

var one (변수가 선언됨) => 첫번째 출력 => one에 1 할당 => 두번째 출력

var one = 1 로 대체될 경우에도

위의 방식과 동일하게 작동한다.

선언 먼저 후에 코드 진행

5. 값의 할당

값은 변수의 선언과 다르게 런타임 시점에 할당 되어진다.

재할당이 된다는 것은 쉽게 값을 바꾸는 것이다.

하지만 주의해야 할 점은 기존에 변수가 사용하던 메모리 공간을 그대로 사용하지 않는 다는 것이다.

예를 들어 undefined의 값에 1을 재할당하면 그 메모리 공간은 동일 한 것이 아니며

새로 메모리 공간이 생성되고 그곳에 변수명이라는 주소를 다시 연결해준다.

이전의 메모리 공간에 부여된 값들은 가비지 콜렉터에 의해 제어 되므로 자동으로 일정 시점이 지나면 해제된다.

6. 표현식이란

표현식이란 값으로 도출되어 질 수 있는 문을 말한다.

*문이란 (var two = 1 + 1) 하나의 덩어리를 의미한다.

*문(최소실행단위)은 토큰(문법적의미)들로 구성되어 있고 var, two, =, 1 , +, 1 은 전부 토큰이다.

1 + 1 말고도 위의 예시처럼 1 + 1로 정의된 two또한 표현식이라 할 수 있다.

프로그래밍, 자바스크립트에 대하여 - Day 01

JavaScripter — Sun, 25 Sep 2022 15:00:58 +0900

1. 프로그래밍이란?

컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션

문제해결능력이 중요! => 컴퓨팅 사고를 요함

과정: 요구를 분석 => 자료구조와 함수의 집합으로 변환 => 흐름제어

2. 프로그래밍 언어

사람이 기계에게 명령을 내리기 위한 과정의 복잡함을 해결해 주기 위하여 프로그래밍 언어가 등장

일종의 번역기인 컴파일러 혹은 인터프리터에 프로그래밍 언어로 명령을 전달하면

컴파일러 혹은 인터프리터는 명령을 기계어로 번역하여 컴퓨터에게 전달한다.

사람 =(프로그래밍언어)=> 컴파일러 or 인터프리터 =(기계어)=> 컴퓨터

3. Ajax

비동기적 자바스크립트와 XML의 줄임말

과거의 웹페이지는 HTML파일을 서버로부터 받아 전체를 렌더링하는 방식을 사용함

=> 화면이 전환되면 다시 처음부터 렌더링을 실행한다.

불필요한 통신이 많았고 성능면에서도 좋지 않는 단점을 해결하기 위하여 Ajax 등장

이전과 달리 서버로부터 필요한 데이터만 전송을 받아서 변경이 필요한 부분만 다시 렌더링 하는 것이 가능해짐

4. Node.js

브라우저와 분리된 환경에서 자바스크립트를 사용 할 수있는 독립된 실행환경

비동기형 Input / Output, 단일 스레드 이벤트 루프를 기반으로 동작

=> 단일 스레드란 : 하나의 프로세스에서 하나의 줄만 실행

SPA에 적합 / CPU 고사용환경에 부적합

서버 사이드 어플리케이션에서 주로 활용

5. Javascript

ECMAScript => 자바스크립트의 핵심 코어

인터프리터 언어 - JavaScript

- 런타임에 코드가 한 줄씩 변환된 후 즉시 실행

- 인터프리트 과정(기계어변환) 반복 실행

- 컴파일러 언어보다 비교적 느림

컴파일러 언어 - Not JS

- 컴파일타임에 한번에 변환 후 실행

- 컴파일이 단 한번만 실행 됨

- 코드 실행 속도가 빠름

하지만 대부분의 모던 자바스크립트 엔진들은 컴파일러 언어의 장점을 결합해 자바스크립트의 속도를 높혔다.

전통적인 인터프리터 언어는 컴파일단계를 거치지 않지만 일부 파일은 컴파일 하는 방식

명령형, 함수형, 프로토타입 기반, 객체지향형 언어

구형 브라우저의 호환성을 극복하기 위하여 Babel을 활용한다.

브라우저와 Node.js는 ECMAScript만 공유할 뿐 나머지 기능은 서로 호환되지 않는다.

ex) Web API는 Node에서 사용할 수 없음

Node는 애초에 브라우저 이외의 환경에서 사용하기 위 하여 제작되었기 때문

npm = 자바스크립트의 패키지 매니저

- 모듈의 저장소

- 패키지의 설치와 관리

[백준 - node.js] 스타트와 링크 14889번

JavaScripter — Fri, 23 Sep 2022 12:32:58 +0900

문제 설명

핵심

1. 팀 구성에 대한 모든 경우의 수를 구하기

2. 각 팀에서 얻을 수 있는 모든 능력치의 합을 구하기

문제 풀이

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = [];
let n = 0;
let count = 0;

rl.on('line', function (line) {
  if (!count) n = +line;
  else input.push(line.split(' ').map(e => +e));
  count++;
}).on('close', function () {
  solution(input);
  process.exit();
});

const solution = input => {
  // 초기세팅
  const visited = new Array(n).fill(false);
  const arr = [];
  let a = [];
  let b = [];
  let min = Infinity;
  let aSum = 0;
  let bSum = 0;

  // dfs
  const dfs = (count, idx) => {
    // base case => arr(한 팀)의 자릿수가 n / 2 일때
    if (count === n / 2) {
      // 구해준 arr를 활용하여 반대쪽 팀을 구해준다
      // A팀, B팀으로 나누어줌
      for (let i = 0; i < n; i++) {
        if (arr.includes(i)) a.push(i);
        else b.push(i);
      }
    // 이중 for문을 활용하여 모든 경우의 팀능력치를 구해준다
      for (let i = 0; i < a.length; i++) {
        for (let j = i + 1; j < a.length; j++) {
          aSum += input[a[i]][a[j]] + input[a[j]][a[i]];
          bSum += input[b[i]][b[j]] + input[b[j]][b[i]];
        }
      }
      min = Math.min(min, Math.abs(aSum - bSum));
      // 초기화
      aSum = 0;
      bSum = 0;
      a = [];
      b = [];
    }
    // 순회하여 팀으로 구성 될 모든 경우의 수를 구해준다.
    for (let i = idx; i < n; i++) {
      if (!visited[i]) {
        arr.push(i);
        visited[i] = true;
        dfs(count + 1, i);
        arr.pop();
        visited[i] = false;
      }
    }
  };
  dfs(0, 0);
  console.log(min);
};

https://www.acmicpc.net/problem/14889

14889번: 스타트와 링크

예제 2의 경우에 (1, 3, 6), (2, 4, 5)로 팀을 나누면 되고, 예제 3의 경우에는 (1, 2, 4, 5), (3, 6, 7, 8)로 팀을 나누면 된다.

www.acmicpc.net

[백준 - Node.js] 암호 만들기 1759번

JavaScripter — Fri, 23 Sep 2022 08:21:27 +0900

문제 설명

https://www.acmicpc.net/problem/1759

1759번: 암호 만들기

첫째 줄에 두 정수 L, C가 주어진다. (3 ≤ L ≤ C ≤ 15) 다음 줄에는 C개의 문자들이 공백으로 구분되어 주어진다. 주어지는 문자들은 알파벳 소문자이며, 중복되는 것은 없다.

www.acmicpc.net

문제 풀이

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = [];
let count = 0;
let n = 0;

rl.on('line', function (line) {
  if (!count) {
    let arr = line.split(' ');
    n = +arr[0];
  } else {
  // 미리 정렬
    input = line.split(' ').sort();
  }
  count++;
}).on('close', function () {
  solution(input);
  process.exit();
});

// 필터함수 => 모음 기준으로 최소 1개 그래고 자음의 자리 최소 2개 남겨줌
const filter = arr => {
  const vowel = ['a', 'e', 'i', 'o', 'u'];
  let ctn = 0;
  for (let alpha of arr) {
    if (vowel.includes(alpha)) ctn++;
  }
  if (ctn >= 1 && ctn <= n - 2) return true;
  return false;
};

const solution = input => {
  // 초기세팅
  const visited = new Array(input.length - 1).fill(false);
  const arr = [];
  let answer = [];

  // dfs
  const dfs = (count, idx) => {
    // base case => 자릿수와 필터함수 기준
    if (count === n && filter(arr)) {
      answer.push(arr.join(''));
      return;
    }
    // input순회
    for (let i = idx; i < input.length; i++) {
      // 방문X 백트래킹
      if (!visited[i]) {
        arr.push(input[i]);
        visited[i] = true;
        dfs(count + 1, i);
        arr.pop();
        visited[i] = false;
      }
    }
  };
  dfs(0, 0);
  // 다시정렬
  console.log(answer.sort().join('\n'));
};

[백준 - node.js] 1, 2, 3 더하기 9095번

JavaScripter — Thu, 22 Sep 2022 11:20:42 +0900

문제 설명

https://www.acmicpc.net/problem/9095

9095번: 1, 2, 3 더하기

각 테스트 케이스마다, n을 1, 2, 3의 합으로 나타내는 방법의 수를 출력한다.

www.acmicpc.net

문제 풀이

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let input = [];
let n = 0;
let count = 0;

rl.on('line', function (line) {
  if (!count) n = +line;
  else input.push(+line);
  count++;
}).on('close', function () {
  solution(input);
  process.exit();
});

const solution = input => {
  // 초기세팅
  let count = 0;
  let answer = [];

  // 테스트 케이스 만큼 돌리기
  for (let n of input) {
    // dfs
    const dfs = sum => {
      // base case => sum이 주어진 n과 같다면 카운팅
      if (sum === n) {
        count++;
        return;
      }
      // 1~3까지 범위 순회
      for (let i = 1; i <= 3; i++) {
        // sum이 n보다 작다면 재귀로 더해주기를 반복한다
        // 같은 경우까지 pass 해줘야 sum = n이 되었을 때 카운팅됨
        if (sum + i <= n) {
          dfs(sum + i);
        }
      }
    };
    dfs(0);
    answer.push(count);
    count = 0;
  }
  console.log(answer.join('\n'));
};