[항해99] 7주차 회고 WIL (Weekly I Learned)

6주차 프로젝트: 미니 프로젝트(2주, 쇼핑몰 만들기) ☕ 1주차

 

 

 

[배운것]

• GIT 충돌 해결
• FIGMA로 VIEW 잡기
• 로그인/회원가입 - JWT 방식 구현
• 쿠키/로컬스토리지 저장
• ID 중복체크하기
• ARC ( Advanced Rest Client) API 체크
• styled component extension

 

[느낀것]

• 이전 프로젝트에서는 GIT 충돌을 최대한 피하기 위해 영역을 철저히 다르게 수정했었는데, 이번에는 어쩔수없이 겹치는 부분들이 생겼다. 그래서 충돌되면 어떤걸 선택하는지? current 유지, updated stream을 선택할지 해보았다. 줄바꿈 하나의 차이도 잡아낸다니... 최대한 약속했던 범위에서 간결하게 코드 짜는것이 중요할 것 같다.
• FIGMA를 사용하여 VIEW 그림을 그려나갔다. 클론코딩때는 디자인을 따라하면 되니까 굳이 VIEW 와이어프레임을 잡을 필요 없었는데, 라이브러리 없이 VIEW를 그리려고하니, 세부적인 VIEW가 필요해서 FIGMA를 사용했다. FIGMA로 그림을 그리면 css코드로 어떻게 나오는지 알려준다.. 신세계다. 그리고 약속된 view를 그대로 코드로 옮기면 되니까 불필요한 소통이 줄어들고 시간을 아꼈다. 피그마 최고! 
•  계속 500 에러가 발생했었다. 데이터를 잘못 주었거나 혹은 백과 프론트의 변수명이 달랐을때 서버와 연결이 계속 안 됬었다. 로그인 토큰 유효기간을 30분으로 설정해두었다는것을 프론트에서는 몰랐어서 에러가 생긴 경우도 있었다......... 나는 이렇게 서버와의 소통이 많을 줄 몰랐었다. 변경사항이 있을 때 즉각적으로 소통해주는게 서로한테 정말 중요할 것 같다!!!! 😣 
• 프론트와 백의 경계가 허물어지고 있다는 사실에 매우 동감. 서버가 어떻게 돌아가는지 알아야 원활하게 소통이 될 것 같다. 기본적인 CS 관련 지식이랑 서버 관련해서도 틈틈히 공부해야겠다.

 

[아쉬운것]

• 처음 API 설계했을때는 몰랐는데 만들다보니 필요한 API가 더럿 있었다. 아 이런 API도 필요하겠는데? 하면서 하나씩 백으로 요청하게 되고 처음에 계획했던것보다 API 몇 개가 추가되었다. 그리고 이미 설계된 API에서 아 이 부분 수정되면 참 좋겠는데... 라는 생각이 들었다. 처음에 설계할때 서버단과 좀 구체적으로 세세하게 짰으면 이런일은 없었을텐데 하는 아쉬움이 들었다. 
• 자바스크립트 배열에 대한 공부가 좀 더 필요한 것 같다. filter와 splice() 함수의 차이를 알게되었다. 원본 배열을 바꾸는지, 새 배열을 반환하는지의 차이를 이번에 알게되었다. 자기전에 드림코딩 엘리님의 강의를 듣고 자는데, 특히 자바스크립트 최신 문법에 좋은게 많았다... 옵셔널 체이닝 같은것도 이번에 구현해봤는데 정말 편했다. 역시 최신 문법들은 바로바로 습득하고 공부하면 아주 아주 득이된다. 💖
• 이전보다 속도는 올라갔지만 리뷰 CRUD 구현에서 시간을 아주 많이 잡아먹었다. 특히 UPDATE와 DELETE에서 잡아먹었다. 새 배열을 반환하니 새로고침해야 수정/삭제 내역이 반영되어 강제로 리로드를 시켰더니 서버에 너무 많은 부하가 걸렸다. idx 찾아서 splice로 싹둑 해줬더니 그 즉시 삭제가 되었다. 이번 api는 배열안에 배열, 배열안에 객체가 있어서 좀 애먹었다. 무수히 많은 console을 찍어가니 반례가 없는 경우까지 처리해주며 짰더니 오래걸렸다. 다음주에 할 장바구니가 더 쉬울 것? 같다는 생각도 했지만.. 여전히 CRUD 공부가 필요하다ㅠㅠ 리덕스 어려워

 

[금주 진행사항]

회원가입 페이지

로그인 페이지

메인 페이지

디테일 페이지

피그마로 뷰 잡기