1. useAsyncEffect useAsyncEffect는 React Hooks중 하나인 useEffect를 통해 제작한 커스텀 훅입니다. 기본적으로 useEffect를 비동기 작업에 사용 할 수 있게 확장한 커스텀 훅이라고 할 수 있습니다. 이를 사용하면, useEffect 내에서 async/await를 사용하여 비동기 작업을 수행할 수 있습니다 (useAsyncEffect 코드) import { useEffect, DependencyList } from "react" export const useAsyncEffect = (asyncEffect: () => Promise, deps?: DependencyList) => { useEffect(() => { const asyncEffectWrapper =..
📝 서버리스란 ? 서버리스(Serverless) 아키텍쳐는 서버 인프라를 생성(프로비저닝)하거나 관리하지 않고 어플리케이션을 배포할 수 있는 아키텍처입니다. 이번 포스팅에서는 Next.js 14버전에서 서버리스 아키텍쳐를 이용하여 API 라우팅을 구현해보는 과정을 담아보도록 하겠습니다. Next.js 14버전에는 App router와 Page router가 있는데, 그 중에서 App router 방식을 적용할 예정입니다. 사실 Next.js 14 버전이 나온지 얼마되지 않았고, 특히 App router 방법에 대한 내용은 공식문서 말고는 참고할만한 레퍼런스가 적었기 때문에, 잘못된 정보가 있다면 댓글로 피드백 해주시면 감사하겠습니다! 🚀 Next.js 에서 API 라우팅을 위한 서버리스 함수를 생성하는 ..
📝 배경 탑개미자원 웹 제작 프로젝트를 진행하며, 스크롤을 일정 범위 이상으로 내릴 시 페이지 최상단으로 이동하는 TopButton이라는 컴포넌트가 조건부렌더링 되도록 구현중이었습니다. 페이지 최상단으로 이동하는 기능을 구현하는것은 쉬우나, 해당 컴포넌트가 마운트, 언마운트 될 시 애니메이션 효과를 부여하고 싶은 상황이었습니다. 해당 프로젝트에의 각종 애니메이션 효과는 Framer Motion이라는 라이브러리를 사용중이었습니다. 🔍️ 문제 상황 애니메이션 효과는 그냥 라이브러리를 통해서 구현하면 되는거 아닌가? 라고 생각할수도 있습니다. 물론 React나 next.js 에서 컴포넌트는 조건부 렌더링을 통해 쉽게 추가되거나 제거할 수 있죠. 하지만, 일반적으로 컴포넌트가 사라질 때 애니메이션을 적용하는 것..
📝 배경 탑개미자원이라는 업체의 홍보를 위한 웹제작을 의뢰 받아 작업 마무리 후, vercel을 통해 배포하였습니다. 실제 서비스를 위해서 별도의 도메인이 필요하였고, 호스팅 케이알 이라는 플랫폼을 통해 "탑개미자원.com" 이라는 도메인을 구매하였습니다. 도메인 구매 후, 소유자정보 인증을 완료 한 뒤 vercel을 통해 배포한 프로젝트에 추가(연결)해야 하는 상황이었습니다. 🔍️ 문제 상황 혹시 모르시는 분들을 위해, vercel을 통해 도메인을 추가하는 과정은 아래의 사진을 참조해주세요. 여기서 문제가 발생하는데, vercel은 기본적으로 한글 도메인을 지원하지 않는다는 점입니다. 🔨 해결방안 해결 방법에는 크게 2가지 방법이 있습니다. 첫번째는 한글 도메인을 지원하는 AWS Route 53이나, ..
📝 문제 Next.js로 포트폴리오를 제작하고 있는데, Prettier format on save 기능이 급격하게 느려지는 현상이 발생하였다. 리액트에서 작업할때는 수정 및 저장시 지연 없이 Prettier format on save 기능이 동작했는데, Next에서는 짧게는 2~3초, 길게는 5초이상 해당 현상이 지속되어 여간 불편한게 아니였다. 🔍️ 원인 구글링 결과, prettier git의 issue에서 비슷한 현상을 겪는 게시글을 찾을 수 있었다 FormatOnSave takes a long time #1333 FormatOnSave takes a long time · Issue #1333 · prettier/prettier-vscode Summary Frequently, when I save a..
Route Next.js에서는pages 폴더 내부에 있는 파일들의 이름을 기준으로 자동으로 페이지가 생성이 된다. 실습환경 디렉토리 구조 & 레이아웃 Next.js 13 이상의 환경 태그 a태그를 사용해 링크를 연결하면, 해당 링크로 들어갔을 때 바뀌어야 하는 페이지 외의 변화가 없는 layout 같은 다른 부분들도 전부 처음부터 끝까지 요청 보내서 다운로드 받게 된다. 아래의 예시는 html 페이지와 css 페이지 이동시 개발자도구 - 네트워크 탭의 내용이다. 매번 서버로부터 html을 받아오기 때문에 비효율적이고, 리소스를 많이 사용하게 된다. 태그 a태그를 Link태그로 바꾸고 클릭하면 내가 이동하려는 페이지만 요청이 들어가게 된다. 하지만, 이조차도 이미 클릭해서 요청이 들어간 적이 있는 페이지는..
📝 현황 점메추 프로젝트는 한참 코드스테이츠 부트캠프를 병행하며 약 3주간 진행했던 프로젝트였다. React 라이브러리를 처음 배운 상태에서 진행했던 첫 프로젝트다 보니, 지금 돌이켜 보면 정말 부족한것도 많아 보인다. 목표했던 기능은 구현을 완료 했으나, 시간상의 문제로 배포까지는 완료하지 못한채 마무리 되었다. 부트캠프도 수료하였고, 이전에 완료하지 못했던 배포작업을 진행해보려고 한다. 🔍️ 어떤 문제로 배포에 실패했던 걸까? vercel과 github page 플랫폼을 이용하여 배포를 시도 했으나, 실제 네이버 API 통신을 하는 로직이 동작을 하지 않았다. 사실 네이버 API는 javascript 환경에서 보안상의 이슈로 CORS를 허용하지 않는다. 따라서, 네이버에서도 javascript 환경에..
🐛 도입 리액트(React)는 보통 HTML과 유사한 JSX 코드로 작성하는 경우가 대부분입니다. 이 JSX의 편리함 때문에 리액트를 좋아하는 사람도 많지만, 이 JSX 때문에 리액트를 싫어한다는 사람도 많다고 합니다. 이번 블로깅에서는 이러한 JSX와 JSX를 변환(transpile) 해주는 babel에 대해서 알아보도록 하겠습니다. 📝 JSX가 뭘까? JSX를 설명하는 리액트 문서를 바탕으로 살펴보도록 하겠습니다. // 아래 변수 선언을 살펴보자 const element = Hello, world! ; 위 선언문을 보면 문자열도 HTML도 아닙니다. 이 문법을 JSX라고 부르며, JSX는 HTML 태그를 변수로 할당하고, 호출하며, return 할 수 있는 확장 문법이라고 볼 수 있습니다. 이를 통해..
