[TIL] 20210906 - flex와 grid

🧑🏻‍💻 지난주의 나...

지난 주는 노션 클로닝 프로젝트 기간이었다. 노션을 똑같이는 아니더라도 노션의 구조와 기능들을 나만의 스타일로 구현해보려고 노력을 많이 했던 한 주였다.

처음에는 "해볼 만하겠는데?"라고 생각했지만 큰 오산이었다. 어떤 기능을 구현하면 버그가 발견되고, 해당 버그를 수정하면 다른 버그를 발생시키고 뫼비우스의 띠....를 경험했다. 😰

루카스 멘토님과 멘토링 때 컴포넌트의 구조와 상태를 어떻게 관리할지에 대한 나의 고민들을 공유하였고 무릎을 탁! 칠만한 좋은 피드백을 주셨고 나만의 결론을 내렸다.

• 말단 컴포넌트는 데이트를 받아 자기만의 기능을 수행하도록 하고 어디서든 사용할 수 있도록 추상화한다.
• 상위 컴포넌트와 하위 컴포넌트의 관계에 대해서 컴포넌트가 어디까지 책임을 가질지에 대해 고민하고 정의한다.
• 컴포넌트의 역할과 상태를 어떻게 전달할지 정의했다면 일관성있게 코드를 작성해라.

이렇게 대원칙을 세워두고 코드를 작성하다 보니 이전에 작성했던 코드를 전부 갈아 뒤엎었는데도 불구하고 오히려 하나의 방향으로 헤매지 않고 즐겁게(?) 코드를 작성할 수 있었다.

생각해 보니 코로나 백신 2차 접종도 했는데 1차 때는 정말 아무렇지 않았었는데 다음날 몸살 기운이 갑작스레 와서 잠시 고생을 했었다. 🤒

아.. 근데 지난주 정말.... 바빴다... 그래서 TIL 업로드를 못했다... 하지만 아티클을 꾸준히 작성하고 업로드해두었다..🤣

✏️ 오늘 학습한 내용

• ➡️ flex 한 눈에 정리하기 ⬅️
• ➡️ Grid 한 눈에 정리하기 ⬅️

오늘은 CSS에서 레이아웃 시스템인 flex box와 grid에 대해서 학습했다.

flex는 이전에 학습했었지만 아직 자유자재로 사용하지 못하는 수준이었고 grid는 이번에 처음 학습하게 되었다.

이전에 flex를 학습했을 당시 flex면 grid를 사용하지 않아도 되겠다는 생각에 grid 학습을 미루었다. 둘 중 하나만 잘 사용할 줄 알면 된다고 생각했다.

Grid로는 구현이 어려운 레이아웃이거나 Flex를 쓰는게 더 편리한 경우도 있다는 것을 알게 되었고 적재적소에 활용하는 것이 좋을것 같다는 생각을 했다.

특히 Grid는 웹의 전체적인 구조를 잡는데 활용하고 내부의 간단한 요소들을 Flex를 활용하면 좋을것 같다는 생각을 하게 되었다.