frontend

지난 포스팅에 이어서 Next.js 튜토리얼 글을 이어서 작성해 보고자 한다. 시작하기에 앞서 이제부터 타입스크립트를 사용할 계획이라 TS 설치를 먼저 진행한다. $ npm i typescript @types/react @types/node --save-dev // node_modules 폴더를 지우고 $ npm i $ npm run build & npm run dev 그러면 프로젝트 root 디렉토리 위치에 다음 파일들이 자동으로 생성이 될 것이다. next-env.d.ts tsconfig.json 그리고 기존의 어플리케이션도 jsx 파일을 tsx로 바꾸어 주면 정상적으로 실행이 된다. 오늘 해볼 작업들은 다음과 같다. Link를 통해 페이지를 이동 getStaticProps()를 통한 동적 데이터 추..

Next.js는 React에서 기존에 CSR(Client Side Rendering)의 특징에 더하여 SSR(Servers Side Rendering)을 혼합하여 운영환경에서 최적의 퍼포먼스를 낼 수 있게 도와주는 프레임워크이다. 2020년 11월 현재 버전 10.0.1이 나와있으며 다음과 같은 기능들을 지원한다. 페이지 기반 라우팅 (동적 라우팅) 데이터 패칭 빠른 성능을 위한 코드 스플리팅 CSS in JS 이미지 최적화 빠른 컴포넌트 재활성화 정적 파일 처리 타입스크립트 환경 변수 브라우저 지원 각각에 대한 자세한 사항들은 이후에 하나씩 알아보고자 한다. Next.js는 SPA에서 CSR이 가질 수 밖에 없는 한계들을 보완해 주는 도구이다. SSR과 CSR에 대한 포스팅 참고 CSR은 초기 로딩 속..

리액트를 사용하여 프론트 개발을 할 때 두 가지 방법으로 컴포넌트를 선언할 수가 있다. 과거에는 클래스형 컴포넌트를 주로 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다. 두 가지 방법에 대해 모두 다 잘 알고 있으며, 필요한 상황에 맞게 사용하는 것이 중요하므로 각각의 방법에 대해서 좀 더 깊이있게 살펴보도록 한다. 먼저 컴포넌트의 기능을 한 번 짚어보고 가도록 하자. 컴포넌트는 단순한 템플릿 이상의 기능을 수행한다. 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 하는 것은 물론, 라이프 사이클 API를 통해 컴포넌트가 화면에 나타날 때, 사라질 때, 변할 때 작업들..

코딩 테스트나 사전 과제 전형에 통과하고 나면, 그 다음으로 기술 인터뷰를 보게 된다. 나 같은 경우 온사이트 기술 인터뷰와 스크리닝 화상(또는 전화) 인터뷰 두 가지 형태로 보았던 것 같다. 요즘에는 코로나 바이러스 때문에 기술 인터뷰를 화상으로 보는 회사들도 있다. 스크리닝 인터뷰 스크리닝 인터뷰는 보통 온사이트 기술 인터뷰 보기 전에 지원자의 실력을 체크하는 용도로 30분~1시간 정도로 가볍게 진행한다. 뭔가 과제를 주는 경우보다는 이력서를 기반으로 질문을 하거나, 지원 분야에 관련된 기본적인 직무 지식을 물어본다. 나 같은 경우 웹 프론트엔드 분야로 지원을 했었는데, HTML, CSS, JS, 브라우저 및 웹 전반, FE 관련 라이브러리 등등에 대해서 물어보았던 것 같다. 간혹, 자료구조, 알고리..

서류를 통과하면 그 다음에 주어지는 전형은 보통 코딩테스트나 사전과제, 서면 질문지 등이 있었다. 때로은 이러한 절차 전에 스크리닝 인터뷰를 하는 경우도 있었다. 인터뷰는 다음 포스팅에서 다룰 예정이고 이번 포스팅에서는 코딩 테스트와 사전 과제에 대해서 이야기를 해 보려고 한다. 코딩 테스트 코딩 테스트는 일반적으로 가장 자신 있는 언어를 사용하여 알고리즘 문제를 푸는 경우가 제일 많다. 때로는 언어를 지정해 주는 경우도 있다. 웹 프론트엔드의 경우 자바스크립트로 지정해주는 식으로 말이다. 그리고 간혹 알고리즘이 아닌, Vanilla JS나 React를 사용하여 특정 기능을 구현하는 코딩테스트를 본 적도 있었다. 이 경우는 코딩 테스트와 과제 전형을 섞어놓은 느낌을 받았다. ㅋㅋ 나의 경우 어디 가서 알..

이전 포스팅 - 자바스크립트 프로미스(Promise) 이전 포스팅에서 콜백을 통해 비동기 흐름을 어떻게 제어할 수 있을지에 대한 방법들을 이야기 했고, 프로미스를 통해 믿음성/조합성을 살피면서 제어의 역전을 되역전하는 방법을 살펴보았다. 그리고 이번 포스팅에서는 비동기 흐름 제어를 순차적/동기적으로 어떻게 나타낼 수 있을지에 대한 방법을 고민해 본다. 기존 ES5까지는 자바스크립트에서 함수가 실행되기 시작하면 완료될 때 까지 계속 실행되며 도중에 다른 코드가 끼어들어 실행되는 법은 없다고 개발자들은 생각했었다. 하지만 ES6부터 이러한 완전-실행 법칙을 따르지 않는 새로운 종류의 함수, 제너레이터가 등장하였다. 여기서 bar()는 x++와 console.log() 사이에서 실행된다. 하지만 만약 bar(..

오늘은 웹팩이 무엇인지에 대해서 알아보고 기본적인 사용법을 확인해 보려고 한다. 자바스크립트를 사용한 웹 서비스 어플리케이션의 복잡도가 증가하면서 자바스크립트 코드의 양이 많아지고, 이러한 코드를 유지 보수하기 쉽게 만들려고 모듈로 관리하는 방법이 필요하게 되었다. 자바스크립트에서는 ES2015 이전에 모듈을 사용하기 위해서 여러가지 명세가 존재했다. 대표적으로 AMD, CommonJS 등이 있다. 그러다가 ES2015에서 자바스크립트는 표준 모듈 시스템을 제안했다. 우리가 잘 아는 export/import 방식으로 말이다. 안타까운 사실은 모든 브라우저가 이러한 ES2015방식의 모듈 시스템을 지원하지는 않는다는 점이다.(특히 IE가 그렇다) 크롬의 경우 버전 61부터 모듈 시스템을 지원한다. 그래서 ..