이제 과정에 어떤 내용이 있는지 확인했고
과정은 완료하기 위해 어떤 경로를 선택할지 알고
이 내용을 최대한으로 활용하는 방법을 알기 때문에
드디어 리액트 강의를 시작합니다
먼저 리액트 코드부터 배우도록 하겠습니다
일반적으로 그 코드를 작성할 수 있는
리액트 프로젝트가 필요합니다
다음 강의에서 리액트 코드 작성과
필요한 리액트 기능을
배우게 되겠지만
이 강의에서 리액트 프로젝트를
생성하는 방법을 보여주고자 합니다
시작하기 가장 빠른 방법은
리액트 코드를 작성하는 것입니다
먼저 검색창에 react.new를 입력하고
엔터를 치면
새로운 리액트 프로젝트 작업공간이 생성됩니다
CodeSandbox하는 웹사이트를 통해
브라우저 내에서 개발환경이 이뤄집니다
별도의 프로그램 설치 없이도
파일에 작업을 하거나 코드를 작성하여
개발 중이 웹사이트를 미리보며 작업이 가능합니다
빠르게 시작하기
매우 편하고
회사 컴퓨터를 사용해서
관리자 권한이 없어
소프트웨어 설치가
불가능할 경우에도
사용 가능합니다
이 과정에 전반적으로
모든 섹션에
CodeSandbox를 사용하는
시작 프로젝트를 제시하여
별도의 설치 없이
수업의 내용을 따라갈 수 있는
환경을 사용할 수 있습니다
물론 CodeSandbox 대신
컴퓨터에 설치된 리액트 프로그램을 선호할 수 있습니다
본인의 기기에 설치된 소프트웨어로
리액트 프로젝트를 생성할 경우
본인이 원하는 환경을 설정하고
여러분이 선호하는 코드 편집기를
사용할 수 있다는 장점이 있습니다
예시로 Visual Studio Code가 있습니다
아주 인기가 많은 무료 프로그램으로
주요 운영체제 모두에서 사용이 가능하므로
이 과정에서 로컬 프로젝트를
사용한다면
추천하는 코드 편집기입니다
이 코드 편집기는
여러분이 원하는대로 설정할 수 있고
확장 프로그램도 설치하여
개발을 편리하게 할 수 있어
CodeSandbox 같은 웹기반 프로젝트 보다
로컬 프로젝트를 선호 할 수 있습니다
그러나 로컬 프로젝트를 사용할 경우
nodejs.org에서 NodeJS를 설치해야 합니다
그 웹사이트에서 가장 최신 또는 LTS 버전을 다운 받을 수 있으며
여러분이 원하는 것을 선택하셔도 됩니다
이 과정은 NodeJS 과정이 아니므로
이 수업에서 NodeJS 코드를 작성하지 않지만
Vite와 같은 로컬 리액트 프로젝트를 생성하는
여러가지 도구는
NodeJS를 사용하므로
필요합니다
이와 마찬가지로
로컬 리액트 프로젝트를 생성하기 위해
다양한 도구를 사용할 수 있습니다
가장 인기 많은 Vite가 있고
'리액트 프로젝트 생성'을 검색하면
Create React App 같은
프로그램도 찾을 수 있어
리액트 프로젝트 생성을 위해
사용할 수 있는 또 다른 도구입니다
둘 다 마지막에 새로운 작업물을 생성할 수 있는
간단한 명령을 제안합니다
예를들어 Vite를 사용할 경우
NodeJS 설치 후 명령 프롬프트 또는 터미널에
creat vite@latest를 실행해야 하는데
몇 가지 질문이 보일 것입니다
이 중 원하는 것을 골라
리액트 작업물을 생성할 수 있습니다
그 후 원하는 코드 편집기에 실행할 수 있는
작업물이 생성됩니다
조금 전에 언급한 Visual Studio Code와 같은
편집기에서 코딩을 시작할 수 있습니다
로컬 작업에 관해 한 가지 염두해야 할 것은
작업물을 완료할 때
리액트 라이브러리 패키지와 같은
작업물에 사용된 추가 패키지를 설치하기 위해
npm install을 실행해야 합니다
Vite에서 작업 할 경우
'npm run dev'를 터미널에서 실행하여
개발 서버를 생성해
작업 중인 웹사이트를
미리 확인 할 수 있습니다
또 코딩 작업 중에는
그 서버를 계속 실행해야 하는데
이 서버에서
코드가 변경될 때마다
코드 파일을 지켜보며
미리보기 화면을 업데이트 하기 때문입니다
코딩 작업을 하면서 변경되는 과정을 바로 확인할 수 있는
매우 효과적인 방법입니다
그 날의 작업이 완료되었을 때
작업을 중단하고
작업 중인 구간에서 다시 시작할 수 있습니다
CodeSandbox 기반 작업을 한다면
'npm intall'이나 'npm run dev'와 같은
명령을 실행 할 필요 없습니다
이미 설정이 되어있어
미리보기 화면이 바로 옆에 있고
UI를 필요에 따라 조절할 수 있어서
바로 코딩 작업을 시작할 수 있습니다
이 수업에는 CodeSandbox 기반의
기초 작업물이 주어지지만
로컬 작업물 속성을
압축파일 형식으로
다운 및 추출이 가능하여
이를 코드 편집기에서 열고
첫 다운 후 'npm install'을 실행하고
'npm run dev'를 실행하여 로컬 작업이 가능하여
두 가지 옵션 모두 사용할 수 있습니다
그렇다면 단지 리액트 코드 작성을 하기 위해
이런 다소 복잡한 작업 설정이
필요한 이유는 무엇일까요?