문제Prisma를 사용해 PostgreSQL과 Supabase를 연결하는 도중에 마이그레이션이 제대로 적용되지 않는 문제가 발생했다.문제 원인은 Supabase에서 기본으로 사용하는 PgBouncer라는 연결 폴링 서비스에 있었다.더보기PgBouncer는 PostgreSQL 데이터베이스 서버 앞에서 동작하는 경량의 데이터베이스 커넥션 풀러(Connection Pooler)로 여러 클라이언트 연결, 처리 시간 단축, 리소스 최적화 등의 기능을 제공한다.데이터베이스 연결을 관리해 성능을 최적화하지만, Prisma와 같은 ORM은 트랜잭션 및 대규모 처리 기능을 사용하려면 PgBouncer를 통해서가 아닌 직접 연결이 필요하다. 이러한 이유로 "pgbouncer=true"옵션이 설정된 `DATABASE_URL..

이번 프로젝트 회원가입은 일반 그리고 구글 로그인 이렇게 두가지를 구현해야했다.구글 로그인 구현을 위해 파이어베이스를 이용하는 방식을 선택하였다.Firebase란 Backend-as-a-Service(Baas) 방식의 서비스로, 백엔드에서의 여러 도구들과 기능을 제공해준다.그럼 파이어베이스를 이용하여 소셜 로그인을 적용하는 방법에 대해 알아보자.Firebase 프로젝트 생성처음에는 파이어베이스에서 프로젝트를 생성 후 firebaseConfig를 발급받는다.블로그 참고Firebase Authentication 세팅하기작업할 프로젝트로 와서 firebase를 설치한다.npm install firebaseyarn add fireabse그 후 src > firebaseApp.ts 파일을 만들고 이전에 발급받은 ..

이전 포스트에서 유효성 검사를 구현하는 방법을 다루었다. 이번에는 폼의 입력값이 올바르게 입력되었을 때만 제출 버튼을 활성화 하는 방법에 대해 살펴보자.1. 버튼 비활성화 상태 관리useState를 사용하여 버튼의 활성화 상태를 관리한다. 기본으로 버튼은 비활성화되어있다.const [isDisabled, setIsDisabled] = useState(true);2. 유효성 검사 결과에 따른 버튼 활성화useEffect를 사용하여 입력값과 에러 메시지의 상태 변화를 감지하고, 모든 입력 필드가 유효한 경우에만 버튼을 활성화한다. 이를 위해, 입력값이 비어 있지 않고, 모든 에러 메시지가 빈 문자열인 경우 버튼을 활성화하도록 설정한다.useEffect(() => { const isFormValid = ..

유효성 검사를 구현하면 사용자가 올바른 데이터를 입력하도록 유도하고, 잘못된 데이터가 서버에 전달되는 것을 방지할 수 있다. 그래서 이번 프로젝트에서 회원가입 페이지를 구현하면서 유효성 검사 기능을 구현하였다.그 과정을 살펴보자.1. 상태 초기화 및 핸들러 설정먼저, useState를 사용하여 폼 데이터와 에러 메세지를 관리한다. 또한 handleChange 함수를 통해 입력값이 변경될 때마다 호출되어 상태를 업데이트하고 유효성 검사를 수행한다.// 입력된 값을 저장const [value, setValue] = useState({ email: "", password: "", nickname: "",});// 유효성 검사 결과를 저장const [errors, setErrors] = useState({..

문제이번 프로젝트에서 user 정보를 관리하기 위해 recoil 전역상태관리 라이브러리를 사용하였다.recoil를 사용하여 user 정보를 프로필페이지에서 볼 수 있었는데 새로고침시 값이 초기화되는 문제가 있었다. 문제 화면문제가 발생한 원인은 다음과 같았다.recoil로 관리하는 상태는 클라이언트 사이드에서만 유지되므로, 페이지를 새로고침하면 서버 측에서 초기 상태를 가져와서 다시 렌더링하기 때문에 recoil 상태가 초기화된다.쉽게 말해, 새로고침 시에 페리지가 렌더링 되면서 recoil 상태도 같이 초기화 된다는 말이다.해결 방법이를 해결하는 방법은 관련 라이브러리 recoil-persist 라이브러리를 사용하여 storage에 저장하는 것이다.이는 storage에 저장하여 새로고침에도 기존에 있던..

무한 스크롤웹 페이지나 애플리케이션에서 사용자가 스크롤할 때마다 새로운 콘텐츠를 계속해서 불러오는 방식을 말한다.사용자가 페이지의 끝에 도달하면 자동으로 다음 콘텐츠를 로드하여 화면에 추가하는 방식으로, 페이지를 새로고침하거나 추가적인 페이지로 이동할 필요 없이 연속적인 스크롤을 통해 콘텐츠를 볼 수 있다.React-Intersection-Observer이란?React-Intersection-Observer는 React 를 위한 라이브러리로, 웹 페이지의 특정 요소가 사용자의 Viewport(화면) 내에 들어오는지를 감지하는 기능을 제공한다.이 라이브러리는 브라우저의 기본 API인 Intersection Observer API를 기반으로 하여, React 컴포넌트에서 쉽게 사용할 수 있도록 만들어졌다.G..

시작하기 앞서이번에 당근 마켓이 리브랜딩 되면서 로고의 색상이 바뀌었다. 만약 hex값을 그대로 사용하였다면 수정하는데 일일이 수정해야하는 번거로움이 있을 것이다.이와 같이 이번에 진행하는 프로젝트에서는 프로젝트의 테마 후보가 2개가 있었다. 우린 퍼블리싱을 먼저 진행 후에 더 잘 어울리는 테마를 적용하기로 하였는데 만약 테마 색상을 디자인 시스템으로 만들지 않는다면 해당 색상이 사용되는 곳을 찾아가며서 바꿔야 하는 번거로움이 생기기 때문에 디자인 토큰을 이용한 디자인 시스템을 미리 세팅하기로 하였다.디자인 토큰은 디자인 시스템의 시각적 원자(atom)이며, 특히 시각적 디자인 속성을 저장하는 실체로 정의한다. 확장 가능하고 일관된 시스템을 유지하기 위해 하드 코딩된 값 대신 이 값(디자인 토큰)을 사용..

들어가며간단한 토이 프로젝트를 진행하면서 Git 브랜치 전략에 대해 고민하는 시간을 가졌고 그 과정에서 Git flow와 Github-flow 전략에 대해 알아보고 Github-flow를 채택하였다. 왜 해당 flow를 채택하였는지 작성하겠습니다.Git 브랜치 전략브랜치 전략이란 여러 개발자가 하나의 저장소를 사용하는 환경에서 저장소를 효과적으로 활용하기 위한 work-flow이다.Git-flow 전략에 대해기본적인 가지의 이름은 아래의 5가지로 구분한다.feature > develop > release > hotfix > master위 순서들은 왼쪽으로 갈수록 포괄적인 가지이며 master branch를 병합할 경우 그 왼쪽에 있는 hotfix 등 모든 가지들에 있는 커밋들도 병합하도록 구성하게 된다...

문제앞서 웹 성능 최적화 파트에 이어서 웹툰 목록을 조회하는 기능을 구현하던 중 많은 데이터 목록을 한 번에 불러와 렌더링 속도가 느려지는 현상이 있었다. 해결 전영상에서 보면 한번에 이미지가 많이 불러와 지는 것을 볼 수 있다.이를 해결하기 위해서 초기 화면에 보여지는 만큼의 목록만 불러오고, 사용자가 스크롤을 내릴 때 추가 이미지를 불러오는 방식을 적용했다. 이 과정에서 IntersectionObserver를 사용한 Lazy Loading을 도입하여 성능을 최적화 할 수 있었다. IntersectionObserver이란?요소가 뷰포트(Viewport) 내에서 보이는지 여부를 비동기적으로 관찰할 수 있는 API이다. 스크롤 이벤트를 직접 다루지 않고도 특정 요소가 화면에 들어오거나 나가는 시점을 쉽게 ..

문제웹툰 목록 조회 기능을 구현하는데 총 웹툰 개수(total)이 2942개는 되지만 한 번에 30개씩만 받아와지면서 데이터를 전부를 불러오지 못하는 일이 발생했다. 원인이 문제의 원인은 페이지네이션때문이였다. Swagger를 보니 query parameter로 page(페이지 번호), perPage(페이지당 항목 수)를 받을 수 있게 해주었는데 아마 API가 한 번에 많은 데이터를 제공하면 성능에 부담을 주기 때문에 데이터를 페이지로 나누어서 제공해준 거 같았다.useEffect(() => { const fetchFilteredWebtoons = async () => { setLoading(true); try { const apiURL = `${process.env.REACT_AP..