Lighthouse로 next.js 프로젝트 성능 개선하기
라이트하우스는 웹앱 품질 측정도구이다. 웹앱의 성능, 접근성, SEO 등을 검사해주고, PWA 조건을 만족하는지도 검사해준다. 크롬 확장 프로그램으로 다운받아서 사용할 수 있고, 혹은 크롬 개발자 도구에서 Lighthouse 탭으로 들어가 사용할 수도 있다.뷰포트에서
NextJs의 기본 구조
pages 폴더 각종 페이지들을 작성하는 폴더, 해당 폴더 내의 파일을 기반으로 라우팅이 설정된다. _app.js client에서 띄우길 바라는 전체 컴포넌트의 레이아웃으로 이해하면 쉽다. 공통 레이아웃이므로 최초에 실행되어 내부에 들어갈 컴포넌트들을 실행한다.
CSR vs SSR
요청 받은 내용을 브라우저에 표시하는 것을 의미.Client Side Rendering은, SPA\*로 최초에 Html을 비롯해 CSS, JavaScript 등 각종 리소스를 받아온 뒤, 이후에는 서버에 데이터만 요청하고 자바스크립트로 뷰를 컨트롤 하는 방식을 말한다.
환경변수란?
프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이다. 일반적으로 우리는 코드 베이스는 하나만 관리하고 개발, 테스트, 운영 등 여러 환경에 어플리케이션을 배포한다. 이 때, 어느 환경에 배포하느냐에 따라서 다르게 설정해야 하는 항목은 보통 운영체
query 문
MySQL관계형 데이터베이스 중 하나인 MySQL을 사용하여 SQL 쿼리문을 정리해보겠다.쿼리문은 크게 3가지 종류로 나뉘게 된다. 간략히 보면DDL (Data Define Language) :데이터베이스의 Schema를 정의할 수 있는 쿼리문DML (Data Mani
pure component
https://godsenal.com/posts/React-PureComponent-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/
노드란
노드(node)는 컴퓨터 과학에 쓰이는 기초적인 단위이다. 노드는 대형 네트워크에서는 장치나 데이터 지점(data point)을 의미한다. 개인용 컴퓨터, 휴대전화, 프린터와 같은 정보처리 장치들이 노드이다. 인터넷에서 노드를 정의할 때 노드는 IP 주소를 보유한 어떠
코드 스플리팅
잠깐, 코드 스플리팅이 뭔가요?우리가 자바스크립트로 애플리케이션을 개발하게 되면, 기본적으로는 하나의 파일에 모든 로직들이 들어가게 됩니다. 그럼, 프로젝트의 규모가 커질수록 자바스크립트 파일 용량도 커지겠죠? 용량이 커지면, 인터넷이 느린 환경에서는 페이지 로딩속도도
NextJs의 getInitialProps
웹 페이지는 각 페이지마다 사전에 불러와야할 데이터들이 있다. Data Fectching이라고도 하는 로직은 CSR(Client Side Rendering)에서는 react 로직에 따라 componentDidMount or useEffect로 컴포넌트가 마운트 되고 나
접근제한자 public, protected, private
접근 제한자란, 클래스 내에서 멤버의 접근을 제한하는 역할을 한다. 이것을 통해 접근을 막고 외부로 부터의 노출을 줄일(정보은닉) 수 있다. 이는 객체 지향 언어의 특징인데, 의도치 않은 코드의 수정을 막고 객체와 객체간의 간섭이 최대한 없게 하기 위해서이다.publi
getter, setter
객체의 property(속성)는 두 종류로 나뉜다.첫번째는 data property이다. (지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다.)두번째는 accessor property(접근자 속성)이다.접근자 속성의 본질은 함수인데, 값을 획득(get)하고 설정(se
캐시와 캐시함수
컴퓨터 과학에서 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 캐시는 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나, 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간
Redux 예시 코드
폴더구조 store > actions > index.js store > reducers > cartReducer.js 
NextJs 초기세팅하기
NextJs 설치 & 초기세팅 1. create-next-app npx 또는 yarn을 사용하여 next 프로젝트를 생성할 수 있다. create-next-app은 create-react-app과 같이 next 환경을 손쉽게 세팅할 수 있는 명령어이다. 2.