본문 바로가기

Project

(5)
프로젝트에서 Route Handler 안 쓰고 Server Action만 쓴 이유 (feat. Supabase) Next.js로 모하루(개인 프로젝트)를 진행하면서, 모든 서버 통신은 Server Action을 이용해 구현했습니다.Route Handler와 Server Action 중에서 Server Action을 선택한 이유는비즈니스 로직을 클라이언트로부터 분리하고, 보안을 강화하기 위해서Server Action은 서버 환경에서만 실행되기 때문에, 민감한 로직이나 API 키, 인증 정보 등을 클라이언트에 노출시키지 않고 안전하게 처리할 수 있습니다.Supabase를 백엔드로 사용했기 때문입니다.Supabase에서 제공하는 메서드들은 fetch로 직접 호출하는 방식이 아니라, 서버 환경에서 동작하는 클라이언트를 통해 호출해야 하기 때문에, Server Action을 활용하는 것이 더 적합했습니다.모든 서버 통신이 ..
카카오맵 API 타입스크립트로 사용하기 (kakao.maps.d.ts로 Type 적용) 카카오맵을 사용한 프로젝트를 진행하고 있는데, 타입 정의 문제가 발생했다.처음에는 kakao 객체 존재 여부를 TS에서 인식하지 못하기 때문에, 객체가 window에 있다고 선언했다.declare global { interface Window { kakao: any; }} 카카오에서도 이렇게 선언하라고 했는데, (https://devtalk.kakao.com/t/typescript/126917/2)개발 과정에서는 문제 없이 실행되더라도, 문제는 빌드였다.빌드 과정에서 any 타입에 모든 빨간줄을,,, ㅠㅠ 카카오에서는 API 타입을 따로 제공하지 않았다 😱그래서 임시로 장소 결과 객체 타입을 정의했으나export type KakaoPlace = { address_name: string; //..
최종 프로젝트 중간회고 프로젝트 목표우리 팀은 포트폴리오 목적으로 로그인부터 구매까지의 사이클을 경험하기 위해 쇼핑몰을 진행하기로 했다브레인스토밍을 하면서 향 관련 제품(향수, 인센스, 핸드크림, 디퓨저 등)들을 구매/판매하는 이커머스 플랫폼을 제작하기로 하였다 주객전도가 되었지만, 향수 시장에 대해 조사해 본 결과 향수 시장은 팬데믹 시대 이후 30% 이상 증가했다고 한다 향도 자신의 아이덴티티 중에 하나가 되었고, 향이라는 주제로 다양한 선물 제품들이 쏟아지고 있다트렌드인 주제이며, 시장 크기도 증가하고 있어 완전 럭키비키니시티다 하지만 일반적인 쇼핑몰과의 차별점이 뭘까 라는 고민은 진행 중이다제품적으로는 불가능하고, 기능적으로 접근해야 하는데 이커머스에 적합하면서, 참신하며, 도전적으로 해볼 수 있는 그런 기능,,  가격..
next build 시, router not working 🐛 이번에 next 프로젝트를 하면서 서버 컴포넌트, app rotuer, router handler 등 다양한 개념들을 사용하면서 SSG, CSR을 사용하였다문제 상황정상적으로 빌드가 진행되었는데, 로그인 페이지('/log-in')에서 로그인은 성공적으로 이루어지지만, 홈페이지로 리디렉션이 이루어지지 않는다 (router 사용) 빌드 후, start 했을 때 쿠키는 비어있다 로그인을 진행하면, 정상적으로 토스트가 뜨고 나서 홈페이지로 페이지 이동이 되어야 한다하지만, 현재 토스트와 헤더에 로그아웃 버튼만 갱신되고, 페이지 이동은 이루어지지 않았다즉, 로그인은 진행되었지만 리디렉션은 진행되지 않았다..! 문제 해결 과정 1.  route handler, middleware, login 메서드에 모두 콘솔을 ..
JS 리팩토링과 swiper을 사용하여 캐러셀 구현 1. 영화 데이터 가져오는 JS 코드 리팩토링첫번째 과제에서는 데이터를 가져와서 화면에 보여주기만해서 데이터를 가져오는 동작(fetch)와 카드를 만드는 동작(createMovieCard)을 한 곳에 두었다 함수가 데이터를 가져오고, 카드를 만드는 2가지 역할을 하면서나중에 고쳐야지 생각했는데 마침 이번에는 메인페이지의 카드, 헤더, 상세페이지에 개별 영화가 들어가면서 코드를 분리하는게 좋겠다고 생각했다그리고 async/await로 도전해봤다 수정 결과1. fetchMovies먼저 영화 데이터를 가져오는 함수를 만들었다 해당 함수는 fetch한 결과를 가져와 json으로 변환 후, 사용할 results를 구조분해 할당으로 담았다results안에는 영화(객체)를 담은 배열이 들어있다앗 아래 export는 ..