2024/03/02 4

React - 기본 구성 & 문법

React 프로젝트의 폴더들의 역할 node_modules 프로젝트 구동에 필요한 모든 라이브러리를 보관하는 폴더입니다. public 정적인( static ) 파일들을 모아놓는 곳 입니다.( html 파일 이나 이미지 파일 등 ) src 코드를 짜는 곳 입니다.( 모든 소스코드가 여기에 들어갑니다. ) package.json ( 프로젝트 설정 파일 ) 프로젝트의 정보들이 담겨있습니다. 프로젝트의 설정을 변경할 수 있습니다. ( 프로젝트 이름, 버전 등 ) 메인 페이지가 html 파일이 아닌 js 파일인데 문제없이 브라우저에 화면이 보이는 이유 기본적으로 App.js 에 적힌 html 코드들을 index.js 파일이 public 폴더의 index.html 파일로 집어넣어주기 때문에 가능한 것입니다. rea..

JS/React 2024.03.02

React - Vite 세팅하기

터미널에서 프로젝트 생성하기 https://ko.vitejs.dev/guide/ vite 프로젝트 생성 명령어 # npm npm create vite@latest # yarn yarn create vite # pnpm pnpm create vite react 프로젝트 생성하기 # create-vite에서 제공하는 템플릿들을 사용하면 쉽게 프로젝트를 생성할 수 있습니다. # react의 경우 react, react-ts, react-swc, react-swc-ts 등이 있습니다. # (vue의 경우에는 vue, vue-ts로 생성합니다.) # npm 6.x # npm create vite@latest [프로젝트명] --template [사용할 템플릿] npm create vite@latest my-reac..

JS/React 2024.03.02

React - CRA 세팅하기

먼저 React 를 셋팅하기전에 먼저 node.js 가 필요합니다. node.js 설치하기: https://www.notion.so/shin96bc/Mac-OS-f0217a5c0baa40bba370f0545932c905 명령어로 프로젝트 생성하기 임의의 폴더를 하나 만들고 터미널을 켜서 그 폴더의 경로로 이동합니다. 아래의 명령어를 입력합니다. npx create-react-app 프로젝트명 # ts를 사용하는 경우 npx create-react-app 프로젝트명 --template typescript IntelliJ 사용 File -> new -> project 아래의 사진처럼 세팅해줍니다. 생성할 프로젝트의 이름 리액트 프로젝트를 생성할 위치 웹이면 React, 앱이면 React Native node..

JS/React 2024.03.02

React란?

React란? React 공식홈페이지에서는 React를 사용자 ‘인터페이스 구축을 위한 JavaScript 라이브러리’라고 설명하고 있습니다. 즉, React는 Application이 아니라 그중에 일부인 UI만을 담당하고 있다는 사실을 알 수 있습니다. React는 철저하게 UI만을 다루기 때문에 React Application을 만들기 위해 필요한 나머지 부분들은 third-party library로 만들어졌고, React Application은 React와 함께 third-party library를 사용하여 구현합니다. Why React? Web 사이트를 인스타그램 등의 App처럼 새로고침없이(페이지를 이동할 때 화면이 깜빡이는 현상) 부드럽게 동작하는 Single Page Application 으..

JS/React 2024.03.02