JW's dev blog

이 글에서는 Jira와 같은 Task Management 프로젝트에서 사용될 수 있는 react-beautiful-dnd 라이브러리에 대해 알아보겠다. 리액트 프로젝트에서 드래그 앤 드롭 구현하는 방법으로는 직접 구현하거나 라이브러리를 사용하는 방법이 있다. 드래그 앤 드롭의 여러 가지 라이브러리가 있지만 각자 용도에 따라 사용하기 적절한 라이브러리가 다르다. Jira를 사용해 본 적이 있는가? 꼭 Jira가 아니더라도 Asana나 Trello, 혹은 Notion의 보드 기능에서 아래와 같이 생긴 툴을 본 적이 있을 것이다. 대부분의 회사에서 이런 형태의 프로젝트 관리를 선호하는 편이고, 나도 현재 회사에서 Jira는 아니지만 비슷한 형태의 보드를 사용 중이다. 그러다 보니 기존 Jira와 같은 앱의 스..

지난 10월 말 Next.js v13이 나오고 현재 13.1.1 버전까지 업데이트 되었다. 이 글에서는 Next.js 13 버전에서 바뀐 주요 기능들에 대해 정리해보고자 한다. Turbopack Next.js 13 버전부터는 비록 알파 버전이긴 하지만 Turbopack을 지원한다. Turbopack은 Rust 기반으로 기존 Webpack보다 700배나 빠른 업데이트 속도를 보인다. 지난 글에서 Vite에 대해 알아보며, 기존 CRA에서 제공되는 웹팩을 사용했을 때 보다 더 빠르다는 것을 알아봤다. 그런데 Turbopack은 이 Vite보다도 업데이트 속도가 10배 더 빠르다고 한다. 그러나 현재는 alpha 버전이며 produciton 에서 사용하기에는 무리가 있으며, next dev는 지원하지만 nex..

앞선 글에서 Vite가 무엇인지, 그리고 왜 Vite로 리액트 프로젝트를 생성하는 것이 나은지에 대해 다뤘다. [React] 리액트 프로젝트 생성 - Create React App 보다 더 빠른 Vite 사용하기 보통 리액트에서 간단한 프로젝트를 생성하기 위해 가장 많이 사용하는 것은 Create React App 즉 CRA다. 그러나 CRA는 단점이 있는데, 바로 속도가 느리다는 것이다. 심지어 프로젝트 크기가 커질 수 jwdevv.tistory.com 오늘은 이미 CRA(Create React App)으로 생성한 리액트 프로젝트를 Vite로 마이그레이션하는 방법에 대해 알아보자. 그 외에도 Vite 에서 환경 변수를 설정하고 index.html에서 접근하는 방법, 흔히 발생하는 오류를 해결하는 방법 ..

보통 리액트에서 간단한 프로젝트를 생성하기 위해 가장 많이 사용하는 것은 Create React App 즉 CRA다. 그러나 CRA는 단점이 있는데, 바로 속도가 느리다는 것이다. 심지어 프로젝트 크기가 커질 수록 더 느려진다. 오늘은 Vite가 무엇인지 알아보고, 왜 Create React App을 사용했을 때 보다 더 빠른지 그리고 얼마나 빠른지 살펴보도록 하자. Vite란? Vite는 다른 번들러 기반의 빌드툴의 비효율적이고 느린 문제를 해결하기 위해 고안된 빌드툴이다. 여기서 느리다는 것은 크게 서버 시작에 걸리는 시간과 느린 업데이트 시간을 말한다. 1. 느린 dev 서버 시작 시간 dev 서버를 시작할 때, 번들러 기반의 빌드 설정은 열심히 크롤링하고 전체 앱 빌드를 마쳐야한다. 반면 Vite..

이 글은 리액트를 기준으로 작성되었습니다. 앞선 두 글에서 Redux Toolkit 에 대해 알아봤다. [Redux Toolkit] 1 - Redux Toolkit이란? | Redux와 Redux Toolkit 차이 Redux Toolkit이란? 리액트 개발자라면 리덕스에 대해서 들어봤을 것이다. 리덕스란 자바스크립트 앱의 state 컨테이너로 1) 앱이 일관되게 동작하도록 하고, 2) 중앙화되어 있으며, 3) state가 언제, 어 jwdevv.tistory.com [Redux toolkit] 2 - Slice, Reducer, Action, Thunk란? 지난 글에서 Redux와 Redux Toolkit의 차이점에 대해 알아보았다. [Redux Toolkit] 1 - Redux Toolkit이란? |..

지난 글에서 Redux와 Redux Toolkit의 차이점에 대해 알아보았다. [Redux Toolkit] 1 - Redux Toolkit이란? | Redux와 Redux Toolkit 차이 Redux Toolkit이란? 리액트 개발자라면 리덕스에 대해서 들어봤을 것이다. 리덕스란 자바스크립트 앱의 state 컨테이너로 1) 앱이 일관되게 동작하도록 하고, 2) 중앙화되어 있으며, 3) state가 언제, 어 jwdevv.tistory.com 오늘은 리덕스 툴킷의 API에 대해 더 자세히 알아보자. Slice 지난 글에서 store를 구성하는 방법에 대해 알아보았다. // features/counter/counterSlice.js import { createSlice } from '@reduxjs/too..

Redux Toolkit이란? 리액트 개발자라면 리덕스에 대해서 들어봤을 것이다. 리덕스란 자바스크립트 앱의 state 컨테이너로 1) 앱이 일관되게 동작하도록 하고, 2) 중앙화되어 있으며, 3) state가 언제, 어디서, 왜, 어떻게 바뀌었는지 등을 쉽게 디버깅할 수 있게 해주며, 4) 어떤 UI 계층과도 잘 동작하는 등 플렉시블하다. 리액트 프로젝트에서는 React Redux를 사용하는데, 사용법은 리액트 훅의 useReducer를 이해하고 있다면 dispatch, reducer, action, payload 등 비슷하게 동작한다고 생각하면 된다. (useReducer에 대해 더 알고 싶다면 이 글을 참고) 리덕스를 사용하면 state를 관리하기 편하지만 수많은 boilerplate 코드를 작성해..

[React + MongoDB + Netlify] Netlify Serverless 함수와 몽고DB를 사용해 리액트 프로젝트 무료로 호스팅하기 현재 제주도의 코워킹스페이스를 보여주는 사이드 프로젝트를 개발 중이다. https://github.com/jwhan77/coworking GitHub - jwhan77/coworking: Coworking space in Jeju (In development) Coworking space in Jeju (In development). Contri jwdevv.tistory.com 앞선 글에서는 MongoDB Atlas에서 데이터베이스를 만드는 방법, Netlify serverless 함수를 사용해 React 프로젝트에서 MongoDB 데이터를 불러올 수 있도록 하..

현재 제주도의 코워킹스페이스를 보여주는 사이드 프로젝트를 개발 중이다. https://github.com/jwhan77/coworking GitHub - jwhan77/coworking: Coworking space in Jeju (In development) Coworking space in Jeju (In development). Contribute to jwhan77/coworking development by creating an account on GitHub. github.com 코워킹스페이스 및 카페 데이터를 저장할 데이터베이스가 필요하다. 그런데 데이터를 한 번 불러오기 위해 express를 사용해서 서버를 만드는 것은 번거로워서 Netlify functions를 사용하기로 했고, 데이터는..

나는 개인 프로젝트의 방문자 통계를 위해 Umami를 사용중이다. Umami는 psql을 사용하는데, 데이터베이스 및 웹 호스팅을 위해 Heroku를 사용하고 있었다. 그런데 Heroku에서 2022년 11월 28일부터 더이상 Heroku Dynos, Heroku Postgres, Heroku Data for Redis의 무료 플랜을 지원하지 않는다고 한다. 기존에 hobby plan(무료 플랜)을 사용해서 부담없이 사용하고 있었는데, 작은 사이드 프로젝트를 위해 유료 플랜을 사용하는 것이 조금 부담스럽다는 생각이 들었다. 그래서 우선 Heroku에 저장된 데이터베이스를 로컬 데이터베이스로 옮기기로 했다. Heroku에서 공식적으로 제공하는 문서에서 데이터베이스를 내보내는 방법을 확인할 수 있다. htt..