현재 구직 활동 및 학습 병행하면서 디자인 추가하여 2차 작업으로 진행 중
#. 1차 작업한 회고록
[회고록] 리액트 토이프로젝트：생일 캘린더 (1차 작업)
📃 개요 리액트 강의에서 useState( ) 끝마친 후 학습한 내용을 활용하여 생일 캘린더를 구현하였습니다. ⏳ 개발 기간 하루 3~5시간 소요 💻 활용한 기술 개발 · HTML · CSS · JavaScript · React useState(
kimseunggu93.tistory.com
#. 개요
1차로 작업하고 배포 후 레이아웃, 상태 관리, 중복된 코드, 재사용할 수 있는 컴포넌트 ···등 관련된 문제가 발생하여 리팩토링 진행하였으며 2차 작업에서는 완성도를 높이기 위해 디자인 작업 시도하고 지금까지 배운 리액트 Hook 활용하여 작업하였습니다.
그리고 이전 글에 이모지가 들어가서 읽기가 불편해 보일 것 같아서 양식을 변경하였습니다.
#. 작업 시간
1일 5~8시간 작업
#. 회고록
아래 내용부터는 일기장처럼 회고록을 작성하겠습니다.
진행 전
1차 작업에서 디자인이 완성되지 않고 개발하여 완성도가 낮았다. 그래서인지 최소한의 디자인을 하고 프로젝트를 시작하였다. 개발 단계에서 어디서부터 개선해야 할지 몰라서 막연하였지만 내가 작성한 코드를 살펴보면서 진행하였다.
진행하면서 놓친 부분
진행하면서 만났던 문제를 어떤 과정으로 해결하였는지 작성하였다.
# 1. PC에서는 멀쩡한데.. 모바일에서 깨졌다.. 아..
- 상황
모바일에서 볼 때 레이아웃이 깨지고 난리가 아니었다. (아래의 이미지 확인)
- 문제
처음 시작할 때 PC, 모바일 정하지 않고 무작정 프로젝트를 시작이 문제였다. 또한 기획, 디자인도 없었다.
- 해결하는 과정
해결하기 위해 기획, 디자인도 작업하였다. 기획은 구글링하여 인사이트를 얻었고 디자인은 핀터레스트에서 레이아웃을 참고하여 피그마로 작업하였다.
- 해결 및 얻은 것
프로젝트 작업하면서 "구현할 때마다 여기서 생길 수 있는 문제는 무엇일까?"라는 고민하면서 문제를 정의해야 하겠다. 또한 기획, 디자인 인사이트를 얻었다.
# 2. 입력 받은 값 상태 관리
- 상황
- 문제
- 해결하는 과정
- 해결 및 얻은 것
- 해결
# 3. HTML 요소 2개가 렌더링되는 현상
- 상황
달력 페이지에서 해당하는 날짜에 생일 목록 타이틀을 리팩토링하면서 개발자 모드를 확인하였다. 달력 페이지로 이동 후 처음 렌더링할 때 HTML 요소 2개가 렌더링 되고 해당하는 날짜를 클릭하면 HTML 요소가 변경되지만 그래도 2개가 렌더링 되는 상황이었다.
- 문제
1차 작업에서 기능 구현할 때 문제가 됐다. 달력 페이지로 이동하면 오늘 날짜의 목록이 나와야 되는 화면이었다. 그리고 해당하는 날짜를 클릭하면 목록이 나와야 되는 화면이었는데 HTML 요소 2개로 구현하였다.
- 해결하는 과정
코드랑 콘솔 로그 출력하면서 로직을 확인하면서 "어떻게 하면 해결 할 수 있을까?"라는 고민하다가 new Date( ) 날짜랑 정보를 입력받은 날짜 값을 filter( ) 메서드 사용하여 해결하였다.
- 해결하는 과정에서 얻은 것
해결하고 코드를 보니까 또 다른 부분에서 문제가 발생하면서 "해결하고 또 생길 수 있는 문제는 무엇일까?"라는 깊게 고민해야 한다는 것을 알았다. (다음 항목에서 트러블슈팅 추가로 작성)
- 해결
# 4. 방금 3번에서 해결 후 발생한 문제
- 상황
"해결하고 또 생길 수 있는 문제"를 보였다.
- 문제
1. 중복된 코드
2. 생일 페이지로 이동하면 생일 목록 렌더링
- 해결하는 과정
(로직을 고민하면서 해결 중)
- 해결하는 과정에서 얻은 것
ㅇ
- 해결
(추후에 이미지 추가)
# 5. 트러블 슈팅 정리 가이드
- 상황
- 문제
- 해결하는 과정
- 해결하는 과정에서 얻은 것
- 해결
# 6. vite 환경 설정
- 상황
컴포넌트 파일 이름 변경하고 렌더링하려고 하였는데 렌더링이 되지 않았다.
- 문제
"왜? 자식 컴포넌트 렌더링이 안돼?" 하면서 원인을 찾기 위해 구글링하고 vscode 닫아보고 크롬 캐시 삭제도 해보고 부모 컴포넌트는 렌더링되니까 코드를 옮겨서 작업하니까 이제서야 대소문자가 문제가 되어서 자식 컴포넌트가 렌더링이 되지 않았다.
- 해결하는 과정
대소문자를 수정하고 렌더링이 되는 것을 확인하였다.
- 해결하는 과정에서 얻은 것
vite 환경 설정이 가능하다는 것을 알았다.
- 해결
vite 환경 설정하고 작업 시작하였다.
# 8. 파일 구조 및 초기 UI 개발하는 과정에서 유연하지 않았다.
- 상황
수정 및 변경하거나 기능 추가 또는 공통 요소가 유연하지 않아서 어려움이 발생하였다.
- 문제
스타일 속성 수정 및 변경, 기능 변경 및 추가 ··· 등 작업하는 시간이 많이 걸렸고 코드 구조를 변경하는 일도 발생하고 유지 보수에 있어서 어려움이 발생한 문제가 있었다.
- 해결하는 과정
전체적인 구조를 하나씩 파악 후 유연한 UI로 해결하기 위해 노력하였다.
- 해결하는 과정에서 얻은 것
초기 설계가 중요하고 추후에 수정 및 변경 그리고 추가할 수 있는 상황이 발생하는 것을 생각하여 작업해야 한다는 것을 많이 느끼고 얻어갔다. 다음 프로젝트에서는 이러한 문제를 최대한 마주치지 않도록 해야겠다.
- 해결
(링크로 갈음하며 이미지 추후에 업로드하기)
# 9. 전역 상태를 단순하게 js 파일에 배열 형태로 관리하다가 리덕스 도입하여 문제 해결
- 상황
useState( ) 상태 관리하다가 컴포넌트 props 전달하는 과정에서 전역 상태 관리가 필요하여 단순하게 .js 파일 생성하여 자바스크립트 객체로 관리했다.
- 문제
자바스크립트 객체로 관리하다가 많은 문제들이 발생할 수 있다는 것이었다. 단순한 배열만으로는 복잡한 상태를 효율적으로 관리하기 어렵고 유지 보수가 어려웠다.
- 해결하는 과정
리덕스를 학습하고 도입하여 전역 상태 관리를 해결하였습니다.
- 해결
리덕스를 활용하여 해결
# 10. 생년월일 변경 시 디데이가 업데이트되지 않는 이슈
- 상황
생일을 변경하고 저장했는데 디데이가 업데이트가 되지 않았다.
- 문제
변경한 생년월일로 렌더링되면 디데이가 표시되지 않았다. 기능 구현을 하지 않았고
- 해결하는 과정
- 해결
# 11. 트러블 슈팅 정리 가이드
- 상황
- 문제
- 해결하는 과정
- 해결
리팩토링 진행 후 얻은 것
1. "구현할 때마다 여기서 생길 수 있는 문제는 무엇일까?"라는 고민하면서 문제를 정의해야 하겠다.
2. 작은 코드여도 "왜 이 코드를 사용해야 할까?" 고민하면서 작성해야 하는 것을 얻었다.
3. 리덕스를 활용한 코드
4. 프로젝트 시작하기 전 어떤 기술을 사용할 것인가? 고민하고 시작한다. 프로젝트에 들어가는 기술 설정한다.
더 공부해야 할 것
1. 깊게 생각하는 습관
어떤 문제가 발생하면 생각하는 깊이가 부족하여 일어나는 상황이 있었다. 조금 깊게 생각하면 해결 할 수 있는데 시간이 지나고 해결하거나 구글링 도움으로 해결하였다. 이를 바탕으로 깊게 생각하는 습관을 만들어야 하겠다.
2. 생각을 정리하는 습관
작업 및 블로그 정리하다보면 정리가 잘 되지 않는 것들이 보였다. 생각을 메모하면서 정리해 나가면서 습관을 만들어야 하겠다.
3. 자바스크립트, 리액트 훅, 리덕스, 스타일 컴포넌트
공부하면 할수록 많은 자료들이 나온다. 그리고 또 배운다. 이를 통해 나는 기본기가 중요해서 많은 기술 스택보다 기본을 택했다. 더 공부해야 하겠다.
끝
미흡한 내용이었지만 끝까지 읽어주셔서 고맙습니다. (90도 숙여서 인사) 😊