1. npx를 사용해서 프로젝트 생성 npx create-next-app@latest --typescript 프로젝트명 @latest 옵션을 추가하면 최신 버전의 Next.js를 설치할 수 있다. 만약 typescript를 함께 사용할 계획이라면 --typescript 옵션을 통해서 같이 사용할 수 있다. ( 필수는 아님 ) 2. pages Next.js를 사용하면 프로젝트에 Page를 추가하는 작업은 매우 쉬워진다. React 컴포넌트를 export 하고 있는 파일을 pages 폴더 안에 넣어두기만 하면 된다. 그러면 Next.js가 자동으로 파일의 이름을 가져가서 url의 경로로 사용한다. 만약 React를 사용할 경우에는 router를 만들고, routes를 설계한 다음에 랜더링 하는 작업을 해야 ..

1. Next.js? Next.js는 React를 사용한 서버사이드 렌더링 프레임워크다. 따로 설정을 해주지 않아도 SSR, SEO와 TypeScript 등 생산에 필요한 많은 기능을 제공하는 프레임워크다. 2. 사용하는 이유 1. SSR Next.js를 사용하는 가장 큰 이유로 SSR이 있다. React는 SPA 즉, Single Page Application로 필요한 정적 리소스를 최초 한 번만 다운로드하고 이후 변경이 필요한 경우 전체를 Reload하지 않고 필요한 변경된 부분만 갱신된다. SPA 방식을 사용하는 이유는 React가 CSR 방식으로 작동되기 때문이다. CSR은 Client Side Rendering이고 작동 순서는 서버에서 브라우저로 응답을 보낸다. 브라우저에서 JS를 다운로드한다...

0. 들어가며 앞서 채팅방편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 2. [Node.js] Zoom 클론코딩 - 채팅편 3. [Node.js] Zoom 클론코딩 - 채팅방편 기본적인 Socket IO에 대해서 어느 정도 공부가 되었다고 판단해서 React에서 간단한 채팅 기능을 만들 생각이다. 결국 React에서 사용하는 것이 목적이기 때문! 1. 구성하기 React npm install socket.io-client Socket IO는 React에서 기본적으로 제공하는 패키지가 당연히 아니므로 설치해준다. Node npm install express cors npm install nodemon @babel/core @babel/cli @..

문제 설명 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 수는 6210입니다. 0 또는 양의 정수가 담긴 배열 numbers가 매개변수로 주어질 때, 순서를 재배치하여 만들 수 있는 가장 큰 수를 문자열로 바꾸어 return 하도록 solution 함수를 작성해주세요. 제한 사항 numbers의 길이는 1 이상 100,000 이하입니다. numbers의 원소는 0 이상 1,000 이하입니다. 정답이 너무 클 수 있으니 문자열로 바꾸어 return 합니다. 입출력 예 numbers return [6, 10, ..

0. 들어가면서 Narrowing을 할 때 typeof 연산자를 많이 사용한다. 하지만 Narrowing을 해야 하는데, typeof 연산자 외에 다른 방법을 사용할 필요가 있을 경우도 있다. 1. in 연산자로 object 자료 Narrowing 파라미터로 Object가 2개 들어올 수 있다고 타입을 지정했을 때 사용할 수 있다. 예를 들어, 하나의 Object는 { a : 'Kim' }, 다른 하나의 Object는 { b : "Seo" } 이렇게 서로 다른 유니크한 속성을 가진다면 " if (이 파라미터가 a라는 속성을 안에 가지고 있냐) " 같은 Narrowing이 가능하다. if( 키값 in object 자료형 ) 방식으로 쓰면 된다. type Fish = { swim : string }; typ..

문제 설명 한자리 숫자가 적힌 종이 조각이 흩어져있습니다. 흩어진 종이 조각을 붙여 소수를 몇 개 만들 수 있는지 알아내려 합니다. 각 종이 조각에 적힌 숫자가 적힌 문자열 numbers가 주어졌을 때, 종이 조각으로 만들 수 있는 소수가 몇 개인지 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers는 길이 1 이상 7 이하인 문자열입니다. numbers는 0~9까지 숫자만으로 이루어져 있습니다. "013"은 0, 1, 3 숫자가 적힌 종이 조각이 흩어져있다는 의미입니다. 입출력 예 numbers result "17" 3 "011" 2 입출력 예 설명 예제 #1 [1, 7]으로는 소수 [7, 17, 71]를 만들 수 있습니다. 예제 #2 [0, 1, 1]으로는 소수 [11, ..

0. 들어가며 앞서 채팅편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 2. [Node.js] Zoom 클론코딩 - 채팅편 1. Socket IO Socket IO는 실시간, 양방향, event 기반 통신을 제공해주는 framework이다. webSocket과 같은 역할을 하는 것처럼 보이는데, 브라우저가 webSocket을 지원하지 않아도 socket IO는 다른 방법을 사용해서 기능을 제공한다. 좀 더 넓은 범위에서 사용할 수 있다는 뜻이다. 정리하면, websocket의 부가기능이 아닌, 필요에 따라 Socket IO가 websocket을 사용하거나 안 할 수 있다. 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크 혹은 라이브..

자바스크립트에는 눈으로 보기엔 비슷하지만, 매우 다른 동등 비교연산자가 두개 있다. 바로 == 와 ===이다. === 동등 비교연산자 자바스크립트에서 === 연산을 사용할 때, 엄격한 동등성을 비교한다. 엄격한 동등성이란 타입과 값이 둘 다 같아야 한다는 이야기다. 5 === 5 // true 숫자 5 두개를 비교했다. 둘다 숫자 타입이며 5라는 같은 값을 가지고 있어 true가 반환되었다. 55 === "55" // false 숫자 55와 문자열 55를 비교해보았다. 두 개의 피연산자는 같은 값을 가지고 있지만 다른 타입을 가지고 있다. 즉, ===은 타입과 값이 모두 같아야지만 true를 반환한다. == 동등 비교연산자 자바스크립트에서 == 연산자를 쓰는 목적은 느슨한 동등 비교를 위함이다. == 연..