개발 블로그

React.js 와 함께 많이 사용되는 Next.js에 대해 공부하다보면 서버 사이드 렌더링(SSR)에 대한 언급을 자주 볼 수 있다. 이와 관련해 헷갈릴 수 있는 용어들을 차례로 정리하려고 한다. SSR (Server Sid Rendering) 서버사이드 렌더링은 전통적인 웹 어플리케이션의 동작 방식이다. 사용자가 웹페이지에 접근할 때, 서버에 각각의 페이지에 대한 요청을 보내 HTML,JS 등을 응답받아 완성된 HTML을 화면에 렌더링하는 방식이다. 장점 빠른 첫 페이지 렌더링이 가능하다. 검색 엔진 최적화(SEO)가 가능하다. 단점 사이트를 이동할 때, 매번 서버에 새로운 화면을 요청해야하기 때문에, 페이지 이동시 깜박거리는 현상이 발생한다. 서버에 요청하는 횟수 및 서버가 처리해야 할 작업량이 증..

Brute force1. 문제 설명(출처: programmers.co.kr/learn/courses/30/lessons/42842) 2. 문제 해결 방안 - 카펫의 가로 크기를 x, 카펫의 세로 크기를 y라고 가정하자. - 갈색부분은 사각형의 둘레임으로 가로를 2x(두개의 가로) + 2y(두개의 세로) - 4(곂치는 부분) = brown 이라는 공식이 성립한다. - 노란 부분은 문제에서 힌트를 얻을 수 있다. 문제에서 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. 라고 하였다. 여기에서 테두리는 1줄 뿐임으로 명확히 했으니 노란 사각형의 넓이는 (x-2) X (y - 2) 가 됨을 알 수있다. (-2는 카펫의 상하, 좌우의 테두리를 의미한다.) - 위 두..

1. 문제 설명(출처: programmers.co.kr/learn/courses/30/lessons/42839) 2. 문제 풀이 1) 소수들을 저장할 공간을 만드는데, 종이 조각을 조합하다보면 중복이 발생할 수 있으니 Set을 사용한다. 2) 종이 조각들을 통해 만들 수 있는 모든 경우의 수의 숫자들 만드는 함수를 만든다.(permutator) 2-1) 만약 arr에 숫자가 남아있다면 2-1-T1) 남은 arr만큼 아래 명령을 반복한다. 2-1-T1-1) temp에 arr에 남은 모든 요소를 집어넣는다. 2-1-T1-2) temp에서 숫자를 하나 뺀다. 2-1-T1-3) permutator함수의 매개변수로 하나의 요소를 뺸 나머지 숫자들과 종이조각을 통해 만든 숫자를 사용해 2) ~ 2-1-T1-3)까지..

1. 문제 설명(출처: programmers.co.kr/learn/courses/30/lessons/42840) 2. 문제 풀이 1) 수포자들의 반복 패턴을 통해서 각각의 배열을 만든다. 2) 수포자들의 반복패턴과 입력값 answers를 순서대로 비교하며 아래 명령을 반복한다. 2-1) 수포자1이 맞춘 문제 갯수를 grades[0]에 추가한다. 2-2) 수포자2이 맞춘 문제 갯수를 grades[1]에 추가한다. 2-3) 수포자3이 맞춘 문제 갯수를 grades[2]에 추가한다. 3) 3명의 수포자들 중에 가장 문제를 많이 맞춘 수포자를 찾는다. 4) 가장 문제를 많이 맞춘 수포자와 동점자를 찾을 뒤, 그 수포자의 번호를 반환한다. 3. 결과 코드 function solution(answers) { con..

1. 문제 설명(출처: programmers.co.kr/learn/courses/30/lessons/42579) 2. 문제 풀이 1) 문제에서 장르 별로 가장 많이 재생된 노래를 두 개씩 모아 베스트 앨범을 출시하려 합니다 라고 하였으니, 장르별로 구분하기 위해 hash를 사용한다. 2) 모든 장르에 대하여 아래 명령을 반복한다. 2-1) 만약 hmap에 해당 장르가 이미 있다면 2-1-T1) 해당 장르의 value를 sum과 list 로 분해한다. 2-1-T2) 해당 장르를 (genre, [누적 play수 + 해당 play수, [ [다른 노래 play수, 다른 노래 고유번호], .... , [해당 노래 play수, 해당 노래 고유번호] ] ]의 형태로 저장한다. 2-1-F1) 해당 장르를 (genre,..

1. 문제 설명(출처: programmers.co.kr/learn/courses/30/lessons/42578) 2. 문제 풀이 1) '완주하지 못한 선수'와 유사하게 여러 종류의 옷들이 있지만 같은 종류의 옷은 중복해서 입을 수 없으므로 hash map에 종류별로 옷의 갯수를 count한다면 이 문제는 중복 조합 문제로 바뀌게 된다. 따라서 이 문제의 답 공식 = (옷(얼굴) + 1) x (옷(상의) + 1) x (옷(하의) + 1) x (옷(겉옷) + 1)) - 1이 된다.( +1은 입지 않은 경우, -1은 아무것도 입지 않은 경우) 2) 모든 종류의 옷을 각각 돌아가면서 아래 명령을 수행한다. 2-1) 만약 이미 map에 존재하는 옷의 종류라면 2-1-T1) 해당 옷 종류의 갯수를 +1 해준다. 2..

1. 문제 설명(출처: programmers.co.kr/learn/courses/30/lessons/42577) 2. 문제 풀이 1) 이 문제는 굳이 hash로 풀지 않아도 되지만, hash로 분류되어 있으니 hash로 풀기 위해 빈 dict인 hamp을 생성한다. 2) phone_book의 모든 전화번호에 아래와 같은 명령을 수행한다. 2-1) hmap에 각 전화번호를 key로 아무 value 값을 넣어준다. 3) phone_book의 모든 전화번호에 아래와 같은 명령을 수행한다. 3-1) 모든 전화번호의 접두사 검사를 위해 빈 문자열 temp를 생성한다. 3-2) 각 전화번호의 숫자들에 대해 아래와 같은 명령을 수행한다. 3-2-1) temp에 현재 전화번호의 숫자를 붙인다. 3-2-2) 만약 나 자..

1. 문제 설명(출처: programmers.co.kr/learn/courses/30/lessons/42576) 2. 문제 풀이 1) 문제에서 참여자 명단에는 있지만, 완주자 명단에는 없는 사람을 찾으라고 했다. 단, 동명이인이 있을 수 있다고 했다. 이는 hash(map)를 사용해 (이름, 동명이인의 수)를 만들고, 완주자 명단에 있는 이름의 동명이인의 수를 감소시키면 마지막 남은 사람을 찾을 수 있다. 2) participants를 각각 돌아가면서 아래 명령을 수행한다. 2-1) map에 해당 참가자의 이름이 있는지 확인한다. 2-1-T1) 해당 참가자의 동명이인 수 + 1을 한다. 2-1-F1) 해당 참가자를 (이름, 1) 형태로 map에 저장한다. 3) completions를 각각 돌아가면서 아래..