나보단 잘하자

nuxt앱을 만드는 중에 발생한 에러다. 어려운 작업은 아니었으나 중요해보여서 기록. 상황 반응형 웹으로 전환하는 도중에 Mismatching childNodes vs. VNodes: - [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content ( Nuxt / Vue / lerna monorepo ) 라는 에러가 떴다. 해결 원인은 v-if가 아닌 v-show로 적어야 할 것을 잘못 적은 것. 둘이 별로 에러를 낼 만큼 사용에 차이가 없을 줄 알았는데, 이유는 찾지 못했다. // 문제 // 해결책 정확한 이유를 찾지는 못했기에 v-if else의 사용이 필수불가결하다면 v-if를 사용하고, 화면..

도커로 이미지를 빌드하던 중 오류 발생. 에러가 꼭 6번째에서 발생했다. 찾아보니 도커만의 오류는 아니고, 프레임워크(react, angular, vue) 등을 빌드할때 공통적으로 발생하는 것 같다. 몇시간을 헤매는 중에 시도한 방법은 $ npm cache clean --force $ rm -rf node_modules $ rm -rf package-lock.json $ npm install $ npm run dev // 이건 아무거나 자신의 빌드 명령어 쌓인 캐시들을 지우고 모듈을 재설치 하는 방법인데 좋아요가 418개나 달려있고 다른 한국 블로그들도 다 같은 방법을 추천하길래 들뜬 마음으로 시도했다. 실패. 그러나 각자의 상황이 다르니 시도는 해봐도 좋다. 해결 힌트는 콘솔에 있었다. ./layout..

우선 자료화면 먼저 보고 가시죠 아무튼, 막판 리액트 클라이언트를 디플로이하려던 순간, 사진처럼 수 많은 고난을 겪었다. 구글링 중 만난 공통의 해결방법들을 공유하고자 한다. 1. Build command 처음 웹을 디플로이 할 때, netlify 에서 앱을 빌드하기 위한 Build command를 적는 칸이 있다. 이 칸에 리액트 기준 평소에 적었던 'npm run build' 만 적으면 오류가 날 수 있다. 맨 왼쪽에 CI= 를 붙이자. 2. Github Repository 변경사항 push 잊고 변경사항을 push하지 않았다면 해보자. 3. package.json 확인 / Cannot find module 내 문제였는데, 오류사항을 우선 보여주겠다. 우선 이 오류를 읽을 때, Failed to co..

많은 CRA 폴더를 망치고 새로 설치해본 사람으로서, 이러한 오류가 발생했을때 초보자기준, 절대 아래의 두 가지는 함부로 진행해선 안된다. 1. 무작정 업그레이드 시키기. 패키지 매니저(npm, yarn) 자체의 업그레이드에 대한 상황은 모르지만, 설치한 패키지들을 그냥 업그레이드 해버렸다간.... 다른 패키지들과의 버전이 맞지 않아 곤혹을 치를 것이다. 2. 전역으로 설치하기. 이 또한 전역으로 설치하기보다, 해당 파일 내에 설치하는게 관리가 쉽다. 아래를 입력해 해결했다. npm install -save react-script 말 그대로, react-script가 제대로 설치가 안된 모양이다.