📍목표- tanstack query(react-query, vue-query) 의 캐시된 데이터 전부 초기화하는 방법 알아보기- A계정으로 데이터 페칭 후, 로그아웃. B계정으로 새로 접속 시 A계정으로 불러온 데이터 제거하기 📍현재 상황- vue-query의 useQuery를 사용해서 데이터 페칭 후 캐싱- 로그인 페이지에서 useQueryClient() 를 이용해 queryClient 인스턴스를 선언- Nuxt의 $fetch로 로그인 요청- 로그인 요청이 성공(access token 및 refresh token이 반환됨)하면 queryClient.clear() 를 사용해서 모든 캐시 데이터 제거 시도=> 하지만, 캐시가 제거되지 않음 📍시도한 방법queryClient.clear() 대신- que..

📍목표- PNPM 패키지 매니저 사용해서 Next.js 프로젝트 만들기- Tailwind 사용 조건으로 ESLint, Prettier 빠르게 설치하기📍create-next-app- create-next-app으로 최신 Next.js 프로젝트 생성- pnpm 사용 npx create-next-app@latest [project-name] --use-pnpm 이후 터미널에서 이어지는 질문에서 ESLint 사용을 체크했다면 ESLint를 설치할 필요 없다 📍Prettier 설치- Prettier 및 Prettier와 ESLint와의 충돌을방지하는 플러그인과 익스텐션 설치- Prettier Tailwind 플러그인도 설치- ESLint Tailwind 플러그인도 설치 pnpm install -D prett..

📍설치yarn add -D husky lint-staged 📍husky 초기화npx husky init- 그러면 .husky 폴더가 만들어지고, 그 안에 pre-commit 파일이 생긴다- pre-commit 파일에 pre commit hook을 작성할 수 있다- 그리고 설치한 내용을 반영하기 위해 커밋을 한번 해준다 📍husky 테스트- 일단 .husky/pre-commit 파일에 테스트 명령어를 입력해서 pre commit hook이 잘 동작하는지 테스트해본다echo "pre commit hook test"- 빈 커밋 날려보기 (VS Code에서 소스 컨트롤(GUI)로 커밋을 하면 husky 적용이 안되므로 터미널에 입력해야 함)git commit --allow-empty -m "test com..

📍prettier 설치prettier 설치eslint-config-prettier eslint-plugin-prettier 등은 설치할 필요 없음 yarn add -D prettier 루트 경로에 .prettierrc 파일을 만들고 아래 내용을 추가한다 { "tabWidth": 2, "semi": true, "singleQuote": false, "trailingComma": "all", "printWidth": 90, "useTabs": false, "endOfLine":"auto"} 사용중인 IDE에서 prettier 설정을 켜준다 📍eslint 설치원래는 cli 를 통해 간편하게 eslint를 설치했지만..yarn create @eslint/config 터미널에서 Vue.js를 선..

Elements 탭Styles- 특정 DOM element에 적용되고 있는 스타일을 확인할 수 있다- 가장 상단의 element.style 에 입력하는 스타일이 우선 적용된다- 우선 적용되는 이유는 inline style로 적용되기 때문이다. 따라서 !important로 이미 적용된 스타일에 영향을 끼치지 않는다 (아래 사진 참조) - ahoy 클래스에서 red !important 로 최우선 효과로 지정했기 때문에, element.style 에서 background를 blue로 변경하려고 해도 취소선이 그어지고 color는 여전히 red로 유지된다 Computed- 최종적으로 적용되는 스타일 확인 가능 Event Listeners- element에 적용된 이벤트 리스너 확인 가능 Console 탭- re..

서로 다른 도메인에서 웹서버와 node 서버 실행하기 NodeJS 실습 도중 html 과 node 서버의 실행 도메인이나 포트가 다른 경우 CORS 에러가 발생합니다. 예를 들어 html 파일은 httpd 를 통해 80포트에서 실행하고 nodejs 는 3000포트로 실행되는 경우 javascript 에서 {서버주소}:3000 으로 ajax 호출이 정상적으로 이루어지지 않습니다. 그림 1. 서로 다른 포트에서 AJAX 요청을 하는 경우 CORS 에러가 발생합니다. 이를 해결하기 위한 몇 가지 방법들을 소개합니다. 1. 같은 도메인, 포트에서 html 파일과 nodejs 서버를 실행하기 먼저 nodejs 프로젝트 폴더 안에 public 이라는 디렉토리를 만들고 모든 정적 파일들 (html, css, js, ..