tailwindCSS를 사용하던 도중 Props로 받아온 데이터들로 수치를 지정해 className을 부여했지만 실제 HTML 요소에 반영이 되지 않는 문제가 발생했다. 그래서 Tailwind CSS의 작동 방식을 찾아보니 정규표현식을 통해 HTML상에서 class일 수 있는 모든 단어들을 가져온 뒤 해당 단어가 TailwindCSS에서 인식되면 그걸 CSS로 변환하는 방법으로 작동한다. 즉 class에 작성된 내용을 코드적으로 분석하거나 파싱하는 게 아니고 단어를 있는 그대로 이해하고 적용된다는 의미다. 그래서 이런식으로 class명 내에서 조건문을 사용하게 되면 Tailwind CSS는 이를 인식하지 못하고 건너뛰어버린다. 그래서 tailWindCSS로 동적 스타일링을 하기 위해선 변수와 함수를 이용..

Keep 각 팀원들의 인품이 뛰어나고 개인적인 성격 및 분위기가 너무 좋아 고통 속에서 잘 헤쳐나감 충분한 회의를 통한 프로젝트 계획과 설계 서로를 배려하고 존중하는 소통 원활한 커뮤니케이션과 협력을 통해 긍정적인 분위기를 조성 Problem 제작 일정이 늦어져 구현하지 못한 기능이 남았다. 완성되고 발생한 오류들이 많아 모두 해결하지 못했다. 타입스타입스크립트에 대한 숙지 미흡으로 인한 오류가 많았다. 중간 점검을 통해 일정 관리를 했어야 했는데 아쉬웠다. Try 계획 짤 때 업무 분담 확실하게 하기 진행 상황을 고려해 제작 일정을 효율적으로 관리하기 중간중간 디버깅 과정을 통해 버그 해결하기 설계에 있어 세밀하게 작업하며, 개발 일정에 대한 디테일한 체크가 필요 느낀점 프로젝트를 진행하면서 아쉬움과 ..

팀원들과 협업하다 보면 종종 import 구문 순서가 맞지 않아 병합 과정에서 충돌이 나는 경우가 있었다. import 구문 순서를 맞출 수 있을까? 이럴 때 유용한게 eslint이다. eslint는 코딩 컨벤션에 위배되는 코드나 패턴을 자동 검출해준다. 대부분의 IDE 위와 같은 코드를 자동으로 고쳐주는 autofix를 제공한다. vscode에서는 settings.json에 "editor.codeActionsOnSave": { "source.fixAll.eslint": true } 옵션을 추가해주면 autofix가 적용된다.

Literal Types란? union types와 Literal Types를 이용한 Type Combination

하위 컴포넌트로 props를 전달하고 타입을 지정할 때 알 수 없는 오류가 계속 났다. 데이터들을 하나의 객체로 묶어 props로 전달했고 인터페이스로 각 데이터의 타입을 정의해 props에 부여했다. 문제는 객체로 묶인 props를 받아 각 value에 해당하는 데이터만 정의해 줬기 때문이다. 인터페이스 안에서 객체이름으로 한번 더 묶어줘 오류를 해결했다. 짝짝

api를 활용한 아웃소싱 팀 프로젝트가 끝났다. 이제 깃허브를 통한 협업이 어느 정도 익숙해진 것 같다. 컴포넌트 구조에 대해서 고민을 좀 더 했으면 좋았을 것 같고, 충분한 협의를 통해 각종 컨벤션을 통일시키는 게 정말 중요하다는 것도 다시 한번 깨달았다. 앞으로 두 개의 프로젝트가 남았다. 지금까지 프로젝트를 하며 느낀 보완할 점들을 잘 반영해서 앞으로도 성공적이고 발전적인 프로젝트를 완성해야겠다. 팀원들과 작성한 KPT회고와 느낀점을 남긴다. Keep 주기적으로 진행상황 공유하고 함께 Merge 한 것 프로젝트에서 각자 헷갈리는 부분들을 튜터님께 안 물어보고 팀원들과 해결한 것 프로젝트 초반, 사전 구상 단계에서 세부적인 틀을 잡고 시작해 협업이 수월했던 것 . 공용 컴포넌트 먼저 같이 만들고 기능..