사전 준비 create-next-app으로 프로젝트 생성 npx create-next-app redux 세팅에 필요한 패키지 설치 npm i @reduxjs/toolkit npm i react-redux npm i next-redux-wrapper npm i redux-logger --save-dev # 필요한 경우에 설치 cna로 앱을 생성했다면 다음과 같은 구조를 가진다. 기본 프로젝트 구조 . ├── README.md ├── next.config.js ├── node_modules ├── package-lock.json ├── package.json ├── pages ├── public └── styles store디렉토리를 하나 만들고 다음과 같이 구조를 잡아주자. store디렉토리 추가 후 프로..
NVM(Node Version Manager)이란 Node.js의 버전을 관리해주는 도구이다. 이를 이용해 노드 버전별 설치/삭제를 쉽게 할 수 있으며, 여러 버전의 노드를 설치한 후 선택해서 사용할 수 있다. 0. 미리 설치해둘 것 Homebrew 텍스트 에디터(내장된 vim을 사용해도 된다) 1. brew를 이용해 nvm을 설치한다. brew install nvm 2. 설치가 끝나도 곧바로 nvm 사용이 가능하지는 않다. 설치가 끝나면 터미널에 뜨는 안내에 따르자. 먼저 디렉토리를 생성한다. mkdir ~/.nvm 자신이 사용하는 텍스트 에디터(vim, nano 등)로 .zshrc 파일을 열어준다. 나는 vscode를 이용해서 파일을 수정할 것이다. terminal이나 item에서 명령어(code)로..
백엔드 부분은 생략했다. 추후 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..
