(코딩애플님 유튜브 영상 정리) React 기초 1강 : 리액트 설치와 셋팅법

React 기초 1강 : 리액트 설치와 셋팅법

리액트 설치와 셋팅법을 배울 수 있는 영상입니다.

노드 모듈 폴더에 라이브러리를 모아두고, 소스 코드는 src 폴더에 저장하는 방식으로 프로젝트를 진행합니다.

미리보기를 통해 실시간으로 웹 페이지를 확인하고, 필요한 라이브러리는 패키지.json 파일에 기록됩니다.

 

https://www.youtube.com/watch?v=nahwuaXmgt8&t=193s

 

React 프로젝트 생성에 필요한 프로그램은?

React 프로젝트 세팅을 보여주며, 설치과정을 빠르게 소개해.

먼저 루즈 페이스에서 최신 버전을 다운로드하여 설치하고, VSCode도 설치해야 해.

에디터를 설치한 후 클릭하여 실행하면 코드 편집 화면이 나타나고, 터미널을 대신하는 VSCode를 사용하는 것을 권장해.

리액트 앱을 생성하는 방법

작업 폴더 생성 후 에디터로 오픈하여 파일 오픈 폴더 메뉴를 통해 액트 프로젝트 생성해요.

터미널을 이용해 'mpx create react app' 명령어 입력으로 리액트 앱을 생성하는 방법을 소개했어요.

이를 통해 셋팅이 완료된 보일러플레이트를 효과적으로 생성할 수 있어요.

라이브러리 'mpx'를 설치하여 모두 이용 가능하며, 미트 프로젝트 생성에 활용했어요.

React 프로젝트 개발 방법 및 미리보기 설정

폴더 구조 확인, 필요 파일 설치 후 코딩을 시작하고 초록 'Success' 확인해요.

맥에서도 해결책 제공, 블로그 폴더에서 코딩 시작하고 src 폴더 내 App.js가 메인페이지예요.

미리보기 설정하는 법은 터미널로 프로젝트 열고 'npm start'를 입력하면 크롬에서 라이브 서버 미리보기를 할 수 있어요.

미리보기가 안 될 때는 크롬 설치 확인하고 터미널 주소를 직접 브라우징해보세요.

개발환경을 세팅하고 프로젝트 구조를 확인한 후 실시간 미리보기도 가능하죠.

효과적인 프로젝트 생성법과 노드JS 설치 방법?

프로젝트 생성법이 설명되고, 메인 페이지의 요소 변경과 웹트 인 페이지에 대한 설명을 진행해.

다음 시간에 프로젝트를 만들 계획이며, 노드JS 설치 방법과 '크리에이트 리액트 앱' 라이브러리 설치에 대한 상세 설명을 제공해.

'npm'을 통해 라이브러리 설치가 용이하며, '크리에이트 리액트 앱'을 통해 라이브러리를 설치하는 방법을 안내해.

프로젝트 메인 페이지 구조

구글을 검색하여 연결하고 프로젝트를 생성해요.

메인 페이지의 실질 부분은 'public' 폴더 안의 'index.html'이고, 모든 내용이 여기에 들어가 있어요.

메인 페이지에서는 로고나 클릭 등이 없고, 실제 동작하는 부분은 'app.js' 파일이에요.

'index.js' 파일이 모든 작업을 보조해요.

문서 내 'document.getElementById('paid')'와 같은 자바스크립트를 통해 'app.js'에 요소들을 추가하여 메인 페이지를 구성해요.

이해할 필요는 없으나, 'app.js' 파일이 메인 페이지를 작동시키는 역할을 한다죠.

폴더와 파일 구조 관련 설명?

폴더 설명: 'node_modules' 폴더는 설치한 노드 모듈을 포함하고, 필요한 라이브러리가 들어 있다.

'public' 폴더엔 웹사이트의 스태틱 파일(이미지, 텍스트, 아이콘) 보관하며, 최종 코드는 여기에 압축 안돼.

'src' 폴더에는 실질적인 코딩을 하는 소스코드가 보관돼.

 

 

 

////////////////////////

 

React 기초 1강 : 리액트 설치와 셋팅법 (2022+ 스타일)

1. React 프로젝트 세팅하는 방법 공유
   - React 프로젝트 세팅하는 방법을 빠르게 보여주며, 설치 과정을 상세히 설명하여 빠른 실행을 도와주고자 함.
   - React 프로젝트를 설정하기 위해 먼저 '루즈 페이스'에서 필요한 버전을 다운로드하고 설치한다.
   - 또한, VSCode를 다운로드하고 설치하여 코드 편집을 위한 에디터를 사용하는 방법을 안내한다.
   - 기존 터미널을 사용하지 않고 VSCode로 터미널 대체하는 방법을 소개한다.

2.️코드 저장 공간을 만들고 에디터로 작업 폴더를 오픈한다.
   - 작업 폴더를 만들어 코드 저장 공간을 확보한다.
   - 에디터를 통해 작업 폴더를 오픈하고 파일을 둘러본다.
   - 만들어둔 작업 폴더에 있는 리액트 클래스를 확인하며, 액트 프로젝트를 생성할 때 마법의 명령어를 사용한다.

3.터미널에서 리액트 앱 프로젝트 생성하기
   - 에디터 화면에서 화살표를 드래그하여 터미널을 열고 'mpx create react app' 입력 후 엔터키를 누름.
   - 이 명령어는 리액트 앱 프로젝트를 하위 폴더에 생성해주는 마법의 명령어이며, 'mpx'는 마이 리더를 설치해주는 명령어.
   - 이를 통해 리액트 셋팅이 완료된 보일러플레이트를 빠르게 설치하여 블로그 프로젝트 생성 가능.
   - 터미널을 통해 필요한 모든 파일 설치 후 코드 작성하여 프로젝트를 진행할 수 있다.

4.️맥 머신에서 리액트 프로젝트를 시작하는 방법
   - 프로젝트 설치를 마무리할 때 초록색 '석세스'가 뜨면 성공, 빨간색은 에러.
   - 하위 폴더인 블로그를 열어서 코딩 시작. 중요한 파일은 'App.js'.
   - 터미널에서 'npm start' 입력 시 라이브 서버 실행. '프로젝트명' 확인 후 코드를 크롬으로 미리보기.
   - 크롬 브라우저 설치를 해야할 때 주소를 직접 입력. 마무리는 'npm start' 입력.

5.️웹 페이지 프로젝트 생성과 라이브러리 설치
   - 프로젝트 생성이 끝나면 웹 페이지로 이동하게 된다. p태그 내용을 변경하는 실험을 통해 메인 페이지를 수정하게 됨.
   - 다음 시간에는 노드js를 설치하고, 몇몇 라이브러리를 설치해야 한다. '크리에이트 리액트 앱'을 통해 라이브러리를 설치한다.
   - npm은 컴퓨터에 라이브러리를 쉽게 설치할 수 있는 도구이며 '크리에이트 리액트 앱'에 여러 라이브러리를 쉽게 추가할 수 있도록 도와준다.
   - npm을 통해 다양한 유용한 작업을 할 수 있다.

6.프로젝트 파일 구조 및 관련 기본 이해
   - 구글을 통해 프로젝트 생성 및 파일 구조에 대한 기본 이해를 배울 수 있다.
   - 메인 페이지의 실질적인 내용은 '퍼블릭' 폴더에 있는 'index.html'이며, 여기에 메인 페이지의 내용이 담겨있다.
   - 퍼블릭 폴더는 웹사이트의 스태틱 파일들을 보관하는 곳으로, 이미지나 텍스트 파일 등이 여기에 저장된다.
   - 코딩은 대부분 'src' 폴더에서 이루어지며, 이 폴더는 소스 코드를 보관하는 곳이다.
   - 패키지.json 파일은 설치한 라이브러리들을 모아놓은 파일이다.

7.라이브러리 버전 관리 시스템 '하일'
   - 라이브러리 명과 버전을 모아놓는 하일은 npm으로 라이브러리를 설치할 때 자동으로 버전을 기록한다.
   - 버전 충돌 발생 시 동일한 리스트 버전을 설치하여 해결할 수 있고, 강의용으로 사용된 내용을 참고하여 라이브러리를 활용할 수 있다.
   - 실제 사용법은 독에 담겨 있으니 참조하면 된다.