TIL - 2022.01.26 수요일

오늘 배운 것

---

• 오늘은 리액트의 기본 레이아웃을 어떻게 짤 수 있는지 배웠다. 모든 페이지에서 제일 처음 공통으로 렌더링되는 파일인 _app.tsx 에 따로 만든 Layout 컴포넌트와 글로벌 스타일 컴포넌트를 삽입한다. 그리고 레이아웃 내부의 바디 영역에 props.children을 이용해 각각의 페이지 컴포넌트들이 로드되게 한다.

• 이렇게 하면 LayoutHeader, LayoutBanner, LayoutNavigation 은 모든 페이지에서 공통으로 보인다. 그리고 그 밑의 Layout Body 영역에 게시판의 목록, 글쓰기, 수정 페이지 등이 필요에 따라 렌더링된다. 유지보수하고 관리하기 정말 편리한 구조다.
• 위의 내용을 활용해서 작업중이던 자유게시판의 기본 레이아웃 구조를 만들었다. 큰 틀을 먼저 잡아놓고 Banner 영역에 react-slick 으로 만든 캐러셀을 넣어주었다. 슬릭은 jQuery를 쓸 때도 많이 이용했던 캐러셀 라이브러리인데, 리액트하다가 만나니까 고등학교 동창 만난 것 같고 괜히 반가웠다.

• 여러 컴포넌트에서 어지럽게 불러왔던 글로벌 스타일을 정리하고, 각각의 컴포넌트의 emotion은 그 컴포넌트 안에서 해결되도록 분배했다. 그리고 최소한으로 간추린 글로벌 스타일 css는 여러 곳에서 번거롭게 import하지 않고 _app.tsx에서 딱 한 번 불러오는 방식으로 변경했다. 말로 하니까 짧은데, 코드가 산재해있어서 정리하는 작업이 정말 큰 일이었다. 미뤄두던 대청소를 드디어 해치운 기분이다. (아직 치워야 할 벽장이 여러개 남아있다는 게 문제지만)
• 배우는 것이 새로 생길 때 마다 리팩토링을 쫌쫌따리 하고 있는데, 이게 생각보다 정말 작업량이 많다. 그래서 솔직히 좀 귀찮다. 피곤하기도 하고. 하지만 정리하고 나면 확실히 코드 읽기가 편해지더라. 리팩토링 작업이 중요하다고 하는 이유를 알겠다.
• 진짜 손을 많이 대야 하는 놈은 사실 write 컴포넌트인데.. 엄두가 안나서 필요한 부분만 깨작깨작 만지며 미루고 있다. 하. 주말 전에는 꼭 끝을 보자. 그래도 오늘은 미뤄두던 글로벌 스타일 정리를 끝낸것만해도 잘했다고 생각한다.

 

 

앞으로 할 것

---

• 이번 주 수업 내용 전체적으로 복습하고 포스팅할 내용 추리기
• write 컴포넌트에 손대기 시작하기! 끝을 못 내더라도 시작은 꼭 하자.
• 메인 배너 하드코딩으로 컨텐츠까지 다 채워넣어서 완성시키기. 그리고 코드 정리도 좀 하자. 오늘 이것저것 시도해보면서 만드느라 엉망진창이다.
• 자유게시판의 헤더 / 네비 만들어서 넣기
• 자바스크립트 메소드 포스팅하기

 

---

사실 나는 내가 경력에 비해 할 줄 아는게 그렇게 많지 않다고 생각했다. 내가 있던 물이 우물중의 우물임을 알고 있었기에 '거기서 기어올라봤자 올챙이지' 생각하며 내가 배운 것들에 대해 큰 가치를 부여하지 않았다. 그런데 그동안 난 생각보다 많은 것을 익혔더라. 그 사실을 근 며칠간 깨닫고 있다. 애써 견딘 개고생의 시간 덕에 지금 하는 공부를 좀 더 수월하게 할 수 있다고 생각하니 과거의 나에게 고마운 마음이 든다. 당시에는 힘들었지만 그래도 버티길 잘했구나 싶음. 프론트엔드 공부도 잘 버티면서 해보자 아자아자~