Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
나의 첫 TodoList Web site 만들기
#to_do_list
4년 전
4,345
4

1. 결과물 URL : 결과물 URL_TODOLIST

undefined

undefined

undefined

2. 자기소개 :
안녕하세요! 저는 UXUI 에이전시에서 UX디자이너로 근무하다 개발자로 이직 하기 위해 퇴사한 취준생입니다. UXUI 에이전시를 다니면서 자연스럽게 프론트엔드 개발에 관심이 생겼습니다. 학부 때 CS를 전공했는데 업무를 하면서 직접 구현하지 못하고 설계만 하는 것의 한계와 아쉬움을 느껴 결국 퇴사를 선택하고 지금은 마음껏 코드를 짜고 있습니다. 니꼬쌤 강의를 들으면서 처음으로 js를 알게 되었어요. 정말 감사한 마음이 큽니다. 아직은 주니어 개발자의 실력이지만 매일 한 줄이라도 코드를 짜면 어제보단 더 나은 오늘의 내가 되리라는 믿음으로 열심히 공부 중입니다.

3. 서비스 소개 :
✅ 기술 스택 : HTML/CSS/JavaScript + Redux Library
✅ 서비스 주요 기능 : 1. todo list 생성 2. todolist 삭제 3. 완료한 todolist 표시
✅ 서비스 설명 :
- 서비스 동작은 간단합니다.원하는 리스트를 input창에 입력하면 아래에 입력한 text와 작성 시간, 체크 버튼과 삭제(x)버튼이 나타납니다. 리스트 개수가 영역보다 많아지면 자동으로 상하 스크롤이 생겨서 이전 리스트도 확인 가능합니다. 체크 버튼을 누르면 완료한 리스트로 간주되어 취소선이 생기고 background-color가 변경됩니다.
x 버튼의 경우 하나의 리스트만 삭제됩니다. 맨 아래 clear버튼을 누르면 모든 리스트를 삭제하겠냐는 팝업창이 뜨고 취소를 누르면 이전 화면으로 돌아가고 확인을 누르면 모든 리스트가 삭제됩니다. 모바일에서 보는 것을 감안하여 media query를 활용해 max-width:760px이 되면 전체 화면이 모바일에 맞는 크기로 변경되도록 구현했습니다.

4. 개발 과정(어려웠던 점) :
- 이전부터 리덕스 같은 상태 관리 라이브러리를 활용한 웹 사이트를 구현하고 싶다는 생각이 있어서 이번 콘테스트를 보고 이 프로젝트에 한 번 적용해봐야겠다 생각했습니다. 막상 구현해보니 only-vanilla JS로 구현했으면 정말 금방 해결할 수 있을 것 같은 이슈들도 무조건 list 생성과 삭제를 reducer 안에서만 변경하고 render()하다 보니 오히려 코드적으로는 좀 더 복잡하고 가독성이 떨어지는 느낌이 있습니다. 초반에 리덕스의 동작원리를 제대로 이해하지 못해 시간이 오래 걸렸는데 그래도 새로운 라이브러리를 배웠다는 점에 의의를 두고 싶습니다.
니꼬쌤처럼 object를 생성해 하나의 Array에 넣어 localStorage에 저장하면 데이터 관리를 좀 더 깔끔하게 할 수 있었을텐데 처음에 자료구조를 단순하게 id값을 localStorage의 key값으로 주다보니 데이터가 의도치않게 override 되는 경우가 꽤 있어서 관련 파생 이슈들을 해결하느라 좀 애를 먹었습니다. 자료구조의 중요성을 다시 배우는 프로젝트였습니다.

5. 앞으로의 계획 :
일단 프론트엔드 개발자로 새로이 취직을 하는 것이 커리어에 있어서는 1차 목표입니다. 당분간은 알고리즘, 자료구조를 열심히 공부하면서 틈틈이 이런 재밌는 토이 프로젝트도 꾸준히 만들 예정입니다. 다른 참가자분들의 작품을 보니 너무 멋지고 개성이 넘치는 작품이 많아서 저도 프로젝트에 좀 더 창의적인 요소들을 많이 넣어서 구현해보고 싶습니다! 지치지 않고 즐겁게 코딩하기가 궁극적인 인생 목표입니다.

4 comments