[패스트캠퍼스] 프론트엔드 부트캠프 6주차 후기✨ (w. 3차 과제)

 

안녕하십니까 여러분. 다들 명절 잘 지내고 오셨나요?

저는 아주 누워만 있었습니다. 이것이 바로 잇프피의 행복 아니겠냐며..

 

 

 

진짜 연휴 내내 잠 - 식사 - 잠 - 식사의 루틴이였다.

그 동안 고생했으니 쌓였던 피로 이참에 풀자! 하는 마음가짐으로...

할머니댁에 노트북 가져갔지만... 열어보질 않았습니다...^_^ 그냥 왔다갔다 하면서 승모근 운동만 함.

그러다가 집에 도착해서 아 그래도 과제는 끝내야지.. 하면서 꾸역꾸역 과제를 끝냈다.

 

그 와중에 명절 연휴 때도 열심히 공부하시는 분들이 꽤 계시더라...✨

열품타 들어갔는데.. 아앗... 나만 게을러터진건가.. 하면서 반성.. 또 반성..

 

일단 공부 시작하기 전에 밀린 지난 주 리뷰부터 시작해야겠다!

---

소식 1. 3차 과제 시작

영화 검색 사이트 과제가 끝나자마자 바로 3차 과제가 시작되었다.

이번 과제는 바로 투두리스트 구현하기!

주어진 API를 활용해서 서버에 투두리스트를 저장/수정/삭제를 할 수 있어야 한다.

 

2차 과제 때 API를 접해봐서 그런지.. 3차 과제는 비교적 쉽게 느껴졌다. 2차 과제는 서버로부터 가져올 정보가 많아서 좀 정신이 없었는데, 3차 과제에서는 투두리스트만 관리하면 되니까!

 

그래서 호기롭게 투두리스트말고 다른 것도 구현해보기로 했다.

 

HTML/CSS를 통해 노트 모양으로 디자인을 했다. (스프링까지 일일이... 다...✨)

왼쪽 페이지에는 달력과 랜덤 명언이, 오른쪽 페이지에는 투두리스트와 디데이가 출력되도록 했다.

 

달력을 new Date()와 for 문을 통해서 만드는데 달력이 의외의 복병이었다.

next, prev 버튼을 누르면 다음 달, 이전 달로 이동하도록 구현을 했는데, next, prev 버튼을 달력을 출력하는 renderCalendar() 함수 안에 넣어서 재귀 처리를 했더니, 로딩이 거업나 오래 걸리고 심지어는 페이지가 먹통이 되는 현상이 일어났다. 

그래서 당황하면서 next, prev 버튼을 renderCalendar() 함수 외부로 꺼냈더니 해당 현상이 해결되었다.

후에 자료구조 수업을 통해 콜 스택의 개념을 알게되었고 왜 이런 현상이 일어났는지를 알게되었다.

 

랜덤 명언 API는 https://api.adviceslip.com 로부터 API를 받아 실행했다.

API가 로딩되는 중에는 loading 애니메이션이 실행되도록 했다.

loading 애니메이션 출처 : https://cssloaders.github.io/ 

 

투두 리스트 및 디데이 설명은 너무 길어서 README.md 파일 내용으로 대체하겠다.

 

투두 리스트

🗒️ 일정 추가

• 추가 버튼을 클릭하면 모달 창이 등장하며 input에 자동으로 focus 처리됩니다.
• 일정이 하나라도 있으면 일정 추가 메시지가 사라지고 투두 리스트가 등장합니다.
• 일정 추가 input에 값을 입력하지 않으면 placeholder의 색상이 빨간 색으로 바뀝니다.
• 일정이 셋팅되는 동안 애니메이션이 나옵니다.
  
  
  
  

✏️ 일정 수정

• 수정 버튼에 hover시 버튼이 png에서 gif로 바뀌면서 움직입니다.
• 수정 버튼을 클릭하면 모달 창이 등장하며, 기존 일정을 수정할 수 있도록 합니다.
  
  
  
  

🗑️ 일정 삭제

• 삭제 버튼에 hover시 버튼이 png에서 gif로 바뀌면서 움직입니다.
• 삭제 버튼을 누르면 해당 일정이 삭제되고 투두 리스트가 reload됩니다.
• 모두 삭제 버튼을 누르면 모달창이 등장하며 모두 삭제할 것인지 확인하고, 예 버튼을 누르면 모든 일정을 삭제합니다.
  
  
  
  

👀 일정 보기 및 정렬

• input type='checkbox'와 label을 사용해 input의 모양을 커스터마이징했습니다.
• 보기 탭은 모두 보기, 완료한 일, 해야할 일 총 세 가지 옵션으로 구성되어 있습니다.
• select와 option은 디자인의 한계가 있어 div로 구현했습니다.
• 체크박스를 클릭하면 투두에 줄을 그으며 완료한 일로 넘어갑니다.
• 다시 클릭하면 줄이 사라지며 해야할 일로 넘어갑니다.
  
  
  
  
  

  

• 정렬 탭은 최신 순, 오래된 순, 사용자 지정 순 총 세 가지 옵션으로 구성되어 있습니다.
• sortableJS를 사용하여 사용자가 순서를 지정할 수 있습니다.
  
  
  
  

🖱️ 스크롤

• 투두 리스트가 7개 이상이 되면 스크롤이 생깁니다.
• 스크롤을 CSS를 통해 커스터마이징했습니다.
  
  
  
  

디데이 기능

 

• 디데이 추가 버튼을 누르면 디데이 모달 창이 등장합니다.
• 날짜를 입력하는 input은 type="date"를 지정하여 날짜만 선택할 수 있도록 했습니다.
• input에 required 속성을 부여해서 필수 입력되도록 했지만, 완료 버튼 클릭 시 e.preventDefault() 메서드를 사용하니 submit 되지 않으면서 필수 입력 요구 알림이 사라지는 것을 확인했습니다. required 속성 대신 버튼을 눌렀을 때 해당 input에 값이 없으면 placeholder가 빨간 색 처리되도록 했습니다.
• 디데이는  Math.ceil((new Date(date) - new Date()) / (1000 * 60 * 60 * 24));을 통해서 구현했습니다.
• 완료 버튼 클릭 시 화면 구현 동시에 localStorage에 디데이 값이 저장됩니다.
• 창을 새로 켜거나 새로고침했을 때 localStorage에 디데이 값이 있으면 디데이 추가는 보여지지 않고, 세팅된 디데이가 보여집니다.
• 수정 버튼을 통해 디데이를 수정할 수 있습니다.

 

과제를 하면서 느낀 점은, 먼저 자료구조 공부를 왜 해야하는지를 느꼈다. 과제할 당시에는 next, prev 기능을 renderCalendar 외부로 꺼내니까 해결됐네? 하고 넘겼는데, 후에 자료구조 수업을 들으면서 공간복잡도와 콜 스택의 개념을 알게 되었고, 내가 재귀를 통해 노트북을 혹사시키고 있었음을 알게 되었다. ㅎㅎ...

 

또, 모듈화를 한다고는 했지만 어느 기능 단위로 모듈화를 해야하는지 아직 감이 잡히지 않는다.

이번에 함수형 프로그래밍 강의를 신청했는데, 강의를 들으면서 함수의 개념을 더 잡고, 모듈화에 능숙해질 수 있길 바란다. 

 

또 노트 모양으로 디자인한 것 때문에 반응형 레이아웃을 구현하지 못한 것에 대한 아쉬움이 있다.

4개의 기능 모두 다 모바일에서 구현하려면 적응형으로 아예 모바일 버전을 따로 만들어야 할 판이다. 일단 지금은 시간이 없으니 패스... 아 이래서 웹 디자이너가 필요하구나.. 진짜 과제하면서 내가 디자인하려다 보니까 거기서 시간을 다 잡아먹어서 혼났다.

 

다음 주(30일)부터 시작되는 4차 과제는 팀별 과제라는데 너무 설레고 한 편으로는 팀원들에게 누를 끼치진 않을까 많이 불안하다. 이번 한 주 동안 기본기를 다지면서 준비해야겠다.

 

---

소식 2. 자료구조 첫 수업!

 

지난 주 수요일부터 자료구조와 알고리즘 수업이 시작되었다.

 

강의를 듣고 난 나의 모습

 

분명 한국말인데....

왜 저는 이해를 못하죠...?

강사님이 친절하게 예시까지 들어가시면서 설명해주시는데.. 이해가 되지 않았다. ;_;

수업이 8번밖에 없어서 그런가 개념을 깊이 파고들기 보다 간단하게 프론트엔드에서 알면 되는 것들에 대해서 설명하고 넘기셨다.

하지만... 깊게 파야 이해하는 저는.. 따라가기 무리무리쓰...

결국 자료구조 강의를 구매해버렸다..🥲

TA-DA--

비록 영어 강의여서 몇번이고 다시 돌려보긴 하지만... 그래서 시간이 많이 걸리긴 하지만.. 그래도 온라인 강의와 실시간 강의를 병행하니까 좀 더 이해하기 수월해진 것 같다.. 아닌가..몰루... 깊은 개념 들어가면 나는 울어...

 

나만 못 따라가는건가 하는 자괴감도 되게 많이 들었는데, 나중에 수강생분들이랑 얘기해보니 다들 똑같은 맴.... ^<^

피드백을 드렸으니 아마 다음 수업부터 좀 더 쉽게 설명해주시지 않을까?! 하는 기대감!으로 자료구조 강의를 듣고.. 또 듣는 중이다...

 

---

소식 3. 우수 블로그 선정

(사실 지난주가 아니라 지지난주 소식이긴 하지만)

기수 내에서 매달 우수 개발 블로그를 선정하는데... 내가.. 되었다...?! 

 

그래서 짤막한 블로그 소개를 하게 되었는데...

 

발표하면서 만든 PPT

 

블로그 소개를 하면서 내가 지금 어떻게 살고 있는지를 돌아보게 되었다.

내가 배우고 느낀 것들을 기록하는 것이 정말 중요한데, 요즘 그냥 과제하느라 공부하느라 정리는 제대로 하지도 않고 있었다. 어떤 프론트엔드 개발자보다 그냥 취업하는 것을 목표로 두고 남들 하는 거 다 공부하고 정신없이 살고 있었다.

 

속력보다는 방향성이 더 중요한 것을 잊지 말고, 내가 지금 어떤 길을 가려하는지를 되짚어보며 살고 싶다.

그래서 잠시 멈춰서서 돌이켜볼 때에, 지난 날에 대한 후회가 아닌 앞날을 향한 기대가 더 컸으면 좋겠다.

 

이번주는 커리어 코칭과 자료구조, 운영체제 강의가 기다리고 있다! (젠장 흑흑)

이 모든 시간들이 정말 사람들이 원하는 개발자가 되는 자양분이 되길..!!

 

그럼 이번 한 주도 다들 힘내세요! 저는 이력서 쓰러 이만...

여전한 급 마무리