ecogit-stage / react-design-system-focus-challenge Goto Github PK

챌린지주소

Class101-Design-Systme

1. React 사용
2. Javascript 보다는 Typescript 사용
3. 서버에 배포할 것

결과물 제출 요건

• components : 컴포넌트 작성 폴더
• static : global style + data 저장 폴더
• stories : 스토리북 작성 폴더
• App.tsx : 메인 페이지

• react-slick - Class101 UI 디자인 시스템에서 제공하는 Carousel에서 발생한 오류로 인해 react-slick 사용 (대중적이며 레퍼런스가 많다)
• storybook - FE UI 테스트 도구로 작성한 컴포넌트를 단위 테스트 하기 위해 사용
• yarn - 이전까지 npm을 사용했지만 yarn이 package를 병렬 설치하기 때문에 퍼포먼스가 많이 차이난다. 또한 자동으로 lock 파일을 설치해주기 때문에 보안에서도 우수하다고 판단했다.
• React - Next 가 아닌 React를 사용한 이유는 SSR이 필요없고 SEO 최적화도 크게 신경쓸 필요가 없기 때문이다.
• Vercel & Heroku - 처음에는 이미 사용한 경험이 있는 Heroku를 이용해서 배포했지만 Vercel도 써보고 싶었다. 그런데 배포 과정이 Vercel이 훨씬 간단하고 속도도 빠르다. 무엇보다 github repository에 머지가 되는 순간 자동으로 배포를 해준다. 너무 편하다.

요구사항을 정확하게 파악하고 UI를 짜는게 생각보다 어려웠다. 디자인 시스템을 사용해서 개발했지만 해당 디자인 시스템을 개발한 개발자가 어떤 의도로 코드를 작성했는지 파악해야 하고 분석이 제대로 되어있지 않으면 내 생각과는 너무나 상반되는 결과가 나왔다. [Card 에서 특히...]

누군가 코드를 최적화하는 가장 좋은 방법이 다른 사람이 짠 코드를 가져다가 쓰는 것이라고 했다. 하지만 다른 사람의 코드를 정확하게 분석하지 않고 사용한다면 오히려 더 안좋은 결과를 초래할 수 있다는 것을 많이 느낀 챌린지었다.

아쉬운 점은 처음 마음 먹었던 것처럼 이슈 관리나 블로그 작성을 제대로 하지 못했다는 것이다. 물론 협업이 아니라 이슈 관리를 제대로 안 한것이 큰 문제는 아니지만 그래도 협업 하는 것처럼 이슈 관리를 하고 싶었다. 블로그 작성도 바쁘다는 핑계로 많이 소홀했던 것 같다.

이번 경험을 거울 삼아 이슈 관리, 블로그 작성을 더 성실하게 하도록 하자...!