[React] 설치

🌱 React

✏️개념

• 프런트엔드 프레임워크 중 하나
• 리액트(React), 앵귤러(Angular), 뷰제이에스(Vue.js)

✏️장점

• 페이스 북 개발에 사용한 기술

• 공개 소프트웨어

• 화면 출력에 특화된 프레임워크

• 컴포넌트 조립하여 화면 구성

• 게임 엔진 원리 도입해 화면 출력 속도가 빠름(Virtual Dom)

✏️실습 필수 도구

• 노드 패키지 매니저(npm) : 자바스크립트 라이브러리 관리 프로그램

✏️설치 프로그램

• 웹팩(Web Pack): 프로젝트에 사용된 파일 분석해 기존 웹 문석 파일로 변환하는 도구
• 간단한 노드 기반 웹 서버 구동

✏️환경 설정

• Node.js 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼. 자바스크립트 활용
• 에디터(VS Code)
• 웹 브라우저(파이어폭스)

🌱 Nodejs 설치하기

✏️경로

• https://nodejs.org/en/

• recommanded for most users 설치

• https://github.com/coreybutler/nvm-windows/releases

• Nvm-setup.zip 다운로드

• 설치 후 명령프롬프트에서(관리자 권한으로 실행)

• nvm –v

• nvm install 16.15.1

• nvm use 16.15.1

• node -v

npm이란? : Node Package Manager의 약자이다. NodeJS로 개발된 모듈들을 설치하고 관리해주는 패키지 매니져이다. 우리가 HTML CSS 수업에서 부트스트랩이 필요하면 가져다 썼던 것 처럼 node.js로 만들어진 유용한 모듈들을 가져다 쓰고 관리할 수 있다.

✏️프로젝트 시작하기

• 프로젝트를 설치하고싶은 경로로 먼저 이동하기.

• npx create-react-app 폴더명

• Happy hacking 메시지 나오면 설치 완료

• code .으로 프로젝트 열기

• npm start 으로 프로그램 실행

🌱 SPA

✏️개념

Single Page Application의 준말 즉 페이지가 하나라는 뜻.
하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다.
즉, 새 페이지로 넘어갈때마다 서버에서 HTML CSS JS 소스를 가져올 필요가 없어 새로고침이 필요없다. 따라서 사용자에게 물 흐르듯 끊김없는 웹앱 경험을 선사해줄 수 있다.
단점은 처음에 필요한 리소스를 다 가져와야 해서 초기 구동 속도가 느리다.
리액트는 이런 SPA의 형식.

✏️VS 플러그인 설치

reactjs code snippets

✏️리액트 파일 구조

• node_modules : 해당프로젝트에 대한 라이브러리가 저장
• public : 정적 파일을 넣는 디렉토리(html 파일, img등)
• Src폴더에 코드의 대부분이 들어 감(index.js, 리액트 컴포턴트 같은 js파일, css파일 등)
• Components : pages에서 사용할 컴포넌트들이 들어가 있다.
• pages : app.js 파일에서 react-router-dom을 사용해서 나눈 라우팅의 컴포넌트가 여기에 정리
• src/app.js 파일로 시작

🌱 컴포넌트

• JSX = JavaScript + XML
• 하나의 파일에 자바스크립트와 HTML을 동시에 작성

✏️개념

뷰 - 컨트롤러 - 모델 : 우리는 서로 꼭 붙어 있어야 정상적으로 작동해요.
컴포넌트 : 규격만 맞으면 서로 연결 할 수 있어요.

✏️컴포넌트 만들시 주의사항

• 컴포넌트 이름은 반드시 대문자로 시작
• 컴포넌트와 일반 HTML 태그를 구별하는 방법은 태그가 대문자로 시작하는지 여부
• 소문자로 시작하면 일반 HTML 태그로 분류
• 반드시 첫 글자는 대문자로 함

✏️box값 변경

• props : 함수의 매개변수와 같은 존재

✏️버튼클릭 시 숫자 증가

• state 사용
• 특성 : 비동기

🍃 어려웠던 점 or 해결못한 것

설치에 어려움을 느낌

🍀 해결방법 작성

✏️ 어떻게 해결을 했는가?
✏️ 이렇게 이해를 했다
✏️ 어디까지 이해했지?
✏️ 다음에 시도해볼 방법
설치 방법을 다시 한번 살펴봐야겠다.

🌷 학습 소감

확실히 설치에 많은 어려움이 있는 것 같다.