---

코딩 애플 강의를 기반으로 내가 진행해봤던 내용과 겪었던 오류 위주로 정리하는 그냥 내가 보려고 쓰는 글,,,

---

먼저, 나는 nodeJS는 이미 설치되어 있어서 이 과정은 스킵했다.
nodeJS가 없으면 먼저 받아야 한다!!

📥 React App 설치하기

npx create-react-app 프로젝트명

설치 완료되면 대충 이런 Happy hacking! 이라는 문구가 뜨는 것 같다.

🚨 오류

Cannot create a project name "프로젝트 명" because of npm naming restrictions:
	* name can no longer contain capital letters
Please choose a different project name.

➜ React App 생성 시 프로젝트 명에 대문자가 들어가면 안 된다.

---

🪄 진짜 시작하기

➸ App.js 파일에서 실제로 코딩을 진행한다.
➸ npm start: 웹 페이지가 실행된다. (미리 보기 기능)

📍 Create React App

➥ 누르면 해당 사이트로 바로 이동! 사이트에 가면 리액트에서 사용 가능한 여러 명령어가 나와있다.

• nodeJS를 설치하면 기본적으로 설치된다.
• npm(라이브러리를 모두 모아놓은 일종의 플랫폼)을 통해서 쉽게 React App을 생성시켜준다.

  이게 왜 중요하냐면... 얘를 안 쓰면 React App을 만드는 게 매우 복잡하대요. 😵‍💫

📍 React 프로젝트의 다양한 폴더들의 기능

• node_modules : 라이브러리 코드들을 보관해준다.
• public : static 파일을 보관해준다. (ex. html, image 파일 등)
• src : 소스 코드를 보관해준다.
  - App.js : (보통) 메인 페이지 | 처음에 프로젝트 설치하면 메인 페이지 화면 코드들이 들어가있다.
  - index.html : App.js에서 만든 javascript 코드를 html에 넣어서 진짜 눈에 보이는 화면을 만들어준다. | App.js → index.html
• package.json : 프로젝트 정보, 라이브러리 정보가 있다.

---

🪄 주석

프로그래밍을 하면서 주석이라는 것은 빠질 수 없는 부분이다.
주석을 잘 활용하면 프로젝트를 다양한 방면으로 이용하기 쉽기 때문이라고 생각한다.
그래서 React에서는 주석을 어떻게 이용하냐면...

• React 코드 주석: javascript 주석과 동일

// 한 줄 주석입니다.
/* 이것은 여러줄
	주석입니다. */

• React JSX 코드 주석: {/* */}

{/* 이것은 한 줄도 가능하고
	여러 줄도 가능한 주석입니다. */}

JSX라는 것은 React에 있어 정말 핵심적인 언어라고 생각한다.(개인적으로)
처음에는 JSX 주석이 너무 복잡하고 이상했는데 JSX랑 조금 친해지면 막 이상한 것도 아니었다. 🤓
일단은 이 정도로만 알아두고 JSX가 궁금하다면 다음 포스팅을 참조하면 될 것 같다!

---

🏷 Reference

코딩애플 React 강의
광고 아님. 정말 좋음.