[DoDream 프로젝트] 3주차 회고

어느덧 시간이 흘러 교육 과정 마무리까지 한달도 채 남지 않았다.

시간 진짜 빠르고...프로젝트 언제 하나 싶고 뭔가 조급하지만 그래도 이번주에 나름대로 순조롭게 흘러가서 다행이었다.

 

 

 

 

 

 

1. 디자인

메인 페이지 디자인을 우선 먼저 해두었다. 피그마를 보면 겹치는 디자인이 많아서 한 번 정리해두면 나도 편하고 다른 팀원들도 편하기에 백엔드 기능을 구현하기 전에 프론트 쪽에 디자인을 했다.

 

이번에는 재사용성을 중점에 두고 생각해봤다. 물론 재사용성이라고 해봤자 디자인 틀 재사용이긴 하지만...

우선은 중복되는 부분을 최대한 컴포넌트화하려고 했다.

 

스터디랑 문제집 카드가 전부 디자인이 동일하기 때문에 전체적인 큰 틀의 디자인은 동일하게 유지하고,

카드 안에 들어가는 정보들만 조금 다르게 만들었다.

 

 

그렇게 해서 탄생하니 문제집 카드와 스터디 카드.

component 폴더 안에 UI 폴더를 생성하고 거기에 재사용되는 카드들을 넣어두었다.

더미 데이터로 나타낸 거지만 이렇게 디자인을 하고 나니 너무 그럴듯 해서 놀랐따(?)

 

늘 생각하지만 css 부분이 정말 어려운 것 같다. 특히 하나하나 세세하게 신경써야 하니까 시간이 더 오래 걸리는 듯 싶다. 이번에는 그래서 너무 오래 걸린다 싶으면 chat gpt에게 물어보기도 하면서 진행했다.

(원래는 스타일도 직접 해야 하지만....스타일에만 썼다....ㅠ)

 

아, 그리고 검색창도 생각보다 쓰이는 곳이 많아서 그것도 UI 폴더 안에 넣어두었다.

 

 

https://daydream-sy.tistory.com/350

[React] 재사용 가능한 검색창 UI component 만들기

 

 

이렇게 다른 프로젝트에서도 쓰일 법한 컴포넌트는 따로 글로 작성해주었다.

이번에는 백엔드 기능에 초점을 맞추고 있어서 리액트 쪽보다는 자바를 더 공부하고 있긴 하지만,

디자인은 잘 만들고 싶어서 고민 중이다 ㅋㅋㅋ

 

 

 

 

 

 

 

2. CRA에서 vite로 마이그레이션하기

https://daydream-sy.tistory.com/348

[React] CRA에서 Vite로 마이그레이션 하기

 

난생 처음 프로젝트 중간에 마이그레션을 해봤다.

나는 지금까지 CRA로만 리액트 프로젝트를 생성했는데 vite를 적용해본 적이 없었다.

물론 프로젝트 중간에 마이그레이션도 처음이다.

 

이걸 한 이유가 있는데,

react activity calendar라는 라이브러리가 있다.

 

라이브러리 적용한 모습

 

이렇게 깃허브 잔디처럼 매일 본인이 공부한 기록들을 통해 잔디가 채워지는 것처럼 보이고 싶었다.

이런 게 있으면 동기부여도 되고, 다른 사람들 잔디 보면서 자극 받으니까. 그래서 이 라이브러리를 찾아서 적용하는데

vite로 생성된 프로젝트에만 적용이 되는 것이다...!

사실은 계속 오류가 나서 몰랐는데 강사님이 알려주셨다.

그래서 새로 프로젝트를 생성하느냐, 아니면 마이그레이션 하냐 두 가지 선택지가 있었는데

테스트 프로젝트에서 잘 마이그레이션이 되어서 중간에 이거 하느라 시간이 좀 걸렸다.

 

그래서 저 위에 블로그 글로 하나 남겼다.

제대로 잘 적용되어서 다행이었다...ㅎ 이제는 하나의 해프닝으로 남았지만 당시에는 진짜 막막했었다.

 

 

 

 

 

 

 

3. spring test code 작성해보기

이번에 내가 프로젝트 하면서 목표로 삼은 것 중 하나가 바로 테스트 코드 잘 작성하기였다.

테스트 코드라는게 막연하기도 하고 TDD를 적용해보고 싶었는데 이번주에 처음으로 작성해보았다.

우선은 repository 관련 테스트 코드만 작성했는데 신기하고 재밌었다.

 

테스트코드에 대해 관심을 가지게 된게 김영한님의 스프링 강의를 들으면서부터였는데 모든 기능들을 테스트 코드에 작성하시는 거다. 그러면서 테스트 해보고 다시 설명해주시고...이런게 너무 신기해서 프로젝트를 하면 꼭 적용해야겠다는 생각을 했었다.

 

그래서 팀원 분의 코드를 참고해서 나도 작성해보았다.

 

그 기록을 남긴게 바로 아래 블로그 글이다.

https://daydream-sy.tistory.com/349

[Spring Boot] H2 Database를 사용하여 테스트 코드 작성하기

 

local에서 test하지 않고 h2 database를 사용해서 테스트를 하고,

진짜 기능 테스트는 로컬 test db에 연동해서 구현하고 있다. 꽤나 즐걱운 경험이다.

 

 

 

 

 

 

 

4. 기능 구현 ing

아직은 구현된 기능들이 많이 없지만 천천히 하나씩 하고 있는 중이다.

문제집 조회기능, 카테고리별 기능, 검색 기능 등등...다음주부터 본격적으로 CRUD 구현을 하지 않을까 싶다.

우선은 소셜 로그인 기능부터 프론트에 연동하고 생각해야지.

 

이번주 해보니까 개발 루틴이란 게 생겼다.

github 프로젝트에 개발할 기능 생성 → 이슈 생성 → 브랜치 생성 (feature/#이슈번호) → 해당 브랜치에서 기능 구현 및 커밋 → PR 날리기

 

이런 식으로 기능을 구현중이다.

저번주에 github project를 잘 쓰고 싶다고 적었는데 나름대로 순항 중이다.

아무래도 오프라인이라 다같이 이야기할 시간이 많아서 더 이득이라 생각한다. 바로바로 궁금한거 물어볼 수도 있고 PR 날린 다음에 코멘트 남기고 받는 것도 빠르니까.

 

아직 초기지만, 이런 개발 루틴대로 개발하면 좋겠다.

 

 

 

 

 

 

 

---

이번주에 개발을 시작하면서 확실히 많은 일들을 겪었다.

프론트 쪽도 그렇고 백엔드 쪽도.

처음으로 자바 스프링을 이용하는 거라 걱정을 엄청 많이 했는데, 팀원들도 있고 강사님도 있어서 덕분에 많이 물어보면서 프로젝트를 진행하는 것 같아서 좋다. 물론 프로젝트야 항상 재밌기도 하고.

모르는 걸 배워나가는 게 재미있다. 이대로만 쭉 순항했으면 한다...ㅋㅋㅋㅋㅋ