React

이전 프로젝트에서도 Vite로 환경설정을 해서 진행했었는데 기록해서 남기기위해 다시 처음부터 해보려고 한다. Vite로 환경설정 시작하기 먼저 터미널창을 열어서 Vite를 설치해보자. npm create vite@latest 그다음 순서대로 눌러줘야하는데 1. React 2. JavaScript (원하는 걸로 고르면 된다.) 그러면 설치했다고 나오고 실행하는 방법을 가르쳐준다. 이때 우리가 만든 vite-project로 들어가서 작업을 진행해야한다. 위에서 나온 명령어 그대로 따라치면 된다! 만약 npm run dev 까지 잘 진행했다면 이런 새창이 뜨게된다! 만약에 새창이 안뜨고 터미널 창에 이렇게만 나올 수가 있다. 나는 처음에 했을 때 작동은 되는 것 같은데 새창이 바로 안떠서 뭐지? 내가 잘못했나..

리액트 프로젝트에서 POST 기능을 구현하는데 파일을 업로드하는 부분도 만들어야 했다. 이 페이지는 내가 마크업을 하지 않아서 기능만 구현하고 있었다. 프로젝트 발표 후 웹접근성을 다시 고려해 리팩토링을 하고 있던 도중 문제를 발견했다. 파일업로드 부분은 tab key로 접근이 안된다는 점이다. 마크업을 살펴봤을 때 input이 display: none; 상태여서 접근이 불가능 했다. 그래서 고민을 하다가 tabIndex 를 주자 싶어서 코드를 수정했다. 코드를 수정한 부분은 div에 tabIndex 속성을 부여했다. 근데 여기서 tabIndex 만 주면 밑과 같이 eslint 가 경고를 한다. 이 오류를 해석했을 때 tabindex는 대화형 요소에서만 선언해야 합니다. 라고 알려주는 것이다. 잘 이해가..

리액트 프로젝트를 하면서 웹접근성에 맞게 리팩토링을 진행하고 있다. 마우스 없이 tab key로도 동작이 되도록 다시 코드를 수정하고 있던 도중 문제를 발견했다! 바로.. 등록버튼의 색상이 포커스됐을 때 색상과 비슷해서 티가 안난다는 것.. 뭔가 커지긴하는데 티가 안난다. 포커스가 잘 되는지 마는지 인식이 안된다. 그래서 focus 됐을 때 색상을 변경해줘야 한다고 생각이 들었다! 팀원들에게 조언을 구한 후 색상을 변경하자는 결론에 도달했고, 자료를 찾다가 여러가지 방법을 발견했다. 이 방법을 정리하기 전에 초점, 포커스링의 개념과 중요성을 알아야 한다. 초점 / 포커스링의 개념과 중요성 1. 초점의 개념 일상 속에서 우리는 무언가 집중해서 보거나 일을 할 때 초점이라는 단어를 쓴다. 컴퓨터에서는 키보드..

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

리액트 프로젝트를 하다가 생각지 못한 문제에 부딪혔다! 바로 스크롤 유무에 따라서 화면이 왼쪽으로 밀리는 현상이 있다는 것.... 이 문제를 어떻게 해결해야할까 많은 고민을 했다. ❗️흔들리는 애플리케이션 인터페이스 Y축 이 문제를 해결하기 위해서 임의로 전체에 스크롤을 만드는 방법이 있었다. body { overflow-y: scroll; } 📢 여기서, 의문! 💬 과연 이 밀림 현상 하나 때문에 전체에 스크롤을 임의로 줘서 막아도 될까? 정답은 없지만.. 만드는게 더 낫다! 라는 결론이 나왔다. 나는 이런 문제가 사용자에게 혼란을 불러올 수 있다고 생각했다. (임의로 세로 축을 만드는건데, 왜 스크롤이 안될까? 라는 의문을 가질 수 도 있다고 생각했음) 그리고 다른 사이트들을 엄청나게 찾아봤다. 😮 ..

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