[React 토이프로젝트] 메모장 회고록

메모장 만들기2 를 만들려다가 회고록을 쓴 김에 퉁치는 포스팅

프로젝트 링크: https://yyeojung.github.io/react_memo

MEMO

 

❤️ 개발 의도

• 자바스크립트와 리액트 강의를 들은 후 기술 습득을 위해 만들었습니다.

📅 개발 기간

• 총 4일(디자인 1일, 개발 3일)

🖥️ 사용 기술

• Design tool: Figma
• Editor: VScode
• Lang: css, React.js, styled-component
• 배포: Github.io

 

🎨 디자인

간단한 메모 기능을 할 수 있는 메모장을 만들고 싶었고 그에 맞게 레트로라는 컨셉으로 배경화면까지 디자인하였습니다. 
저는 주로 다크모드로만 사용을 하는터라 제가 만드는 프로젝트에도 다크모드 기능을 넣고 싶었습니다.

 

 

✔컴포넌트 설계

 

pages에는 배경화면과 라우터로 이동하는 메모장 홈, 메모장 작성 화면이 있고 components에는 공통적으로 사용되는 요소들을 넣으려 하였습니다.

 

🙌 구현 기능

• 라이트/다크 모드 (Styled-components/ ThemeProvider 사용)
• 메모 생성 기능 (uuid 사용)
• 메모 수정 기능
• 메모 삭제 기능

 

1. 라이트/ 다크 모드

---

ThemeProvider를 사용하여 테마의 라이트모드와 다크모드가 적용될 수 있게 하였습니다. theme.js 에 다크모드와 라이트 모드에 사용되는 색상 코드를 설정하여 조건 값에 따라 테마에 맞는 스타일이 적용될 수 있도록 하였습니다.

 

2. 메모 생성/ 수정/ 삭제 기능

---

로컬 스토리지에 ‘memos’란 키를 생성해서 메모의 제목과 내용을 값으로 저장했습니다. 메모 홈: 저장된 메모가 있을 경우에 최신순으로 불러와지도록 했고, app.js에도 memoId의 route를 추가하여 메모를 클릭시 해당 id주소의 메모로 이동하게 하였습니다. 저장버튼: 새메모장에서는 uuid를 사용하여 새 메모의 내용을 로컬스토리지에 추가하게 하였고, 수정 메모장에서는 해당 메모의 값을 불러와 수정된 내용으로 저장되게 하였습니다. 삭제버튼: 로컬 스토리지에서 해당 id를 제외한 나머지 값을 새로운 배열로 만들어 로컬 스토리지에 다시 저장하게 하였습니다.

 

📝회고록

---

🙌 어려웠던 점

❓ 로컬스토리지를 이용해 보는 것. 처음엔 다른 사람들의 코드를 보면서 내 코드에 적용해보려 했지만 실패하였다.

다른 사람들의 코드를 보는 것도 중요하지만 내 코드에 적용하려면 로컬스토리지를 먼저 이해해야겠다는 생각에 코드를 가져온 것을 지우고 로컬스토리지를 불러오는 것부터 차근차근 시작했더니 풀리기 시작하였다.

 

❓ 이게 제일 좋은 방법이 맞나? 나는 강의로 자바스크립트와 리액트, 스타일 컴포넌트 등의 기술을 배웠지만 제대로 구현하기에는 한참 부족하다고 생각한다. 내가 코드를 작성하면서도 분명 이렇게 쓰는 것보다 더 간결하고 좋은 방법으로 코드 작성할 수 있을 것 같다는 생각이 들 때가 있었다. 그럴 때는 무조건 검색해봐서 한 줄이라도 더 간결하고 눈에 보기 좋은 코드로 작성하려고 노력하였다.

 

🙌 성과

😀 다음 프로젝트로 도전! 간단한 프로젝트였지만 이 마저도 내가 할 수 있을까? 라는 생각이 들었다. 강의를 듣고 지식을 얻는 것도 중요하지만 강의를 듣다 보면 지식을 내 것으로 만들지 못했다는 생각이 들 때가 있었다. 그래서 프로젝트를 만들어봐야겠다고 결심을 했고, 부족하지만서도 프로젝트를 끝낼 수 있었따. 사실 만들고 싶었던 프로젝트가 있는데 이제는 도전해 볼 수 있을 것 같다.

 

😀 다양한 방법과 기술 터득 메모장을 만들면서도 다른 사람들의 코드를 보면서 내 코드에 어떻게 적용시켜야 할지 많이 고민을 했는데 그런 시간들이 내가 나의 프로젝트를 이해하는데 더 도움이 되고 어떻게 해야지 좋은 방법으로 만드는 것일까에 대해 알아갈 수 있었다.

 

🌱 추가 목표

• 추가적인 메모장 기능
• 로컬 스토리지 대신 파이어베이스를 이용해보기