React-study28 [모던리액트 Deep Dive] 11장 Next.js 13과 리액트 18 11.1 app 디렉터리의 등장Next.js 12버전까지는 페이지 공통 레이아웃을 유지하려면 _app을 사용하는 것이 유일했다. 이 방식은 제한적이고 각 페이지별로 다른 레이아웃을 유지하는 방법이 부족했다. 이를 극복하기 위해 나온 것이 app 레이아웃이다./** @type {import('next').NextConfig} */const nextConfig = { reactStrictMode: true, experimental: { appDir: true, //이 옵션을 experimental 아래에서 활성화해야 한다. },}module.exports = nextConfig Next.js 13.4.0 버전 이하라면 next.config.js에 위와 같이 옵션을 활성화해야 app기반 라우팅을 사용할 수 .. 2024. 12. 10. [모던 리액트 Deep Dive] 10장 리액트 17과 18의 변경 사항 살펴보기 10.1 리액트 17 버전 살펴보기리액트 17버전은 16버전에서 더 추가된 기능은 없고 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화했다는 점이 가장 큰 특징이다. 10.1.1 리액트의 점진적인 업그레이드16에서 더 이상 호환되지 않는 API가 있거나 새로운 리액트 17을 사용하는 데 있어 이전과 작동 방식이 달라질 수 있기 때문에 단행된 주 버전 업데이트다.전체 애플리케이션 트리는 리액트17이지만 일부 트리와 컴포넌트에 대해서는 리액트18을 선택하는 점진적인 버전 업이 가능해진다. 한 애플리케이션 내에 여러 버전의 리액트가 존재하는 경우 예제 659p리액트 17 애플리케이션은 내부에서 리액트 16을 게으르게(lazy) 불러온다.불러오는 과정에서 리액트 16을 위한 별도의 루트 요소를 만.. 2024. 12. 9. [9장 발표] 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 9.1 Next.js로 리액트 개발 환경 구축하기 9.1.1 create-next-app 없이 하나씩 구축하기npm init//package.json을 만드는 CLI를 실행할 수 있다.npm i react react-dom next//핵심 라이브러리인 react, react-dom, next 설치npm i @types/react @types/react-dom eslint eslint-config-next typescript --save-dev//devDependencies에 필요한 패키지를 설치 9.1.2 tsconfig.json 작성하기 9.1.3 next.config.js 작성하기poweredByHeader- 보안 취약점으로 취급되는 헤더를 제거한다.- 웹서버에서 사용되는 프로그램 엔진 정보가 노출될.. 2024. 12. 8. [모던 리액트 Deep Dive] 9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 보호되어 있는 글 입니다. 2024. 12. 5. [모던리액트 Deep Dive] 7장 크롬 개발자 도구를 활용한 애플리케이션 분석 7.1 크롬 개발자 도구란? 크롬에서 제공하는 개발자용 도구로, 웹페이지에서 일어나는 거의 모든 일을 확인할 수 있다.시크릿 모드 또는 프라이빗 모드에서 개발자 도구를 여는 것이 좋다. 브라우저에 설치돼 있는 각종 확장 프로그램이 실행되지 않기 때문이다.7.2 요소 탭현재 웹페이지를 구성하고 있는 HTML, CSS 등의 정보를 확인할 수 있다.7.2.1 요소 화면왼쪽 화면은 웹페이지를 구성하는 HTML을 나타낸다.원하는 태그를 클릭하면 브라우저 페이지의 해당 요소가 강조되고, 해당 태그와 관련된 정보를 확인할 수 있다.직접 코드를 수정하여 웹페이지에서 어떻게 보이는지 바로 확인할 수 있다.우클릭으로 중단 위치를 설정해 두면 중단과 관련된 작업이 일어날때 마다 브라우저가 렌더링을 중단하고 해당 요소 변경.. 2024. 11. 20. [모던 리액트 Deep Dive] 6장 리액트 개발 도구로 디버깅하기 6.1 리액트 개발 도구란?리액트 애플리케이션의 개발 도구인 react-dev-tools가 있다. 브라우저에 리액트 개발도구를 브라우저 확장 도구로 설치하여 사용할 수 있다. 설치하면 우측 상단에 리액트 로고가 표시돼있는데 회색이면 사용할 수 없고, 빨간색이면 정상 작동, 파란색이면 배포된 웹사이트도 사용할 수 있다는 뜻이다.6.2 리액트 개발 도구 설치https://ko.react.dev/learn/react-developer-tools React Developer Tools – ReactThe library for web and native user interfacesko.react.dev 6.3 리액트 개발 도구 활용하기6.3.1 컴포넌트 Components현재 리액트 애플리케이션의 컴포넌트 트리를.. 2024. 11. 18. [모던리액트 Deep Dive] 5장 발표자료 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.웹 서비스에서 보여지는 거의 모든 부분을 이 상태로 관리한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장리액트처럼 SPA의 경우, 하나의 페이지로 앱을 다뤄야 하다보니 단 하나의 Controller가 여러가지 View와 Model을 관리하면서 복잡해졌다.한 View에서 일어난 상호작용 때문에 여러 Model이 변경되거나, 그 반대의 일이 벌어지는 부수효과도 여러 발생하여 어디서 발생한건지 추적이 어렵다보니 유지보수에도 안 좋다.양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함.. 2024. 11. 15. [모던리액트 Deep Dive] 5장 리액트와 상태 관리 라이브러리 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장 양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함Action -> Dispatcher -> Model -> View 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미한다. 액션 타입과 데이터를 각 정의해 dispatcher로 전달한다.디스패처(dispatcher) : 콜백 함수 형태로 액션이 정의한 타입과 데이터를 모두 store로 보내는 역할을 한다.스토어(store) : 실제 상태의 값과 상태를 변경할 수 있는 메서드를 가지고 있다.뷰(view) : 리.. 2024. 11. 14. [모던 리액트 Deep Dive] 3장 리액트 훅 깊게 살펴보기 3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import { useState } from "react";const [state, setState] = useState(initialState); initialState에는 state의 초깃값을 넘겨준다. 아무런 값이 없으면 undefined다.useState 훅의 반환 값은 배열이며, 배열의 첫번째 원소로 state 값 자체를 사용할 수 있고, 두번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있다.useState의 클로저는 useState 내부에 선언된 함수(setState)가 함수의 실행이 종료된 이후에도(useState가 호출된 .. 2024. 11. 10. [모던 리액트 Deep Dive] 2장 리액트 핵심 요소 깊게 살펴보기 2.1 JSX란2.1.1 JSX의 정의JSX는 자바스크립트 표준이 아닌 페이스북 팀에서 만든 새로운 규칙이며, 반드시 자바스크립트 코드로 변환되어야 한다.JSX의 목표는 JSX 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성해 두고, 이 JSX를 트랜스파일이라는 과정을 거쳐 자바스크립트가 이해할 수 있는 코드로 변경하는 것이다. JSX는 JSXElement, JSXAttributes, JSXChildren, JSXString 네 가지로 구성되어 있으며, 개발자는 이는 확장성이 용이하게 디자인된 문법으로 이해할 필요가 있다 .JSXOpeningElementJSXClosingElementJSXSelfClosingElementJSXFragmentchildren 사용자가 컴포넌트를 만들어 사용할 때에는 반.. 2024. 11. 6. [모던리액트 Deep Dive] 1장 리액트 개발을 위해 꼭 알아야 할 자바스크립트 리액트와 자바스크립트리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리로, 웹 애플리케이션을 더 쉽고 빠르게 개발할 수 있도록 도와준다. 리액트는 UI를 컴포넌트라는 독립적인 단위로 구성하여 코드의 재사용성과 관리 편의성을 높인다.자바스크립트는 웹 브라우저에서 실행되는 프로그래밍 언어이다. 우리가 웹 페이지에서 상호작용하는 기능들을 구현할 수 있게 해준다. 예를 들어, 버튼을 클릭했을 때 뭔가가 일어나게 하는 것이 자바스크립트를 통해 가능한 것이다.1.1 자바스크립트의 동등 비교와 데이터 타입자바스크립트에서 동등 비교는 리액트의 가상 DOM과 실제 DOM 비교, 렌더링판단, 메모이제이션등 여러 작업의 기초이므로 중요하다.모든 값은 데이터 타입을 가지며, 원시 타입과 객체 타입으로 나뉘고, .. 2024. 11. 5. [발표] useTransition과 useDeferredValue useTransition란복잡하거나 오래 걸리는 작업을 하는 동안 웹사이트가 부드럽게 작동할 수 있도록 돕는 도구로비동기 작업을 효율적으로 관리한다. useTransition 사용 방법1. 기본 사용법isPending : 현재 어떤 작업이 진행 중인지를 나타내는 값. 작업이 진행중이면 'true', 아니면 'false;.startTransition : 비동기 작업을 시작하는 함수. 이 함수 안에서 오래 걸리는 작업을 수행하면 된다.import React, { useState, useTransition } from 'react';function ExampleComponent() { const [isPending, startTransition] = useTransition(); const [data, .. 2024. 6. 25. 이전 1 2 3 다음
