Husky란?husky는 commit 또는 push 할 때 lint에 맞는지 확인하고, 테스트를 실행하는 것에 사용할 수 있다. 팀마다 컨벤션이 다양할 텐데 인간이 코드를 작성하는지라 어쩔 수 없이 컨벤션에 맞지않게 코드를 작성할 수도 있다. 그럴때 husky를 사용하면 자동으로 검사해서 commit이든 push든 막아준다.팀바팀은 husky로 lint검사만 진행하는 것으로 결정했다. 1. lint 검사는 commit 단위로 진행하는 것이 더 많은 수정을 막는다2. test를 commit단위로 진행하는 것은 필요없는 commit이 더 많기도 하고 전체 파일에서의 통과 여부가 더 중요하기 때문에 PR 단위로 진행한다.라는 이유였다!Husky 설치하기npm i -d husky명령어 넣기//package.js..
팀 프로젝트를 진행하며 프로젝트 스타일링 방법을 선택하기전 각각의 장점과 단점을 찾아보았다. 이것말고도 더 많은 장단점이 있지만 선택에 중요한 판단이 되고 공감가능한 장단점을 위주로 찾아보았다. CSS 단점 모든 클래스의 이름이 전역적으로 존재하기 때문에 별도의 class 명명 규칙이 필요하다 하나의 요소에 여러 css 가 적용될 수 있어, 개발자가 모든 스타일을 기억해야한다. js의 상태 값을 공유하기 어렵다. css 로드 순서에 따라 우선순위가 달라지기 때문에 css 로드 순서를 기억해야한다. 하위 컴포넌트가 부모 컴포넌트의 스타일링에 영향을 받는다. ⇒ 유지보수의 측면에서도, 협업의 측면에서도 단점이 명확함 CSS-in-JS 장점 class 명이 빌드 타임에 유니크하게 변경되어 명명규칙이 필요없음 ..
webpack은 정적 모듈 번들러로 웹에서 사용되는 모든 자원을 번들링 해주는 도구이다. HTML 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들링 이라고 한다. 그동안 프로젝트를 할 때 CRA로 프로젝트를 시작했는데, CRA로 프로젝트를 생성한다면 필요없는 의존성을 가지게 되는 경우가 있기도 한다. 따라서 이번 프로젝트를 시작하면서는 우리가 필요한 설정만 입맛대로 할 수 있도록 webpack을 이용해보았다. 공부한다고 >유스 { config.resolve!.plugins = [new TsconfigPathsPlugin()]; return config; }, }; export default config; 6-2. storybook preview.tsx 설정 s..
우아한 테크 코스 미션중 스토리북 배포해서 상호작용 확인하는 미션이 있었는데 아무리 해도 netlify에서 배포 오류가 뜨는 것이에요. 결국ㅋㅋ.. 결론만 말하자면 window여서 억까당한거였답니다.. 덕분에 내가 얻은것? 4시간동안 헛짓하기 + 크로마틱으로 배포한다고 설치하다가 yarn npm 꼬이기 (이게 뭔 소리냐면 저도 몰라요. 환경문제인지 모르고 이것저것 건들다가 yarn으로 설치했는데 이 이후로 해당 프로젝트에서는 npm으로 뭐 설치하면 오류뜨더라구요) 암튼 미래의 내가 또 헛수고 할까봐 글씁니당ㅅㄱ~ 1. netlify 로 배포하기(mac, window) netlify 는 간단하게 말해서 서버를 빌리는 거에요. localHost에서 개발하다가 나중에 git page로 배포하는게 대부분인데 g..
useEffect useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다. componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것 useEffect는 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다. React는 effect가 수행되는 시점에 이미 DOM이 업데이트되었음을 보장한다. side effects => 데이터 가져오기 , 구독 설정하기, 수동으로 react 컴포넌트의 DOM을 수정하는 것 등등 class componentDidMount() { document.title = `You clicked ${this.state.count} times`; } componentDidUpdate() { ..
그래서 각기 다른 길이를 가지고 있는 컴포넌트에게 어떻게 스타일을 입혀주지? ThemeProvider 사용법 말고 컴포넌트 분리자체가 궁금하면 1번 글 보러가세요 일단 어떻게든 분리는 했는데... 그래서 어떻게 style을 넣어줄지 고민이 되었어요. 그러던 중 ThemeProvider을 알게 되었음. ThemeProvider 장점 1. 매번 노가다 안해도 괜찮음 2. 스타일 선언 순서에 대한 일관성 확보 가능 3. 컴포넌트 자체를 재사용하기 편함 이정도가 내가 생각한 ThemeProvider의 장점이에요. 더 있을 수도 있는데 아직 그거까지는 모르겠답니다. 나중에 알게되고 + 안귀찮으면 업데이트 할게용> void; id?: string; value?: string; minLength?: number; m..
