[TIL] Day 12 CSS 늪

2023.10.20 금

 

<09:00 구현 기능 추가>

영화 검색 사이트를 만들고 있다.

이름하여 Rotten Orange

핵심 기능인 API, Search 기능은 구현을 해냈다.

 

어제 하다가 못한 디버깅도 끝냈다!

영화 검색 후 무비카드 클릭 이벤트가 활성화 안 되는 버그.

해결은 간단했다.

해당 함수를 새로 검색한 카드 정보가 불러와지는 로직 안에 추가해 주는 것이다.

 

이후에 더 추가할 기능들이 머릿속에서 맴돌지만,

일단 CSS를 먼저 만져야 한다.

 

 

<10:00 오전 회의>

팀원들의 진행 상황과 일정을 공유했다.

나는 기능을 먼저 만들었지만,

CSS를 먼저 만든 팀원도 있었고,

아직 코드에 대한 이해를 하기 위해서 공부 중인 팀원도 있었다.

따라서 서로 필요한 부분에 대해서 마무리 회의 시간에 코드리뷰를 하기로 했다.

 

 

<10:30 와이어 프레임>

본격적인 CSS 시간이다.

들어가기에 앞서 어떤 형태로 구성을 할지 레퍼런스를 찾아보고 와이어 프레임을 그려보았다.

 

빠르게 그려서 깔끔하게 보이진 않지만,

머릿속으로는 다 정리가 되었다.

영화가 나타나는 개수를 파악하고 그에 적합한 그리드를 구성했다.

 

로튼토마토, TMDB, 다음영화 페이지를 참고했다.

정말 구현하고 싶은 것도 많았지만, 일단은 결과물을 만들고 디벨롭하도록 하자.

 

어제 블로그에 작성한 Flex, Grid 연습페이지에서 주요 기능을 익혔다.

귀여운 개구리와 당근을 가지고 게임처럼 기능을 익혀볼 수 있다.

 

Flexbox Froggy

 

Flexbox Froggy

 

Grid Garden

 

 

Grid Garden

 

 

<15:00 CSS 늪>

CSS에 대해서 잘 모르고 있었다는 건 알았지만, 여기서 막힐 줄은 몰랐다.

이전 팀소개 페이지 만들기 프로젝트에서도 잘 활용했던 Grid 기능이 적용이 안 된다.

그래서 Flex로도 구현을 해봤지만 똑같이 안된다.

 

몇 시간 동안 들여다보고 정보도 찾아봤지만 아직 해결하지 못했다.

이렇게 된 이상 이참에 CSS를 제대로 파보고 정복해 보자!!

 

문제를 해결하게 되면 정리해서 적어놔야겠다.

(아직 해결 중...😥)

 

 

---

하루를 마치며

큰 어려움 없을 것이라고 판단했던 곳에서 막히니까 더 집중하기 힘든 것 같다.

자세히 들여다보고 이해를 하게 된다면 쉬울 수도 있다.

모른다는 것을 인지하고 어떤 것을 모르는지 어떻게 해결하면 좋을지 생각해야겠다.

그리고 해결이 될 때까지 파고들어야겠다.

 

오늘의 한 줄
어려움은 생각하지 못했던 곳에서 찾아온다.
그러나 이는 성장하기엔 더없이 좋은 기회이다.