ISR을 알기 전 Next.js 선수지식 렌더링 CSR, SSR, SSG 렌더링이란 UI를 HTML로 나타내는 과정이다. 렌더링은 클라이언트에서 일어날 수도 있고 서버에서 일어날 수도 있다. 클라이언트에서 렌더링이 일어나는 것을 Client Side Rendering이라고 한다. 서버로부터 빈 HTML과 UI를 구성하기 위한 정보가 담긴 javascript 파일을 받아서 유저 디바이스에서 렌더링 작업을 시작한다. 이것과 대비되는 개념으로 서버에서 렌더링이 일어나는 것을 Pre-rendering이라고 한다. 클라이언트에 전송되기 전에 미리(Pre) HTML을 만들어서 전송한다는 의미이다. CSR을 사용하려면 useEffect나 useSWR을 사용해서 클라이언트에서 data fetching을 한다. Pre-..
상황 ../../.yarn/cache/keen-slider-npm-6.8.3-1dae0bc90d-b798545bd6.zip/node_modules/keen-slider/react.js:1:74 Module not found: Can't resolve 'react' Did you mean './react'? Requests that should resolve in the current directory need to start with './'. Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Us..
문제 상황 깃헙 credential이 osxkeychain으로 설정되어 있는데 이를 사용하지 않고자 하는 경우, credential.helper 값을 삭제해줘야 한다. 해결 방법 git config --local credential.helper, git config --global credential.helper, git config --system credential.helper 이 세 명령어를 쳐보면서 어느 스콥에 세팅이 되어있는지 확인한다. 나의 경우에는 시스템에 설정되어 있었다. 위 결과를 토대로 unset해준다. 나의 경우에는 system이었으므로 syatem option과 unset option을 함께 주었다. git config --system --unset credential.helper ..
자바스크립트는 새로운 피처를 계속 도입하며 진화한다. 하지만 일반적으로 자바스크립트 엔진은 더 느리게 이를 반영한다. 구형 엔진에서 새로운 자바스크립트 피처를 사용하고 싶으면 어떻게 해야할까? transpiler polyfills transpiler 소스코드를 구현 엔진이 이해할 수 있는 소스코드로 변형한다. 예를 들어 es2020로 쓰인 코드를 es5로 변경하여 es5만 지원하는 구형 엔진에서도 돌아갈 수 있도록 한다. // 트랜스파일러를 돌리기 전 height = height ?? 100; // 트랜스파일러를 돌린 이후 height = (height !== undefined && height !== null) ? height : 100; 가장 유명한 트랜스파일러는 babel이다. webpack 같은 ..
토큰이란 무엇인가? 웹개발에서 토큰이란 세션을 나타내는 임의 값일 뿐이다. 예를 들어 "abc123" 과 같은 문자열도 토큰이 될 수 있다. 토큰의 목적은 서버가 사용자를 기억하고 분별하게 하려는 것이다. JWT란 무엇인가? JSON Web Token은 웹에서 사용하기 쉽도록 일정한 형태로 구조화한 토큰이다. JWT는 JSON 데이터를 담고 있어서 JWT를 복호화하면 JSON 데이터를 얻게 된다. JWT는 헤더, 페이로드, 시그니처 3부분으로 구성돼있는데 특히 이 시그니처 부분은 서버에서 암호화한 서명으로, , 시크릿 키가 없으면 복호화할 수 없다. 그러므로 내가 다른 사용자의 ID를 훔쳐서 나에게 발급된 JWT에 훔친 ID를 페이로드로 수정하여 서버에게 보낸다하더라도, 시그니처가 내 정보에 기반해서 돼..
canonical tag란 비슷하거나 중복된 페이지들에 대해 서치 엔진에게 어떤 페이지가 메인 버전 (canonical version) 이라고 알려주는 태그이다. 그럼 어떤 것이 중복된 페이지일까? 같은 컨텐츠를 가졌음에도 불구하고 검색 엔진이 다르게 취급하는 url들이 많이 있다. http://site.com https://site.com https://site.com/index.html https://www.site.com http 프로토콜이 다르거나, 뒤에 pathname이 붙거나, 앞에 www가 붙거나, 쿼리 파라미터가 붙는 등 모두 같거나 비슷한 페이지를 서빙함에도 불구하고 검색 엔진은 다른 것으로 취급하고, 이 때 중복 컨텐츠의 문제가 생긴다. 중복 컨텐츠 문제는 왜 문제일까? 검색 엔진이 인..
commonJS commonJS는 Node.js의 디폴트 모듈 시스템이다. require(), module.exports 문법을 사용한다. commonJS 문법은 런타임에 파싱되므로 require 는 코드 어디에서나 사용할 수 있다. if 문 안에서도, loop 안에서도 사용할 수 있다. commonJS는 sync하게 하나씩 순차적으로 모듈을 로드하기 때문에 큰 어플리케이션에서는 퍼포먼스 이슈가 있을 수 있다. ES module (ESM) ES module은 자바스크립트 공식 모듈 시스템이고 거의 모든 모던 웹 브라우저가 ES module을 지원한다. 다만 Node.js에서는 commonJS가 디폴트였고, ESM은 실험적으로만 제공하다가 v13.2.0 에서부터 ESM을 stable로 제공하기 시작했다. ..
모노레포를 구축하는 도구에는 yarn, lerna, turborepo, nx, pnpm 등이 있다. 이 중에서도 yarn에 대해 알아보자. yarn의 workspaces 필드를 사용하여 모노레포를 구성할 수 있다. yarn link를 통해 node_modules에 워크스페이스에 대한 심볼릭 링크를 생성할 수 있는데 워크스페이스는 이를 더 선언적인 방식으로 사용하는 방법이다. // in package.json { "workspaces": ["packages/*"] // packages 폴더 내에 있는 모든 폴더들을 전부 워크스페이스로 만든다. }note: 워크스페이스: 패키지, 워크트리: child 워크스페이스를 갖고 있는 워크스페이스 위 예제에서 packages는 워크트리이다. workspace rang..
- Total
- Today
- Yesterday
- SQL
- 자바
- Data Structure
- 개발 공부
- Redux
- rxjs
- Session
- GIT
- 알고리즘
- Conflict
- 리덕스
- 깃
- Prefix Sums
- youtube data api
- Java
- react
- package.json
- 포인터 변수
- c언어
- CSS
- this
- oracle
- 제네릭스
- til
- 인스턴스
- jQuery
- useEffect
- getter
- JavaScript
- linkedlist
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |