[React] Colorful Diary

배포 홈페이지

https://sweesweett.github.io/react-diary-app/

Colorful Diary

Colorful Diary 화면1

원래는 강의를 들으면서 복습 겸 만든거였다. 쓰기 귀찮아져서 깃허브의 README.md를 조금 수정해서 만들면서 힘들었던부분, 그런부분들을 적어나가려한다!

 

!아이디어!

 색상으로 오늘의 기분을 표현하는 다이어리 

- 기분 점수 혹은 오늘기분 맑음 이런것 보다 눈으로 나타나면서 예쁘게 보였으면 싶어서! 색상으로 표현하는 나의 기분 이런 느낌의 아이디어를 바탕으로 구현을 시작했다

!구현 기간!

 22.06~08 

- 지금 듣는 국비(오전 9시~오후6시)강의 정규시간을 제외하고 만들어서 꽤나 시간이 많이 걸렸다. 리액트를 처음 다루기도했고, 강의가 중간에 리액트 안하구 갑자기 백엔드 기초부분을 가르쳐서 중간이 붕뜬 감이 없지않아있다..ㅎㅎ..

- 사실 그냥 올려진 [Colorful Diary 화면1]상태에서 CRUD가 다 나오는 todoList형태의 일기로 끝내려 했었다. 말그대로 한장! 복습을 하기위해 만든것이기 때문에 CRUD를 구현하고 다른 솔로 프로젝트를 진행하려했으나, 아쉬운 부분이 많아서 기능은 그대로지만 라우터를 사용해 화면을 변경하였다

- 리액트의 방식이 바닐라 자바스크립트의 코드와 사뭇 달랐기 때문에 적응하기 어려웠다!

 

!사용한 라이브러리!

react-uuid

---

리액트 라우터는 화면에서 id값을 통해 일기 상세페이지, 수정페이지로  들어갈 때 사용하였다.

react-uuid는 리액트는 한컴포넌트를  map메서드를 사용해 여러개 보여지게 할때 key값이 필요한데, index로 할 경우 동일한 인덱스 값이 나올 수 있어서, react-uuid를 통해 id값을 받아 key 값, 수정,삭제를 하기위해 사용하였다. 

 

!특징!

• 선택한 색상에 따라 일기 배경의 색상이 변경됨
• 날씨 api/ fetch로 받아와서 현재 서울 날씨를 알 수 있음
• 일기를 작성했을 때의 날씨(이모티콘)를 볼 수 있음
• localStorage를 통해 개개인의 일기를 컴퓨터에 저장할 수 있음
• 클릭했을 떄 상세 내용을 볼 수 있음
• 상세페이지에서 더보기 버튼을 통해 수정/ 삭제할 수 있음

!개발 사항 흐름!

 

1.0 글 등록 기능 구현

1.1 글 수정, 삭제 기능 구현

-  로컬 스토리지를 사용해서 구현하였다. 수정 삭제기능은 useState를 사용함

- 색상은 한 컴포넌트당 각각 다르기때문에 인라인 스타일을 사용했는데, 리액트는 스타일을 객체로 넣어줘야하며, - 가 들어간 부분은 대문자로 써줘야 한다는 점을 이때 알았다.

예를 들면  <div style={{backgroundColor:black}}></div>  이렇게 작성해야 한다

-css적인 부분에서 말을 하자면 정말 초반에 시간을 많이 투자했었다. `Glassmorphic` 한 느낌을 내고 싶었고, 덕분에 다양한 방법을 써보며 처음 보는 css속성을 접할 수 있었다

 

1.2 날씨 API에서 받아온 해당 날씨에 맞는 날씨 아이콘 추가

- 날씨 api를 받아서 정보를 뿌려줬다. 이때 useEffect를 처음 사용해보았는데, 처음에는 useEffect하지 않고 하니 과장을 조금 보태서 몇초만에 100번이 넘는 요청이 가는 걸 보고,useEffect를 제대로 사용하기 시작했다.

- background-position을 처음 사용했다. 처음엔 어떻게 해야하나 싶었는데, 날씨 api에서 icon을 제공하고있고, 그에 맞는 값을(예:icon:'10d') JSON에 데이터에 보내준다는 사실을 알게 된 후 이 데이터를 적극 활용해서 if문을 작성해 해당 아이콘이 있다면, 그에 해당하는 background-position을 제공하는 함수를 작성해 날씨에 맞는 아이콘을 넣을 수 있었다.

 

1.3 모달페이지 구현

- 많은 부분이 생략됐는데 정말 많은 시행착오가 있었던 컴포넌트가 아닌가 싶다. 다른사람은 어떻게 했는지 모르겠지만, 나같은경우는 모달은 app.js에 두고 해당 모달을 열었을때 닫았을 때의 상태, 모달을 사용할때 상태를 props로 내려보냈다. 그리고 계속 재활용하기위해서 용을 썼었다. 처음으로 state를 객체로 만들고 이벤트 함수를 value값으로 넣었다. 

    setModalContent({
      target: 'delete',
      func: () => diaryDelete(id),
    });

이런식으로 작성하였다.

2.0 todoList처럼 리스트에서만 각 일기를 삭제-> 리액트 라우터를 통해 기본페이지 ,상세페이지 따로 구현
2.1 수정 페이지 구현
2.2 리액트 라우터를 통해 뒤로가기버튼 구현 + 뒤로가기를  눌렀을 때 이동에 대한 모달이 뜨게 구현

-리액트 라우터를 통해서 기존의 모양에서 상세페이지, 수정페이지를 따로 구현했고, 상세페이지에서 더보기 버튼을 눌렀을 때, 수정 삭제버튼이 뜰 수 있도록 useState를 사용해 구현하였다. 뒤로가기 버튼도 만들고, 수정하는 도중에 뒤로가기 버튼을 눌렀을 시 위의 모달페이지에 

해당 내용이 담기도록 설정했고, 할게요를 누른다면 이전의 상세페이지로 돌아가도록 설정하였다.

3.0 useReducer+React.contextApi 로 상태 관리 리팩토링

이걸 사용하면서 아쉬운점은 props로 내려준 상태가 변경될 시 함께 리랜더링 된다는 점이었다. 워낙에 작은 몇장안되는 프로젝트였기에 사용에 대한 편리함은 느끼지 못했다! 경험을 했다는 것에 대해 중점을 두고 싶다.

 

 

후기

첫번째로 내 아이디어로 홀로 만든 플젝이었기 때문에 정말 많이 정이 갔다. 모든게 서툴고 부족할때 만들어서 그런가, 첨엔 정말 잘한 줄 알았는데, 시간이 갈수록 부족함이 보였었다. 반응형을 하지 못했고, 너무 width가 작게 설정되어서 큰 화면에서는 정말 구성된 화면이 작았다. 언젠가 구현기간이 06~08이 아니라 06~이 되는 리팩토링을 기대하며 지금의 실력과 비교했을때 정말 월등해진 나를 기대하며 이만 이 프로젝트 이야기를 마무리하려한다

2달간 정말 수고했어!