[JavaScript] 인스타그램 구현하기

 

인프런에서 NodeJS 강의를 들은 후 디렉토리 구조와 디비연동 같은 부분을 

복습 겸 내것으로 만들고 싶어서 인스타그램 구현을 해보았다

이름하여 노드js + 인스타그램인 노드스타그램 🤣🤣

[지금 무료] Node.js 노드 빠르게 훑어보기: 서버부터 DB까지 | 제주코딩베이스캠프 - 인프런

내가 들었던 인프런 강의 ☝️☝️ 

---

• 사용 기술

 

• 사용된 모듈

"@socket.io/cluster-adapter": "^0.2.2",  "@types/node": "^20.11.24",  "bcrypt": "^5.1.1", "body-parser": "^1.20.2",
"cookie-parser": "^1.4.6", "dotenv": "^16.4.5", "ejs": "^3.1.9", "express": "^4.19.2", "express-async-handler": "^1.2.0",
"jsonwebtoken": "^9.0.2", "mongoose": "^8.2.0", "multer": "^1.4.5-lts.1", "nodemon": "^3.1.0", "socket.io": "^4.7.5",
 "sqlite": "^5.1.1", "sqlite3": "^5.1.7", "typescript": "^5.3.3"

 

몽고디비의 Mongoose를 사용하여

posts(게시글 업로드) , profiles(프로필 사진) , storyposts(스토리 업로드), users(사용자 정보)을 만들었다.

 

나중에 다시 들어와도 채팅 기록을 남기기 위해 sqlite를 사용하여 저장하였다.

Tutorial step #7 - Server delivery | Socket.IO

해당 부분 참고한 부분 ☝️☝️

---

화면 구현은 피그마를 통해 디자인을 하고 나서 구현하였다

 

• 로그인 페이지

---

• 회원가입 페이지

---

• 메인 페이지

---

• 프로필 페이지

---

• dm 페이지

---

• 게시글 업로드

---

• 스토리 업로드

---

 

• 스토리 보기

GitHub - kimnambin/nodestagram: NodeJS를 이용한 인스타그램 구현

 

• 후기

어려웠던 점

프로필 페이지나 스토리를 볼 때 해당하는 ID를 가져와서 해당 정보를 보여주는 부분,

이미지를 업로드할 때 이미지가 업로드되지 않는 부분 등등이 어려웠다 ㅜ.ㅜ

하지만 나중에 해결할 땐 선언을 하지 않았다던지 스펠링이 틀렸다던지의 문제여서

생각보다 허무하게 문제가 해결됐었다...😅😅

 

아쉬운 점

무엇보다 아쉬운 점은 디자인적인 부분이다.

클론 코딩을 했음에도 디자인적인 부분이 많이 부족한 게 느껴진다 ㅠㅠ

또한 하트 기능, 팔로우 등등 다른 기능들을 구현하지 못한 것도 아쉬운 부분들이다. 

하지만 이 프로젝트를 진행 한 나의 목표는 들었던 강의 복습

+ 디렉토리 구조의 이해였기 때문에 여기까지 한 것으로 만족한다.

그래도 나중엔 내 스스로도 만족스러운 디자인과 구현으로

프로젝트를 완성시키고 싶다