[패스트캠퍼스] 프론트엔드 부트캠프 HTML/CSS/JS 2차 과제 후기✨ (5주차)

 

안녕...하세요....

다들 한 주간 평안하셨습니까..?

저는 네니오...✨

 

이번 한 주는 집에 있지만 집에 가고싶고, 때로는 집 밖으로 뛰쳐나가고 싶은 한 주였다.

자바스크립트 수업은 기본적인 개념을 마무리하고 비동기 함수 등 슬슬 더 어려운 파트로 접어들었는데..

 

그걸 듣는 나..

 

분명 한국말인데요.. 분명 실습까지 같이 해주고 계시는데요..

뭔 소린지 모르겠음 ;_; 진짜

 

그래서 아 내가 빠가사리인건가 하는 생각도 들고 잉잉 나는 개발에 소질이 없나봐 하는 생각도 들고 오만가지 생각이 다 스쳐지나갔다. 내 거친 생각과~~ 불안한 눈빛과~~ 그걸 지켜보는 강사님~~~~~ 워어어어어

 

휴.. 반복 학습이 답이겠지 뭐.. ^.ㅠ 최대한 강의 다시 듣고, 다른 코드들도 찾아보고 해야겠다.

 

이번 한 주는 어떻게 지냈는지 과제 후기와 함께 짤막(?)하게 나눠보고자 한다.

 

---

 

이번 과제는 HTML/CSS/JS와 OMDb API를 사용해 영화 검색 사이트를 만드는 것이였다.

서버와 통신하는 방법도 알아야 하고, 비동기 함수와, 자바스크립트로 HTML 요소 생성 및 다루기, 무한스크롤까지..

진짜 고된 2주였다. 클론코딩과는 다르게 디자인까지 내가 직접 해야하니까 사실 JS 조작보다 레이아웃 구현에 더 시간을 많이 쏟은 것 같다.

 

⬇️ 그렇게 완성한 사이트 ⬇️

https://coruscating-klepon-9efb9d.netlify.app/

FIND MY MOVIES

 

 

간단한 설명을 하자면, 연도와 키워드에 맞는 영화를 검색하여, 찾은 결과를 리스트로 보여준다.

(연도가 없으면 모든 연도에서 검색)

 

처음에는 20개의 결과가 출력되며, 스크롤이 카드 섹션의 맨 아래에 도달하면 추가적으로 10개의 데이터를 불러온다. (무한스크롤)

 

각 영화 카드를 클릭하면 해당 영화의 상세 정보를 볼 수 있다.

내친 김에 반응형 레이아웃까지 구현해봤다. (구림 주의)

 

---

해당 과제를 하면서 느낀 점은.. 일단 영어에 약하다.

window.scroll 이벤트로 무한스크롤 처리를 하려면 throttle이나 debounce까지 신경써야 하는데 그게 뭔지도 모르겠고..

강사님이 intersectionObserver API를 사용하면 좀 더 수월할거라 하셨는데 문서가 영어라서... 파파고에 의지하면서 어찌어찌 읽어보려다 결국 포기했다.

.... 영어 학원을 등록해야 하나... 

 

그리고 나는 정리에 약하다.

그냥 일단 기능 구현만 되면 되지!!! 하면서 코드를 마아아악 쏟아낸다. 다 동작이 되고 나면 그 때서야 많은 코드들을 기능 단위로 분리하려고 하니 엄두가 나질 않고, 실제로 분리할라 치면 에러가 발생한다.

 

그리고 비슷한 동작을 하는 애들은 클래스를 활용하면 될 것 같은데.. 문제는 내가 클래스를 어떻게 다뤄야할지 모른다.

그냥 이론만 알지 실습을 해본 적이 없어 난감할 뿐이였다.

그래서 얼레벌레 아주 코드 범벅인 과제를 제출하게 되었다.

 

작성한 코드가 엉망진창이긴 하지만, 의도한 일을 하긴 할 때

 

휴우 내 과제 잘 날아가네... ^.^

 

과제를 제출하고 나서 계속 답답했다.

뭔가 될 것 같은데 안 되고, 이걸 해결하면 저기서 오류가 발생하고 그냥 머리가 돌아가지 않았다.

진짜 그럴 때마다 엄마 보고싶었다.

 

그래서 일단 비동기는 제껴두고 간단한 기능 구현을 연습해보자 싶어서 가위바위보 게임을 만들었다.

 

⬇️가위바위보 게임 보러가기⬇️

https://charmming5.tistory.com/128

[Javascript] 토이 프로젝트 - 가위바위보

 

영화 검색 사이트보다는 비교적 간단한 구성이라서 기능을 구현하고 추후에 코드를 리팩토링 할 수 있었다.

여기서 자신감이 다시 회복되었다. 후후.. 나 좀 성장한 듯? 하면서 뿌듯해했다.

이번에는 열품타를 만들어봐야겠다는 생각이 들어서 두 번째 토이 프로젝트로 타이머를 만들기로 했다. (내가 미쳤지)

 

어떻게 되었냐고요?

 

 

하아아아아....

 

결국 중단해버렸다.

열품타는 총 세 가지의 타이머가 동시 작동한다.

 

1. 총 공부 시간 측정

2. 과목별 공부 시간 측정

3. 집중 시간 측정

 

1번과 3번은 구현은 했는데 2번이 도저히 구현이 되질 않았다.

공부 시간, 과목명, 과목별 공부 시간, 집중 시간을 모두 localStorage에 담아서 하려 했다.

각 타이머의 알고리즘은 이렇다.

 

1. 페이지가 로드되면 localStorage에서 저장된 총 공부 시간, 과목명을 불러와 화면에 셋팅한다.

2. 플레이 버튼을 누르면 화면의 카운트가 1초 간격으로 올라간다.

3. 정지 버튼을 누르면 카운트 값(시간, 분, 초)를 localStorage의 해당 아이템 값으로 저장한다.

 

총 공부 시간은 total이라는 객체에 단독적으로 담아지고, 과목별 공부 시간은 subjects라는 객체 내부의 객체 형식으로 함께 담긴다. 그래서 꺼내오고 다시 값을 저장하는데 문제가 있었다.

 

그리고 각 타이머는 1초에 한 번씩 카운트가 된다는 공통점이 있는데, 이걸 클래스-인스턴스를 사용하지 못하고 모든 타이머에 일일이 다 적용하려고 하니까 난장판 그 자체였다.

 

다들 나가주세요.. 혼자 있고 싶네요...

 

그래서 결국 중단을 선언하게 되었다.

 

다들 제 타이머에게 작별 인사를 해주세요... 크흡...

 

 

자바스크립트에 좀 익숙해지면 그 때 다시 시도해봐야겠다. 그 전까진 안녕...

 

 

---

 

글이 아주 엉망진창 뒤죽박죽이다. It's like my 내면세계...

진짜 정리가 하나도 안된다. 엉엉 울고 싶다 진짜 8ㅅ8

 

다시 자신감을 찾으러 떠나려 한다. 무리하지 말고 작은 것부터 하나씩 다시 해보자.

근데 일단 3차 과제 또 시작이라서... ^,^ 자신감 박살나는 거 아닌가 몰라... 훌쩍

 

5주차를 지나고 6주차를 맞이하면서 드는 생각은,

 

멘탈 관리 진짜 잘해야겠다!

이다.

 

내가 내 자신에게 실망하고 기대를 잃어버리는 순간, 아무 것도 할 수 없음을 느낀다.

심지어 타이머 만들다가 너무 화나서 30분 동안 침대에 누워있기도 했다.

 

근데.. 화낸다고 해서 코드가 휘리릭 뿅! 하고 아름답게 변하는 것도 아니고 해결되는 건 없다.

그냥 내면만 더 상할 뿐.

 

지금까지는 공부한답시고 거의 집에만 틀어박히고 하루종일 책상 앞에 앉아있었는데, 의지적으로 일어나 밖에 좀 나가야겠다.

가서 맑은 공기도 좀 쐬고, 오늘 어떤 부분에서 성장했는지를 되짚어보면서 나 스스로를 세워갈 수 있길.

 

이번 한 주도, 아자아자 화이팅!