학습한 내용

React(리액트)

프런트엔드 프레임워크 중 하나
React, angular, vue.js 등이 있다

리액트 개념 및 장점

페이스 개발에 사용한 기술
공개 소프트웨어
화면 출력에 특화된 프레임워크
컴포넌트를 조립하여 화면 구성
게임 엔진 원리를 도입하여 화면 출력 속도가 빠름(Virtual DOM)

리액트 개발 환경 설치

Node.js (필수) : 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼
작성 언어로 자바스크립트를 활용
노드 패키지 매니저(npm) : 자바스크립트 라이브러리 관리 프로그램

Node.js 설치

node.js 홈페이지에서 실행파일을 다운로드 하고, 설치를 진행한다

nvm 설치

nvm 다운로드 깃허브 에서 nvm.setup.zip을 다운로드 한다
압축파일 안에 있는 실행파일을 실행하여 설치를 진행한다

프로젝트를 저장할 작업 장소 구축
생성한 폴더로 설치경로를 지정한다
cmd를 열어서 nvm 버전을 확인하고, 설치가 제대로 되었는지 확인한다
Node.js 버전도 확인한다
npm 버전도 확인한다
nvm을 설치할 때 만들었던 폴더에 project폴더를 생성한다
cmd 창에서 cd 명령어(현재 위치 이동)를 이용하여 현재 위치를 React폴더로 설정하고,
npx create-react-app project 명령어로 프로젝트 설치를 진행한다
Happy hacking! 문구가 뜨면 정상적으로 설치가 진행된 것이다
프로젝트가 설치된 모습
npm start 명령어를 입력하면 웹 브라우저에 프로젝트가 실행된다
그리고, code . 명령어를 입력하면 VSCode가 실행되고, React 폴더가 보인다

React 파일 구조

node_modules : 해당프로젝트에 대한 라이브러리가 저장
public : 정적 파일을 넣는 디렉토리( html 파일, img등 )
Src폴더에 코드의 대부분이 들어 감
( index.js, 리액트 컴포턴트 같은 js파일, css파일 등 )

index.html파일을 열어보면 실질적으로 내용이 비어있다
웹 페이지를 구동 할 때 페이지의 내용물이 태그로 주어지는데 React는 root라는 요소를 가져와 render ( 기존의 화면에 변화가 있는 부분을 덮어씌움 ) 한다
render문을 보면 App 을 동작한다고 나와있다
이 App은 App.css 요소를 가진 JS로 이루어져있다

SPA

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

어려운 내용

설치 명령어를 입력해도 설치 진행이 안되거나 오류가 나는 등 어려움이 있었다

해결방법

명령어를 정확하게 입력했는지, 설치 경로는 올바른지 확인한다

학습소감

이번 시간에는 React 작업 환경을 세팅해보았다
새로운 작업 환경을 구축하는 작업이라 설치하는 것도 많았고, 처음 경험해보는 도구라서 사용방법도 잘 모르겠지만,
앞으로 여러가지 실습을 해나가면서 얼른 익숙해지는 것이 중요하다고 생각한다