리액트
프런트엔드 프레임워크 중 하나
리액트(react), 앵귤러(angular), 뷰제이에스(vue.js)
공개 소프트 웨어
화면 출력에 특화 = 페이스북 개발에 사용한 기술
컴포넌트를 조립하여 화면 구성
게임 엔진 원리를 도입하여 화면 출력 속도가 빠름(Virtual DOM)
Node.js 설치하기
Node.js : 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼, 작성언어로 자바스크립트 활용
첫번째 방법 : https://nodejs.org/en/ 에서 대체로 안정적인 버젼을 받음
두번째 방법 : https://github.com/coreybutler/nvm-windows/releases 에서 nvm-setup.zip 다운
-> 명령 프롬프트 관리자 권한으로 실행 후 nvm -v 으로 버젼확인
-> nvm install 16.15.1 (현재 시점 안정적인 버젼)
nvm use (버젼이름) : 원하는 버젼 사용하기
node -v : 노드 버젼확인
npm -v :
cd\ : 가장 상위 경로로 가게 됨
프로젝트 시작하기
- 경로로 이동
- npx create-react-app 폴더명 -> happy hacking나오면 성공
- code . : 프로젝트 열기(VSC가 실행됨)
- npm start : 프로그램 실행
리액트 파일 구조
node_modules : 해당 프로젝트의 라이브러리를 저장해놓은 것
node_modules : 해당프로젝트에 대한 라이브러리가 저장
public : 정적 파일을 넣는 디렉토리(html 파일, img등)
Src폴더에 코드의 대부분이 들어 감(index.js, 리액트 컴포턴트 같은 js파일, css파일 등)
Components : pages에서 사용할 컴포넌트들이 들어가 있다.
pages : app.js 파일에서 react-router-dom을 사용해서 나눈 라우팅의 컴포넌트가 여기에 정리
src/app.js 파일로 시작
public폴더의 index.html은 결국 src폴더의 app.js파일을 작동시키는것
하나의 div로 요소들로 묶여있어야함(body태그처럼)SPA
Single Page Application의 준말 즉 페이지가 하나라는 뜻이다. 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다. 즉, 새 페이지로 넘어갈때마다 서버에서 HTML CSS JS 소스를 가져올 필요가 없어 새로고침이 필요없다. 따라서 사용자에게 물흐르듯 끊김없는 웹앱 경험을 선사해줄 수 있다.
단점은 처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느리다.
리액트는 이런 SPA의 형식이다.컴포넌트
JSX = JavaScript + XML
하나의 파일에 자바스크립트와 HTML을 동시에 작성
만들시 주의사항
컴포넌트 이름은 반드시 대문자로 시작
컴포넌트와 일반 HTML 태그를 구별하는 방법은 태그가 대문자로 시작하는지 여부
소문자로 시작하면 일반 HTML 태그로 분류
반드시 첫 글자는 대문자로 함
VSC에서 rcc 입력해 기본 틀 불러올 수 있음
<컴퍼넌트이름/>로 코드 사용
VSC 플로그 인
reactjs code snippets
소감
코드가 어렵다기보다 실행할때 에러가 많이 발생해서 어려움을 느꼈었던 것 같다. 코드는 오타만 수정하면 되지만, 에러가 발생하면 혼자서 해결못한다는게 너무 커서 스트레스 받았던 것 같다.
