전체 글74 검색 기능 구현(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. Vercel Organization 우회 배포 & PR Preview 설정하기 🚨 Vercel에서는 개인 프로젝트는 무료로 배포할 수 있지만, Organization(조직)으로 설정된 프로젝트는 유료 플랜이다...(2주 무료긴 헌디..) 하지만! 👉 우회하는 방법이 있길래 무료로 배포하고 PR Preview까지 설정하기! 해보겠다...Vercel Organization 우회 배포🚀1. organization 의 팀 레포를 개인 계정으로 포크해준다.2. vercel에서 개인 계정으로 포크한 레포를 deploy해준다.3. 깃헙 토큰 발급개인 개정 settting ➡️ Developer Settings ➡️ 토큰 발급 (classic)repo 권한만 체크발급된 토큰을 따로 저장해두기! 4. build.sh 파일 생성프로젝트 루트경로에 파일을 생성 후 아래 코드를 넣자⬇️#!/bin.. 2025. 3. 11. 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. Expo 앱 배포하기(웹 링크 + Expo QR 코드) Expo 앱을 배포하고 싶어서 여러 가지 방법을 찾아봤는데, Apple Developer 계정이 12만 9천 원이라 너무 비쌈,, 🥲 그래서 앱스토어에 올리지 않고 웹 링크와 QR 코드로 배포하는 방법을 시도해봤다...!웹 링크로 Expo 앱 배포하기🌐 npx expo publish 가 기존 방법이었는데 더 이상 지원하지 않아 EAS (Expo Application Services) 를 사용해야한다!https://expo.dev/eas Expo Application Services (EAS)Deeply integrated cloud services for Expo and React Native apps, from the team behind Expo.expo.devhttps://docs.expo.de.. 2025. 2. 15. react native에 kakao map 연동하기(feat. 현재 위치 띄우기 + 키워드 검색) 🗺️react native에 kakao map 연동하기(feat. 현재 위치 띄우기 + 키워드 검색)1. 아래 카카오 콘솔에 접속해 애플리케이션 추가하기https://developers.kakao.com/console/app2. 카카오맵 ON 해주기3. 앱 키에서 JS 키 저장해두기.env파일에 넣어줄거임!4. 필요 라이브러리 설치하기(웹뷰 & dotenv)전에 아래 명령어로 웹뷰 라이브러리를 설치하자.pnpm add react-native-webview 그리고 Expo가 기본적으로 .env 파일을 지원하지 않기 때문에, react-native-dotenv와 같은 패키지를 사용해야 한다...pnpm add react-native-dotenv 위 명령어 설치후 env파일에 아까 위에서 저장한 JS키를 넣.. 2025. 2. 10. 이전 1 2 3 4 ··· 9 다음
