[2024.05.27] Memo App 만들기(Redux + styled-components)

 

내배캠 챌린지반 과제로 데스크톱 메모앱을 보고 만든 프로젝트를 최대한 똑같이 만들어보는 걸 내주셨다.

제작한 memo 프로젝트

메모 앱의 기능 구현 자체는 어떻게 동작할지 보자마자 감은 왔는데, 처음 써보는 redux와 함께하니 어떤 방식으로 상태를 넘겨받고 사용할지 조금 헤맸다. 그래도 이번 프로젝트 덕분에 막막했던 리덕스 사용법을 어느 정도 익힐 수 있어서 다행이다. 전에 Zustand를 써본 경험이 있어서 그런지, 상태관리 하나하는데 만들어야 할 기본 보일러 플레이트 구조가 더욱 복잡하게 느껴졌고 '이래서 개발자들이 다른 전역상태 라이브러리를 따로 만들었겠구나란 생각이 절도 들었다.

 

Styled-components도 제대로 써본 경험은 많지 않은데 이번 기회를 통해 많이~많이 써보았다. 태그에 ID를 쓸지, Class를 쓸지 고민하는 시간은 줄었다만 변수명 짓는 시간은 그대로여서 개발 경험에 있어 전에 자주 사용하던 css-module 방식에 비해 이점이 많아 보이진 않았다. 스타일을 제외하고 jsx 코드만 봤을 때 깔끔하게 눈에 들어오는 것이 장점으로 다가왔었고, 태그들을 계층적으로 스타일링하는 것도 간편했다. 더불어 가장 큰 장점으로 스타일을 jsx 문법과 함께 동적으로 사용할 수 있는건 정말 큰 장점으로 다가왔다. 다만 변수명을 짓는 고통을 줄여주는 tailwind가 지금까지 사용한 것 중에 가장 편했구나라는 생각을 더욱 굳건하게 하는 경험이었다. 

 

※ Memo App 기능

1. 메모 만들기

 - 메모를 생성한 시간 순서대로 위 → 아래로 정렬된다.

 - 메모를 생성한 시간도 함께 표기된다.

메모 만들기

 

2. 메모 입력

 - 메모의 내용은 왼쪽 메모리스트에 표시되며, 길어질 경우 ...으로 대체된다.

 - 다른 메모를 클릭해도 자동으로 메모 입력창에 focus()가 적용된다.

메모 수정

 

3. 메모 삭제

 - 메모 삭제시 자동으로 가장 최신의 메모가 선택된다.

 - 1개 이하로 메모를 삭제하지 못하며, 1개 이하로 삭제 시도 시 경고 문구가 뜬다. 

메모 삭제