Community

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

← Go back
Mac Do List
#to_do_list
3년 전
3,339
14

😀1.결과물 링크 : 링크

😁2.자기소개

안녕하세요 저는 대구소프트웨어 고등학교에 재학중인 1학년 홍준혁이라고 합니다!

주 분야는 웹이며, 좋은 사용자 경험이 좋은 웹사이트가 될 수 있다고 생각하는 학생입니다!

요즘 코로나때문에 밖에도 자주 못나가고 해서 할게 뭐가있나...생각하다가 우연히 페이스북

에서 투두리스트 대회를 한다고 하길래 벌떡 침대에서 일어나 책상에 착석하고 개발을 시작

했습니다!

😅3. 서비스 소개

- To Do 작성

undefined

input칸에 할 일을 입력하시고 Enter키를 누르게 되면 정겨운 사운드와 함께 ToDo가 입력됩

니다!

- To Do 삭제

undefined

지울 To Do에 쓰레기통 버튼을 누르게 되면 삭제가 수행되게 됩니다!

- To Do 수정

undefined

수정은 삭제버튼 옆에있는 수정버튼을 누르게 되면, 모달이 떠서 수정할 내용을 적고

'수정' 버튼을 누르게 되면 , 정겨운 사운드와 함께 호로록 바뀌는 모습을 보실수 있습니다!

취소를 누르게되면, 수정이 수행되지 않고 모달이 닫히게 됩니다.

- 12시 기준으로 바뀌는 배경사진

* 12 전

undefined

*12 후

undefined

-공백입력 시 방지 & 흔들리는 애니메이션

- 다양한 사운드 제공

😆4. 개발 과정

(편의상 어투를 바꾸겠음...!)

개발 과정에 관해서는 정말 할말이 많은데... 난 기존에 JS를 정말 쬐끔 배우고 바로 리액트로 돌입했다.

그 이유는 교내에서 진행하는 프로젝트가 있는데 그 프로젝트가 리액트환경에서 진행

되기때문에 나는 그 환경에 적응할려고 리액트를 너무 섣불리 배운 느낌이 있다...

그래서 완전 리액트환경에 적응한 내가 바닐라 JS로 이 프로젝트를 진행했더니, 완전 간

단하고 쉬울줄 알았던 ToDoList만들기가 너무 복잡하고 힘들었다... 만들던 내내

'아... 리액트로 하면 이런거 쉽게 할 수 있을거같은데...' 이 생각을 하게 되었는데,

막상 다 만들고보니, '기초가 탄탄하지 않으니 이렇게 되는구나!' 라는 생각이 들게 되었다.

이제 코딩하면서 겪었던 고난에 대해서 이야기하자면,

첫번째로, 스파게티 코드... 한국어로는 라면코드라고도 하는데,

코드가 한번 꼬이니까 전체 코드가 꼬이는 그런 기이한 현상이 일어났다. 정말...이거때문에 너무 고생한 기억이 난다.

두번째로, CSS.

평소에 CSS에 대해서 깊게 공부한적도 없고 할 계획도 없었는데 이번에 만들면서 생각보다 많은 css지식을 요구한다는것을 알았다. 특히 animation관련해서는 이해하는데 애먹었다.

(다른 사람들은 애니메이션 잘 만지던데 왜 나는 이해를 못하겠는지 모르겠다...)

세 번째로, Github 호스팅...

아, 진짜 너무 혼란스러웠다. 개발할때는 잘 되던 코드가 깃허브에 호스팅하니까 맛이 가버린것이다...

undefined

이미지가 다 날라간 모습을 볼 수 있을것이다. 마음을 추스리고 커피한잔 마시고 폭풍 구글링을 했다. 원인은... 경로의 문제였다.

링크

혹시 호스팅 하다가 나처럼 이런 문제를 겪는다면 위의 링크에서 참고하면 될듯하다!

마지막으로 사운드 딜레이.

이 문제는 해결하지 못하였다. 내가 다운받은 음원이 끝에 딜레이가 살짝 있었는데

그 딜레이를 자르는 방법을 몰라서 그냥... 넣기로 했다. (궁금하시면 빨리 연타해보세용!)

5. 앞으로의 계획

이 학교에 들어오고 나서 본격적으로 웹을 배우기 시작했는데, 웹이 너무나 재미가 있다.

내가 친 코드가 바로 결과물로 보여지고, 그 결과물을 다른 친구들과 공유해서 피드백을

받는게 너무나 즐거웠다. 내 목표는 전 세계사람들이 내가 만든 웹사이트를 보고,공유하고,

피드백해주고, 사용해주는 그런 모습을 보고싶은 바람이 있다.

난 웹을 배우는 1년동안 React만 주구장창 팠었는데 이제는 React뿐만 아니라, Vue, Angular등 다양한 프레임워크들을 배워나갈 예정이며, 그에 앞서 기본적으로 바닐라 JS를 공부를 할것이다.

이번 방학이 얼마남지 않았는데 ,그 기간동안 니꼬쌤의 JS강의를 보고 익힐것이며 구글링도 열심히 해서 JS를 나의 것으로 만들것이다. (최고의 선생님은 니꼬쌤과 구글...!)

🌝 글을 마치며...

긴 글 읽어주셔서 감사합니다! 사적인 이야기를 더 많이한거 같은데...!🤣 좋게 봐주셨다면 좋아요 한번씩만 부탁드릴게요!

그리고 결과물에 피드백을 주시면 너무 감사하겠습니다!

(아! 그리고 맞춤법... 잘 못지켜서 죄송합니다...)

14 comments