2주차 데일리 개인 회고

8월 9일 (수)

박일상

오늘 한 일

• 트림 선택 버튼 수정

  코드 리뷰를 통해 피드백 받은 트림 선택 버튼을 수정하고 있다. 파일 분리에 대한 성현님의 피드백을 듣고 어떤 것이 나은 구조인지 고민이 들어 크롱 님에게 팀원들과 함께 가서 다른 파일에서 사용하지 않는 컴포넌트라도 따로 파일을 분리하는 것이 좋은지 물어보았다. 취향에 가까운 부분이지만 크롱 님께서는 하나의 파일에 하나의 컴포넌트만 두어서 명시적으로 개발자가 보기 편하게 만드는 것이 좋을 것 같다고 말씀하셨고, 그 부분에 동의하여 파일을 분리하기로 하였다. 파일을 분리하면서 트림 선택 버튼의 props는 Trim 타입의 일부분만 사용하는데, 중복을 줄이는 방법이 없을까 고민하여 찾아보았더니 타입스크립트의 유틸리티 타입에 대해서 알게 되었고, 타입도 이를 사용한 방법으로 수정할 수 있었다.

• 공통 버튼 컴포넌트 리뷰

  성현님이 만든 공통 버튼 컴포넌트에 대해 코드 리뷰를 하였다. 전체적으로 깔끔했지만, 스토리북을 처음 쓰다 보니 다양한 크기와 색상이 존재하는 컴포넌트는 어떻게 스토리북에서 보여주는 것이 좋은지 잘 모르겠는 부분이 있었다. 스토리북의 깃허브 레포지토리에 있는 디자인 시스템을 살펴보니 모든 색상을 보여주는 스토리와 모든 크기를 보여주는 스토리로 나누어져 있는 것을 확인할 수 있었다. 따라서 해당하는 방법으로 변경하는 것을 제안하였다. 스토리북을 처음 사용하다 보니 잘 사용하는 방법에 대해서 고민이 드는데, 함께 좋은 방법을 찾아 보면서 공부할 수 있어 좋았다.☺️

• 프록시 설정

  개발 환경에서 API 호출에서 CORS 문제를 해결하기 위해서 프록시를 설정하는 중이다. API path로 호출하는 것이 아닌 서브 도메인으로 API 요청을 보내기 때문에 기존에 많이 사용하는 프록시 설정을 사용하기 어려웠다. 따라서 환경변수 파일을 사용하여 개발 환경과 프로덕션 환경의 API 요청 경로를 변경하는 방법을 사용하였는데, 프록시가 제대로 동작하지 않아서 문제를 찾는 중이다.

할 일

• 프록시 설정 완료하기
• 트림 선택 버튼 수정 완료

잡담

• 내일은 태풍으로 인해 비대면으로 활동하는데, 집에서 하는 만큼 이동시간도 줄어들고 체력도 아끼기 때문에 조금 더 열심히 개발하기로 마음을 먹었다.

피드백

• 동철 님의 제안으로 팀원들과 같은 형식으로 학습 스택을 적기로 하였다. 조금 더 서로에 대한 내용을 글로 남기면서 기록할 방법이라고 생각하여 너무 좋다고 생각했다. 점점 팀의 협업이 유기적으로 이루어지는 것 같아 뿌듯하고 기분도 좋았다.

박지혜

오늘 한 일

• 옵션 카드 UI 구현

  옵션 카드 구현하면서 고려해야할게 데이터 받아오는거랑 / transition / selected 됐을 때랑 안됐을 때 상태 다뤄주는 건데 이 3가지를 한꺼번에 생각하려니 괜히 머리가 안 돌아가서 빠르게 구현을 못했다.. 정말 캠프 시작 이래로 바보가 되어버린게 아닐까 싶다. UI는 일단 구현했다.

• 코드 리뷰 수업

  오늘 코드 리뷰 시간에 다른 팀의 코드를 봤는데 다들 구성도 잘 해놓고 구현도 많이 해놔서 약간 마음이 조급해졌다. 생각보다 UI 짜는게 속도가 안 나가고 있는데, UI 구현 단계부터 미래의 것을 너무 많이 고려하면서 짜다보니 그렇게 되는 것 같다. 밸런스를 잘 찾아야 될 듯..

할 일

• 옵션 카드 완성하기

잡담

• 일상 님이 타입스크립트에서 유틸리티 타입 중 하나인 pick을 알려주셨다. 신기했다!
• 내일은 태풍 때문에 비대면으로 활동한다. 출퇴근 시간을 아낄 수 있어서 좋다.
• 팀원들끼리 학습 스택 템플릿을 공유하기로 했다. 하루일과를 좀 더 구체적으로 정리해서 쓸 수 있고, 각자의 진행상황/생각/피드백을 더 쉽게 공유할 수 있을 것 같아 좋다.

배성현

오늘 한 일

• 버튼 컴포넌트 구현 팀원의 피드백을 받아 실수한 부분을 수정하고 스토리북의 사용법에 대해서 좀 더 고민해 볼수 있었다.

• 백카사전 구현 이미지 기능을 추가 하였고 테스팅을 좀 더 해보면 좋을 것 같다.

할 일

• 오늘은 꼭 메인페이지 섹션 스크롤 이동 기능 구현과 공통 컴포넌트 추가해서 pr을 날리고싶다....

김동철

오늘 한 일

• 도현님과 'Issue : #53 백엔드 API' 리뷰 어제 내가 작성한 PR을 보며 같이 리뷰하는 시간을 가지면서 좋은 피드백들을 받았다! 지금까지 관습적으로 softAssertions.assertAll()을 마지막에 호출했었는데, 직접 확인해 보니 assertAll()은 불필요한 코드였다는 걸 알게 됐다. 또 테스트에서 json 데이터를 object로 변환할 때 Json 라이브러리를 사용해서 힘들게 변환해왔는데, 도현님이 usingRecursiveComparison() 메서드를 알려주셔서 json과 오브젝트의 속성 비교 및 테스트를 한 번에 진행하는 방법을 알았다! 아주 좋은 피드백들을 받아서 감사했다 :)
• 백엔드 교육시간 오늘 수업에서는 ERD에 대해 학습했다. ERD면 그냥 테이블과 매핑되는 다이어그램이라고 생각했는데, 실제로는 테이블과 무관하게 개념적으로 Entity의 속성과 관계를 정리하는 다이어그램이었다! 그렇게 개념을 이해하니 ERD에 키 속성이 여러개 있을 수가 있고, 점선으로 그려진 속성들의 의미도 이해가 되었다! 오늘 주제도 대학에서 흔히 다루는 ERD였고 호눅스님도 과거에 대학교에서 강의하신 적이 있으셔서 그런지 뭔가 대학교 수업듣는 느낌이 물씬나서 재밌었다

할 일

• 자동차 상세 정보 조회 API, 카테고리 조회 API만 구현
• 루카스 학습 자료 공부하기!

잡담

• 프로젝트 시작하고 내내 도현님 옆에 앉아서 도현님 도현님 도현님 부르면서 한없이 물어보고 있는데 늘 잘 대답해 주셔서 고맙다! ㅋㅋ
• 오늘 점심에 한양 플라자에 가서 다 같이 먹었는데 즐거운 식사시간을 보내고 온 거 같아서 좋았다 :)
• 어제 해찬 님이 자동차 옵션 상세 설명 자료를 공유해 주셨는데, 덕분에 너무 작업을 편하게 해서 감사한 마음에 해찬 님이랑 아현 님께 이즐을 하나씩 드렸다. 오늘 아침에 강의실에 도착하니 해찬 님이랑 아현 님께서 커피를 두고 가셔서 덕분에 기분 좋게 하루를 시작했다. 요거 요거 깜찍이들 :)

피드백

• 도현 : 어제부터 하루종일 데이터 작업하시느라 정말 고생 많으셨습니다.. 🙏

한도현

오늘 한 일

• 데이터 넣기

  드디어 데이터를 넣었다. 다 합하면 1000만개쯤 되는거 같은데, CSV로 만들고 복사해서 넣으니까 금방 됐다. 이제 코드 칠 수 있다ㅎㅎ

• ERD 강의 듣기

  ERD를 테이블이라고 생각했었는데, 아니었다.

• 동철님과 열띈 토의

  API와 패키지, 컨벤션을 정했다.

할 일

• 파워트레인 셀프 모드 API 만들기
• 파워트레인 가이드 모드 API 만들기

잡담

• 내일 태풍와서 집에 있어도 된다고 하니까 늦게 일어나도 되겠다.^^

강현성

정혜린

오늘 한 일

• 공통 컴포넌트 (선택버튼) 구현
• 데이터 바인딩 작업

8월 10일 (목)

박일상

오늘 한 일

• 내 차 만들기 모드 선택 버튼 완성

엄청 어려운 컴포넌트는 아닌데, 시간을 오래 쏟았다. 코드가 깔끔하지 않더라도 완성해야 했나 싶지만 그래도 많이 고민하면서 구현했다. 어려웠던 이유는 재사용되는 케이스가 일관적이지 않아 어떻게 코드를 작성해야 깔끔하게 사용할 수 있을지 고민을 많이 했기 때문이다. 가이드 모드 버튼의 예외 처리를 위해서 데이터에 변수 하나를 추가할지, 지금처럼 따로 구현하는 게 맞는 것인지는 아직 잘 모르겠다.

• API 호출을 위한 Proxy 설정 / 환경 변수를 활용한 API 경로 설정

개발 환경에서 서버의 API를 호출할 경우, CORS 정책을 위반한다. 따라서 별도의 설정을 해야 하는데, 이는 기본적으로 백엔드에서 처리하는 것이다. 하지만 현재 프로젝트에 Spring Security를 사용할 수 없다고 하여, 이를 위한 처리를 하는 것이 매우 번거로운 과정이고 시간을 낭비한다고 판단하였다. 따라서 FE에서 proxy를 설정하여 처리하였는데, api 서버가 URL 경로 앞에 /api를 붙이는 것이 아닌 서브 도메인으로 구성되어 있어 프록시 처리를 하기가 어려운 부분이 있었다. 따라서 환경 변수를 활용하여 개발 환경에서는 /api를 붙이고, 이를 proxy로 가로채도록 설정하였다. CORS 정책 문제는 처음 겪는 것은 아니지만 항상 어려운 것 같다. 이번 주 주말에는 CORS 정책 문제에 대해서 조금 더 공부해 봐야겠다.

• 스타일 오류 수정

Tailwind CSS의 @layer utilities와 @apply를 활용해서 필요한 새로운 유틸리티를 하나 만들었는데 그 부분에서 당황스러운 오류가 하나 발생했다. 작업 브랜치에서 작업할 때 전혀 문제없어 개발 브랜치로 병합하였는데, 갑자기 에러가 발생하였다. 문제 발생 원인을 알 수 없어 찾아봤지만, 자료도 거의 없었으며 Tailwind CSS의 내부 동작에서 문제가 발생한 것으로 추정이 되었다. 인기 있고 많이 사용되는 라이브러리라도 내부 동작에서 문제가 발생할 수 있다는 것을 다시 한번 되새기고 어쩔 수 없이 해당하는 부분을 @apply를 사용하지 않도록 변경하였다.

• CD 설정

백엔드 분들에게 부탁해서 해결할까 싶기도 했지만, 실제로 프론트엔드 영역에서도 배포에 대해서는 알고 있는 것이 좋다고 했던 크롱 님의 말씀이 생각나서 직접 Github Actions를 위한 yml 파일을 공부하며 작성해 보았다. 이제 테스트해 보려고 한다.

할 일

• CD 설정 완료
• 데모 영상 준비

잡담

오늘은 태풍의 영향으로 비대면으로 활동을 진행했다. 아침에 가볍게 스크럼을 진행하고 내내 개발을 한 후, 저녁에 데모 영상 준비를 위한 회의를 하였다. 그사이에 정말 말 한마디 안 하고 계속 개발만 해서 그런지 끝나고 나니 속이 안 좋아 잠깐 바깥에 나가 바람을 쐬었다. 그래도 집중해서 개발할 수 있어서 좋았고, 최근에 좀 무리한 감이 있어 피곤했는데 컨디션도 좋아진 것 같다.

피드백

우리 팀원들이 비대면임에도 불구하고 활발하게 소통하며 개발하는 모습이 너무 좋았다. 점점 발전해 나가는 것 같아서 뿌듯하다! ☺️

박지혜

오늘 한 일

• 옵션 카드 트랜지션

  오늘은 트랜지션으로 삽질하느라 하루의 절반을 보냈다. 처음엔 늘어나서 보여져야하는 div 태그에 transition을 안걸어줬더니 duration만큼의 시간이 지나고 덜컥거리는 문제가 발생했다. 몇번을 삽질하고 나니 이제는 웬만큼 예쁘게 돌아가는데, 하나 걸리는게 있다면 price를 담은 div가 늘어나서 보여지는 div에 걸려서 내려간다.. 하하 transition-opacity도 줘야하는데 tailwind로 어떻게 해야할지 머리가 아프다..

  학습스택 쓰면서 계속 이것 저것 해봤는데 방금 transition-all 줘서 해결했다ㅠㅠㅠㅠㅠㅠㅠ 이 속성을 왜 이제 알았을까?... 오히려 자바스크립트랑 css keyframe 조합이었으면 이렇게 오래는 안 걸렸을 것 같은데 tailwind랑 리액트 조합으로 작성하려니까 정말 고난의 연속이었다.. 그리고 transition 들어가면서 코드가 길어지니까 가독성이 많이 안 좋아졌다. 옵션 카드에 css 디테일도 많아서 더 그런 것 같다.

• 옵션 카드에서 받는 내용 mock data랑 연결(하는 중..)

할 일

• 옵션 카드 제발x100 완성하기
• 스토리 작성해보기

피드백

• 오늘은 나에게 회초리.. 내가 일을 빨리 쳐내야 다른 팀원들 부담이 상대적으로 줄어들텐데 그러지 못해서 팀원들한테 미안하다. 제발 빨리 해...!

배성현

오늘 한 일

오늘 하루종일 스카에서 개발을 해서 그런지 진도가 많이 나갔다! 특히 백카사전 파싱 컴포넌트를 NPM에 처음으로 배포하여 백엔드 API와 연동하여 사용해보니 뿌듯했다! 나도 오픈소스 개발자?? 또한 팀원들과의 활발한 코드리뷰를 통해 서로의 코드 가치관에 대해서 좀 더 알아갈 수 있었고 서로 성장하는 기분이 들어 좋았다! 코드리뷰 후 머지하는 시간이 들긴하지만 서로 실수할 수 있는 부분에 대해서 팀원이 잡아줌으로써 전체 프로젝트의 완성도가 올라간다는 점이 전체적으로 봤을때 효율적이라고 생각한다. 마지막 금요일도 영차영차

할 일

• 팀원과의 리뷰 후 Select 버튼 컴포넌트 구현
• 옵션 페이지 컴포넌트 구현
• 팝업 컴포넌트 구현

잡담

오늘은 코딩 그만하고 운동가야지

김동철

한도현

오늘 한 일

• 기본 패키지 및 클래스 생성 테이블이 많다보니 만들어야 할 클래스 파일도 많았다. 그래도 동철님이랑 같이 하다보니 금방 끝났다.

• JDBC template으로 전환 Spring Data JDBC로 하다 보니 Aggregate, DDD 같은 새로운 개념들을 마주했다. 우리 프로젝트에 맞는지 모르겠고, 새로운 개념들을 배우기에는 시간이 촉박할 것 같아 JDBC template으로 바꿨다.

할 일

• 데모 영상 찍기
• power train self api 구현
• power train guide api 구현

잡담

9시에 일어나니까 좀 더 개운한 느낌적인 느낌? 출첵하고 집에서 하루종일 노트북만 뚝딱거리고 있으니까 네부캠 생각이 났다. 그때도 열심히 했었지.. 진도가 영 안나가는거 같은데, 다 완성할 수 있을까

강현성

정혜린

오늘 한 일

• 로딩 페이지 관련 애니메이션 작업 구현
• 원형 프로그래스 바
• 이미지 애니메이션
• 하단 텍스트 관련 애니메이션

8월 11일 (금)

박일상

오늘 한 일

• 데모영상 촬영

  먼저 아침에 금요일인 만큼 데모영상 촬영을 마쳤다. 말을 잘 정리해서 깔끔하게 말하는 연습이 필요할 것 같다. 면접까지 앞으로 한달정도 남았는데, 프로젝트와 CS공부, 발표 연습까지 할 일이 너무 많다.

• 코드리뷰

  오늘은 9조와 함께 코드를 살펴보고 다른 팀의 코드 리뷰를 했다. 너무 어려워 이해하기 어려운 코드들도 있었고, 몰랐던 부분을 새로 알아가는 부분이 있었다. 특히 TypeScript의 CSSProperties, HTMLAttributes 타입 등이 인상 깊었고 꼭 사용해야겠다는 생각을 했다.

할 일

• 로딩 화면 구현

잡담

오늘은 점심이 너무 늦게 왔다. 덕분에 식은 밥을 먹어서 기분이 별로 좋지 않았지만 환불처리가 되어서 그냥 먹었다.

박지혜

오늘 한 일

• 데모 찍기

• 스쿼드 세션 & 코드 리뷰

  아주 유익한 스쿼드 세션 시간이었다! 우리 팀원들도 그렇고 다들 엄청난 고수셔서 2시간 동안 최고로 알찬 강의 들은 기분이었다. 와중에 안 그래도 모달창 구현해야 되는데 승원 님께서 꿀팁 전수해주셔서 조용히 귀담아들었다ㅎㅎ.. 주말동안 적용해 봐야지!

• 옵션 카드 관련

  어제 mock data를 만들어서 연결해 보다가 api 명세서에서 이해가 가지 않는 부분이 생겨서 백엔드 분들께 여쭤봤더니 수정을 해야 한다고 하셨다. 백엔드 분들도 고민이 많아 보이셨는데, 백이랑 프론트 둘 다에게 쉽지 않은 부분인 것 같다. 카테고리마다 백에서 받아야되는 내용도 다르고 레이아웃도 달라서 어떻게 작성을 해야 재사용을 용이하게 잘 할 수 있을지 고민이다. 와중에 css적으로 신경 쓸 것도 많아서 어렵다~~ 일단 api 명세서가 명확하게 나오지 않았으니 css라도 주말 동안 어느 정도 사용 가능한 수준으로 완성할 수 있기를 바랄 뿐..

할 일 (오늘은 한 게 별로 없어서 어제랑 거의 똑같다)

• 옵션 카드 완성하기
• 스토리 작성해 보기
• 모달창 구현

잡담

• 밥이 아주 늦게 와서 슬펐으나 동철 님이 불굴의 의지로 환불을 받아내주셨다.. (박수)

배성현

오늘 한 일

• 데모영상 찍기
• 다른 팀들의 코드를 리뷰 및 피드백
• 메인페이지 전체 레이아웃 및 컴포넌트 완료

할 일

• 주말까지 가이드 모드 및 셀프 모드 레이아웃 완성

김동철

한도현

오늘 한 일

• power train api 조회 jdbc template를 사용 중인데, join한 결과를 객체로 매핑하는데 애를 먹었다. JPA가 편하게 해주는구나라고 느꼈다.
• 백엔드 피어세션 서로 어떻게 했는지, 얼마나 했는지 궁금했던걸 볼 수 있었다. 다들 꽤 많이 했다. 누가 계속 우리 조가 앞서 나간다고 하던데.. 흠... 이제 막 api 구현하고 있는데

할 일

• API 최소 2개 구현

강현성

정혜린

오늘 할 일

• 데모영상 찍기
• 로딩 화면 구현하기
• 백카사전 구현하기

오늘 한 일

• 데모영상 찍기 : 현성님과 파트를 나누어 노션을 활용하여 발표를 진행하였다. 한주간의 일정과, 한 일들, 그리고 개개인의 회고에 대해 글로 적고 파트별로 설명을 하였다. 시간이 상당히 부족해 적절하게 말을 했는지 잘 모르겠다.
• 로딩 화면 구현하기 : 애니메이션 처리가 까다로워서 어떻게 처리를 해야할지 모르겠다. 일단 초단위로 애니메이션 처리를 했고, 3초 이상의 로딩이 걸릴 때에는 어떻게 해야할지 고민해봐야한다.
• 백카사전 레이아웃 구현하기 : 뷰에서 단어를 찾아 하이라이트 기능 및 클릭기능을 부여해 백카사전 다이얼로그가 뜨도록 처리하였다. 라이브러리화를 해보자는 제안이 있어, 업로드 하지 않았다. 방식이 조금 틀린 것 같아, 단어를 찾는 로직을 수정해야할 것 같다.

잡담

• 동철님과 현성님 덕분에 식사랑 커피 즐거웠습니다~! 잊을 수 없는 일이 일어났네요!