1) 학습한 내용

1.리액트

: 프런트엔드 프레임워크 중 하나

개념

-페이스북 개발에 사용한 기술
-공개 소프트웨어
-화면 출력에 특화된 프레임워크

장점

-컴포넌트를 조립하여 화면 구성
-게임 엔진 원리를 도입하여 화면 출력 속도가 빠름

(1)Nodejs 설치

Node.js : 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼

npm : Node Package manager의 약자
NodeJS로 개발된 모듈들을 설치하고 관리해주는 패키지 매니저
①https://github.com/coreybutler/nvm-windows/releases 에서 nvm-setup.zip 다운

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

nvm –v

nvm install 16.15.1

nvm use 16.15.1

node -v

③프로젝트 설치하기
(프로젝트를 설치하고싶은 경로로 먼저 이동하기)

npx create-react-app 폴더명​

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

④프로젝트 열기

code .

⑤터미널에 npm start를 입력해 실행시키기

(2)SPA

: Single Page Application

• 페이지가 하나라는 뜻
• 하나의 페이지 안에서 자바스크립트가 필요한 페이지나 정보만 동적으로 그려준다.
• 리액트는 SPA의 형식

2.Visual Studio Code 플러그인 설치

마켓플레이스에서 reactjs code snippets 설치

3.컴포넌트

JSX = JavaScript + XML

-하나의 파일에 자바스크립트와 HTML을 동시에 작성
-컴포넌트 이름은 반드시 대문자로 시작

-> 컴포넌트 이용하면 코드간결, 재사용성이 높아짐

결과

2) 학습내용 중 어려웠던 점

jsx 파일을 작성할 때 rcc로 코드 작성하는 것을 놓쳐서 따라가기 어려웠다.

3) 해결방법

다른 교육생분께서 알려주셔서 해결하였다.

4) 학습소감

명령프롬포트에 명령어를 입력하여 프로그램을 다운받고 실행하는게 익숙하지 않았지만 천천히 따라해서 결과가 나오는 것을 보니 재밌었다.