React42 Next.js에서 S3 이미지가 안 보이는 오류 (feat. next/image) 프로젝트에서 유저 프로필을 수정할 수 있는 마이페이지를 만들고 있었는데,백엔드에서 받은 S3 이미지 URL을 next/image 컴포넌트로 보여주려고 하자 아래와 같은 에러가 똬악...! 찾아보니 next/image는 외부 이미지 URL을 사용할 때, 보안상의 이유로 도메인을 명시적으로 등록해줘야 한다고 한다!✅ 해결 방법프로젝트 루트의 next.config.js 파일 수정하기import type { NextConfig } from 'next'const nextConfig: NextConfig = { reactStrictMode: false, images: { domains: ['pickmate-bucket.s3.ap-northeast-2.amazonaws.com'], },}export de.. 2025. 5. 3. 검색 기능 구현(feat. 디바운스) 📌 구현목표- 검색창에서 입력이 바뀔 때마다 서버에 요청을 즉시 보내지 않고, 입력이 멈춘 뒤 일정 시간(300ms) 이후에 검색 요청을 보내기- 검색 결과를 부모 컴포넌트에 전달해서 리스트 렌더링 제어하기1. SearchBar 컴포넌트 타입 정의SearchBar는 공통 컴포넌트라 기존에는 onSearchResult의 파라미터 타입을 단순히 any[]로 지정해두었다. 하지만 any를 쓰면 TypeScript가 어떤 타입의 배열이 넘어오는지 정확하게 추론할 수 없다. 😢 Project[]를 받아야 할 컴포넌트에 실수로 Study[]를 넘겨도 오류 없이 실행되어 런타임 버그로 이어질 수 있기 때문에Discriminated Union을 사용했다! https://radlohead.gitbook.io/type.. 2025. 4. 7. 드롭다운 메뉴 직접 구현하기 Next.js에서 드롭다운 메뉴 구현하기🔼🔽1. Dropdown 컴포넌트 구현사용자가 드롭다운을 클릭하면 메뉴를 열고, 옵션을 선택할 수 있게 해보자! isOpen 상태로 드롭다운의 열림/닫힘을 관리하고, selectedOption으로 선택된 옵션을 관리한다.외부 클릭 시 드롭다운 닫힘useRef는 React에서 DOM 요소에 접근할 수 있게 해주는 훅이다. 드롭다운 컴포넌트의 루트 div에 ref를 연결하고, 클릭이 드롭다운 바깥에서 일어났는지 확인할 수 있다!useEffect를 통해 외부 클릭을 감지할 수 있다. mousedown 이벤트를 사용해 마우스로 클릭이 일어났을 때, 클릭이 드롭다운 메뉴 내부인지 외부인지를 감지하고, 외부라면 드롭다운을 닫는다!type DropdownProps = { .. 2025. 4. 4. Next.js 마크다운 미리보기 적용하기 Next.js 마크다운 미리보기 적용하기👁️Next.js 프로젝트에서 글을 작성할 때 textarea만 사용해서 구현했었다. 하지만 마크다운 문법을 적용한 텍스트를 미리 볼 수 있으면 훨씬 직관적이고 사용하기 편리할 것 같아서 마크다운 미리보기 기능을 추가하기로 했다.! (텍스트를 입력하면서 실시간으로 마크다운 문법을 미리 볼 수 있으면 작성자가 입력한 내용을 쉽게 확인할 수 있고, 특히 블로그나 프로젝트 설명 같은 내용에서 문법적인 요소를 미리 확인할 수 있어 편리함!!)라이브러리 설치pnpm add react-markdown remark-gfmreact-markdown: Markdown을 렌더링하는 React 컴포넌트remark-gfm: GitHub 스타일의 Markdown을 지원하는 플러그인실시간.. 2025. 3. 30. React 태그 입력 기능 구현하기 React 태그 입력 기능 구현하기⌨️구현 목표- 프로젝트를 등록할 때, 기술 스택을 태그 형태로 관리하는 기능을 추가하고 싶음!!(like 티스토리 태그 기능, 벨로그 태그 기능)- 엔터 시 태그 등록태그 삭제- 태그 개수 제한1. 상태(state) 정의const [stacks, setStacks] = useState([])const [stackTag, setStackTag] = useState('')최종적으로 반환될 stacksstackTag는 현재 사용자가 입력하고 있는 개별 태그 값2. Enter 키 입력 시 태그 등록 (onKeyDown)const handleTagInput = (e: ChangeEvent) => { setStackTag(e.target.value)}const inputKeyD.. 2025. 3. 23. Zustand로 로그인 상태 관리하기 Zustand로 로그인 상태 관리하기👤최근에 전역 상태 관리 라이브러리를 사용해보고 싶다는 생각을 했다. 프로젝트가 커지면서 상태 관리가 점점 더 복잡해졌고, React에서 제공하는 Context API로 해결하려니 코드가 점점 길어지고 관리가 힘들어졌다... Provider 쓰구,, 넘 불편쓰,,🚬 Redux도 고려했지만, 설정이 복잡하고 보일러플레이트 코드가 많아서 사용하기 쉽다고 많이 들어본 Zustand를 사용해 보기로 결심했다..! 😎 Zustand는 생각한 것보다 훨씬 간단하고 직관적이었다. 상태를 관리하기 위한 별도의 복잡한 설정 없이 스토어만 만들면 되는 점이 easy 뽀인트 + Context API보다 코드가 훨씬 간결해짐! 👍 이제 Zustand를 사용해 로그인 상태 관리와 로딩.. 2025. 3. 16. Expo 알림(Notification) 구현하기 Expo 알림(Notification) 구현하기📍구현 목표- 앱 실행 시 위치 및 알림 권한 요청- 하루에 세 번 운동 알림 보내기 (오전 10시, 오후 2시, 저녁 8시)- (테스트용) 즉시 알림을 보내는 테스트 버튼1. expo-notifications 설치npx expo install expo-notifications2. 앱 실행 시 권한 요청시작 화면에서 권한 요청을 해야한다! 기존코드 위치 권한 아래에 알림 설정 코드를 넣었돠.Notifications.setNotificationHandler({ handleNotification: async () => ({ shouldShowAlert: true, shouldPlaySound: true, shouldSetBadg.. 2025. 2. 25. React Native에 React Query 적용하기 React Native에 React Query 적용하기React Query란?React Query는 서버 상태 관리 라이브러리로 아래와 같은 기능을 제공한다!데이터 페칭, 캐싱, 동기화, 업데이트 관리네트워크 요청 상태(로딩, 에러, 성공) 추적서버 데이터 캐싱 및 리패칭 최적화이번 프로젝트에서 회원가입 기능을 구현하면서, React Query를 도입했는데 연습용으로 사용해봤다. React Query는 서버와의 비동기 통신을 효율적으로 관리하고, 상태 관리가 복잡하지 않게 해주는 도구로 잘 알려져 있다. 기존에는 서버와의 비동기 통신을 처리하기 위해 fetch나 axios를 사용했었지만, React Query는 비동기 상태를 자동으로 관리해줘서 상태 변화에 따른 처리 로직을 더욱 깔끔하게 작성할 수 있었.. 2025. 2. 8. React Native와 Expo로 간편하게 앱 개발하기 React Native와 Expo로 간편하게 앱 개발하기❓왜 ExpoReact Native를 사용해 모바일 앱을 개발할 때, Expo는 특히 개발 초기 단계에서 많은 장점을 제공하는 툴이다. 내 개발 환경은 Windows이고, 테스트용으로 아이폰을 사용해야 하는 상황이라, 별도의 복잡한 설정 없이 바로 프로젝트를 시작할 수 있는 Expo를 선택했다. Expo는 빠르게 앱을 실행하고 실시간으로 테스트할 수 있어 매우 유용하다. Expo Go 앱을 통해 모바일에서 바로 변화를 확인할 수 있기 때문에, 코드 작성 후 앱을 다시 빌드하거나 재시작하는 번거로운 과정을 크게 줄일 수 있다. 또한, Expo는 파일 기반 라우팅을 지원하는 점에서 Next.js의 App Router와 유사한 구조를 가지고 있어, 처음 .. 2025. 2. 4. 이전 1 2 3 4 5 다음
