4.3 Next.js 톺아보기4.3.1 Next.js란?리액트의 SSR 기반으로 작성된 프레임워크 Next.js4.3.2 Next.js 시작하기✅ package.json명령어 및 의존성next 버전 및 타입스크립트에 필요한 @typesESLint 설정✅ next.config.jsnext 의 환경 설정 파일reactStrictMode : 리액트의 엄격 모드 옵션swcMinify : 보다 번들링, 컴파일 빠르게 수행하는 Rust 기반 번들러를 사용할 것인지에 대한 옵션Page Router 기반 ✅ pages/_app.tsxnext 애플리케이션의 페이지 시작점전역 CSS, 전역에서 사용하는 데이터 등 전역에서 공통으로 필요한 옵션 설정하는 파일렌더링이나 라우팅에 따라 서버,클라이언트에서 실행애플리케이션 페이지..

4장 서버 사이드 렌더링4.1 서버 사이드 렌더링이란 ?4.1.1 싱글 페이지 애플리케이션의 세상서버 사이드 렌더링 애플리케이션의 반대 개념인 싱글 페이지 애플리케이션✏️ 싱글 페이지 애플리케이션이란 ?SPA, Single Page Application의 약자렌더링, 라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초 첫 페이지 이후 페이지 전환을 위한 작업이 브라우저, 자바스크립트를 통해 이뤄짐첫 페이지 불러온 이후 서버에서 HTML을 받지 않고 하나의 페이지에서 모든 작업 처리SPA의 HTML 을 보면 body 내부에 내용 X렌더링에 필요한 body 내부의 내용을 자바스크립트 코드로 삽입한 이후 렌더링하기 때문페이지 전환도 새로운 HTML 페이지가 아니라 자바스크립트에서 렌더링..

3장 리액트 훅 깊게 살펴보기Hook클래스 컴포넌트의 생명주기 메서드를 대체하거나, state를 사용할 수 있게 해주는 함수3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수 컴포넌트 내부에서 상태를 정의하고 관리하는 훅✏️useState 구현 살펴보기import { useState } from 'react'const [state, setState] = useState(initialState);useState() 인수로 state의 초깃값 설정아무런 값을 넘기지 않을 경우 초깃값은 undefineduseState의 반환값은 두 개의 요소를 가진 배열을 반환statestate를 변경하는 setStatefunction Component() { const [state, setState] = useS..

2.3 클래스 컴포넌트와 함수 컴포넌트함수 컴포넌트는 리액트 0.14 버전부터 출시했으며, 정적으로 렌더링할 때만 쓰임16.8 버전에서 hook이 등장한 이후 함수 컴포넌트가 주목을 받기 시작클래스 컴포넌트와 함수 컴포넌트의 차이를 살펴보자2.3.1 클래스 컴포넌트클래스 컴포넌트는 React.Component 혹은 React.PureComponent 를 extends 하여 생성📍클래스 컴포넌트의 구조class Welcome extends React.Component { constructor(props) { super(props); this.state = { count: 0, }; this.handleClick = this.handleClick.bind(this); } ..

2장 리액트 핵심 요소 깊게 살펴보기2.1 JSX란 ?페이스북(메타)에서 독자적으로 개발한 자바스크립트 코드 내에 HTML 마크업 코드를 삽입할 수 있도록 돕는 문법But, 리액트에서 종속적이지 않은 독자적인 문법임CDN을 이용해서 자바스크립트에서도 JSX를 사용할 수 있음공식적인 자바스크립트 문법이 아니기 때문에 JSX 코드를 브라우저에서 그대로 실행되면 에러 발생자바스크립트 런타임이 이해할 수 있도록 트랜스파일러를 통해 코드를 변환한 후 실행된다.🔍 JSX의 설계 목적XML 스타일의 트리 구조로 표현하기 위함JSX 주 사용 : 리액트 내부에서 반환하는 HTML과 JS 코드HTML, XML 외에도 다른 구문으로 확장될 수 있도록 설계돼 있음2.1.1 JSX의 정의JSX는 JSXElement, JSXA..

1.6 리액트에서 자주 사용하는 자바스크립트 문법객체의 얕은 동등 비교 문제를 피하기 위해 객체 분해 할당 등 일반적인 자바스크립트 코드에서 잘 사용하지 않는 코드들이 많음리액트의 특징을 이해하기 위해선 자바스크립트 문법에 대한 이해가 기반이 되어야 함모든 브라우저와 자바스크립트 런타임이 항상 새로운 자바스크립트 문법을 지원하지 않음자바스크립트의 최신 문법을 다양한 브라우저에서도 일관적으로 지원할 수 있도록 트랜스파일하는 것이 바벨바벨이 어떻게 최신 코드를 트랜스파일하는지 파악하는 것이 디버깅에 도움될 것1.6.1 구조 분해 할당배열, 객체의 값을 별도의 선언문 없이 바로 분해해서 개별 변수에 바로 할당하는 것을 의미📍 배열 구조 분해 할당예시const arr = [1, 2, 3, 4, 5]const ..

1.3 클래스리액트 16,8 이전 버전까지는 클래스 컴포넌트레거시 코드를 리팩토링하는 경우1.3.1 클래스란 무엇인가 ?JS의 클래스특정 객체를 만들기 위한 일종의 템플릿과 같은 개념특정 객체를 반복적으로 만들기 위해 사용클래스로 하는 모든 것들을 함수로도 동일하게 표현 가능constructor (생성자)객체를 생성하는 데 사용하는 특수한 메서드단 하나의 생성자만 존재하며 생략 가능new 키워드와 함께 객체를 생성하고 초기화하는 함수// Car 클래스 선언 class Car { // 생성자 constructor (name) { this.name = name }}프로퍼티클래스로 인스턴스를 생성할 때 내부에 정의할 수 있는 속성값✨ 인스턴스 (instance) : 생성자 함수를 통해 생성된 객체class..

들어가며왜 리액트인가 ?리액트를 선호하는 이유단방향 바인딩데이터의 흐름이 단방향(부모 → 하위 컴포넌트)장점 : 코드를 이해하기 쉽고, 데이터의 추적과 디버깅이 용이함단점 : 변화를 감지하고 업데이트하는 코드를 매번 작성해야 함리액트의 역사2010년대 프론트엔드 개발 환경을 향한 페이스북의 도전2010년경 JS를 포함한 웹 생태계의 디자인 패턴디자인 패턴 : 어플리케이션 설계 중 자주 발생하는 문제에 대한 모범답안MVC 패턴Model-View-Controller의 약자Model : 정보 및 데이터 관리하는 역할View : 브라우저 화면, 사용자 인터페이스 요소 담당Controller : 사용자 액션에 의해 이벤트 감지하고 처리하는 역할DB에서 필요한 데이터를 불러온 다음, 웹 서버에서 HTML 페이지를 ..