[Day 57~60] 웹 풀사이클 데브코스 TIL

오늘 배운 내용 📚

• 이미지 파일 사용
• export와 export default
• 컴포넌트와 배열
• 라우팅 - Route와 Link
• styled-components
• 컴포넌트의 생명주기
• 서버통신 Ajax
• 전역상태관리
• react 배포

---

지난주 프로젝트는 react를 체험해 보는 시간이었다면, 이번주 프로젝트는 조금 더 깊이 있는 프로젝트였습니다.

또한 타입으로 인해 막막한 점이 한두 번이 아니었는데요, 에러가 났다 하면 전부 타입에러여서 어떻게 접근을 해야 할지 막막했습니다. 거기에다 따로 폴더관리를 안 하면서 수업에 맞춰가니 어디에 어떤 interface가 존재하는지도 헷갈려서 점차 interface나 재사용성이 있는 것들은 따로 관리를 해야겠다는 생각을 하게 된 시간이었던 것 같습니다.

 

이번주 프로젝트를 진행하면서 배운 styled-components.

이 스타일컴포넌트는 사용하기에 따라 편할 수 있지만 개인적인 의견으로 좋아 보이지는 않았습니다.

일반 css 작업에 익숙하기도 했지만 불편함을 느꼈던 이유 중 하나는 찾아야 할 곳이 중구난방이라는 점에 불편함을 느꼈습니다. 따로 관리를 한다 해도 어느 컴포넌트에서 어떤 스타일컴포넌트를 사용했는지 모르기 때문에 수정이 어렵다 느꼈습니다. 두 번째로 자유도가 떨어진다 생각이 들었습니다. css 작성하는 방식은 여러 개가 존재합니다. 예를 들어서 margin이나 padding 같은 경우에는 작성하는 방식이 상하좌우 순서대로 작성하는 방법, 상하 좌우로 작성하는 방법 좌 상하 우 작성하는 방법 상 하 좌 우 방식으로 작성하는 방법, margin-left, margin-top과 같은 개별로 적용하는 방법 다양한데 세밀하게 코드를 작성하는 경우에는 조금의 변경점이 존재할 때마다 똑같은 디자인의 컴포넌트가 padding과 margin마다 작성해놔야 한다는 것이었습니다. props를 통해 작업을 하는 경우에도 그 불편함은 마찬가지였습니다. props로 필요한 수치들을 입력받아야 하는데 예를 들어 padding, margin 말고 background라는 설정을 하려면 컬러, 이미지경로, 위치, 크기 등등 모두 제각각을 props로 받아야하는데 이렇게 수치가 많은 css들이 계속 늘어난다면 어떻게 다 받을 수 있는지 좋은 방법은 아니라는 생각이 들었습니다.

물론 사용하다 보면 스타일컴포넌트를 사용하는 게 더 편할 상황도 존재하겠지만 기존에 작업하던 css방향이나 혹은 scss를 활용한 다른 스타일적용을 사용할 것 같다는 생각이 든 수업이었습니다.

 

그리고 리액트에서 가장 힘든 전역상태관리에 대해서 배우게 됐는데

이전에는 리덕스를 그냥 이렇게 쓰라니까 쓴다 느낌이었다면, 이번에 수업을 들으면서 그전에 왜 이렇게 쓰라했는지에 대해서 납득을 하는 순간이었던 것 같습니다.

일단 수업에서는 전역상태관리 코드를 store.js에 다 작성을 했었는데요. 이전에 따라 쓰는 코드에서는 각각의 js를 만들어서 import 시켜 사용했었습니다. 그때 왜 이렇게까지 나눠야 하는가 했었는데 이번 수업을 들으면서 모든 코드들이 모여있으니까 너무 정신이 사납다는 생각을 했습니다. 코드가 지저분해 보이기까지도 했는데요. 때문에 코드를 분리를 왜 하는지에 대해서 공감을 했고 작업을 할 때 조금씩 나눠 작업을 해야겠다는 생각을 했습니다.

 

마지막으로 ts기반으로 리액트를 작성했는데 정말 정말 정말 타입이 당장 어디에 필요한지 몰라서 어지러울 정도였고 위에 말했다시피 에러가 났다 하면 전부 타입에러라 어떻게 접근해야 할지 감이 안 잡혔던 것 같습니다. 이런 문제들은 아무래도 다른 프로젝트를 통해서 하나하나 배워나가야 하지 않을까 싶고, 리액트뿐만 아니라 node에서 타입스크립트를 적용해 보는 것도 타입을 지정하는 데 있어서 도움이 되지 않을까 생각하는 시간이 됐던 것 같습니다.