개발/오류해결

들어가며, 회사에서 디자인 시안에 따라 개발을 하던 중, 탭 메뉴를 눌렀을 때 background-image를 다르게 보여줘야 했다. 컴포넌트에 배경이미지를 적용하면 컴포넌트 내, 즉 컴포넌트 크기만큼만 사용할 수 있기 때문에 전체너비를 다 차지하지 못한다. 어떻게 해야할 지 고민을 하던 와중, 탭을 눌렀을 때 변하는 상태에 따라서 배경이미지 css를 조절하면 어떨까라는 생각에 도달했다. 본문 먼저 가장 부모 컴포넌트를 만들어준다. 가장 바깥 부모에서 상태관리를 해준 이유는 가장 바깥 컴포넌트에 배경이미지를 적용해야하기 때문이다. 위에서 말했듯이, 전체 너비에 배경이미지를 적용하기 위해선 만들어낸 컴포넌트가 아닌 가장 바깥 컴포넌트에 적용한다. // App.jsx import React, { useSta..

들어가며, react로 반응형 웹을 만들어 보려고 cra를 이용해 리액트 프로젝트를 시작했다. 타입스크립트와 기본적인 것들을 설치했는데 이런 경고가 장황하게 떴다. 대충 바벨에 관련해서 말하는 것 같았다. 경고문구 발생 해당 경고 문구! One of your dependencies, babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies. This is currently working because "@babel/plugin-proposal-private-property-in-object" is already..

디자인시스템을 만드는 팀 프로젝트를 진행 중 우리가 만든 컴포넌트들을 npm 패키지로 배포해야 했다. 처음에는 Rollup으로 시도했다가 이건 뭔가 아닌 것 같다는 판단이 들었다. 왜냐하면 Next.js는 Vite와 달리 Rollup 번들러가 아니라 Webpack 번들러를 사용하기 때문이다. 팀원과 함께 Webpack으로 번들링하는데는 성공했지만 tailwind 스타일링이 적용되지 않는 문제가 발생했다. 배포한 npm 패키지를 설치하고 Toast 컴포넌트를 적용시켰을 때 div에는 tailwindcss가 잘 적용된 것 처럼 나온다. 하지만 결과는 제대로 나오지 않고 폰트 크기만 적용되어서 나오는 문제가 발생했다. 구글링을 해도 검색이 잘 되지 않아 영문으로 검색하니 동일한 문제를 겪은 사람들이 있었다. ..

개발 중에 만난 axios 401 에러.. 처음에는 서버가 잘못된건지 뭐가 잘못된건지 계속 헤맸다. 한 두시간 넘게 계속 헤맸다가 정말 어이없게 해결했다. 이 오류 해결에 도움을 준 내 친구에게 영광을 돌린다. 사실 이 문제는 같이 오류해결을 하려고 했던 친구가 먼저 이 오류를 마주했다. 함께 찾아보다 결국 해결하지 못했는데 이 친구는 선언했던 변수명과 응답해야하는 변수명이 달라서 오류를 뱉어낸 것이었다. (내가 준 코드 때문에 변수명이 달랐음) 그래서 나도 변수명이 문제인가했지만 그럴리가 없었다. 왜냐면 나는 계속 똑같은 코드를 써왔기 때문에.. 투두리스트를 만들고 axios를 이용해서 통신을 하는데 계속 오류가 발생했다. 나는 headers도 잘 넣었는데 왜 안될까..를 고민하던 와중 데이터를 보내는..

리액트로 투두리스트(todoList)를 구현하고 있던 도중 이런 오류를 만났다. 폼을 제출할 때 콘솔창에 이런 오류가 뜨기 시작했다.. 뭐가 문제인지 구글링해봤는데 form 안에 버튼이 2개가 존재하면 이런 오류가 뜰 수 있다고 한다. 내가 쓴 코드는 이러하다. { onEdit(index); }} > setNewTodo(e.target.value)} /> 제출 setEdited(false)} > 취소 버튼이 2개인데 버튼마다 타입을 명시해줘야 한다고 해서 각 버튼마다 타입을 명시해줬다. 제출 setEdited(false)} > 취소 근데도 오류가 뜸.. 그래서 다른 방법을 찾아야 했다. 나머지 방법을 스택오버플로우에서 찾았는데 e.preventDefault()를 사용해야 한다고 나와있었다. 그러면 저 코..

프로젝트를 CRA를 이용해 만드려고 설치를 하던 중 오류를 발견했다. 두번이나 시도했는데 계속 실패해서 구글에 이유를 찾아봤다. 뭔가 node 버전이 맞지 않아서 그런 것 같았다. 오류를 발견했을 때 다른 분은 node 버전이 낮아서 이런 오류가 발생했는데 나는 저번에 yarn을 설치하면서 버전이 너무 높았던 것 같다. node 버전을 18.14.0으로 설치해주니까 CRA 설치가 정상적으로 작동했다. 이렇게 명령어로 설치를 해준 후 확인을 해보면 제대로 바뀌어 있는 것을 볼 수 있다. 나는 원래 노드 버전이 20.3.0이었는데 lts에 맞게 버전을 내려줬다. 다시 재 설치하면 정상적으로 작동하는 것을 볼 수 있다!

타입스크립트를 공부하면서 node를 최신 버전으로 업데이트를 해야했다. 그치만 계속 안되는 오류가 발생했다. 원래는 노드버전이 v17.08.5 인지 아무튼 이랬는데 아무리 최신버전을 설치해도 되지 않았다. Node 터미널을 열고 Node.js 버전을 확인해준다. node -v v x.x.x n 모듈이 설치되지 않았을 경우 n 모듈을 설치해준다. sudo npm install -g n 이경우 나는 권한? 때문에 앞에 sudo를 붙이니까 설치가 잘 되었다. Node.js를 원하는 버전으로 업데이트 한다. Stable 버전 설치 $ sudo n stable 최신 버전 설치 $ sudo n latest LTS 버전 설치 $ sudo n lts 특정 버전 설치 $ sudo n 원하는 방식을 붙여넣고 설치해준 후 ..

-프로젝트를 배포 후 리팩토링 및 추가작업을 위해서 test 브랜치의 것들을 새 브랜치에 pull 받고 실행시켰더니 이런 오류가 발생했다..! 이럴 때 경우는 여러가지가 있는 것 같다. 1. node 버전 최신화하기 - node -v 로 버전 확인 후, 최신 버전으로 올려준다. 2. npm 버전 최신화하기 - node 버전과 동일하게 최신화 시켜줘야 한다. 그래서 최신화를 시켜줬지만.... 동일하게 오류가 해결되지 않았다. 여기서 다시 드는 의문.. 에러이긴 한데 나는 `Cannot find package 'vite-plugin-svgr' ~` 가 나온다는 것. 이때 우리가 사용하기 위해 설치한 vite-plugin-svgr 이 불러와지지 않는다는 말인 것 같았다. 아까 npm i 로 다 설치해줬지만 혹..

문제상황 Uncaught FirebaseError: Firebase: Error (auth/invalid-api-key) 오늘 리액트 프로젝트를 진행하는데 콘솔창에 이런 오류가 떴다. pull request를 진행 후 새 브랜치를 파고 pull을 받아온 후에 이런 오류를 접했다. 처음 겪어보는 오류여서 팀원들에게 먼저 조언을 구했다. 한 팀원이 🧐 : .env 파일에 잘 넣으셨나요? 라는 말을 듣자마자 아! 하고 깨달았다. 우리팀은 firebase를 공동으로 사용하고 프로젝트 설정 내 SDK 설정 및 구성에 있는 key값을 .env 파일에 넣어 연동시켰다. 그리고 그 .env 파일을 .gitignore에 넣어놔 push를 할 때 같이 들어가지 않아 사라졌던 것이다. 해결방법 나는 .env 파일에 우리팀 ..