14. 리액트 미니 프로젝트 (챕터 1~2)

(실습) 미니 블로그 기획, 프로젝트 생성 및 필요한 패키지 설치

가장 베스트는 "프로젝트"를 직접 코드를 만들어가는 것이다. 

일단, 오픈 소스에 있는 데이터가 존재한다. 깃허브에 있으며 소플님이 오픈해 두었다. 코드 짤 때 도저히 모르겠으면 다음의 링크를 타고 확인하자.

https://github.com/soaple/mini-blog

GitHub - soaple/mini-blog: 소플의 처음 만난 리액트 실습 프로젝트

---

이번에 기획은 미니 블로그이다. 

---

기능은 위와 같이 만들어두면 좋을 거 같다.

---

전체적인 모습은 다음과 같을 것이다.

요소가 간단하더라도, 이런 실습이 있어야 추후에 더 큰 리액트 프로젝트에 좀 더 쉽게 관여할 수 있을 것이다.

그리고 이제 프로젝트를 만들고, 필요한 패키지를 깔아보자.

(참고로 프로젝트 실행할 때의 명령어들은 터미널 창에서 실행한다.)

---

프로젝트 생성.

---

프로젝트 디렉터리에 들어가서 앱 실행하기.

---

필요한 패키지 설치하기. (웹 화면 이동 패키지, 꾸미기 패키지)

(스타일드 컴포넌트는 이미 깔았음)

---

(실습) 주요 컴포넌트 및 폴더 구성하기

미니 블로그에 필요한 기능을 생각해야 한다. 이후 이름을 정해서 컴포넌트를 따로 따로 만들어줘야 한다.

기능에 필요한 컴포넌트의 이름을 위와 같이 정의할 수 있을 것이다.

이후 프로젝트에 필요한 폴더를 만들어야 한다.

폴더 예시

폴더를 만드는 것에 절대적인 규칙은 없다.

그러나 "대부분의 사람들이 알 수 있게" 보편적으로 폴더를 구성해줘야 한다. 추후에 협업할 때, 이 점을 주의하자. 

(명심하자. 개발은 다 같이 하는 것이며, 서로를 존중하며 규칙을 정하는 것은 매우 중요하다.)

---

 

결론

프로젝트를 빌드업할 때에는 

탑 -  다운 방식으로 빌드업하는 것이 좋다.

즉, 큰 그림부터 그려주고, 이후 작은 그림으로 구별하여 그림을 그려간다. 각 기능에 맞는 컴포넌트를 생각하고, 이런 컴포넌트들이 마치 레고 조립되듯 조립이 되면 큰 그림이 완성되는 것이다. 

(참고로 기능 구현은 바텀 - 업 방식으로 작은 기능부터 완성해서 큰 기능으로 귀결됨)

기능이 들어가 있는 컴포넌트들이 하나로 결합될 때, 비로소 하나의 미니 블로그가 만들어질 것이다.