dev_eun

Dynamic Routes /posts/:id 경로의 post를 라우팅하고 싶을 경우 pages/posts/[id].ts 파일을 생성 getStaticPaths()가 id 값들의 리스트를 반환 리스트 원소의 타입은 object이다. 그리고 이 객체는 반드시 params안에 key가 id인 객체를 가지고 있어야 한다. return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) filename([id].js)의 id와 같은 key여야 한다. getStaticProps()가 id에 필요한 데이터들을 fetch getStaticPaths() Fallback fallback: false일 ..

Pre-rendering Next.js는 기본적으로 모든 페이지마다 pre-rendering한다. 이것은 CSR보다 SEO가 더 좋다는 말! 각 HTML은 해당 페이지에 필요한 js코드와 연관되어 있다. 페이지가 브라우저에 의해 로드되었을 때, js 코드가 실행되고 페이지를 인터렉티브하게 만든다.(이 과정을 hydration이라고 함) 순수 React 앱이었으면 아마 로딩도 되지 않았을 거다. 왜냐면 React.js는 pre-rendering하지 않기 때문. Next.js에는 Static Generation과 Server-side Rendering 두 가지 방법이 있으며 페이지마다 다르게 적용할 수 있다. Static Generation build타임에 HTML을 생성하는 방법이다. pre-render된..

Page끼리 이동하기(Navigate) Pages /pages 디렉토리에 있는 파일로부터 export된 React Component가 페이지가 된다. pages/index.js => / route pages/posts/first-post.js => /posts/first-post route Link Link 컴포넌트 안에는 a태그가 가장 상위에 있어야 한다. href 속성을 사용하여 다른 페이지로 라우팅할 수 있다. 만약 내부 라우트가 아닌 외부 페이지로 링크하고 싶다면 Link가 아닌 a 태그를 사용한다. 그리고 className같은 속성을 사용해야 할 경우 Link가 아닌 a 태그에 추가해야 한다. import Link from 'next/link' this page! Client-side Navig..

webpack을 왜 사용하는데? 여러 개의 js 파일이 있고, 그 많은 파일을 한 번에 실행한다고 하면 변수 이름이 중복될 수 있다. 변수 이름이 중복되면 마지막에 선언된 변수만 살아남고 그 전 변수는 아무 의미 없게 된다. 기존의 html에서 js를 가져오는 방식인 는 브라우저에서도 js 파일에 선언된 변수에 접근할 수 있는데, ES Module인 import, export 를 사용하면 접근할 수 없게 된다. 이러한 방법을 모듈화라고 한다. 최신 브라우저에서는 모듈화를 거의 지원한다. 모듈을 사용하려면 로 명시해주면 된다. 웹에서 사용하는 굉장히 많은 파일을 하나로 묶고 모듈을 사용하게 해주는 것이 bundler 라고 한다. bundler의 대표 주자는 webpack! bundle한 후 용량을 줄이기 ..

First-class Function 함수가 변수처럼 취급된다. 변수에 할당할 수 있다. 매개변수를 전달받을 수 있다. 리턴값을 리턴할 수 있다. anonymous function 이름이 없는 함수 const print = function() { console.log('print'); }; callback function 매개변수로 함수를 전달한다. 클라이언트에게 구현을 맡기는 것과 같음 function randomQuiz(answer, printYes, printNo) { if(answer === 'love you') { printYes(); } else { printNo(); } }; const printYes = function() { console.log('Yes!'); } const printN..

var block안에 변수를 선언해도 어느곳에서나 사용할 수 있게 된다. 이제는 사용하지 말 것! let을 사용하자! hoisting var 예약어를 이용하여 변수를 선언할 경우 발생한다. 어디에 선언했는지에 상관없이 항상 제일 위로 선언을 끌어올려준다. let mutable 변수를 선언할 때 사용한다. const immutable 데이터 타입을 선언할 때 사용한다. 장점 1. security 2. thread safety : 스레드가 변수에 동시에 접근해서 변경하는 것을 방지 3. reduce human mistakes Variable types 타입이 다이나믹하게 결정된다. number Infinity : 무한대 -Infinity : -무한대 NaN : not a number BigInt 123n s..

html에서 script를 포함할 때 1. 안에 있는 경우 브라우저가 html 파싱을 할 때 blocking 된 후 js파일을 로드한다. 단점 : 만약 파일이 클 경우 웹페이지가 보이지 않을 수 있다. 2. 맨 끝에 있는 경우 파싱이 모두 끝난 후 js 파일을 로드한다. 단점 : 웹사이트가 js에 의존적일 경우(서버 데이터 받아옴, UI 꾸미기 등) fetching하기까지 오래걸릴 수 있다. 3. async js 파일을 병렬로 로드하고 blocking이 되지 않고 파싱을 계속한다. 단점 - 파싱이 끝나기도 전에 js파일이 fetching이 되면 js에서 조작해야 할 DOM 요소가 정의되지 않을 수 있다. - js를 실행할 때 파싱이 blocking이 될 수 있다. - 스크립트가 정의된 순서되로 실행되는 ..

map 함수 배열에서 요소를 하나씩 돌며 새로운 요소의 새로운 배열을 리턴한다. 배열일 경우 완전히 새로운 배열을 생성하며, 요소가 객체일 경우엔 기존 객체와 공유한다. 세 개의 인자를 모두 사용하지 않고 element만 사용할 수 있다. array = [1, 2, 3] // element : 배열의 요소 // index : 배열의 인덱스 // array : 원본 배열 let newArray = array.map((element, index, array) => { return element + 1; }); newArray;// 2, 3, 4 filter 함수 배열에서 조건에 따라 필터링하여 true/false를 리턴한다. true인 원소들만 모아 새로운 배열을 생성한다. 해당되는 조건이 없을 경우 빈 배..