[데브코스] WEEK9🚀

프로그래머스 데브코스 프론트엔드 41-42일차

hello react! 🎃

호로록 뷰가 간 자리에는 react가 남는다. react가 시작되었고 아-주 조금의 사용 경험 + 바닐라 JS + 뷰로 다져진 내공?이라 생각해 마음 편히 들었지만 역시... 공부엔 끝이 없다^^! react는 공식문서가 아닌 강사님의 실속 예제를 가지고 많이 사용하는 특징? 요소? 개념?들을 이용해 예제를 통해 공부할 수 있다. 처음 리액트를 공부했을 땐 와... 이건 아냐... 했는데 이 두려움을 떨치고 적어도 react를 잘 활용할 수 있으면 좋을 것 같다.

TIL? 🎀

TIL에 대한 의문점이 들었다. 오늘 하루 배운점에 대해 기록하는 것이지만, 배우는 양이 방대하기 때문에 정리에 많은 시간이 들어간다. 또한 양식과 내용이 늘 비슷하기에 다이어리와 혼동되는 느낌이 크다. 그래서 github TIL 레포와 블로그의 기능을 분리하고 데브코스에서의 기록 + 느낌은 블로그에, 공부 정리는 깃헙에 꾸준히 올려보려고 한다. 💬 탸엘

프로그래머스 데브코스 프론트엔드 43-45일차

과제!!!🤪

밀린 TIL를 적어보고 게으르게 10월을 보낸 나를 회상해본다... 😭
21-10-06 ~ 21-10-10까지 영화 검색 사이트 과제를 진행했다. vue를 처음 써보는데 프로젝트를 한다구? 했지만 잘은 아니더라도 어찌저찌 구현하게 되었다.

43일차

vue 프로젝트에 대한 구조가 눈에 들어오지 않아, 강의를 다시 돌려보는 중이다.
강사님의 notion 클로닝 사이트가 있어 그것을 토대로 만들어볼까 고민중!!
우선, vue를 잘 알고 코딩해보고 싶다.

44일차

기본 구조를 다 짜고, 1) 메인 페이지 2) 영화 상세 페이지 3) 검색 결과 페이지를 구현했다.
검색 결과 페이지에 무한 스크롤을 구현 중인데, intersection observer가 제대로 작동하지않는다? 아마 내 코드의 문제 일 듯 싶지만, 구현이 잘 안되고 있다. 결과 fetch보다 렌더링이 우선되어 ul 태그의 height가 0이 되어 노출되었다!로 인식하는 문제라고 여겨진다. -> ul태그의 min-height 적용 시킨 후 정상적으로 작동한다.

45일차

추가적으로 좋아요 누르기 기능을 구현했다. 사실 누른 후 list에 넣는 건 쉽게 구현했지만, 다시 영화 상세 페이지에 들어갔을 때 좋아요 리스트에 있지만 좋아요 버튼이 활성화 되어있지 않는 문제에 직면했다. 문제점은 버튼에 사용하는 부트스트랩의 스타일 속성을 이해하지 못해서였다. 아예 다른 버튼이기때문에 좋아요 인지 아닌지는 버튼 활성화에 영향을 주지 못했다. 이를 해결 하기 위해 active 속성이 아닌 버튼 속 글자를 바꾸는 방식으로 구현했다.

주말

전체적인 기능이 끝나고 스타일을 입혔다. 사실 css의 모범답안이나, 좋은 구조를 익히지 못했기 때문에 스타일링은 여전히... 😥 하지만 무사히 기능과 스타일은 완성했고 배포까지 마쳤다. 마지막 환경 변수 설정 문제가 있었지만, 멘토님의 답변으론 클라이언트 단에선 할 수 없기에 새로운 해결 방법을 제시 받았다!

결과

• my-movie-search
• vue를 처음배웠지만 재밌게 과제할 수 있었던 것 같다. 시간이 나면 꼭꼭 리팩토링...!!