본문 바로가기

FrontEnd+

CRA 에서 next.js 로 마이그레이션하기 이미 CRA로 패키지를 구성한 경우, next.js를 덧붙이는 방법을 정리해보자. package.json 수정 우선, react-scripts를 제거한다. react-router-dom으로 라우팅하고 있다면 이것도 제거한다. (react와 react-dom은 내비둬야한다.) 그리고 next를 설치한다. npm uninstall react-scripts react-router-dom npm install next 그리고 package.json에 scripts도 수정해주자. { "dev": "next dev", "build": "next build", "start": "next start", } public으로 static assets 옮기기 CRA에서는 public 디렉토리에 HTML 엔트리 파일(inde.. 더보기
[성능최적화] 요청 사이즈 다이어트 프로젝트의 요청 크기 최적화 방법을 정리한 글입니다. 1. 이미지 요청 크기 줄이기 평균적으로 웹 페이지 용량에서 이미지가 차지하는 비율은 60% 이상인 점을 고려하면, 이미지 요청 사이즈를 개선하는 것도 요청 사이즈를 줄이는데 효과적인 방법일 수 있다. 프로젝트에서는 총 28개의 이미지 파일을 사용하고 있었다. 9월 이전까지는 이 이미지 파일들에 대한 최적화가 하나도 되어있지 않았었고, 이 때문에 사용성에도 문제가 있었다. 특히 로그인 페이지의 일러스트처럼 용량이 큰 이미지를 불러올 때면, 이미지를 받아오는데 너무 오래걸려서 깜-빡하고 이미지가 나중에 뜨는 현상이 나타났다. 최초에 이미지 파일을 준비할 때, '혹시나' 화질이 안좋아 보일까봐 원본 이미지에 2배 크기로 저장했는데, 이렇게 저장할 때 원본.. 더보기
웹 성능 핵심개념 - 크리티컬 렌더링 패스 🖐 버벅임(Jank) 멈춰! 대부분의 기기들은 1초에 60번 화면을 업데이트한다. 이 주기를 60Hz 라고 표현하고, 초당 프레임 60 즉, 60 fps(frames per second)라고도 표현한다. 브라우저가 프레임을 60번보다 적게 가져오면 사용자는 화면이 '버벅이고 있음'을 알아채고 시각적 불편함을 느끼게 된다. 그렇다면 1초에 60개의 프레임을 준비하려면, 얼마만큼의 시간동안 한 프레임을 준비해야 하는걸까? 1000ms 를 60개로 나누면 약 16ms이다. 그렇지만 브라우저가 이런저런 잡일도 처리해야해서 실제로는 10 ~ 12ms 만에 준비해야 한다. 🖼 프레임은 이렇게 만들어요 나의 앱의 프레임속도를 최적화 하기 위해서는, 브라우저가 프레임을 어떻게 렌더하는지부터 이해해야 한다. 브라우저의 .. 더보기
순수(?) 리액트 앱에 webpack 설정하기 (without CRA) 레벨 3 팀프로젝트를 시작하면서 가장 먼저 맞닥뜨린 과제는 CRA 없이 개발환경을 setting 하는 것이었다. 레벨 2 기간 내내 편하게 써온 CRA를 사용하면 안 된다는 과제가 던져졌다. 🤔 CRA, 편한데 왜? CRA는 Create React App의 약자로, 초보자들도 쉽고 빠르게 개발환경을 세팅할 수 있도록 리액트 팀에서 제공하는 보일러 플레이트이다. 터미널에 아래와 같이 명령어 한 줄만 치면 기본적으로 필요한 패키지를 모두 포함한 프로젝트의 기본 뼈대를 만들어준다. npx create-react-app --use-npm 코치님들께서 CRA 사용을 제한하신 이유는 무엇일까? CRA를 사용하면 편하긴 하다. CRA 편한 것을 즐기려면 적어도 CRA가 무엇을 얼마나 해주는지는 알아야 할텐데 실상 그.. 더보기
협업을 위한 HTTP 기초 데이터를 주고받기 위해 다 같이 약속 🤙 월드와이드웹(www) 상에서 컴퓨터와 컴퓨터 간에 데이터를 주고받기 위해 전 세계적으로 약속한 방식이 있다. 이 과정은 다음과 같이 요약할 수 있다. 1. 클라이언트가 'HTTP 요청메세지'를 만든다. 2. Socket 라이브러리를 통해 IP와 포트를 연결한다. 3. 요청메세지에 제어정보를 더해 '패킷'이라는 단위로 포장을 마친다. 4. LAN 카드를 통해 패킷을 내보내, 지정한 IP 주소 및 포트에 패킷을 전달한다. 5. 패킷을 받은 서버는 요청 패킷 포장을 풀어 요청 메세지를 확인하고, 'HTTP 응답메세지'를 만든다. 6. 서버에서 클라이언트로 응답 패킷을 보낸다. 7. 응답 패킷을 받은 클라이언트는 포장을 풀고 응답 메세지를 확인한다. 이러한 약속을 네 가.. 더보기
프론트엔드 테스트 고민 일지 이 글은 내가 생각하는 정답이나 결론이 아닌 (장바구니 미션을 진행하면서) 프론트엔드 테스트 입문자로서 테스트 관련해서 고민했던 내용을 메모한 글이다. 굳이 테스트 작성하지 않아도 앱은 잘 돌아가는 것처럼 느껴진다. 타이트한 일정 속에서 '테스트를 꼭 작성해야 하나?' 라는 마음이 안 들었다면 거짓말이다. 테스트 코드는 왜 작성해야 할까? 테스트틀 작성해야 하는 이유 테스트 코드는 '보험'이다. 코드는 mutable 하다. 변경의 이유가 기능 추가/변경/삭제이든, 리팩토링이든, 항상 변경의 여지가 언제나 있다. 언제 얼마나 바뀔지 모른다. 그리고 이러한 변경은 새로운 버그 발생의 가능성을 낳는다. 명확한 코드를 작성했다고 생각해도 그 안에 조용히 버그가 숨어있을 수 있다. 테스트 코드가 없다면, 이 버그.. 더보기
[Redux] 리액트 앱에서 Redux로 상태관리 하기 Redux 공식 홈페이지에서는 Redux를 자바스크립트 앱을 위한 '예측 가능한' 컨테이너라고 소개한다. 지나간 상태도 관리하기 버거운데 예측까지 가능하게 해 준다니 상당히 매력적인 문구이다,,, 리액트 앱에서 Redux를 적용해 보면서 정말로 상태 관리하기가 더 수월해지는지 경험해보자! Redux 기초개념 egghead는 자바스크립트 개발자를 위한 인강 사이트이다. Dan Abramov, Kent C. Dodds 등 유명한 자바스크립트 개발자의 강의를 로그인 하지 않고도 무료로 들을 수 있다.(일부 유료) 리덕스를 만든 Dan Abramov가 직접 리덕스를 소개하는 이 강의는 각 강의가 1~3분 내로 호흡이 짧고, 나같은 리덕스 입문자가 이해하기도 쉽게 설명해줘서 리덕스의 주요 개념을 이해하는데 큰 도.. 더보기
[React] 타입 체크을 위한 PropTypes PropTypes는 리액트에서 지원하는 props 타입 체크 방법이다. 리액트 15.5 버전 이전에는 리액트에 포함되어있다가 이후 별도의 패키지로 분리되어 나왔다. PropTypes를 사용해야 하는 이유, 적용 방법에 대해서 알아보자. 린터는 왜 PropTypes를 강제할까? 앞서 말한 것과 같이, PropTypes는 JS로 작성한 리액트 코드에서 타입 체크를 도와주는 라이브러리이다. 나는 PropTypes의 존재 자체를 모르다가, 린터가 에러를 띄워주어서 처음 알게되었다. 린터는 왜 설치방법까지 알려주면서 prop-types를 강제하는걸까? props를 제대로 전달받는 것이 중요한 이유는 함수에서 argument가 제대로 들어가야 하는 것과 맥락이 같다. 만약 개발자의 실수로 컴포넌트가 꼭 필요한 pr.. 더보기

티스토리툴바