| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- MSW
- 기본
- CSS-in-JS
- Basic
- mockoon
- 개발자
- 컴포넌트
- 아키텍처
- 목킹
- front-end mocking
- sprinkles
- thread
- mock service worker
- link
- 자바스크립트
- async
- vanilla-extract
- Concurrent Mode
- 리액트네이티브
- JavaScript
- Critical Rendering Path
- styled-component
- 비동기
- 리액트
- react server component
- 기초
- Cache
- 최적화
- react-query
- next.js
- 리액트쿼리
- Babel
- 캐쉬
- react-native
- next hydration
- amplify
- 동기
- SWC
- 쓰레드
- React
- Today
- Total
목록Babel (2)
Don’t worry about failures
babel, terser and SWC with Next.js (1)
해당 글에서는 babel, terser의 기본 개념과 이를 넘어서기 위한 새로운 도구인 SWC에 대해 살펴보고자한다. 1. Babel 1-1 개념 및 테스트 바벨은 구형 브라우저나 환경에서 ES6+의 기능들을 사용하기 위해서 이전 스크립트 버전으로 변환해주는 트랜스파일러이다. 간단한 예를 봐보자 https://babeljs.io/repl Babel · Babel The compiler for next generation JavaScript babeljs.io 간단하게 테스트할 수 있게 바벨에서 웹으로 지원해준다. 아래와 같이 코드를 작성했다고 해보자. const HelloWorld = ({ name, content }) => { let fullText = ""; if (name) { fullText +..
props 'className' did not match
next.js는 초기 렌더링만 서버가 담당 ( SSR ) 이후 CSR로 동작을 한다. 첫 화면 로딩시에는 SSR로 렌더링하면서 오류가 발생하지 않지만, CSR로 렌더링하면서, 서버에서 클래스명과 클라이언트에서 클래스명이 달려져서 생기는 오류이다. 같은 Header를 home 쪽에서 ssr로 렌더링하고 다른 페이지 이동후 새로고침하면 기존에 있는 header( ssr로 내려온 header ) 와 페이지 이동된 후 header (csr로 그려준 header )의 클래스 해쉬 값이 달라 위와 같은 에러 해결방법 babel-plugin 설치 npm i babel-plugin-styled-components 프로젝트 루트 경로에 .babelrc 파일 생성 이미 존재하면 해당 값 기입 { "presets": ["n..