본문 바로가기

728x90

분류 전체보기

(58)
[React] 선반영, 후처리 유저 경험 및 성능 향상 - 낙관적 UI 업데이트 (Optimistic UI Update) [React] AbortController와 zustand로 전역 fetch 취소 구현하기 (feat. 카카오 테크) [React] AbortController와 zustand로 전역 fetch 취소 구현하기 (feat. 카카오 테크)[Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture) [Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture)🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 레이어드 아키텍쳐 구조화blog.juyear.dev이전 글 읽으러 가기! 👋 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 낙관적 UI 업데이트 (Optimistic UI Update)에 대해서 정리하고 실제 프로젝트에 적용했던 예제 코드도 같 ..
[React] AbortController와 zustand로 전역 fetch 취소 구현하기 (feat. 카카오 테크) [Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture) [Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture)🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 레이어드 아키텍쳐 구조화 방법을 사용하여 Express 폴더를 정리해보려고 합니다! 레이어드 아키텍쳐는 실무에서 자주 사용되는 백엔드blog.juyear.dev추천 글 읽으러 가기!🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 AbortController와 zustand를 사용하여 전역으로 fetch 요청을 관리하는 방법에 대해서 정리해 보려고 합니다! 순서는 fetch 요청을 취소해야 하는 이유, Promise에 취소기능이 없는 이유, AbortController에 대해서..
[Next] usepathname으로 조건부 데이터 처리 적용하는 법 (Conditional Logic) 🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘 소개드릴 내용은 하나의 컴포넌트를 여러 페이지에서 다르게 처리하는 방법에 대해서 정리해보려고 합니다. 보통 이런 방법은 props나 context 기반으로 구현하는 경우가 많은데,제가 이번에 구현할 방법은 path-based 즉, 경로 기반으로 구현해보려고 합니다. 이 방법을 사용하게 된 이유는, 현재 진행 중인 프로젝트에서 UI는 거의 동일하지만, 데이터 처리와 같이 기능적인 부분이 조금씩 다른 경우가 있었기 때문입니다. 그래서 "새로운 컴포넌트를 굳이 만들지 않고, 기존 컴포넌트를 재사용할 수는 없을까?" 라는 생각이 들어 이 방법을 도입하게 되었습니다. 🔗 path-basedimport { useRouter, usePathname } from ..
[Next] v15 useSearchParams without Suspense 오류 해결 🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 Next.js v15에서 발생할 수 있는 오류 중 하나인 useSearchParams without Suspense에 대해서 알아보려고 합니다. 저도 프로젝트를 진행하던 도중에 이 오류가 발생하게 되었는데, 미리 이 오류에 대해서 알고 있지 않으면 나중에 많은 수정을 거쳐야 할 수 있기 때문에 이렇게 공유를 해보려고 합니다. ❓ 발생하는 이유는?이 오류가 발생하는 이유는 오류 이름에서 알 수 있듯이 useSearchParams를 Suspense 없이 사용했을 때 발생하는 오류 입니다.next를 사용해보신 분이라면 아시겠지만, Suspense는 기본적으로 컴포넌트나 함수의 동적 처리를 기다리고, 기다리는 동안 fallback 함수 등을 사용하여 로딩을..
[Node] 랜덤 공유 링크는 어떻게 생성할까? (nanoid) [Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture) [Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture)🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 레이어드 아키텍쳐 구조화 방법을 사용하여 Express 폴더를 정리해보려고 합니다! 레이어드 아키텍쳐는 실무에서 자주 사용되는 백엔드blog.juyear.dev이전 글 읽으러 가기!🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 nanoid를 사용해서 랜덤 공유 링크를 생성하는 방법에 대해서 정리해보려고 합니다. 현재 진행 중인 프로젝트에서 일정 공유 기능이 필요했고, 이 기능을 구현하기 위해 nanoid를 선택하게 되었습니다. 랜덤 공유 링크는 Google Docs, Dro..
[TRAIVEL] 개인 맞춤형 여행 일정 생성 플랫폼 TRAIVEL 🚩 소개안녕하세요. 대학생 개발자 주이어입니다!오늘은 제가 이번에 진행하는 프로젝트에 대해서 비즈니스 & 마케팅 중심으로 글을 작성해보려고 합니다.흔히 "Product Launch" 라고 불리는 스타일로 작성해보려고 하며, 간단하게 적어보려고 합니다.🤔 여행 일정 짜는 건 왜 힘들고 귀찮을까?일반적인 방식은?많이 축약되긴 했지만, 기존에는 여행 계획을 세운다면 위와 같은 방식이 일반적이었을 것 입니다.여행 지역에 맞는 맛집이나 유명 관광지 등을 검색하고, 블로그나 카페의 후기 등을 확인했을 것 입니다.추가적으로 지도를 활용하여 거리나 이동 방법에 대해서도 고민을 많이 하셨을 것 이고,마지막으로 많은 수정 작업을 거치셨을 겁니다. 이러한 작업은 2박 3일과 같은 짧은 여행 계획을 세우는 데에도 많은 힘..
[Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture) 🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 레이어드 아키텍쳐 구조화 방법을 사용하여 Express 폴더를 정리해보려고 합니다! 레이어드 아키텍쳐는 실무에서 자주 사용되는 백엔드 구조화 방식이니 한 번씩 읽고 가시길 바랍니다! 📌 레이어드 아키텍쳐란?레이어드 아키텍쳐는 애플리케이션의 구조를 여러 개의 계층(layer)으로 나누어 각 계층이 하나의 책임만을 가지도록 구성하는 소프트웨어 설계 방식입니다. 주로 백엔드에서 많이 사용되며, 각 계층은 아래와 같이 나눠집니다.계층설명Controller클라이언트 요청을 받고, 응답을 반환하는 역할Service실제 요청을 처리하는 역할ModelDB를 설계하거나, 직접 통신하는 역할RouteAPI 경로를 정의하고, 요청에 맞는 Controller에 연결하는..
[MySQL] 데이터베이스 ERD 설계하는 법(drawSQL) [Express] MySQL로 깔끔한 로그인 인증 만들기 [Express] MySQL로 깔끔한 로그인 인증 만들기🚩소개안녕하세요! 대학생 개발자 주이어입니다! 오늘은 node.js와 MySQL을 사용하여 "로그인 인증"을 만드는 법에 대해서 정리해보려고 합니다. 로그인 인증은 유저 회원가입 및 로그인이 필요한juyear-coding.tistory.comMySQL 관련 글 읽으러 가기!🚩소개안녕하세요! 대학생 개발자 주이어입니다! 오늘은 MySQL 데이터베이스 ERD 설계하는 방법에 대해서 정리해보려고 합니다!데이터베이스 ERD 설계란, 데이터베이스에 있는 테이블을 시각적으로 보여주는 것을 의미하는데요.이렇게 시각화 하는 이유는, 머릿속으로 테이블 구조를 그리는 것보다 ERD 설계를 하는 것이 테이블 ..

728x90