성연커밋 : )

리액트 쿼리의 버전이 v4로 업데이트 되면서 설치 방법이 바뀌었다. yarn add react-query 위의 코드로 설치하면 type에러 및 react-query가 계속 실행이 되지 않을 것이다. 설치는 이렇게하자! yarn add @tanstack/react-query react-query로 데이터 패치를 해보자. post ⇒ useMutation get ⇒ useQuery 를 이용하여 데이터 패치를 할 수 있다. post를 할 때는 굳이 useMutation을 해야하나 싶은 생각에, 이번 프로젝트에서는 get 데이터패치만 react-query를 이용하려고 한다. react-query를 이용하기 위해서는 _app.tsx에서 리액트쿼리를 사용하겠다고 세팅을 해주어야한다. import { QueryCli..

서버 상태관리를 하는 대표적인 두가지 라이브러리는 RactQuery와 SWR이 있다. 즉, 두 라이브러리 모두 data fetch를 도와주는 라이브러리이다. 사용하는 이유가 무엇일까? 어떤 데이터를 언제 fetch하면 되는지 목표만 기술하면 된다. 동일한 API 요청이 여러 번 호출될 경우 한 번만 실행 자연스럽게 흐름 파악 가능 SWR import useSWR from "swr"; function Profile() { const { data, error } = useSWR("/api/user", fetcher, options); if (error) return failed to load; if (!data) return loading...; return hello {data.name}!; } data와..

Credentials란? (인증서) 쿠키, 인증헤더, TLS client certificates(증명서) Credentials이 있는 CORS요청은 Client와 Server 둘 다 Credentials를 사용하겠다는 속서을 설정해주어야 통신이 가능하다. CORS 요청시 Client에서 XML HttpRequest.withCredentials 속성을 true로 설정을 해야한다! 요청하기 전에 withCredentials가 true로 설정되어 있지 않으면 다른 XML HTttpRequest가 자신의 도메인에 대한 쿠키 값을 설정할 수 없다. withCredentials를 true로 설정하여 얻은 타사 쿠키는 여전히 동일한 출처 정책을 준수하므로 document.cookie 또는 응답 헤더를 통해 요청하는 ..

리덕스란? 전역 상태를 전부 하나의 저장소(store) 안에 있는 객체 트리에 저장되며, 상태를 변경하는 것은 어떤 일이 일어날지를 서술하는 **액션(action)**을 내보내는 디스패치(dispatch) 것이 유일한 방법 액션이 전체 애플리케이션의 상태를 어떻게 변경할지 명시하기 위해서는 **리듀서(reducer)**의 작성이 필요하다. reducer는 변화를 일으키는 함수로써 전달받은 액션을 가지고 새로운 상태를 만들어서 스토어에 전달한다 이 모든 설계는 데이터가 단방향으로 흐른다는 전제하에 데이터의 일관성을 향상시키고 버그 발생 원인을 더 쉽게 파악하려는 의도에서 출발했다. 그러면 Redux Toolkit는 무엇일까? 리덕스를 위한 도구 모음(키트) 리덕스를 더 쉽게 사용하기 위해서 나왔다 Redu..

현재 나는 맥에서 stylelint를 세팅하여, 맥에서 stylelint가 잘 작동이 하였다. 하지만 같이 개발하는 윈도우 사용자의 개발자가 스타일린트에 대해서 에러가 난다며 질문이 왔다. 처음 package.json에서의 스타일린트 스크립트는 다음과 같았다. { ... "stylelint": "stylelint './src/**/*.{ts,tsx}'" ... } 이 코드에서의 문제점은 script를 작성할 때, key값을 이미 있는 명령어로 사용하면 안되는 것이다. 그래서, lint:style로 수정을 한 후, 다시 실행을 해보았지만, 스타일린트 스크립트 명령이 잘 먹지 않았다. 하지만, 직접 코드로 스타일린트 명령어를 치면서 테스트를 해보니까, 잘 작동하는 것을 봤다. 즉! 윈도우는 스크립트 내의 ‘..

1. 아래 페이지 클론 코딩 Thinking in React 이번 챌린지에선 마크업보다 데이터 흐름, 컴포넌트 구분에 집중해주세요! 상세 스펙은 다음과 같아요 Math.pow(Math.round((stage + 0.5) / 2) + 1, 2)개의 사각형이 표시되며, 그 중 하나만 색깔이 다릅니다. 한 stage의 제한 시간은 15초입니다. 색이 다른 사각형(정답)을 클릭한 경우 아래 변경사항이 적용됩니다. 다음 스테이지로 넘어갑니다. Math.pow(stage, 3) * 남은시간 만큼의 score가 누적됩니다 오답을 클릭한 경우 아래 변경사항이 적용됩니다. 현재 stage의 남은 시간이 3초 줄어듭니다. 남은 시간이 0초 이하가 되면 게임이 종료됩니다. 최종 stage와 누적 score를 출력하고, 새로..

Stylelint로 스타일을 관리해보자! stylelint란? style의 규칙을 정해주는 것으로 eslint와 유사하다. 사용 기술 스택 next.js typescript styled-components 내가 사용하는 기술은 위와 같다. styled-components의 공식문서에 stylelint에 대한 사용법이 적혀있다. 현재 스타일린트 버전은 14이다. styled-components 공식문서에 따르면 버전은 13이라, 따라하면 stylelint에서 @stylelint/postcss-css-in-js", and use the "customSyntax" option에러가 뜰 것이다. 이 에러가 뜨는 이유는? stylelint가 업데이트되면서 styled-components를 사용하기 위해선 cust..

‘.husky/pre-commit’ 후크가 실행 가능하도록 설정되지 않아서, 무시됩니다. 윈도우에서는 해당 에러가 안뜨지만, 맥북에서는 허스키가 동작하지 않았다. 나는 현재 커밋메시지로 커밋컨벤션을 작성해놨지만, 커밋 컨벤션을 지키지 않아도, 커밋이 되며 허스키가 무시된다는 것을 확인했다. 한글로 검색하였더니, 해당 에러가 뜨지 않아, 오랜 시간 어려움을 겪었다. 영어로 검색하였더니 해당 에러의 해결방법은 권한을 주는 것 이었다. 현재 commit-msg와 pre-commit파일의 권한이 -rw-r—r—로 되어있었다. chmod란? 파일의 권한 정보를 말한다. 총 12자의 영어로, 3자씩 나뉘면서 파일 소유자, 그룹, 그 외 사용자이다. (User, Group, Other) RWX의 순서는 Read(읽기..

개발해보면서 값을 확인하기 위해 우리는 console.log를 많이 활용하곤 한다. 값을 확인해보는데, 같은 console이 두 번씩 찍히는 부분을 발견하였다. 뭐때문인가 하고 코드도 계속 찾아봤지만, 나는 코드에 콘솔이 하나밖에 없었다. 이유를 찾아보니, index.tsx에서 컴포넌트가 에 감싸져 있으면 두 번씩 콘솔이 찍히는 것이었다. index.tsx를 위와 같이 고치면서 해결은 되었다. StrictMode가 무엇일까? StrictMode는 리액트에서 제공하는 검사 도구이다. 개발 모드일때만 디버그를 하며, 해당 태그로 감싸져 있는 부분은 자손까지 검사를 한다!안전하지 않은 생명주기를 가진 컴포넌트라든지, 권장되지 않는 부분이 있다든지 배포 후 문제가 될만한 이슈들을 미리 잡는 모드라고 보면 되겠다..

Commit-msg를 지정해서 관리해보자 깃허브에 커밋컨벤션이 있는데, 허스키를이용하면 커밋 컨벤션이 맞지 않을 경우 커밋을 취소하게 만들어볼 수 있다. npx husky add .husky/commit-msg 'yarn commitlint --edit $1' 터미널에 위 코드를 입력해도 되지만 직접 .husky 폴더에 commit-msg 파일을 만들어도된다. #!/usr/bin/env sh #.husky/_/commit-msg . "$(dirname -- "$0")/_/husky.sh" yarn commitlint --edit $1 패키지 설치 yarn add --dev @commitlint/config-conventional @commitlint/cli 위 코드를 이용하여 패키지를 설치하자 #.com..