항해99 6주차 WIL

정말 바쁘게 진행됐던 이번 주차..!

우리의 결과물!

 

동영상은 로컬로 연결한 것을 찍었지만 이번에는 백엔드 분들과 첫 협업 과제였다!

 

와이어프레임

API 설계

User API

기능methodurlrequestresponse

로그인	POST	/api/auth/login	{ email: email, password:password }	{ token:token, user: { id:id, nickname:nickname }}
회원가입	POST	/api/auth/register	{ email:email, nickname:nickname, password:password, passwordCheck:passwordCheck }	{ ok:true, msg:회원가입에 성공하셨습니다. }

Post API

기능methodurlrequestresponse

게시글 작성	POST	/api/posts	{ img: "", nickname: nickname, content: content }	status code : 201
게시글 수정	PUT	/api/posts/:postId	{ img: "", content: content }	status code : 204
게시글 삭제	DELETE	/api/posts/:postId	없음	status code : 204
게시글 목록	GET	/api/posts	없음	{posts: [{id: postId, userId: userId, nickname: nickname, createdAt: createdAt, content: content, imgUrl: "", numOfComments: numOfComment,},]}

Comment API

기능methodurlrequestresponse

댓글 작성	POST	/api/posts/:postId/comments	{ comment: comment, nickname: nickname }	{ ok: true/false, msg: 작성완료 }
댓글 수정	PUT	/api/posts/:postId/comments/:commentId	{ img: "", content: content }	{ ok: true/false, msg: 수정완료 }
댓글 삭제	DELETE	/api/posts/:postId/comments/:commentId	없음	없음
댓글 목록	GET	/api/posts/:postId/comments	없음	{ "comments": [{ "id": id, "userId": id, "postId": id, "comment": comment, "nickname": nickname }, { "id": id2, "userId": id2, "postId": id2, "comment": comment2, "nickname": nickname2 },]}

 

감사하게도 팀원분들이 정말 다 좋으신 분들이라서 수월하게 끝마칠 수 있었다..!

첫 협업을 하면서 느낀점은 정말 협업은 의사소통이 중요하다는 것..!

처음 만나서 와이어프레임을 짜고 api를 잘 설계하고 중간중간 소통을 원활하게해서 서버와 통신을 하는 것에서도 문제가 거의 없었다!

아쉬운 점은 내가 아직 부족하다는 것을 너무 느껴버린 것.ㅜㅜ

실전 프로젝트 전까지 나를 갈아넣는다 생각하고 공부해야지..!

 

+

cors?

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

+멘토링

- 요즘 트렌디한 웹 어플리케이션에 적용되는 기술들? (실전프로젝트에 적용할만한 기술? 새로 배우고 싶어요 (_._) )

→ 실전 기술? 언제 사라지질지 모름

→ javascript 자체를 익히기 → 절대안사라짐 → React를 배우다가 Vue를 배우다가 Angular를 배울 수 있음

→ https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/

→ https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Store/

- 무한 스크롤을 구현의 가장 좋은 방법은?

→ IntersectionObserver 사용해보기

- createdAt을 모델을 디자인할 때 임의로 지정하여 default값을 Date NOW로 주는 것이 좋은지, 아니면 mySQL로 데이터가 들어올 때 자동 생성되는 createdAt을 이용하는게 좋은지? 차이가 있는지?

→ 1. MySQL에서 Timezone 설정하기 → default 값 ( CURRENT_TIMESTAMP) → 변환: FE

- MERN Stack을 이용한 개발시 참고할만한 웹 어플리케이션 추천이 가능하신지......... (아키텍쳐 관련)

→ https://codebase.show/projects/realworld

→ https://github.com/velopert?tab=repositories

- 시간관련 질문... 사진 첨부했습니다...

디자인시스템: https://brunch.co.kr/@kmongdev/17