당연한 개발자가 되자

State 란 무엇인가 자료를 잠깐 저장할 때는 변수를 사용하면 됩니다. 리액트에는 자료를 잠깐 저장할 때 변수 말고도 State 라는 문법이 존재합니다. State를 선언하는 법 State 를 사용하고 싶을 때는 이렇게 뽑아내서 사용합니다. 뽑아내서 사용할 때는 대괄호 안에 왼쪽에 있는 이름( 여기서는 a )은 State 의 실제 자료 즉, ’남자 코드 추천’ 이 됩니다. 대괄호 안에 오른쪽에 있는 이름은 State 변경을 도와주는 함수입니다. State 를 뽑아내서 사용할 때 사용하는 대괄호 문법은 js 의 Destructuring 문법입니다. Destructuring( 디스트럭처링) 문법이란 배열( array ) 에 있는 값을 따로 변수로 빼서 쓰고 싶을 때 사용하는 문법입니다. 변수와 비슷한데 왜..

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

터미널에서 프로젝트 생성하기 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..

먼저 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..

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 으..