230531) 영화 평가 리스트 사이트 구현

개인과제로 부여 받은 영화 평가 리스트 사이트 구현에 도전한 지 3일차이다.

 

html 과 css는 웹퍼블리싱 학원에서 매일 하던 것이다 보니 아무런 어려움 없이 걸림돌조차 없이 잘 구현해낼 수 있었다.

다만 js 에서 많은 어려움을 겪고 있었다.

 

특히 그간 배워온 것들을 이론상으로는 이해를 하지만, 대부분 예시를 console.log의 형태로만 보다보니 배운 것들을 응용하고 활용하는 것 자체에 많은 어려움을 겪었다.

 

js로는 사이트가 어떻게 구축되는지 충분한 예시를 아직 접해보지 못한지라 어떤 곳에 어떤 것이 들어있을 때 어떤 역할을 하는지 감이 잘 안 잡히고 있는데, 남이 짠 코드를 해석하기 어려운 상황에서 스스로 코드를 짜내는 것이 어려운 것은 당연한 일이라 생각하고 스트레스를 받지 않기 위해 노력해야 할 때라고 생각한다.

 

 

아래 더보기를 누르시면 코드 사진이 뽭! 나옵니다!

 

 

각각 가장 먼저 짠 코드, 이후에 짠 코드이다.

 

첫 번째 코드로도 데이터를 불러오는 것까지는 성공했지만, html요소에 20개의 카드를 미리 만들어 놓고, 그 내용을 수정하는 형식이었기 때문에 data의 id값을 html 요소의 id값으로 줘야하는데 이를 구현해낼 수가 없었다.

 

그래서 기존 리스트 형태없이도 데이터의 length에 맞추어 자동으로 리스트를 생성해내고, 그와 동시에 해당 리스트의 최상위 html요소의 id값으로 data의 id값을 부여하는 코드를 구현해내기 위해 많은 시도를 했다.

 

결론적으로는 api를 이용해 각 카드를 .movie-list-box라 칭하고, 그 카드가 모이는 리스트를 #movie-list라 칭하였다.

 

아래 사진의 코드처럼 #movie-list의 자식으로 div 태그를 생성한 뒤, 이에 .movie-list-box라는 클래스명을 부여하였다.

그리고 해당 div 태그에 data의 id값을 id로 부여해 주고, div태그의 내부 html에 카드목록에 들어가야 할 정보들을 넣는 형태로 코드를 생성하였다.

 

그리고 이를 for문으로 반복한 결과 data의 개수만큼 자동으로 리스트가 생성되고, 그 안에 각기 다른 데이터값이 들어가는 것까지 구현에 성공하였다.

 

 

또한 data의 id값을 movie-list-box클래스의 id 값으로 지정한 덕분에, 각 카드를 누를 때마다 해당 카드의 data id값을 alert로 띄우는 기능까지 구현에 성공하였다.

 

 

이제 map filter foreach find reduce 등의 배열 메소드 중 2가지를 이용하여 특정 키워드를 검색했을 때 그 키워드에 해당되는 카드만을 조회할 수 있게 하는 기능을 구현하는 일이 남았다.

 

filter 메소드 이용이 정답인 것 같은데, 여러번 시도해 봤지만 아직 성공하지 못해서 이틀내로 검색조회 기능까지 잘 구현해내 과제를 문제 없이 마치고 싶다.

 

---

그리고 중요한! 멘탈에 대하여...

 

사실 이틀간 정말 괴로웠다

 

대학에 온 순간부터 지금까지 홀로 하는 서울살이는 늘 고되지만 갑자기 자취방 계약과 관련하여 문제가 생겨 부동산 측과 마찰을 빚고, 결국 2달 내로 이사를 가야 하는 상황에 놓였기 때문이다.

 

평소같았으면 별 일이 아니었겠지만, 요즘 같이 월세 대란이 일어난 상황에 공부하느라 평일 내내 발이 묶인 상태에서 도와줄 이 아무도 없는 서울에서 혼자 갑작스럽게 이사를 할 집을 알아봐야 하는 게 쉬운 일이 아닐 것이 분명하기에 멘탈적으로 많은 충격이 가해질 수밖에 없었다. 

 

그래서 지금 많이 예민해져 있는 상태인데, 거기에 JS의 기초에 대해 배운 지 거의 1주일도 되지 않은 시점에서 혼자 힘으로 코드를 처음부터 끝까지 조건에 맞추어 짜내야 한다는 게 정신적으로 많은 집중이 필요한 일이다 보니 엎친 데 덮친 격으로 잘 지켜오던 멘탈이 갑자기 펑!하고 터지는 것 같았다.

 

특히 최근 몇 달간은 멘탈이 무너지면 내 손해고, 스트레스 받는 것도 내 손해인 걸 그간의 소모로 너무 잘 알아 버렸기 때문에 늘 평정심을 유지하고 웬만하면 의연해지려고 최선을 다하고 있었는데 이렇게 멘탈이 터져버린 게 근 몇 달간이라 그 여파가 더 컸던 것 같다.

 

그래서 월요일 화요일 잠이 안 와 꽤 뒤척이다 늦게 잠들었는데, 하필이면 오늘 경보가 새벽부터 울리는 바람에 잠도 못 잤으니 컨디션도 최악이 되었다. (심지어 오늘! 자연의 날이 오다!) 덕분에 오늘 오전부터 이른 오후까지는 멘탈이 터질대로 터져있었던 것 같다...

 

그래도 관리는 내가 혼자 결국 해내야 되는 거고 위에서 말했다시피 스트레스 받아봤자 손해 보는 건 나밖에 없다는 것을 너무나도 잘 알고 있기 때문에 이마저도 극복해내려고 오늘 하루종일 많이 애썼던 것 같다.

 

특히 오늘 팀원 분께서 장기전이고 멘탈싸움이라는 말을 해 주셨는데, 정말 동의하고 그 말씀을 해 주신 것에 많은 감사함을 느꼈다. 팀원 분 말씀처럼 장기전이고 멘탈싸움이라는 사실을 잊지 않고 너무 뒤처지지 않는 선에서 페이스 조절 잘해가며 공부해야겠다고 또 다시 한 번 다짐한다... 쉽게 얻어지는 것은 원래 없다. 파이팅!

오늘도 잘 해냈다!