[MERN] SNS Chat App 만들기 (1)

React.js를 공부하다가 포트폴리오 겸 공부 겸 연습도 할겸 여러 소스도 많고 공부할 요소가 많은 SNS로 선정해서 공부하게 되었습니다.

사용한 기술스택은 간단하게 요약하자면 MERN으로 MONGODB, Express, React.js, Node.js 입니다. (MERN)

첫번째로 위에 사용할 라이브러리들을 설치해줍니다.

https://www.mongodb.com/try/download/community

https://nodejs.org/en/download/current/

설치가 완료되었으면 본격적으로 들어가겠습니다. (Node와 관련된 것은 이전에 포스팅을 해두었습니다.)

각자 사용할 편집기를 열기 전에 먼저 cmd로 진행하겠습니다.

cd desktop -> desktop으로 이동

yarn create react-app sns -> yarn 라이브러리를 이용해 sns React앱을 생성

or

npx create-react-app sns -> npx 라이브러리를 이용해 sns React 앱을 생성

(둘 중 뭘 쓰셔도 상관 없지만 yarn이 속도 부분에서 더 빠릅니다.)

시간이 좀 걸립니다.

저는 yarn으로 설치했는데 위와 같이 결과가 나오면 된 것이고 yarn start를 입력해 정상적으로 React가 구동되는지 확인 해봅시다.

정상적으로 작동 된다면 앱을 닫고 아까 만든 폴더로 이동해 편집기를 실행해 줍니다.

cd sns

code .

그리고 Client 단과 Server단을 나누어 작업을 해야하므로 Client 폴더를 생성해 public 폴더와 src 폴더를 옮겨줍니다.

됬다면 Server에 필요한 폴더들만 미리 생성해 줍니다.

sns 폴더에 따로 Server 폴더를 만드는 것이 아닌 저 밖에서 Server를 작업하고 Client 폴더에서 Client 작업만 할 것이니 유의해주세요.