프론트엔드184 리액트의 기본 3요소 (Virtual DOM, JSX, 컴포넌트) 최종 수정 : 2024-06-01리액트의 기본 3요소1. Virtual DOM# 패키지리액트 프로젝트는 항상 react와 react-dom 패키지가 필요하다.react : 리액트 앱이 동작하는 환경과 무관하게 공통으로 사용하는 기능을 제공한다.react-dom/client 등의 렌더러 : 앱이 동작하는 환경(플랫폼)에 종속적인 기능을 제공하는 데 특화된 패키지CSR(client-side rendering) 방식으로 동작하는 앱 : react와 react-dom/client 패키지 조합SSR(server-side rendering) 방식으로 동작하는 앱 : react와 react-dom/server 패키지 조합 react와 렌더러 패키지의 경계에는 가상 DOM이라는 메커니즘이 자리 잡고 있다. 가상 DOM.. 2024. 6. 1. 개발 모드 / 빌드 모드 / 웹팩(webpack) 최종 수정 : 2024-06-01개발 모드프로젝트를 개발할 때 사용하는 모드npm run start개발 모드는 빌드 모드와 달리 명령이 종료되지 않고 계속 동작한다. 이는 npm start 명령으로 동작한 react-scripts start가 내부적으로 웹팩을 서버 형태로 구동하기 때문이다. # 개발 모드로 실행할 떄의 웹팩react-scripts start 명령으로 실행된 웹팩 서버는 리액트 프로젝트 디렉터리의 파일들을 빌드하여 번들 파일로 만든다.이를 반영한 index.html 파일을 생성한다.react-scripts가 웹 브라우저를 실행하고 http://localhost:3000 주소로 접속한다.웹팩이 준비해 둔 index.html에서 태그의 자바스크립트 코드를 실행해 웹 페이지를 화면에 보여 준.. 2024. 6. 1. 프론트엔드 웹 개발 / 리액트 최종 수정 : 2024-06-01프론트엔드 개발웹 브라우저를 대상으로 사용자에게 보여지는 부분을 자바스크립트 언어로 작성하는 것을 의미한다.리액트 (React) 2013년에 페이스북에서 발표한 오픈소스 자바스크립트 라이브러리이다. 가상 DOM(document object model)과 JSX(JavaScript XML)라는 새로운 방식으로 동작한다. 오직 뷰(View)만 신경쓰며, 사용자 인터페이스를 만드는 데 사용된다.어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라그냥 기존 뷰만 날려 버리고 처음부터 새로 렌더링 하는 방식이렇게 하면 애플리케이션 구조가 매우 간단하고, 작성해야 할 코드양도 줄어든다. 그저 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 .. 2024. 6. 1. Next.js의 정해진 함수(SSG, SSR) 최종 수정 : 2024-05-31 정적 생성과 서버사이드 렌더링은 같이할 수 없다.서버사이드 렌더링해야 하는 경우 외에는, 정적 생성 전략으로 적용하는 것이 좋다.정적 생성(Static Generation)프로젝트를 빌드하는 시점에 미리 HTML을 렌더링하는 것을 말한다. 기본적으로 Next.js에서는 모든 페이지를 정적 생성한다. # 함수getStaticProps()정적 생성할 때 필요한 데이터를 받아와 렌더링 하고 싶을 때 사용하고 export 하면 된다. 객체의 props 프로퍼티를 넘겨줄 Props 객체를 지정하고, 이것을 페이지 컴포넌트에서 사용할 수 있다.export async function getStaticProps() { const res = await axios('/products/'.. 2024. 5. 31. Next.js 개발모드, 빌드, 실행 그리고 배포 최종 수정 : 2024-05-31개발모드, 빌드, 실행 그리고 배포# 개발 모드 켜기개발 모드이기 때문에 새로고침 없이도 수정 사항을 그때마다 확인할 수 있다.npm run dev# 빌드(Build)하기Next.js 프로젝트를 배포하려면 우선 실행 가능한 형태로 코드를 변환한 다음에, 서버에서 실행해야 한다. 이때 코드를 변환하는 과정을 '빌드'라고 한다.npm run build명령어를 입력하면 .next/ 폴더에 실행에 필요한 파일들이 생성된다.# 실행하기빌드를 마쳤다면, 실행할 수 있다.npm run start (= npm start) Q. npm run dev - npm run startnpm run dev : 개발 모드에서 Next.js를 실행하므로 소스 코드가 바뀌면 바로 반영된다. npm ru.. 2024. 5. 31. 이전 1 ··· 4 5 6 7 8 9 10 ··· 37 다음
