문제 상황Firebase의 GoogleAuthProvider와 GithubAuthProvider를 사용하여 소셜 로그인 기능을 구현하던 중, 하나의 함수에서 버튼의 name 속성에 따라 다른 provider를 호출하도록 구현했다. Sign up with Google Sign up with Githubconst onClickSocialLogin = async (e: React.MouseEvent) => { const { target: { name }, } = e; let provider; const auth = getAuth(app); if (name === "google") { provider = new GoogleAuthProvider(); } if (name === "git..

PeaNutter는 만화 Peanuts를 테마로 한 소셜미디어 프로젝트다.노마드코더 트위터 클론코딩 컨테스트에 참여하여 만들었으며, 사용자들이 자신의 소소한 일상과 생각을 'nut'으로 공유하고 소통하는 플랫폼을 구상했다. Peanuts는 땅콩이라는 뜻 외에도 '별 볼 일 없는 것들'이라는 의미로 쓰인다. 이 의미에서 착안하여 누구나 일상의 소소한 순간들을 가볍게 나누는 공간을 상징하고자 PeaNutter라는 이름을 붙였다.마이그레이션 배경컨테스트 당시 2주 동안 매주 제공되는 미션을 진행하며 기획안부터 필수 기능 3가지까지 구현해야 했다. 개인적으로 추가하고 싶었던 부가 기능까지 욕심내다 보니, 결과적으로 만족스러운 완성도에 도달하지 못했다. 이러한 아쉬움으로 PeaNutter는 리팩토링 및 마이그레이..

로컬 스토리지를 활용하여 사용자의 다크모드 설정, 일기 데이터, AI 답장을 저장하고 관리하는 기능을 구현했다.페이지를 새로고침하거나 재방문해도 사용자의 데이터가 유지된다.다크모드 설정 저장설정 불러오기애플리케이션 로드 시 로컬 스토리지에서 사용자의 마지막 다크모드 설정을 불러온다.const ThemeProvider = ({ children }: ThemeProviderProps) => { const loadDarkModeSetting = () => { const storedDarkModeSetting = localStorage.getItem("darkMode"); return storedDarkModeSetting ? JSON.parse(storedDarkModeSetting) : fals..

사용자가 작성한 일기에 대해 GPT API를 활용하여 상담 전문가 관점의 답장을 받을 수 있는 기능을 구현했다.GPT API 연동프롬프트 설정GPT API에 전달할 메시지 구조를 정의했다.const messages = [ // 역할 정의 { role: "system", content: "You are a Counseling Expert, specializing in personal development through diary writing.", }, // 사용자 일기 입력 { role: "user", content: ` """ ${prompt} """`, }, // AI 지시 사항 { role: "user", conten..

Tailwind CSS의 다크모드 기능과 React Context API를 활용하여 애플리케이션 전체에서 일관된 다크모드 전환 기능을 구현했다.Tailwind 설정tailwind.config.ts에서 다크모드를 클래스 기반으로 설정했다.darkMode: "class", // .dark 클래스 존재 여부에 따라 다크모드 활성화theme: { extend: { colors: { // 색상 스키마 }, },},이를 통해 HTML 요소에 .dark 클래스가 추가되면 다크모드 스타일이 적용되도록 했다. 다크모드 상태 관리ThemeContext 생성Context API를 사용해 다크모드 상태를 전역으로 관리했다.const ThemeContext = createContext({ isDark..

Diary 페이지에서 특정 일기를 불러와 상세 내용을 보여주는 기능을 구현했다.URL 파라미터로 전달된 일기 ID를 통해 데이터를 조회하고, 존재하지 않는 일기에 대한 예외 처리도 추가했다.일기 데이터 불러오기useDiary 커스텀 훅특정 ID의 일기를 찾아 반환하는 커스텀 훅을 구현했다.const data = useContext(DiaryStateContext);DiaryStateContext를 통해 전역에서 관리되는 일기 데이터에 접근한다. 특정 일기 찾기 및 예외 처리const [curDiaryItem, setCurDiaryItem] = useState();useEffect(() => { const currentDiaryItem = data.find((item) => item.id === id);..

New 페이지에서 일기를 작성할 수 있는 기능을 구현했다.날짜 선택, 감정 선택, 일기 내용 입력이 가능하며, 날짜 포맷팅 유틸리티를 통해 일관된 날짜 형식을 유지한다.날짜 포맷팅 유틸리티formatWithZero 함수날짜를 두 자릿수로 일관되게 표시하기 위한 함수다.const formatWithZero = (number: number) => number 숫자가 10보다 작을 경우 앞에 0을 붙여 반환한다. getStringDate 함수날짜 데이터를 원하는 문자열 형식으로 변환하는 함수다.export const getStringDate = ( targetDate: Date | string | number, format: string = "yyyy-mm-dd") => { const dateObj =..

Home 페이지에서 월별 일기 데이터를 관리하고 정렬하는 기능을 구현했다. 사용자가 월을 전환하며 해당 기간의 일기만 볼 수 있고, 최신순 또는 오래된순으로 정렬할 수 있다.날짜 및 기간 관리현재 날짜 표시 및 월 변경pivotDate상태로 현재 표시 중인 월을 관리하고, 좌우 버튼으로 이전/다음 달로 이동할 수 있도록 구현했다.const [pivotDate, setPivotDate] = useState(new Date());const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1));};const onDecreaseMonth = () => { setPivotDate(new..

문제 상황일기 목록의 정렬 기능을 구현하면서 Array.prototype.sort대신 Array.prototype.toSorted를 사용하려고 했는데, 타입스크립트가 이 메서드를 인식하지 못하는 문제가 발생했다.sort vs toSortedsort: 배열을 정렬하고 원본 배열을 변경toSorted: 배열을 정렬하되 원본을 변경하지 않고 새 배열 반환불변성을 유지하기 위해 toSorted를 사용하려 했지만, 타입스크립트에서 타입 오류가 발생했다. 원인 분석tsconfig.json의 EXMAScript 버전 설정을 확인해보니, ES2020으로 설정되어 있었다.{ "compilerOptions": { "target": "ES2020", "module": "ES2020", // ... }}E..

이전에 만들었던 리액트 프로젝트 Emotion Diary를 마이그레이션하면서, 기존에 자바스크립트로 작성된 공용 컴포넌트들을 타입스크립트로 재작성했다. 기존 프로젝트에서 이미 Button과 Header 같은 재사용 가능한 컴포넌트를 구현해두었지만, 타입 안정성이 부족했다. 타입스크립트를 도입하면서 props의 타입을 명확히 정의하고, 컴파일 타임에 오류를 잡을 수 있도록 개선했다.Button 컴포넌트props 타입 정의text, type, onClick 세 가지 props의 타입을 명시적으로 정의했다.type ButtonProps = { text: string; type: "DEFAULT" | "POSITIVE" | "NEGATIVE"; onClick: () => void;};export defau..