소소한 코딩일지

Pokedex라는 개인 프로젝트를 업데이트하고 배포하는 과정에서 발생한 에러이다. 에러 상황 vercel에서 배포하는 과정에서 Toggle과 관련된 컴포넌트를 찾을 수 없다는 에러였다. Toggle 컴포넌트는 업데이트 과정에서 다른 컴포넌트들과 파일 이름 포맷이 달라서 파일명 (toggle -> Toggle)만 수정해준 부분이었다. 에러를 보고 작업 폴더에서 Toggle 폴더의 경로를 점검했지만 이상한 점을 확인할 수 없었다. 해결 방법 Error: Can't resolve 'remark' in '/vercel/workpath0/lib' · Discussion #18176 · vercel/next.js Seems I am getting a compile error as shown in the title...

Error 내용 기존에 설치한 의존성과 관련하여 설치하려는 패키지와의 충돌 때문에 발생하는 이슈이다. 해결 방법 위 이미지에도 나와있는 방법으로 해결할 수 있었다. 문제 해결도 해결이지만 두 가지 명령어가 각각 어떤 동작을 하는지 잘 모르니 정리가 필요했다. Fix the upstream dependency confilct, or retry this commend with --force, or --legacy-peer-deps to accept an incorrect (and potentially broken) dependency resolution. 번역) 업스트림 종속성 충돌을 수정하거나 --force 또는 --legacy-peer-deps를 사용하여 이 권장 사항을 다시 시도하여 잘못된 종속성 확인..

현상 Vuex의 store에서 state가 update 되었지만, 새로운 state에 대해서 UI는 업데이트되지 않는 현상이 발생했다. 해결 과정 두 가지 부분에서 잘못된 부분을 발견했다. 우선, 평가지 파일을 업로드하는 부분에서 업로드한 파일을 곧바로 사용하지 않고, 배열에 push 해서 사용하고 있었다. 파일 객체를 사용하는 부분에서는 모두 배열의 0번째를 가리키고 있어, 파일이 추가되어도 절대 바뀌지 않았다. 무슨 생각으로 코드를 짠 건지... 첫 번째 문제를 해결했지만 위 파일명이 새로운 파일의 이름으로 바뀔 뿐 아래 테이블에 새로운 데이터 반영되지 않았다. 테이블 컴포넌트의 created()를 통해 확인해보니, 처음 파일을 업로드했을 때는 아래 컴포넌트가 파일 데이터로 랜더링 되지만 다음 새로운..

Redux toolkit과 Redux Thunk를 공부하면서 작은 프로젝트를 만들어보고 있었는데, Redux Thunk를 통해 api통신을 하는 과정에서 다음과 같은 에러 메시지를 만났다. 생소한 에러 로그이기도 하고, 현재 Redux Thunk를 공부하는 데 많이 애먹고 있어서 이번 에러 로그에 관한 정보와 해결 방안을 기록해두려고 한다. ## 상황 Redux Thunk를 통해 날씨 API와 GET 통신을 하기 위해서 코드라인을 작성했다. 데이터를 사용하는 쪽에서 console.log를 찍어보니 다음과 같은 에러로그가 나타났다. 에러 로그를 구글링해보니 공식문서의 리덕스 설계 규칙에서 관련 정보를 찾아볼 수 있었다. Non-Serializable 한 State나 Action을 사용하지 말 것. Prom..

## 현상 GraphQL 쿼리 결과가 정렬되어 있지 않은 채로 return 되어서 데이터에 sort를 적용시키니 다음과 같은 에러 메시지가 출력되었다. ## 해결 구글링 해보니 array를 직접 조작하려고 해서 발생하는 오류라고 한다. 그래서 다음과 같이 spread operator로 감싸준 다음에 sort를 적용하니 잘 작동하는 것을 확인할 수 있었다.

## 현상 vue의 tabulator라는 라이브러리를 통해 table을 형성하고, table 내부 셀에 대해서 이벤트를 걸어주는 코드를 작성하면서 이벤트가 계속해서 누적되어 발생하는 현상을 발견했다. cellClick: (cell) => { const targetClass = cell.target.className; const targetIndex = targetClass.split('-')[1]; document .querySelector(`.${cell.target.className}`) .addEventListener('change', (event) => { const cellData = event.target.value; // this.setTableData(targetIndex, cellData..

백엔드에서 제공하는 API를 중첩해서 호출해야 하는 경우가 생겼습니다. ## 상황 모든 매치 리스트를 조회하면 매치 id의 리스트가 나오게 된다. 전달받은 매치 id들을 통해 각 매치의 상세정보를 받아오고 싶었다. 그래서 두 번의 API 콜이 중첩해서 사용하려고 했다. 기존에 사용하는 메서드를 중첩하는 것처럼 사용하니 다음과 같이 무수하게 많은 promise 배열을 return 받았다. const getTotalMatchData = async () => { setLoadingState(1); return await getAllMatch().then((response) => { return (response as ParentMatchesType).matches[0].matches.slice(0, 60).m..

로그아웃 기능 구현을 위해서 로그인 인증 토큰을 헤더로 가지는 post 요청을 해주는 과정에서 이슈가 생겼다. 401 에러는 인증정보가 유효하지 않거나, 인증 정보가 부족하다고 판단되어 요청이 거부되었을 때 발생하는 에러이다. post 요청을 위해서 Authorizaiton 을 헤더로 넘겨주었고, 개발자 도구의 network 탭에서 header가 잘 전달되는 것을 확인했기 때문에 인증정보가 부족하다고 생각하지는 않았다. 그래서 Authorizaiton 토큰을 전달 하는 과정에서 이상이 생기는지 확인했지만 쿠키로 전달하는 과정에서도 제대로 토큰이 전달되는 것을 확인했다. --- 해결 방법 --- 역시 기본기가 제일 중요했습니다. axios 공식문서의 post 방식에 사용되는 인자의 순서는 다음과 같습니다...

새로운 프로젝트를 시작하면서 Vue-Bootstrap 템플릿을 사용하게 되었다. 템플릿을 사용하면서 필요한 package를 install 하는 중에 sass 관련 에러가 발생했다. 아래 sass의 공식문서에 따르면 node-sass뿐만 아니라 libSass라는 라이브러리를 더이상 사용하지 않는다는 내용이었다. 그 대신 Dart-Sass라는 패키지로 대체하여 사용하라고 권장하고 있다. node-sass와 LibSass를 더이상 사용하지 않는 이유에 대해서는 아래 Reference를 확인해보면 좋을 것 같다. 내가 사용하려는 템플릿에서는 node-sass를 사용하고 있었지만 이는 현재 m1 맥북을 사용하는 환경에서는 설치가 되지 않아 에러가 나는 것이었다. 내가 해결한 방법은 권장사항과 같이 node-sas..

상황 프로젝트 중, Navigation의 버튼에 따라 routing이 필요했다. TDD 방식을 적용시켜 Jest로 route에 관련된 테스트 코드를 미리 작성했고, 그에 따라 Navbar.vue파일에 Navigation Bar를 제작하였다. 코드는 다음과 같이 제작하였다. {{ m.name }} Navbar를 사용하면서 사용자가 버튼을 클릭했을 때 버튼의 색상도 함께 변화시키기 위해 Click 이벤트로 selectMenu를 발생시켰고, select Menu 내부에서 해당 페이지로 넘어가게끔 코드를 작성했다. beforeEach(() => { wrapperApp = mount(App, { global: { plugins: [router], stubs: [routes], }, }); }); it('routi..