My Note

프로젝트를 하게 된 계기

팀 프로젝트만 하다보니 혼자서 CRUD를 해본 적이 없어서 기본기를 다져보고자 짬을 내 프로젝트를 완성했습니다.
더불어 Sass, CSS module을 사용해보았지만 가장 많이 사용하고 있는 CSS in JS styled components를 사용해 본 적이 없었기 때문에 이를 학습하는 것 또한 목적이었고요.

창의적인 프로젝트를 제작하면 좋았겠지만 사이드 프로젝트와 취업준비를 병행중이라 흔히 만들어보는 투두리스트와 비슷하게 노트로 만들었습니다. 1인용 노트앱이기 때문에 리액트로..:)

개발과정

My Note에서 확인하실 수 있습니다!

1. 메인 / 노트 생성

• 별도의 서버가 필요하지 않고, 데이터양이 많지 않으므로 Local Storage에 데이터를 저장하는 것으로 했습니다.
  데이터 저장 시에는 JSON 자료형으로만 저장이 가능하기 때문에 JSON.stringify()를 사용해 저장하고, 데이터를 불러올 때에는 원래의 자료형으로 불러와 줍니다. JSON.parse
• 생성이 완료된 노트에도 id 값이 필요합니다.
  uuid라는 모듈을 사용해 고유한 key 값을 생성할 수 있었습니다.

2. 수정 및 삭제

• 노트 전체 내용을 보는 페이지에서 수정과 삭제가 가능합니다.
• 노트를 누르면 useParams로 id 값을 확인하고, 데이터를 불러옵니다.
• spread 연산자와 map 함수를 사용해 배열을 수정하는 방법으로 노트를 수정합니다.
• 삭제는 filter 함수를 사용해 삭제하고자 하는 노트의 id와 일치한 데이터를 지워주고, 일치하지 않은 데이터는 남겨놓게 하였습니다.

3. 검색

(작성중..)

🗨️ 회고

styled-components를 학습하며.

SCSS와 같은 전처리기만 사용했던지라 styled-components에 익숙해지기가 꽤 오래 걸렸습니다😢
사용해보니 css 파일을 만들지 않아도 되니 폴더 내 파일 수가 현저히 줄어들었고, css 우선 순위를 생각하지 않아도 되는 부분이 편리했습니다. 사용하지 않는 코드도 쉽게 알 수 있었고요.
자바스크립트 기능을 스타일링에 적용할 수 있다고 하는데 아직 이 부분을 크게 활용해보지 못했습니다.

styled-components는 클라이언트 런타임에 스타일을 생성하기 때문에 깜박임이 있다던가 하는 성능 이슈가 발생할 수 있다는 점이 단점으로 꼽히기 때문에 CSS in CSS와 CSS in JS 어떤 것을 선택할 지 프로젝트 규모를 생각해서 결정해야 할 거 같다고 생각합니다.