1.URL

https://coffeed-cat.github.io/new-momonto

2.자기소개

작년 말에 군대 제대하고 현재는 복학기다리는 비전공자입니다 :)

지내던 부대가 통신쪽이여서 주변에 프로그래밍 공부하다 온 사람이 많았고, 저도 자연스럽게 코딩에 흥미를 가지게 되었습니다.

군대에서 C언어랑 자바로 기초적인 코딩 공부하고, 제대하고나서는 노마드코더에서 웹 공부하고있습니다.

3.서비스소개

기능은 많이 추가하지 않았지만 있는 기능들은 최대한 Momentum에 가깝게 디자인했습니다. Momentum clone 처음 하시는 분들은 이 기능들의 구현을 목표로 하시면 꽤 공부가 될 것 같습니다. 조심스럽게 2021년 Momonton의 표준을 제시해봅니다.

추가한 기능들

- 첫인사 화면 추가 (첫번째 사진)

- 이름 적는 input들은 글자수에 따라 늘거나 줄거나 함

- 시간에 따라 메인화면의 인사말이 달라집니다

> 7am ~ 12am : Good morning

> 12am ~ 6pm : Good afternoon

> 6pm ~ 7am : You must be exhausted

- todo 리스트의 스크롤 기능

- 이름 수정 기능(세번째 사진)

4. 개발과정

처음 강의보고 따라만들때는 강의대로 한 부분이랑 제가 멋대로 고친부분이 섞여서 복잡해져서 그냥 포기하고 처음부터 다시 만들었습니다.

구현할 수 있는 기능으로 최대한 Momentum을 재현해봤습니다.

4-1. 첫인사 화면

- 인트로화면?같은걸 넣고 싶었는데 한 페이지에서 어떻게 화면전환을 하지 생각하다가 submit하면 display가 none으로 변하게 코딩했습니다.

4-2. input 상자

- 글자수에 따라서 늘리는 방법을 여러가지 시도해봤는데, 한글이랑 영어가 크기가 다른게 자꾸 문제가 되더군요.

그래서 보이지않는 span을 하나 놔두고 input의 value를 그 span에다 집어넣어서 span의 width값을 input의 width값에다가 집어넣는 방법을 사용했습니다.

4-3. 이름 수정 기능

Momentum의 수정했을때 반짝하고 상자가 빛나는 애니메이션이 너무 마음에 들어서 이건 꼭 구현해야겠다싶었습니다.

이름부분만 딱! 빛나게 해야되는데 그렇게 하려면 인사말을 여러개의 span으로 나눠야 되더군요. 잘못될까봐 무서웠는데 잘 고쳐서 구현성공했습니다 ^_^b

5. 앞으로의 계획

Nest.js랑 GraphQL 강의 듣고 백엔드의 재미를 느끼고 있습니다.

빨리 익숙해져서 프로젝트 하나 해보고 싶습니다ㅎ