개발 블로그

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

React를 공부하다보면 DOM에 대한 이야기가 계속해서 등장한다. 많은 React 사용자가 가상 DOM에 대해 알고 있다고 하지만, 자세히 설명해달라고 하면 명확하게 설명해주는 사람이 없었기에 브라우저를 기준으로 DOM과 가상DOM에 대해 정리해보려고한다. 브라우저의 Workflow DOM과 가상DOM에 대해 명확히 이해하려면 브라우저의 작동순서부터 알아볼 필요가 있다. DOM Tree 생성 브라우저가 HTML 을 전달받으면, 브라우저의 렌더 엔진이 이를 파싱하고 DOM node로 이뤄진 트리를 만든다. 각 노드는 HTML엘리먼트들과 연관되어 있으며, 아래와 같이 만들어진다. Render Tree 생성 외부 CSS 파일과 각 HTML엘리먼트의 inline 스타일을 파싱해 만들어진 스타일 규칙을 사용하여..

React는 2013년에 발표되어 약 8년이 지났는데도 현재까지 인기가 매우 높다. React는 Angular, Vue와 함께 프론트 프레임 워크 3대장이라고 불릴 정도이다.(리액트는 라이브러리이지만, Redux나 MobX, react-router와 함께 프레임 워크처럼 사용된다.) 페이스북이 만들었기 때문에 당연히 페이스북, 인스타그램에서 쓰이고 있으며, 에어비앤비나, 테슬라, 야후등에서도 사용하고 있다고 알려져 있다. React는 페이스북이 만든, MVC 패턴 중 V를 담당하는 라이브러리이다. React는 컴포넌트 시스템으로 구현했기 때문에 재사용면에서 매우 효율적으로 코딩할 수 있다. (여기서 컴포넌트 시스템이란, 웹 사이트를 여러 조각으로 잘랐을 때 각 조각 하나 하나가 컴포넌트이며, 각자의 기능..

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..