CSR과 SSR의 차이

현대 대부분의 프론트 프레임워크들은 SPA를 만드는데 초점이 맞춰져 있다. 그 이유야 SPA가 MPA에 비해 더 좋은 사용자 경험을 전달해주기 때문일 것이다. 결국 우리가 필요한 웹사이트는 HTML이 보여주는 것인데, 이런 HTML을 사용자 측에서 렌더링하느냐 서버에서 렌더링하느냐로 CSR, SSR이 나뉜다. 1. CSR SPA는 기본적으로 CSR로 이루어지는데, 이는 SPA의 작동원리 때문이다. 1. SPA는 처음에만 서버에서 CSS, HTML, JS를 받는다. 2. 이 파일들을 이용하여 렌더링을 진행한다. 3. 그 후에는 데이터만 가져온다. 이는 처음에 가져온 JS를 통해 받아온 데이터를 클라이언트에서 처리하기 때문이다. 따라서 처음 CSS, HTML, JS를 받아오는 과정은 오래 걸리지만, 그 후에..

프로그래머스 : 가장 먼 노드 - javascript

https://programmers.co.kr/learn/courses/30/lessons/49189 코딩테스트 연습 - 가장 먼 노드 6 [[3, 6], [4, 3], [3, 2], [1, 3], [1, 2], [2, 4], [5, 2]] 3 programmers.co.kr 문제 설명 더보기 문제 설명 n개의 노드가 있는 그래프가 있습니다. 각 노드는 1부터 n까지 번호가 적혀있습니다. 1번 노드에서 가장 멀리 떨어진 노드의 갯수를 구하려고 합니다. 가장 멀리 떨어진 노드란 최단경로로 이동했을 때 간선의 개수가 가장 많은 노드들을 의미합니다. 노드의 개수 n, 간선에 대한 정보가 담긴 2차원 배열 vertex가 매개변수로 주어질 때, 1번 노드로부터 가장 멀리 떨어진 노드가 몇 개인지를 return 하..

프로그래머스 : 신고 결과 받기 - javascript

https://programmers.co.kr/learn/courses/30/lessons/92334 코딩테스트 연습 - 신고 결과 받기 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 programmers.co.kr 문제 설명 더보기 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 유저를 신고할 수 있습니다. 신고 횟수에 제한은 없습니다. 서로 다른 유저를 계속해서 신고할 수 있습니다. 한 유저를 여러 번 신고할 수도 있지만, 동일..

This

자바스크립트에는 this라는 키워드가 존재한다. 또한 이 this 키워드가 다른 언어와는 다르게 동작을 해서 잘 알아두어야 한다. node.js와 브라우저의 js는 서로 다른 의미의 this를 가지며, 여기선 브라우저의 this를 알아볼 것이다. 가장 포괄적인 설명은 this는 호출한 객체를 의미한다는 것이다. 1. 전역 객체 브라우저에서 window객체는 브라우저에서 시행되는 가장 큰 객체로 존재한다. 따라서 달리 참고할 대상이 없는 this는 모두 window를 의미한다. // 전역에서 사용되는 this는 전역(global)과 같다. var a = 27; console.log(this.a); // OUTPUT: 27 function sum() { console.log(this.a + this.b + ..

Hoisting

JavaScript는 호이스팅이란 아주 유명한 특징이 있다. 특히 변수 var의 호이스팅은 장점도 있겠으나 여러 문제를 일으켰고, 이를 방지하기 위해 let과 const라는 새로운 변수가 생겼다. 그 후로는 let과 const를 사용하면서 호이스팅의 문제가 줄어들었지만, JS의 특별한 작동 방법을 알기 위해서라도 호이스팅을 알아볼 필요가 있다. 변수의 Hoisting 변수의 호이스팅은 변수의 선언이 발생한 스코프 최상단으로 이동하는 듯한 현상이다. 이는 자바스크립트를 실행하면 제일 먼저 코드 안의 모든 변수를 선언하는 과정을 거치기 때문이다. 변수는 결국 메모리 주소를 의미한다. var a = 10; 의 뜻은 a에 해당하는 메모리 주소에 10이라는 숫자를 넣어놓는다는 의미이다. 메모리 주소는 외우기가 극..

git-reset : 되돌리기

git 을 사용하다 여러가지 이유로 뒤에서 작업하던 버전으로 돌아가야 할 때가 있다. 오류가 일어났을 수도 있고 이전 버전에서 분기를 해야할 수도 있고 혹은 새 버전을 어떤 이유로든 사용하지 않을 수도 있을 것이다. 그럴때 사용하는 것이 git reset이다. git reset은 이전에 만들어진 git log 로 이동하여 작업을 수행할 수 있게 해준다. 먼저 git log를 통해 commit 기록을 보면 다음과 같다. 가장 위 버전이 최신 commit이므로 바로 전 commit으로 이동하는 경우를 보겠다. git reset은 크게 보면 git reset {commit log} git reset --soft {commit log} git reset --hard {commit log} 의 3가지 버전이 있다..

프로그래머스 : 거리두기 확인하기-javascript

https://programmers.co.kr/learn/courses/30/lessons/81302 코딩테스트 연습 - 거리두기 확인하기 [["POOOP", "OXXOX", "OPXPX", "OOXOX", "POXXP"], ["POOPX", "OXPXP", "PXXXO", "OXXXO", "OOOPP"], ["PXOPX", "OXOXP", "OXPOX", "OXXOP", "PXPOX"], ["OOOXX", "XOOOX", "OOOXX", "OXOOX", "OOOOO"], ["PXPXP", "XPXPX", "PXPXP", "XPXPX", "PXPXP"]] [1, 0, 1, 1, 1] programmers.co.kr 문제 설명 더보기 문제 설명 개발자를 희망하는 죠르디가 카카오에 면접을 보러 왔습니다. 코..

네트워크 1.2 웹 서버의 IP주소를 DNS 서버에 조회한다.

* 성공과 실패를 결정하는 1%의 네트워크 원리를 정리한 글입니다. 1.2 웹 서버의 IP 주소를 DNS 서버에 조회한다. 1. IP 주소의 기본 브라우저는 URL을 해독, HTTP 메시지를 만들지만, 이를 네트워크에 송출하는 기능은 없다. 따라서 OS가 메시지를 웹 서버에 송출한다. 이때 메시지를 웹 서버에 보내기 위해 도메인을 IP로 변환한다. TCP/IP 서브넷이란 작은 네트워크를 라우터로 연결하여 자체 네트워크를 만드는 것 따라서 서브넷 주소 → 호스트 주소 로 주소가 이어지며 이 두 개를 합친 것을 IP 주소라 한다. 따라서 IP 주소를 찾을때도 클라이언트 → 수신 서브넷 → 수신 라우터 → 허브 → 송신 라우터 → 송신 서브넷 → 서버 로 움직임 넷마스크 IP 는 32비트로 구성되어 있지만(I..