Dev-diary/에러 또 에러7 Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE (styled-components & React 에러) 📍 오늘의 에러 Imported JSX component must be in PascalCase or SCREAMING_SNAKE_CASE 노트북에서는 잡히지 않던 에러가 데스크탑에서는 잡힌다 ..! (CPU 용량 부족인가..) 화면 렌더할 때는 문제생기지 않지만 파일을 컴파일할때는 문제가 생긴다 ㅎㅎ JSX 문법은 파스칼 케이스나 스네이크 케이스로 꼭 써주자 😊 2022. 4. 17. 검색 Debounce 직접 구현하기 (feat. 재할당 & 비동기) 👀 검색창 자동완성 기능 만들 때 서버에 너무 많은 요청을 보내게 되는 문제 발생 ❗ lodash의 debounce 함수를 이용할 수도 있지만 직접 구현할 수도 있다 ㅎㅎ 😊 그런데 구현하다가 아차 싶었던, 내가 실수했던 부분이 있어서 기록에 남긴다. const handleSearchBar = (event: React.ChangeEvent) => { // 내부 let timer: any = 0; const searchValue = event.target.value; if (timer) { console.log('clear time'); clearTimeout(timer); } timer = setTimeout(() => { axios({ method: 'get', url: '서버 URL' }) .then.. 2022. 4. 12. 자꾸 까먹는 Git 명령어 모음 📌 Git 로컬 저장소 branch 이름 변경하기 git branch -m [기존 브랜치 이름] [새로운 브랜치 이름] 📌 Git 원격 저장소 branch 이름 변경하기 추가 | git push origin [새로운 브랜치 이름] 삭제 | git push origin --delete [기존 브랜치 이름] / git push origin :[기존 브랜치 이름] 2022. 2. 23. HTML .env 변수 넣기 (feat. React) 🔊 HTML script 태그에 env 변수 넣기 테스트 용으로 써오던 카카오 map api 자바스크립트 키를 env 파일에 넣어 관리하기로 함. 진즉에 했었어야 했는데 방관. 새로운 api 키를 발급받아서 교체해주었다. 이미 깃헙에 올라간 코드는 삭제할 수 없으니, 발급받은 테스트용 api키를 파기하지만 절대 이런 실수는 용납안됨 ..! 👀 ❗ 오늘의 교훈 : 중요한 설정은 잊지말고 초기에 해주자. 1. dotenv 설치 2. .env 파일에 키,값 넣어주기 (리액트만의 규칙 있음) 3. gitignore 폴더에 .env 추가 1. npm install dotenv 2. // HTML // .env REACT_APP_KAKAO_JAVASCRIPT_KEY=leeKey .env 변수 이름 반드시 REACT.. 2022. 2. 14. kakao Map API Geocoder CORS Error 📌 문제 상황 프로젝트 리팩토링하면서 localhost 환경에서 웹을 테스트하고 있었다. 카카오 지도 자체는 잘 뜨는데 마커가 안찍히는 문제가 발생했다. ??? 뭘까 ??? 자바스크립트 키도 있고 지도도 잘 뜨는데 ... 뭐지 ??? 콘솔창을 확인해보니 Response to preflight request dosen't pass access control check : Redirect is not allowed for a preflight request 에러 메세지가 떴고, 그 내부를 들여다보니 geocoder 를 불러오는 과정에서 오류가 나고 있었다. 📌 해결 방법 문제는, 배포된 프로젝트 도메인에서는 모든 기능이 잘 동작했다. 카카오 Developer 안에서도 도메인 등록을 잘 해놨기에 내 문제는 아.. 2022. 2. 1. Node JS address already in use 문제 해결 📍 내가 오늘 만났던 오류 Error: listen EADDRINUSE: address already in use :::5000 📎오류가 발생하는 이유 2 가지 ✔ 다른 프로세스가 명시된 포트를 사용중일 때 ✔ Node JS 프로세스가 비정상적으로 종료됐을 때 난 서버를 잘 껐고 ... 현재 쓰고 있는 port도 없는데 왜 자꾸 이 오류가 뜨는거야 ;;; 📍 해결 방안 난 Ubuntu를 사용하기 때문에 Linux 중심의 해결 방법을 찾았다. lsof : 활성화된 프로세스 리스트를 출력해주는 명령어이다. i : [option] 특정 port를 사용중인 프로세스만 골라주는 옵션이다. lsof -i 명령어를 활용해 내가 찾고 싶은 프로세스를 찾는다. 이제 이 프로세스를 kill 명령어를 활용해 종료한다. ki.. 2021. 10. 25. Node JS 서버 다루며 만난 에러 [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 서버가 클라이언트에 2개 이상의 응답을 보내려고 할 때 발생하는 오류 ex. response.end( ) 를 2번 이상 보냈다던가 ... response.end( ) 를 2번 이상 보냈다던가 ... ex. 로직이 잘못된 경우니까 코드를 잘 살펴보자 !! Access to fetch at 'http://localhost:3000' from origin 'http://127.0.0.1:8000 has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No.. 2021. 9. 9. 이전 1 다음
