React 시작

React Framework

- front-End

- SPA(Single Page Application) > 데이터 비용절감, 반응속도 향상

- 반복 사용되는 페이지의 일부분을 모듈화(컴포턴트)하여 재사용 > 개발시간 단축, 유지보수성

- html, css, javascript

- 개발 편의를 위해 Node.js 기반 개발환경 사용

- Node.js : Server side Javascript

- JSX 스크립트 : Javascript + XML

- 프로젝트 생성시 로컬 웹서버도 내장(포트 3000)

- 개발완료 > Build > 웹표준 파일 생성 > 개발환경 이외에도 사용

개발환경 구성

- Node.js 설치 (https://nodejs.org/en/download/, OS별로 구분하여 다운로드 및 설치)

- Visual Studio Code 에티터 설치 (https://code.visualstudio.com/donwload)

npm -v

npm init reat-app my-app

cd my-app

npm start

Grid 정렬

.container { display : grid ; gap : 22px ; width : 1000px ; grid-template-columns : repeat ( auto-fit , 150px ); margin : auto ; justify-content : center ; } .container { display : grid ; gap : 22px ; grid-template-columns : repeat ( auto-fit , minmax ( 250px , 1fr )); }