팀 프로젝트를 하면서 useReducer에 대해 알게 되었다. React 공식 문서와 다른 분들의 글을 보면서 공부한 것을 정리해 본다. 정리 과정에서 타입스크립트도 적용해 보았다. useReducer를 사용하는 이유? useState는 작성해야 하는 코드의 양이 적어 상태 변경이 매우 간단할 때 읽기 쉽다. 하지만 컴포넌트가 커지고 상태 변경 로직이 복잡해지면 가독성이 떨어진다. 또한 많은 이벤트 핸들러에 여러 상태 변경이 분산되면 가독성도 좋지 않을뿐더러, 상태 변경 로직을 관리하는 것이 어려워진다. 이러한 경우 useReducer를 사용하면 상태 변경 로직을 reducer 내부로 옮겨 이벤트 핸들러와 상태 변경 로직을 완전히 분리하면서, 모든 상태 변경 로직을 한 곳에 통합시킬 수 있다. useRe..
최근에 프로젝트를 진행하면서 팀원 분의 코드를 보고 내가 몰랐던 React Router 사용 방식이 있다는 걸 알았다.그래서 React Router 공식 페이지를 참고하여 내용을 정리해 보았다. 내가 사용하고 있던 기존 방식import { BrowserRouter } from "react-router-dom";const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);root.render( );import { Routes, Route } from "react-router-dom";import Layout from "@/components/Layout";import Login from "@/pages/L..
Jest는 대표적인 자바스크립트 테스트 프레임워크이다. 하고 있는 프로젝트에 테스트 코드를 작성하고 싶어서 Jest 공식 문서를 공부하고 정리해봤다. 환경 구축 설치npm install --save-dev jest @types/jest @types/jest는 주로 타입스크립트에서 jest api를 import하지 않고 바로 사용하기 위해 쓰는데나는 이걸 설치하니 jest api 메소드의 타입 힌트를 볼 수 있어서 설치했다. babel과 함께 사용한다면 babel-jest 설치npm install --save-dev babel-jest babel.config.jsmodule.exports = { presets: [['@babel/preset-env', {targets: {node: 'current..
프로젝트를 하면서 Pagination이 필요해 구현해 보기로 했다. 찾아보니 라이브러리도 여러 개 있던데 머리도 쓸 겸 그냥 직접 구현해 보기로 했다. Pagination의 동작 구조 전반적인 동작 구조는 네이버 블로그에 있는 Pagination을 따라 했다. 1. 숫자를 누르면 페이지가 이동한다. (URL의 query string 값이 바뀐다.) 2. 현재 페이지에는 active 디자인을 적용해 준다. 3. 이전과 다음 글자는 이전 또는 다음 페이지가 존재할 경우에만 보이도록 한다. 4. 이전 버튼을 누르면 바로 이전의 end 지점(start 지점 + 보여줄 페이지수 - 1)로 이동한다. 5. 다음 버튼을 누르면 바로 다음의 start 지점으로 이동한다. 6. 각 숫자 및 글자는 Link 태그(a 태그..
책 후기를 작성하는 웹페이지를 만들면서 별점 기능이 필요해 구현해 보았다. 구글링을 해보니 굉장히 다양한 방법으로 구현한 다양한 유형의 별점 기능들이 있었다. 0.5점(별 반 개) 단위로 별점을 매기기도 하고, hover를 하면 색이 변하게 한다거나 드래그를 해서 별점을 매기는 방법도 있었다. 그러나 대부분의 별점 기능들이 꽉 찬 별 모양(★)을 점수에 따라 색깔만 바꾸는 형식으로 이루어졌다. 나는 꽉 찬 별 모양과 테두리만 있는 별 모양(☆)을 함께 사용하고 싶었기 때문에 다른 방식으로 별점 기능을 구현했다. 별 모양을 그리기 위해 react-icons에서 위의 두 아이콘을 사용하였다. https://react-icons.github.io/react-icons/search?q=pistar hover나 ..
CSS textarea { all: unset; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; overflow: hidden; width: 100%; height: 1.7em; line-height: 1.7em; } 컴포넌트 import { useRef, useState } from "react"; export default function Write() { const textareaRef = useRef(null); const [text, setText] = useState(""); const onChange = (e: React.ChangeEvent) => { setText(e.curr..
Next.js 공부용으로 가볍게 만든 프로젝트 작업물을 Vercel로 배포해 보았다! GitHub Repository와 연동하면 자동으로 배포가 된다. 놀랍게도 내가 push만 해도 알아서 다시 빌드를 해준다. 너무나도 편하고... 좋았다. 바로 직전에 aws 배포를 연습해 봐서 그런가 vercel의 배포 과정은 너무너무 간단했다ㅠㅠ 배포 시 주의해야 할 점은 Vercel의 Node 버전과 로컬의 Node 버전을 맞춰주어야 한다는 것이다. Vercel은 최신 Node 버전이 18 버전이다. +) .env 파일에 있는 환경 변수들을 Vercel에선 접근할 수 없으므로 프로젝트 Settings에서 설정해줘야 한다. 환경별로 변수를 설정할 수 있다! 백엔드도 개발했을 경우에는 추가 설정이 필요하다. 1) DB..
NextAuth로는 다양한 소셜 로그인(OAuth) 및 커스텀 로그인을 구현할 수 있다. Credential Providers를 통해 커스텀 로그인을 구현해 보았다. NextAuth는 기본적으로 로그인 페이지를 제공해 준다. 하지만 그대로 사용하기엔 개발 중인 웹의 테마와 어울리지 않는다. 그래서 커스텀 로그인 페이지를 만들어서 적용해 주었다. 1. [...nextauth].ts 코드 수정 // pages/api/auth/[...nextauth].ts import { connectDB } from '@/util/database' import NextAuth from 'next-auth' import CredentialsProvider from 'next-auth/providers/credentials' ..
1. MongoDB Atlas에서 DB 셋팅하기 1) 프로젝트 생성 프로젝트 이름 입력 후 다음 클릭 프로젝트에 멤버를 추가할 수 있는데 현재 나는 혼자 진행 중이기에 패스하고 생성 버튼을 클릭했다! 2) Database 생성하기 Build a Database 클릭 무료로 사용하기 위해 마지막 옵션 선택 지역을 선택한다. 현재 내 위치에서 가장 가까운 곳으로 설정해야 한다고 한다! Cluster 이름까지 기입하면 끝! (나는 이름을 뭐라고 해야 할지 모르겠어서 기본값으로 설정해 둔다...) 3) Database Setting 빌드를 마친 후, 왼쪽 사이드바에서 Database Acess로 들어가 DB 사용자를 추가한다. 아이디와 비밀번호를 설정하고, Built-in-Role을 Atlas admin으로 설..
타입스크립트로 개발하던 중 마주한 오류... 이전에 다른 프로젝트를 개발할 때, currentTarget을 대신 사용했던 기억이 있어 currentTarget을 사용해 보았는데.. currentTarget이 null로 나왔다. 같은 부모 아래에서 다른 span 태그로 테스트했을 때는 알던 대로 currentTarget과 target이 동일하게 나온 것을 보니 정확한 이유는 모르겠지만 fetch의 then 안에서 사용해서 그런 것 같다. (scope의 문제 같은...) 정확한 이유와 여기서 currentTarget을 사용하는 방법을 아신다면 댓글로 알려주시면 감사하겠습니다..!! currentTarget을 사용할 수 없어 다른 방법으로 해결해 보기로 했다. currentTarget과 target의 차이가 ..
