백엔드 부분은 생략했다. 추후 Node.js 파트에서 따로 설명할 예정이다. 본 글에선 hooks와 axios를 이용해서 좋아요 하트 아이콘을 구현하는 방법을 소개하고자 한다. 먼저 무료 아이콘 사이트에서 필요한 아이콘을 다운받자. https://www.flaticon.com/ Flaticon, the largest database of free vector icons Download all icons in SVG, PSD, PNG, EPS format or as webfonts www.flaticon.com 'heart'를 검색하면 다양한 하트 아이콘들이 나온다. 맘에 드는 걸로 빈 하트와 채워진 하트 두 가지를 골라준 후, 저장한 이미지는 src/assets 폴더 내에 저장한다. 먼저 자식 컴포넌트부..
React Pagination 구현하기 리스트를 띄워줄 페이지를 만드는 과정에서 Pagination이 필요했다. 처음엔 Material-UI에서 제공하는 Pagination 컴포넌트를 이용해서 구현하려 했으나 문제가 있었다. 삽질끝에 포기하고 결국 다른 패키지를 사용했다. 📦 Material-UI (비추) 다음은 Material-UI에서 제공하는 데모 컴포넌트이다. https://material-ui.com/components/pagination/#pagination React Pagination component - Material-UI The Pagination component enables the user to select a specific page from a range of pages. ma..
1. MySQL Escaping - escape() 함수 vs '?' 문자 대다수의 프로그래밍 언어는 SQL Injection을 방지하기 위한 모듈이나 메소드를 제공한다. mysql 모듈에선 이러한 escaping을 지원하는 다양한 방법을 제공하는데, 이 중 가장 대표적인 것이 바로 escape() 함수와 '?' 문자이다. 일반적으론 '?'문자를 이용해 query()함수의 2번째 인자로 배열을 넘겨주는 것이 일방적인 방법이다. 그러나 간혹 escape() 함수를 이용하는 경우가 있다. 어떤 이유에서 사용하는 것인지 예시를 통해 살펴보면서 정리하고자 한다. 아래는 npm-mysql 공식문서에서 발췌한 예시 코드이다. https://www.npmjs.com/package/mysql#escaping-query..
유저 마이페이지에서 GET요청을 보내던 도중 다음과 같은 에러가 발생했다. 문제는 이 에러가 계속해서 발생하는 것이 아니라, 잘 되다가 한 번씩 발생하는 것이었다. ER_CON_COUNT_ERROR: Too many connections 콘솔창에 출력된 에러 그대로 connection을 너무 많이 만들어준 것이 문제였다. 대체로 트랜잭션 내에서 connection release를 안 해주는 것이 이 에러의 원인이었지만, 나의 경우엔 pool을 생성하는 미들웨어 내에서 에러의 원인이 있었다. module.exports = { database(req, res, next) { const pool = mysql.createPool({...}); res.pool = pool; next(); }, ... } 나는 ..
리액트에 Kakao 지도 API를 적용하던 중 다음과 같은 에러가 발생했다. Uncaught ReferenceError: kakao is not defined public/index.html index.html의 head태그에 다음과 같이 추가해주고 src/Register.jsx Register 컴포넌트 내에서 다음과 같이 변수를 선언해줬다. const geocoder = new kakao.maps.services.Geocoder(); ... 문제는 index.html에 저렇게 선언하면 지도 API를 불러들이지 못한다는 것이다. 이런 방식으로 리액트에서 지도 API를 사용하기 위해선 kakao 앞에 window를 붙여줘야 한다. 다음과 같이 말이다. const geocoder = new window.ka..