이 포스팅은 자바스크립트 Deep Dive 책을 읽고 공부한 내용을 작성한 글입니다.ECMAScript 사양은 소스코드를 4가지 타입으로 구분한다.전역 코드 : 전역에 존재하는 소스코드함수 코드 : 함수 내부에 존재하는 소스코드eval 코드 : 빌트인 전역 함수인 ev

이 포스팅은 자바스크립트 Deep Dive 책을 읽고 공부한 내용을 작성한 글입니다.위 코드에서 add함수의 매개변수인 x, y는 함수 내부에서만 유효하게 적용된다는 사실을 알 수 있다. 이는 함수의 매개변수 스코프가 함수 몸체 내부로 한정되기 때문이다.모든 식별자(변

변수, 함수 등을 만들 때 javascript 보다 더 강력한 type을 지정하여 오류를 사전에 방지한다.stringbooleannumberArrayObjectUnion TypefunctionTupleanyundefined

위 코드를 통해 Client Side Data Fetching에 대한 개념과 next.js의 기본 기능인 preRendering 에 대해 이해할 수 있다.위 코드는 preRendering을 하기 위해 사용되는 getStaticProps, getServerSideProp

앞서 살펴봤던 preRendering의 첫번째 방식이자 next.js 에서 추천하는 방식인 Static Generation은 쉽게 말하자면 사전에 HTML 페이지를 생성해 놓고 사전 렌더링을 해놓은 후에 보여주는 방식입니다. 하지만 이 방식을 따를 때 어떤 데이터를 포

기본적으로 Next.js는 동적 데이터가 없는 모든 페이지를 preRendering합니다. preRendering을 하지 않는 CSR에서는 페이지를 로드하면 빈화면이 보이다가 JS파일을 로드하여 페이지가 화면에 보인다면?preRendering을 하는 SSR에서는 페이지

next.js 에서 상세페이지 만드는 방법은 두가지가 있다.블로그 글, 여러가지 상품 목록 등 페이지 URL이 비슷한데 여러개가 필요할 때 하나하나 만들 수 없겠죠? 이를 한번에 해결하기 위한 방법으로 dynamic route를 만들어 해결할 수 있습니다.예를 들어 /

1\. server component2\. client componentpage.js, layout.js 등등 javascript 코드 없는 순수 html코드들은 전부 server component이다.👍🏻server component의 장점페이지 로드시 자바스크립

지금까지 next.js를 사용하지 않은 순수 react 프로젝트에서는 페이지별 라우팅을 걸 때 react-router-dom을 사용하여 다음과 같은 코드를 작성했다.이와 같이 url경로를 설정하고 해당 url에 도달했을 때 보여줄 page component를 등록하여

Next.js는 React 기반 프레임워크이다 React의 핵심 초점 : component, state, props Next의 핵심 초점 : Production을 위한 더 다양한 핵심 기능을 통한 React 사용 강화 SSR(Server Side Rendering

프로젝트를 시작하면서 가장 먼저 페이지들의 구성을 생각하며 라우팅을 해야한다. 라우팅을 하는것이 프로젝트의 틀을 짜는것이기 때문이다.react-router-dom 설치(App.js)버튼이나 글자를 클릭하면 이동할 수 있도록navigate 혹은 navbar를 만들어서 L

yarn start를 하면 실행되는 react 파일은 모두 리액트 이미지가 뜨는데 이 이미지를 바꾸고 싶을 때 하는 방법.react-icon 혹은 다른 사이트에서 원하는 이미지를 f12 누른 후 sgv 태그를 복사해서 sublime text에 붙여넣고 저장sgv to

react에서 대표적인 props중 하나로 children이 있다.이와 같이 children을 props로 받아서 사용하고싶은 부분에 넣어주면 이 Card 컴포넌트를 틀, 컨테이너와 같은 용도로 사용할 수 있다.이런 식으로 이후 Card컴포넌트를 호출하고 그냥 내부에

서버에서 그냥 상품 데이터와, 세일 상품 데이터를 checkbox에 따라 유동적으로 가져오는 코드를 짰다. 우선 데이터를 화면에 뿌릴 코드 작성. ul태그에 products 개수만큼 map함수를 사용하여 화면에 뿌려주게끔 코드 작성 input태그로 checkbox

fetch 혹은 axios를 통해 서버로부터 데이터를 보내거나 가져올 수 있다. 이때 데이터를 요청하는 동안 발생하는 로딩시간동안의 UI, 에러가 발생했을때의 UI를 만들어 보자.로딩, 에러의 상태를 저장할 state 생성로딩 : 서버로 데이터를 요청하는 event가

useState로 상태를 관리하던 중 array/object 자료를 수정, 추가, 삭제할때 중첩 객체와 같이 자료가 복잡해지면 스프레드 연산자를 사용하여 객체를 복사하여 수정, 추가, 삭제와 같은 조작을 했을때 코드가 직관적이지 않고 알아보기 힘들 수 있다. 이를 스프

원래 useState를 사용하여 객체의 값을 변경, 추가, 삭제 등 상태관리를 하다가 useReducer를 활용한 상태관리법을 배웠다.이 useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.초기 person이란 state에 내

이전에 array/object 복사를 할때 원본 보존 복사를 하면서 ...문법을 사용해서 copy본을 만들어서 복사한다\~~ 라는 내용을 정리해놓은 적이 있다. 그리고 오늘 공부하면서 ...문법의 이름과 이전에 배웠던걸 좀 더 응용, 활용할 수 있는 방법을 배워 기록한

새로고침하면 없어지는 일시적인 데이터들을 반영구적으로 저장하기 위해 localStorage를 사용할 수 있다.개발자도구의 localStorage에 어떤 아이템들을 추가, 가져오기, 삭제 등 여러가지 기능이 있다array/object 자료를 JSON을 사용해서 문자형태로

위 코드처럼 return을 사용해서 state를 통채로 바꿔도 되지만 이처럼 state를 직접 수정해도 된다