got beer?

💢 onMouseOver 이벤트가 child element에는 적용 안 되고 parent element에만 적용될 때 ▪에러내용 : 마우스 커서를 메뉴버튼 위에 올렸을 때 버튼이 회색으로 바뀌고, 커서를 떼면 원래 색으로 돌아오도록 이벤트함수를 만들었다. 잘 작동하는 듯 했는데, 자세히 보니까 메뉴버튼에 위치한 svg 아이콘 위에 마우스를 올리면 색이 제대로 안 바뀌는 현상이 발생했다. 메뉴 component 안에 child로 아이콘을 넣어놨으니까, child element에는 parent에 적용된 이벤트함수가 제대로 적용이 안 되는 문제라고 생각하고 해결방법을 찾아봤다. ▪원인 : e.target 사용 ▪해결방법: e.currentTarget 사용 function MouseOverUserMenu(e) ..

💢 if문 내에서 useAsync 사용이 안 되는 문제 ▪문제상황 : 한 페이지 내에서 두 가지의 상태(buyer, seller)를 관리해야돼서 userType에 따라 buyer/seller data를 fetch하려고 했다. if (userType === 'buyer') { const [buyerState] = useAsync(() => InfoService.getBuyer(user), []); } else { const [sellerState] = useAsync(() => InfoService.getSeller(user), []); } 근데 if문 안에 useAsync 선언하자마자 ESLint가 경고문을 띄움. React Hook "useAsync" is called conditionally. Rea..

💢 맥에서 한글로 text input 입력 후 이벤트를 trigger했을 때 단어가 제대로 인식이 안 되고 깨지는 문제 ▪에러내용 : 세 명의 팀원 중 두 명은 윈도우 환경에서 개발 중이고, 한 명은 맥북을 쓰고 있다. input란에 키워드를 입력하고 enter키를 누르면 키워드태그가 생성되는 기능을 구현했는데 이상한 문제가 발생했다. 윈도우를 쓰는 사람들 기준에서는 아무 문제 없이 태그가 정상적으로 등록됐는데, 똑같은 코드인데도 불구하고 이상하게 맥북에서는 기능이 정상적으로 수행이 안 되는 것이다. 예를 들어 사과, 토마토, 복숭아를 입력한다고 치면 윈도우에서는 위의 gif처럼 키워드 태그 3개가 각각 예쁘게 잘 생성됐는데, 맥북에서는 '사과', '과', '토마토', '토', '복숭아', '아' 이렇게..

💢 이미지파일 import 실패 ▪에러내용 : png react Module parse failed: Unexpected character (1:0) ▪원인 : 이미지파일 loader 부재 ▪해결방법: 1. install file-loader $ npm install file-loader --save-dev 2. add loader to webpack.config.js module.exports = { module: { rules: [ { test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', }, ], }, ], }, }; 1, 2를 차례대로 수행한 후에 이미지파일을 다시 import 해보면 문제없이 잘 컴파일된다. 참고자료 https://v4.we..

React 설치, 초기 세팅 1. Visual Studio Code, Node.js 설치 2. 적당한 위치에 작업 폴더 생성 3. VSCode에서 open folder로 작업폴더 열기 4. VSCode 터미널 열기 (Ctrl + Shift + `) 5. 터미널에 "npx create-react-app 프로젝트명" 입력 (ex. npx create-react-app myproject) cf) npx create-react-app . 을 입력하면 프로젝트 파일 생성 없이 진행 가능 (개발할 때 매우 편리함) → 프로젝트 파일을 확인해보면 react 개발에 필요한 모든 파일들이 설치된걸 확인할 수 있음 6. src 파일 내에서 코드 작성 7. 코드 작성한걸 미리보기로 띄우려면 터미널 열고 npm start 입..