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

◎NextJS에서 Data Fectching 하는 방법을 알아보자. NexJS 8 버전에는 getInitialProps를 사용했는데, 현재 9 버전에서는 getStaticProps, getStaticPaths, getServerSideProps를 주로 사용한다. 1. 사전 렌더링(pre-rendering) ◎ NextJS가 작동하는 방식과 이를 빠르게 만드는 데 있어 큰 부분을 차지한다. 기본적으로 NextJS는 실행해야 하는 최소한의 Jacascript와 함께 Hydration를 통해 각 페이지 HTML을 미리 생성하여 모든 페이지를 사전 렌더링 한다. 사전 렌더링에는 정적 생성(SG)과 서버 측 렌더링 (SSR)이 있다. 이 둘의 차이점은 데이터를 가져올 때이다. 1-2. 정적 생성(SG) ◎ SG의..

◎ 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..

◎ 회사에서 내가 맡은 프로젝트는 CRA로 만들어져서 SEO가 잘되어있지 않는 이슈가 있어서, 이참에 Next.js를 사용하여 ssr 방식으로 프로젝트를 재구성할 기회가 생겼다. next.js를 언젠간 한번 해보고 싶었는데 좋은 기회이다. 1. Next.js? ◎ Next.js를 사용 이유 중 핵심이 SSR 방식인 점이다. 렌더링 방식은 블로그에 정리돼있으므로 생략하겠다. React를 사용하여 완전한 웹 애플리케이션을 빌드하려면 고려해야 할 중요한 부분이 많다. - 코드는 webpack과 같은 번들러를 사용하여 번들로 묶고 Babel과 같은 컴파일러를 사용하여 변환해야 한다. - 코드 분할과 같은 프로덕션 최적화를 수행해야 한다. - 성능 및 SEO를 위해 일부 페이지를 정적으로 사전 렌더링 할 수 있다..

이번에 취업한 회사에서 TypeScript를 사용하여 애플리케이션 개발을 한다. TypeScript를 해야지 해야지.. 하다가 드디어 할 기회가 생겨서 앞으로 TypeScript에 대해 공부를 하려고 한다. 하지만 계속해서 JavaScript도 공부할 예정이다. 1. TypeScript 란 ◎ TypeScript는 Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이다. 대규모 애플리케이션을 개발하는데 JavaScript가 어렵고 불편하다는 불만에 대응하기 위해 개발되었다. TypeScript는 스크립트 언어의 표준인 ECMA Script의 표준을 따르기 때문에 JavaScript 영역을 침범하지 않고 최신 ES를 지원한다. 새로운 ES가 나올 때마다, TypeScript 역시 버전 업..

◎ 면접을 진행하다 보면 이벤트 버블링과 이벤트 캡쳐의 차이에 대하 자주 물어본다. 근본적인 지식에 대한 정보는 없어서 정리를 한번 해볼까 한다. 1. 이벤트 버블링이란? ◎ 이벤트 버블링(Event Bubbling)은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위 요소들로 전달되어 가는 특성을 의미한다. 여기서 상위 요소란, HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 한다. 다음 코드를 봐보자. 세 개의 div 태그가 있고 가장 아래에 있는 div 태그에서 이벤트가 발생했을 때 최상위 요소인 body 태그까지 이벤트가 전달되는 코드이다. 위의 코드는 세 개의 div 태그에 모두 클릭 이벤트를 등록하고 클릭했을 때 ..

◎ 지금까지는 객체지향 프로그래밍이었다면 이제 함수를 기반하는 함수형 프로그래밍으로 많이 작성한다. 함수형 프로그래밍에 대해서 간략하게 알아보자! 1. 함수형 프로그래밍이란? ◎ 함수형 프로그래밍은 순수한 함수를 작성하고, 공유된 상태와 변경 가능한 데이터 및 부작용을 피하여 소프트웨어를 작성하는 프로세스이다. 함수형 프로그래밍은 선언형이며, 애플리케이션의 상태는 순수한 함수를 통해 전달된다. 애플리케이션의 상태가 공유되고, 객체의 메서드와 사용되는 객체 지향 프로그래밍과는 대조된다. 2. 순수 함수 (pure function) ◎ 순수 함수란 하나 이상의 인자를 받고, 받은 인자를 처리하여 반드시 결과물을 돌려주어야 한다는 것이다. 인자를 제외한 다른 변수는 사용하면 안 되고 받은 인자만으로 결과물을 ..

◎ 우리가 어떠한 사이트를 들어가면 사이트는 많은 과정을 거쳐서 우리한테 보이게 된다. 이제 그 과정에는 어떠한 것들이 있는지 알아봐보자. 1. 브라우저의 주요 기능 ◎ 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저는 HTML과 CSS 명세에 따라 HTML과 CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consorium)에서 정한다. 브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적이다. ..