Community

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

← Go back
투두리스트 콘테스트 참여합니다!
by zih0
#to_do_list
3 years ago
2,868
17

1. 결과물 URL
https://zih0.github.io/nomadcoder-todolist-contest/

undefined

undefined

2. 자기소개

전 20살때부터 전공자였지만 대학 입시를 좀 오래 한 편입니다. 반수하고 학교를 잘 다니다가 군대에서 아는 형이 편입을 한 걸 보고, 전역하고 편입을 준비했습니다. 다행히 좋은 결과가 나와서 편입은 성공했는데, 컴공 전공지식을 다 까먹은 상태에서 3학년부터 시작하자니 마음만 급했습니다.

그 때 시작한게 노마드 코더였고 개발이 재밌을 수 있다는 걸 처음 느꼈습니다. 이론만 공부하다가 실제로 사이트를 만들어보니 감회가 새롭더군요. 개발에 재미를 느끼고 나니까 CS의 중요성도 깨닫게 되서 학교 수업도 열심히 듣게 됐고 학점깡패가 되있었습니다 ㅋㅋ

아직 부족한 게 많지만, 남은 4학년도 노마드코더와 함께 성장하고 싶습니다~

3. 서비스 소개
간단한 리눅스 명령어로 작동하는 투두리스트입니다.

왼쪽은 Todolist 창이고, 오른쪽은 터미널 창입니다.

터미널 창에서 명령어를 입력하면 Todolist에 할 일이 추가됩니다.

touch , rm ,clear 세 명령어만 구현했고, 삭제의 경우 버튼 클릭으로도 사라집니다.

+ Update)

1.터미널 창을 클릭하면 터미널 input 으로 focus 됩니다.

2.todo 목록의 toDo 폴더 명을 클릭하면 목록을 열고 닫을 수 있습니다.

undefined

undefined

3. interactive.js 라는 외부 라이브러리를 사용해서 타이틀 , 터미널창, todo 목록을 움직일 수 있게 했습니다. 움직일 때마다 zindex를 증가시켜서 최상단으로 올라오게 했습니다.

undefined

4. 개발 과정 (어려웠던 점과 해결방법)
css가 약한 편이어서 이번 방학 때, 코코아클론을 다시 한바퀴 돌렸더니 수월하게 개발한 것 같습니다.

그리고 grid는 슬랙에서 css챌린지 하시는 분들 얘기 듣고 이번에 써봤는데 좋네요.ㅎㅎ 자주 써먹어야겠습니다.

동일한 todo 가 등록되었을 때, 실제 파일이 아니어서 둘 다 그대로 두는게 맞겠다고 생각해서 중복 가능하게 했는데, 여기서 rm을 통해 삭제를 할 때 두개가 동시에 사라지는 문제가 있었습니다.

삭제할 때, 로직이 todo (파일명)이 같을 경우 삭제하는거라 이런 문제가 발생했습니다. break를 두어 한 개의 todo를 찾으면 반복문을 나오려고 했지만, forEach 문법에는 break 가 없더군요?

그래서 구글링 검색 결과 every 라는 함수를 이용해서, 가능하다고 하여 forEach 대신에 every 함수를 사용해서 해결했습니다!

5. 앞으로 계획
다가오는 4-1학기 졸업프로젝트로 백엔드를 맡게 되어서, 남은 방학 한달 동안 노마드코더 에어비앤비 클론 강의 보면서 DRF를 해볼 계획입니다!

17 comments