분류 전체보기

NextJS에서 아래와 같이 anchor tag를 사용하여 페이지 이동 할 수 있다. 하지만, 이상적인 방법이 아니다. anchor tag를 사용하여 페이지 이동을 할 경우, 크롬 브라우저의 왼쪽 상단에 있는 새로고침 버튼이 잠깐 X로 변경되었다가 다시 돌아온다. 이는 완전히 새로고침된다는 신호이다. 새로고침이 된다는 것은 새로운 페이지가 backend에서 다운로드 된다는 신호이다. 이는 더 이상 SPA가 아니라는 뜻이다. 앞서 NextJS에서는 콘텐츠가 BackEnd에서 랜더링 된다는 것을 배웠다. 하지만, NextJS의 가장 훌륭한 점은 URL를 입력하는 것과 같이 처음 페이지를 방문할 때는 서버에서 랜더링 되고, 이미 페이지에 진입해 있다면 NextJS에서 제공하는 Link를 사용하여 SPA방식으로..

https://codesmoothie.tistory.com/30 [React] Render의 진짜 의미와 동작 원리 https://codesmoothie.tistory.com/29 [React] Component가 Instance, Element로 변화는 과정 Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이 codesmoothie.tistory.com 지난 포스팅 '[React] Render의 진짜 의미와 동작 원리'에서 연결되는 글입니다. State의 메카니즘(Mechanics)에 대한 잘못된 상식 React에서 랜더링이 어떻게 동작하는지 알기 전에 먼저 State의 메카니즘에 대해서 알아보자. 일반적으로 화..

ES11(ECMAScript2020)에서 도입된 null 병합(nullish coalescing) 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. // 좌항의 피연선자가 null 또는 undefined이면 우항의 피연산자를 반환하고, 그렇지 않으면 좌황의 피연산자를 반환한다. var foo = null ?? 'default string'; console.log(foo); // "default string" null 병합 연산자 ??는 변수에 기본값을 설정할 때 유용하다. null 병합 연산자 ??가 도입되기 이전에는 논리 연산자 ||을 사용한 단..

https://codesmoothie.tistory.com/29 [React] Component가 Instance, Element로 변화는 과정 Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이루어져 있다. 하지만, 해당 함수는 최종적으로 React Element를 return하고 Tre codesmoothie.tistory.com 해당 글은 "[React] Component가 Instance, Element로 변화는 과정" 포스팅에서 연장되는 글입니다. 이해되지 않는 개념이 있다면 앞선 블로그를 정독하는 것을 권장합니다. 학습 영역 지난 포스팅에서 Component와 인스턴스 생성 그리고 그것이 화면의 UI로 ..

Component 리엑트에서 컴포넌트(Component)는 UI 블럭(조각)을 기술(설명)하는 곳이다. 컴포넌트는 정규 자바스크립트 함수로 이루어져 있다. 하지만, 해당 함수는 최종적으로 React Element를 return하고 Tree를 구성하게 된다. 일반적으로 JSX 문법으로 이러한 element를 작성하게 된다. 컴포넌트는 청사진 또는 템플릿에 가깝다. 하나의 템플릿(컴포넌트)으로 리엑트는 1개 또는 그 이상의 컴포넌트 인스턴스를 생성할 수 있다. Component Instance React는 컴포넌트를 사용할 때 인스턴스를 생성한다. 만약, Tab이라는 컴포넌트를 1번 정의하고, 3번 사용했다면 컴포넌트 트리에 3개의 인스턴스 트리를 구성하게 된다. 즉, 컴포넌트 인스턴스는 함수로 작성한 코드..

https://codesmoothie.tistory.com/27 지난번 포스팅에서 자바스크립트의 엔진과 런타임에 대해서 알아보았다. 이번 포스팅에서는 자바스크립트의 실행 컨텍스트와 콜 스택이 어떻게 동작하는지 살펴보자. 실행(Execution) 컨텍스트(Contexts)란 무엇인가? 이제 막 컴파일링 끝난 기계 코드가 있다고 가정해보자. (컴파일에 대한 개념은 지난 포스팅 참조) 그 직후 코드는 실행(Execution)할 수 있는 준비를 마치게 되며, 상위 레벨 코드(top-level code)를 위한 Global execution context를 생성한다. 여기서 상위 레벨 코드란 어떠한 함수에도 들어가지 않는 코드를 의미한다. 다시 말해, 자바스크립트 엔진이 코드를 실행할 때 처음에는 함수 밖에 있는..

https://codesmoothie.tistory.com/26 [Javascript] 자바스크립트란 어떤 언어인가? 자바스크립트란? 자바스크립트로 한 줄로 간략하게 정의하면 아래와 같다. Javascript is a high-level, object-oriented, multi-paradigm programming language. 상기의 정의는 100% 맞는 말이지만 빙산의 일각에 불과하 codesmoothie.tistory.com 지난 블로그에서 자바스크립트란 어떤 언어인지 전체적으로 알아보았다. 그렇다면 자바스크립트 엔진이란 무엇일까? 자바스크립트 엔진(Engine) 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램이다. 모든 브라우저 자체에 자바스크립트 엔진이 존재한다. 가장 잘 알려진 ..

자바스크립트란? 자바스크립트로 한 줄로 간략하게 정의하면 아래와 같다. Javascript is a high-level, object-oriented, multi-paradigm programming language. 상기의 정의는 100% 맞는 말이지만 빙산의 일각에 불과하다. 조금 더 자세하게 정의하자면 아래와 같다. Javascript is a high-level, prototype-based, object-oriented, multi-paradigm, interpreted or just-in-time compiled, dynamic, single-threaded, garbage-collected programming language with first-class functions and a non..

NextJS vs 순수 React 페이지 소스코드 비교 NextJS 14 프로젝트를 생성하고 'npm run dev'로 실행해보자. 그 후 페이지 소스를 확인해보면 아래의 스크린샷과 같이 실제 소스 콘텐츠를 볼 수 있다. 이는 화면에 표시는 정보가 그대로 NextJS에 나타난 다는 것이다. 하지만, 순수 React 앱에서는 이렇게 나오지 않는다. CRA 후 소스코드를 검사해보면 아래와 같이 빈 페이지와 스크립트만 나오며 실제 콘텐츠를 나타나지 않는다. 이러한 차이점이 발생하는 이유를 알기 위해서는 NextJS와 순수 React간의 랜더링 과정 차이를 이해해야 한다. 순수 React의 랜더링 과정 순수 React는 클라이언트 사이드 랜더링을 활용한다. 즉, React는 클라이언트 사이드 자바스크립트 라이브..

NextJS 프로젝트 생성 NextJS의 공식 홈페이지에 접속하면 최신 버전의 NextJS를 생성할 수 있는 명령어가 나온다. 터미널에서 프로젝트 생성을 원하는 폴더로 이동 후 'npx create-next-app@latest'를 입력하자. 입력하면 아래의 그림과 같이 Project 이름을 설정하는 화면이 나타난다. 원하는 이름을 설정하자. 프로젝트 설정을 하면 Yes or No로 몇가지 질문이 나타난다. 다음 타입스크립트 설정을 할 것인가 물어본다. (Yes) ESLint를 설정 할 것인가 물어본다. (Yes) Tailwind CSS를 설정할 것인가 물어본다. (NextJS 자체에 다양한 스타일이 존재하여 Tailwind에 전문가가 아니라면 비추천, Yes) 'src/' directory를 사용할 것인..