천천히 느리게 천천히 느리게

◎ Next.js 에서 이미지 불러오는 게 이렇게 힘든 것인가... 아니면 내가 못하는 건가.. svg 파일 불러오는데 시간을 많이 투자했다. svg파일을 사용하면서 삽질기와 배운 것을 적겠다. 1. babel-plugin-inline-react-svg ◎ SVG 파일을 가져오려면 React Components로 변환하고 SVGO를 사용하여 SVG를 최적화해야 한다. npm install --save-dev babel-plugin-inline-react-svg 2. .babelrc 에 추가 ◎ .barbelrc에 inline-react-svg 플러그인을 추가한다. { "plugins": [ "inline-react-svg" ] } 3. Waring: Invalid attribute name: `'data..

◎ 지금 하는 프로젝트에 styled-component를 적용하기로 했다. 원래는 sass로 되어있는 프로젝트인데 styled-component로 바꿔서 해야 하는 큰 숙제가 있다. 현재 정리 내용은 처음 접하는 Next.js를 공부하면서 정리한 내용이다. 1. 설치 npm install --save styled-components Javascript를 사용할 때는 위의 방식으로 설치하면 되지만, Typescript를 적용하면 styled-components를 인식하지 못한다. 그 이유는 Typescript에서는 리액트 라이브러리에 대한 type정의가 되어있지 않기 때문이다. 그렇기 때문에 type을 정의해 놓은 라이브러리도 설치해줘야 한다. npm install --save @types/styled-c..

◎ 아직까지도 헷갈리는 개념!! 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 개념과 지식에 대해 알아보자. 1. 렌더링 ◎ 렌더링이란, 요청받은 내용을 브라우저에 화면에 표시하는 것이다. 예를 들어, 우리가 어떠한 홈페이지를 접속하게 되면 브라우저에 해당하는 홈페이지가 나오는 것이라고 생각하면 된다. 1-1. 렌더링의 과정 로더(Loader)가 서버로부터 정보들을 불러옴 파싱(Phasing)을 통해 문서를 DOM 트리로 만듦 DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축 CSS 설정/레이아웃 위치 지정 렌더링 트리가 그려짐 2. 서버 사이드 렌더링(SSR) ◎ 웹의 시작부터 MPA(Multiple Page Application)이 있었다. 웹의 초기부터 SPA에 대한 개념이 나오기 전까지 ..