whenever purple

🍞 N빵 소개

설명:  혼자사는 것보다 같이 구매하면 더 이득이라면?! 이웃과 함께 구매할 수 있는 공동구매 커뮤니티 서비스입니다.

제작: 2022.04.22 ~ 2022.06.02 

👉 N빵 서비스 바로가기    https://www.nbbang.site/

📌 노션 바로가기

시연영상: 🎬서비스 시연 및 발표 영상 보러가기

깃허브: Front Github  /  Backend  Github

📐 아키텍처

⚒️ 기술스택

📖 라이브러리

🔎 핵심기능

✅ 지도 (kakao Map)

• 사용자 위치 기준, 권역별 게시글 확인가능
• 지도 마커 선택시, 해당 게시글의 상세 내용을 보여주며 위치로 이동

✅ 채팅 (Socket.io)

• 각 게시물에 따른 채팅방 생성
• 상대방이 채팅 입력시, ‘입력중’이라는 상태 확인 가능
• 상대방이 입장/퇴장시 확인 가능
• 채팅창 상단에 위치 시, 새로운 채팅메세지를 스크롤다운 없이 확인가능

✅ 참가자 추가기능

• 실시간으로 채팅 참여자 확인 가능
• 방장은 대기자 ⇄ 거래자로 변경 가능
• 거래자인 경우 취소 가능

✅ 알림 (Socket.io)

• 해당 채팅방에 있지않거나 오프라인 상태시, 알림 송신
  • 새로운 메시지 전달시
  • 해당 게시글에 거래자로 확정시
  • 거래자가 거래취소시
  • 거래 확정후 리뷰작성 요청시

✅ 게시글 제목 기준으로 검색 가능

✅ 마이페이지에서 내정보 조회 가능

• 본인이 작성한 공구 / 참여한 공구 / 찜한 공구를 확인 가능

✅ 마이페이지에서 내 정보 변경 기능

• 프로필 사진 / 닉네임 / 상태메시지 변경가능
• 회원 탈퇴 가능

✅ 글 작성자의 공구후기 확인 기능

• 작성자의 마이페이지에서 공구 후기 확인 가능

🧩 ERD

🥖 API 설계

✨ API 설계 자세히보기

🚨 이슈 및 트러블 슈팅

리사이징으로 썸네일 이미지 생성

도입이유

• 사이드 바, 상세모달, 채팅, 지도 모달과 같이 많은 이미지가 뜨게 되는데 사용자가 불편함을 느끼지 않고 빠르게 정보를 조회할 수 있도록 하기 위함

선택지

프로젝트: Slack (클론 프로젝트)

설명: Socket 기능구현을 위해 Slack을 클론코딩하였습니다. 

제작: 2022.04.15~2022.04.21

시연영상: https://www.youtube.com/watch?v=nZWXoWw93bg&t=1s 

깃허브: Frontend Github / Backen Github

노션: https://zircon-dolphin-2d9.notion.site/7cf89428eab0438abb8e85dab3e734b0

사용기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express (Node.js)
• Database: MongoDB (Mongoose)
• JWT (Json Web Token)
• Joi
• Bcrypt
• CORS
• Multer
• Front-end: React

핵심기능

• 로그인페이지
  • 아이디, 패스워드 입력 가능
  • 로그인 시, 토큰전달 (모든페이지에서 해당 토큰확인)
  • 이메일 형식 확인 가능
  • 아이디/닉네임 중복검사 가능
  • 비밀번호 재확인 일치하는지 확인 가능
• 채널페이지
  • 채널 조회, 생성, 수정, 삭제 가능
  • 채널 내 내용 조회, 생성, 수정, 삭제 가능 (수정시, 편집됨 표시)
  • 내용 내 코멘트 조회, 생성, 삭제 가능
• 다이렉트메시지 페이지
  • 친구들과 실시간 채팅 가능

Trouble Shooting

▶몽구스의 contentId 생서시,  Math.random()을 사용했으나 몽구스에 숫작가 온전히 저장되지 않아 해당 데이터를 찾을 수가 없었다. 

→ Math.random()에 나타난 난수를 글자로 바꾸어 짧은 id를 만들었다.

Math.random().toString(36).substr(3)

▶채널 내 ContentList에서 선택된 content만 삭제하려고 했지만 Delete 사용시 내용 전체가 없어졌다. 

→ 삭제가 아닌 선택한 내용을 제외한 나머지 내용으로만 업데이트할 수 있게 수정되었다.

프로젝트: Social Study Network (SSN: 쓴)    *프론트엔드와 첫 협업프로젝트

설명: 팀원들, 학교친구들과 공부시간을 공유하며 응원할 수 있는 소셜네트워크 사이트입니다.

제작: 2022.04.08~2022.04.14

시연영상: https://youtu.be/ZAMqhx5jCNU

깃허브: https://github.com/ymkwon3/ssn (프론트엔드) / https://github.com/moonhjang/miniproject_back (백엔드)

노션: https://www.notion.so/d556601ee2de4629a9a1947675f23dd6

와이어프레임

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express (Node.js)
• Database: MongoDB (Mongoose)
• JWT (Json Web Token)
• Crypto-js
• CORS
• Front-end: React

핵심 기능

• 로그인/ 회원가입 페이지
  • 아이디 패쓰원드 입력 가능
  • 로그인 시, 토큰전달 (모든페이지에서 해당 토큰확인 기능)
  • 빈칸 및 아이디 형식(4자이상, 대소문자, 숫자, 특수문자(!@#"-_)) 확인 가능
  • 회원가입시 아이디/닉네임 중복검사
  • 비밀번호 재확인 일치 확인 가능
• 메인페이지
  • 해당 유저와 친구리스트 조회
  • 공부시간 시작/정지 버튼
  • 총 공부시간 조회가능
  • 친구 추가가능
  • 친구와 공부시간 순위 확인가능
  • 친구의 공부시간 및 접속 확인 가능
• 방명록 페이지
  • 등록된 친구 방명록에 코멘트 조회, 작성 가능
  • 방명록 주인과 방명록 작성자만 삭제 가능
  • 본인 방명록 페이지에서는 상태메세지 수정 가능

Trouble Shooting   

▶ Auth-Middleware에 대해 프론트 업무에 대한 이해부족했다.

→ 개인프로젝트 진행시, 로그인 실행시 로그인인증 확인API도 함께 확인되었다. 그때, 로컬스토리지에 유저 정보를 넣어두었다. 하지만 프론트에서 로그인인증 확인하는 방법이 따로 있기 때문에 굳이 필요없어 제외를 했다. 저장된 토큰으로 모든페이지의 로그인 인증확인하는 방법을 동일하여 문제없이 작동되었다. 

▶ 로컬에 있는 MongoDB를 사용하고자 했지만, 로컬DB의 내용을 확인하려고 하니 배포과정에서 오류가 발생하였다. 

→ 로컬DB를 사용하지 않고 MongoDB클라우드에 직접 연결하여 실행하였다. 

▶ _id를 commentid 로 사용하게 되면서, _id를 백엔드에서 object에서 string으로 객체 type을 변경해야하는 점에서 어려웠다.

→ Comment 스키마에서 _id를 commentid로 만들어 string으로 변경하여 전달하였다. 

개인회고

첫 프론트엔드와의 협력프로젝트였다. 프론트업무에 대한 지식이 부족했기에 표현방식과 이해하는 방식이 굉장히 달랐다. 프로젝트 중반부터는 서로의 업무를 이해하고 나니 생각보다 프로젝트가 문제없이 풀렸다. 

개인 프로젝트시에는 내 작업을 웹사이트에서 확인하는 것이 편했는데, 협력할 때는 확인할 수 없는 뷰가 없어서 불편했다. 썬더 클라이언트가 그 역할을 대신했지만, 회원가입이나 로그인 시 전달되는 정보를 직접작성해야하는 번거로웠지만 잘 적응 할 수 있었다. 특히, 모든페이지를 auth-middleware로 연결 후에는 토큰이 없기에 썬더 클라이언트를 사용할 수 없었다. (이후 알아보니, 헤더에 토큰을 넣어 확인해볼수 있다는 것을 알게되었다.) 

협력했던 프론트 분이 굉장히 잘하시던 분이라, 밴엔드로서 굉장히 도움도 많이 받았고 수월하게 프로젝트를 진행할 수 있었다. 프로젝트 진행시, 염려했던 CORS 이슈나 auth-middleware(인증미들웨어)에 대한 이슈는 거의 없었다. 배포 초반, 인증 미들웨어에 대한 약간의 이슈가 있었으나 콘솔찍으면서 전달하고 전달받는 데이터를 확인하니 큰 이슈없이 해결되었다.

굉장히 만족스러웠던 점은 모든 기능들이 문제없이 잘 작동했고, 모든 팀원들 또한 만족스럽게 끝낸 프로젝트라서 더 좋았다. 우리 팀원 모두 흥해라!

프로젝트 : 로그인/회원가입 페이지

설명 : 로그인, 회원가입, 게시글 코멘트 등록, 조회, 수정, 삭제 기능구현 연습을 위해 제작되었습니다. 

제작 : 2022.03.25 ~ 2022.03.31

시연영상: https://youtu.be/sNPd6aWwgQM

깃허브:  https://github.com/moonhjang/node_1

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express, Mongoose(Node.js)
• Database: MongoDB
• front-end: HTML5, CSS3, Javascript, Jquery, bootstrap

핵심 기능

• 회원가입페이지
• 로그인 페이지 
• 로그인 검사
  • 조회페이지 제외, 로그인 한 경우만 볼수 있도록 하기
• 댓글
  • 로그인한 사용자만 댓글 추가/ 수정/ 삭제

Trouble Shooting

▶ 인증이 필요한 페이지와 인증미들웨어를 연결되어있지만, 안내 알람이 JS파일이 아닌 HTML파일의 알람을 띄우는 이슈가있었다. 

→ 인증 미들웨어.js와 router.js 이 제대로 연결되어 있지 않았다. 로그인시, 미들웨어와 연결된 로컬스토리지에 잘못된 인증키가 들어가게 되면서 인증 키를 제대로 전달해주지 못하면서 생겨난 이슈였다. 연결이 잘 되면서 알림이슈는 해결되었다. 

▶ 댓글 추가시, mongoDB의 subdocument이용방법으로 댓글을 추가하였다. 이와 같은 방법으로 조회를 하려고 했지만 예상치 못한 오류로 작동이 되지않았다.

→ 예상치 못한 오류를 잡기위해서 Try-Catch문을 이용하여 해결되었다.

+ 지난주 작업에서 아쉬웠던 비밀번호 암호화 처리 및, env 파일과 .gitignore을 사용하여 보안을 강화하였다.

프로젝트: 게시글 페이지

설명: 게시글 목록 조회, 등록, 수정 삭제의 기능 구현을 연습을 위해 제작되었습니다. 

제작: 2022.03.18 ~2022.03.24

시연영상: https://youtu.be/hJivoIls7AQ

깃허브: https://github.com/moonhjang/node_1

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Express, Mongoose (Node.js)
• Database: MongoDB
• front-end: HTML5, CSS3, Javascript, Jquery, bootstrap

핵심 기능

• 게시글 목록조회페이지
  • 제목, 작성자명, 작성날짜 조회
  • 작성 날짜 기준으로 내림차순 정렬
  • 특정 게시글 선택시 게시글 조회페이지로 이동
• 게시글 작성페이지
  • 제목, 작성자명, 비밀번호, 작성내용 입력 후 저장
  • 입력란이 비어있을 시, "입력해주세요" 알람띄우기
• 게시글 조회페이지
  • 제목, 작성자명, 작성날짜, 작성 내용 조회
• 게시글 수정/삭제페이지
  • 입력란이 비어있을 시, "입력해주세요" 알람띄우기
  • 비밀번호가 일치할 시, 수정/삭제 가능
  • 비밀번호가 일치하지 않을 시, "비밀번호 불일치" 알람띄우기

Trouble Shooting 

Node.js의 시스템을 완전히 이해하지 못한채 프로젝트를 진행하게 되었다. 1~2일차은 Node.js에 대해서 배웠고, 3~4일차에는 웹사이트의 백엔드 역할에 집중하였다. 5~7일차에는 프론트와 백엔드에 연결에 집중하여 프로젝트를 진행하였다. Node.js의 짧은 이해와 짧은 시간동안 프로젝트를 진행하였기에 완성도는 떨어지지만, 목표하는 기능구현은 완성하였다. 

▶ DB저장시, 각 포스팅에 대해서 postsid를 지정했는데, 1개 이후로 postsid 중복관련 에러가 나오면서 저장되지 않았다.

→ postsid를 작성날짜에 연관해서 넘버링 해주니 문제없이 저장됨

▶ MongoDB를 이용했을때와 다르게 Mongoose는 아이디와 비밀번호가 없어도 Robo3T에서 DB내용을 확인할 수 있었다.  하지만, 도메인과 연결 후 Robo3T에 저장된 내용과 연결되지 않고 자체 DB를 만들어 실행되었다. 어디에 저장되고 있는지 아직도 의문이 든다. DB내용 조회나 관리하기가 불편할 것같아 프로젝트 마지막날 소유하고있는 MongoDB로 경로를 변경하려고 하였음.

→ 도메인에 연결된 자체 DB는 껏다 켜도 같은 DB에 연결되어서 아직도 사용해도되는지 의문이 듦.

해당부분은 추후 스터디가 필요함.

▶ 비밀번호 저장시, 암호화처리가 어려웠다.

→ 게시글 작성시 암호화 처리된 비밀번호로 저장이 가능함. 하지만, 삭제 및 수정페이지에서 비밀번호 확인시 작성된 비밀번호를 암호화 시킨것과 저장된 비밀번호를 비교했을때 같은 값이 아님. 또한, 암호화 처리된 비밀번호가 '$'와 같은 기호가 있어 Schema에서 비밀번호는 'String' 지정된 상태와 달라서 오류를 냄. 또한, 비밀번호 암호화처리를 위한 충분한 시간이 없어서 추후 다시 도전할 예정임.

프로젝트: 오늘의 계절 오늘의 노래

설명: 계절감을 보다 감각적으로 느낄 수 있도록 봄, 여름, 가을 겨울을 만끽할 수 있는, 혹은 지나간 계절들을 떠오르게 하는 노래 추천 커뮤니티 사이트입니다. 

제작: 2022. 03. 07 ~ 2022. 03. 11

http://sparta-jhh.shop

시연 영상:  https://youtu.be/czaQvEnr6Ts

깃허브:  https://github.com/tayyoon/week1

초안

사용 기술

• Server: AWS EC2 (Ubuntu 18.04 LTS)
• Framework: Flask (Python)
• Database: MongoDB
• front-end: HTML5, CSS3, Javascript, Jquery, bootstrap

핵심 기능

• 로그인/회원가입
  • 아이디 중복확인 기능
  • 회원가입시 아이디 유효성 검사
• 메인페이지
  • 카드출력: URL, 계절, 코멘트 입력시 카드출력
  • 코멘트수정: 카드 선택시 모달화면에서 타이틀, 코멘트 입력시 해당카드 수정
  • 회원만 이용가능:  로그인한 아이디로 연결된 닉네임으로 확인가능
  • 로그아웃: 상단의 'logout' 선택시 로그아웃

Trouble Shooting

▶ 파이썬과 도메인 구동환경이 달라 도메인이용시 로그인시 메인화면으로 넘어가지 않았음

→  파이썬 이용시, "decode(utf-8)' 주석처리 / 도메인이용시,  "decode(utf-8)' 주석처리 해제로 해결

▶ 로그인시, 쿠키를 받아오지 못했음.

→  login.html 에 <head>와<body> 사이의 <scirpt>를 넣음으로서 해결

▶ 메인페이지, 반복문으로 DB의 내용을 가져오다 보니 코멘트/하트 수정시 첫 카드만 연결이 되어 수정이 불가

→ 추후에 보완이 필요한 문제

토이프로젝트:  코파 (코로나 아파!)

제작 기간: 2주
웹개발 종합반에 배운 내용과 추가적으로 공부한 내용들로
코로나 현황과 코로나 증상체크리스트, 주변선별진료소, 백신후기를 만들었다.

웹사이트 내의 완벽한 구현은 어려우나

2주간의 웹개발 종합반 강의를 듣고 만든 것치고는 만족스럽다.2주의 짧은 시간동안 모든 팀원이 정말 많은 삽질로 고생이 많았다. 

http://januaryholder.shop/
시연영상: https://www.youtube.com/watch?v=tJEO2UBt_H4
깃허브주소: https://github.com/yoodeve/toy

COPA의 Dashboard

팀원 모두 디자인의 큰 관심이 없었기에 기능구현에 초점을 맞추어서 프로젝트를 진행하게 되었다. 

부트스트랩을 참고하여 웹사이트 템플릿을 정하게 되었는데, 직접 만드는게 나은 것같다. 

개발하기 전, 부트스트랩을 이해하고 필요없는 것들 지우는데 1~2일을 소비했다는 것이 참 아쉽다.

하지만, 배우지 않았던 자바스크립트를 보고 이해할 수 있던 시간들이 있어 나쁘지 않은 소득이였다.

COPA의 코로나 현상황 (본인 담당부분)

코로나 현상황

크롤링한 데이터를 ajax로 표를 만들었다. 

매일 업데이트된 상황을 다시 반영하도록 하였다. 

'서울'을 눌렀을 때, 서울에 맞는 데이터 나오게 만들었다. (첫 화면은 무조건 '서울')

아쉬운점

도시를 눌렀을때 DB에 임시로 저장해서 해당 도시의 데이터가 나오게 만들었다.

새로 선택하면 이전데이터는 삭제하고 새 데이터가 나오는 방식으로 만들었다. 

혼자 이용하는데에는 문제가 없었지만, 배포 후 여러명이 사용하면 DB에 남는 데이터가 겹쳐서 부산을 누르면 인천이 나오는 기괴한 현상이 일어났다. 또한 반응속도 느려 배포후, 두번 클릭해서야 데이터가 나왔다. 

코로나증상 체크리스트 / 내 주변 선별진료소 / 백신후기  

코로나증상 체크리스트

코로나 주요 증상들로 자신이 코로나에 걸렸는 지 확인할 수 있는 체크리스트이다. 

각 증상마다 점수가 다르게 들어가 있고, 총점 점수마다 알림내용이 다르다. 

내 주변 선별진료소

계획했던 바는 지도에서 자신의 위치를 확인하고, 주변의 선별진료소를 보여주는 것이 목표였다. 

하지만, 지도에 위치하기 위해서는 모든 선별진료소의 위도와 경도를 알아야하는 점과 자바스크립트를 처음 접하는 사람으로서 각 내용을 이해하고 결합하는데 2주의 시간은 굉장히 짧아 목표했던 바를 바꾸게 되었다.

모든 선별진료소가 목록으로 나오게 만들었다. 

비전공자라 '할수 있는 것'과 '할 수 없는 것'의 판단을 하기가 참 어려웠다. 그렇기에 무작정 된다고 생각하고 정말 많은 기능들을 도전해볼 수 있었다. 보여주는 것은 목록뿐이지만 팀원 모두 지도 관련해서 찾아보고 알아볼 수 있어서 좋은 기회가 되었다. 

백신후기

백신관련하여 네이버 블로그의 자료를 크롤링해 모아 볼수 있게 만들었다.

가져오는 내용이 많으니 페이지를 나누어서 크롤링하게 만들었다.

추가적으로 백신후기를 작성하여 공유할 수 있다. 

첫 토이프로젝트를 끝난 소감

2주의 공부 이후, 배운것들로만 만들어지지 않고 자신이 배운것도 더 공부하여 만들었다. 

'개발'을 처음 접했기에 있을 수 있던 열정이 아닌가 싶다. 프로젝트하는데에 정말 너무 수고했기에 성장이 많았던 것같다. 정말 아쉬운 점은 테스트기간이 없어 배포하고 수정하는데 충분한 시간을 갖지 못한것이 참 아쉽다.

본수업이 시작하기도 전인데, 진짜 많은 성장이 있던 프로젝트였다.