got beer?

내 웹사이트가 문제없이 항상 잘 작동되고 있는 줄 알았다. 매번 deploy 작업 직후 잘 동작하는지 체크해보면 빠릿빠릿 잘 돌아가길래 '음 잘 되네' 하고 뿌듯해하며 내버려뒀음. 근데 내가 안 볼 때면 심심할 때마다 네트워크 에러를 띄운다는 사실을 며칠 전에 알게 됨. 콘솔을 확인해보니 "Access to XMLHttpRequest has been blocked by CORS policy"에 "Error: Request failed with status code 503" 어쩌구가 시뻘겋게 떠있었음 🤬 그렇게 CORS 에러를 해결하기 위해 밤을 지새웠다... 여러 해결 방법들을 적용해봐도 deploy 직후에는 잘 되는듯 했으나, 몇분만 지나면 갑자기 2022-03-20T13:02:52.922283+00:..

프론트 배포는 Netlify로, 백엔드는 Heroku로 배포하기로 했다. Netlify를 통한 프론트 배포는 나름 easy peasy lemon squeezy였는데, 백엔드 배포는 정말이지 나를 하루웬종일 괴롭혔다. 🤯 내가 무지한 탓에 필요 이상으로 헤매고 고생한거긴 하지만 ㅎ... 어쨌든 정말 산 넘어 산이었다. 1. Heroku Git을 통한 deployment - 뭐 이렇게 복잡하지? 사실 Heroku는 documentation를 정말 친절하고 자세하게 제공해주기 때문에, 사용방법을 제대로 이해한 후 시키는대로 잘 따라가기만 한다면 헤맬 일이 거의 없다. 하지만 난 떠먹여줘도 못 받아먹었다는 점 🙄 한참을 헤매고 헤매다가 겨우 배포했다. ❓ Heroku CLI 설치가 안 되는 것 같은데? Inst..

데이터베이스 생성 CREATE DATABASE [IF NOT EXISTS] database_name; 데이터 여러개 한꺼번에 추가 INSERT INTO MyTable (Column1, Column2, Column3) VALUES ('John', 123, 'Lloyds Office'), ('Jane', 124, 'Lloyds Office'), ('Billy', 125, 'London Office'), ('Miranda', 126, 'Bristol Office'); 데이터 수정 UPDATE Customers SET ContactName = 'Alfred Schmidt', City= 'Frankfurt' WHERE CustomerID = 1; ALTER/MODIFY COLUMN ALTER TABLE table..

Netlify는 워낙에 사용하기 쉬운 서비스고, 사용 방법은 검색만 하면 수도 없이 나오는데 에러날게 뭐가 있나 싶겠지만... 혹시나 나처럼 삽질하시는 분들이 계실까봐 남겨놓는 기록 ㅎㅎ 💢 Deploy failed - Failed during stage 'building site': Build script returned non-zero exit code: 2 ▪에러내용 : 여러 블로거분들께서 정리해주신 배포 셋팅 방법을 (대충) 보고 따라했다. 처음에 basic build settings에서 base directory, build command, publish directory를 입력해줘야 했는데, 대부분의 블로거분들은 base directory는 빈칸, publish directory는 "/buil..

💢 Access denied for user ''@'localhost' (using password: NO) ▪문제상황 : mysql 연결 객체 모듈화, dotenv 설치 후 환경 변수 설정까지 모두 완료했지만, 연결 확인을 해보려고 하면 저런 에러가 떴다. Error: ER_ACCESS_DENIED_ERROR: Access denied for user ''@'localhost' (using password: NO) ... code: 'ER_ACCESS_DENIED_ERROR', errno: 1045, sqlMessage: "Access denied for user ''@'localhost' (using password: NO)", sqlState: '28000', fatal: true root가 들어가..

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

✅ flex display: flex; // 세로로 정렬 flex-direction: column; // 가로로 정렬 flex-direction: row; // 진행방향 기준 정렬 justify-content: flex-start // default justify-content: flex-end justify-content: center; // 아이템 사이 공간 제어 justify-content: space-between; justify-content: space-around; https://naradesign.github.io/flex-justify-align.html CSS flexible 레이아웃: flex item의 정렬과 간격. HTML, CSS(flex/grid), UI/UX, Accessib..

💢 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 입..