ㅇㅅㅇ

네 번째 도전기 - 더티코드에서 클린코드를 향한 여정Chapter 1을 마무리하고 새로운 시작인 Chapter 2에 접어들었습니다. 그동안 1-3주차에서 SPA, Virtual DOM, React 내부 원리를 구현해보며 "이게 어떻게 돌아가는 거지?"라는 궁금증을 해소했다면, 이번 주차는 "이 코드가 왜 이렇게 복잡한 거지?"라는 새로운 궁금증을 마주하게 된 시간이었습니다.처음 main.original.js 파일을 접했을 때, p, q, amt, sel 같은 모호한 변수명과 500줄이 넘는 calcCart 함수를 보고 "이게 정말 동작하는 코드일까?"라는 의심이 들었습니다. 퍼블리셔로서 자바스크립트를 사용해왔지만, 이렇게 가독성과 유지보수성이 떨어지는 코드를 보니 당혹스러웠고, 어디서부터 손을 대야 할지..

세 번째 도전기 - 퍼블리셔로서 React의 내부를 들여다본 한 주이번 3주차는 정말 특별한 경험이었습니다. 그동안 Vue를 실무에서 사용해왔던 퍼블리셔로서, React는 "사용법만 알면 되지"라고 생각했는데, 이번 과제를 통해 React의 내부 동작 원리를 직접 구현해보면서 "이게 어떻게 돌아가는 거지?"라는 궁금증을 해소할 수 있었습니다.처음에는 useRef, useMemo 같은 것들을 useState부터 하나하나 직접 만들어보라고 하니까 "이게 뭐야?" 싶었습니다. Vue나 React에서는 이런 것들을 알아서 해주니까 신경 쓸 일이 없었는데, 이번 과제에서는 그런 기능들을 직접 구현해보라고 하니까 처음에는 정말 어려웠습니다.Vue의 Vuex나 Pinia, React의 Redux나 Zustand 같은..

두 번째 도전기 - AI와 함께하는 암호 같은 개념 해독기1주차에 Vanilla JavaScript 기반의 SPA를 구현하며 웹 개발의 기초를 익혔다면, 2주차는 그보다 한 단계 더 나아가 가상 DOM 렌더링 시스템을 직접 만들어보는 시간이었습니다. 퍼블리셔로서 정적인 마크업과 스타일링에 익숙했던 만큼, 동적인 DOM 조작과 상태 관리, Virtual DOM의 필요성을 코드로 다뤄보며 조금씩 감을 잡을 수 있었습니다.처음에는 "평탄화", "재귀적 표준화", "DocumentFragment" 같은 용어가 낯설고, createVNode, normalizeVNode 같은 함수들이 어떻게 연결되는지, 왜 이런 단계들이 필요한지 이해하기까지 시간이 꽤 걸렸습니다. 1주차에 세웠던 ‘AI는 참고만 하자’는 목표는 ..

항해 99 승선 후 첫 번째 폭풍우 - 퍼블리셔의 개발자 도전기수박 겉핥기식 개발 지식을 가진 퍼블리셔로서, 항해 플러스 프론트엔드 과정 1주차를 마치고 첫 회고글을 남깁니다.그동안 혼자 프론트엔드 개발을 공부하며 '이 정도면 괜찮을까?', '실무는 어떻게 다를까?' 하는 고민이 늘 마음 한편에 있었어요. 결국 직접 경험하고 배우기 위해 이 '항해 99'라는 배에 승선하게 되었습니다. 단순 기술 습득을 넘어, 실제 현업에서 요구하는 개발 역량과 사고방식을 배우고 싶다는 갈증이 컸기 때문이죠.평일 온라인으로 팀원들을 만났는데, 처음에는 '비즈니스 로직' 같은 모르는 단어들이 많아 힘들기도 했습니다. "이게 뭔 소리지?" 싶을 때도 있었죠. 하지만 점차 익숙해지면서 개발자들의 '언어'와 '사고방식'을 조금씩..

🧪 테스트란?테스트란,**“코드가 의도한 대로 동작하는지 확인하고 검증하는 행위”**를 의미한다.단순히 console.log()로 확인하는 것도 일종의 테스트지만, 자동화된 방식으로 구조 있게 검증하는 것이 소프트웨어 테스트의 핵심이다.이번 스터디에서는 테스트가 단순한 오류 확인을 넘어서, 설계와 유지보수에도 큰 영향을 준다는 점을 처음 알게 되었다.🧪 테스트를 처음 접하며이번 스터디를 통해 테스트라는 걸 처음으로 제대로 접했다.단순히 코드가 잘 돌아가는지를 확인하는 정도가 아니라, 테스트가 설계와 코드 완성에 영향을 줄 수 있다는 얘기를 들었을 땐 솔직히 좀 놀라웠다.console.log 찍는 것도 테스트라고 생각했는데, ‘테스트 구조를 나눠서 작성하는 방식’이 존재한다는 걸 이번에 처음 알게 됐다..

🔮 MBTI x Tarot – 성향 기반 타로 리딩 웹서비스감성 기반 조언을 중심으로 한 타로 리딩 서비스– MBTI 성향 해석을 결합한 퍼스널 콘텐츠 플랫폼✅ 프로젝트 개요이 프로젝트는 MBTI 성향 기반 해석과 타로 카드 리딩을 결합한 퍼스널 웹서비스입니다.사용자가 입력한 질문과 MBTI 성향을 바탕으로 무작위로 뽑힌 타로 카드에 대해, 카드의 상징 + 성향 맞춤형 조언을 함께 제공합니다.단순한 운세 서비스가 아닌, 자기 성찰과 감정 정리에 도움이 되는 감성 기반 도구를 지향합니다.💻 주요 기능MBTI 성향 기반 타로 카드 조언자유 질문 입력 기능Universal 타로 덱 대응 (AI 이미지)결과 공유용 이미지 자동 생성 및 다운로드후기 작성 기능 및 Supabase DB 연동유입 경로 및 사용자..

🌌 타로와 MBTI의 만남, 감성 리딩 툴 개발기🔮 프로젝트 개요“MBTI 성향과 당신의 질문에 어울리는 타로 카드 리딩”MBTI 성격 유형을 선택하고, 사용자가 직접 고른 타로 카드에 따라 감성적인 AI 해석을 제공하는 웹 툴입니다.하나의 질문, 하나의 카드.그 카드가 당신의 질문에 어떤 이야기를 속삭이는지, 별빛처럼 은유적으로 전달합니다.이 프로젝트는 김지혜가 개인 포트폴리오용으로 기획·개발하였으며,별과 타로, 그리고 성향 기반의 감성적 몰입을 목표로 설계되었습니다.🛠️ 주요 기능MBTI 성향 선택 (16유형)사용자가 직접 카드 선택GPT 기반 감성적 타로 해석 제공 (질문 + 카드 기반)리딩 결과 저장(선택)추후 SNS 공유용 이미지 생성 기능 고려 중💡 사용 기술항목내용프레임워크Next.j..

별빛이 속삭이듯 하루의 흐름을 해석하고, 기록으로 남기는 타로 웹서비스.Next.js + Supabase 기반으로, 감성과 구조 모두를 갖춘 퍼스널 타로 저널입니다.포트폴리오 제출용 프로젝트이며, Vercel에 배포되어 있습니다.📅 개발 기간2025년 4월 15일 ~ 5월 16일 (4주)총 20일간, 1일 1기능 단위로 작업 및 기록🚀 주차별 핵심 작업 요약✅ 1주차: 프로젝트 기획 및 메인 기능 구현사이트 기획 및 구조 설계 (/tarot, /record, /login 흐름 구성)타로 리딩 기능 초기 프로토타입 완성 (카드 뽑기 → AI 해석)감성 기반 UI 구성 시작 (/style-guide 가이드라인 작성)Supabase 연동 및 Google 소셜 로그인 구현✅ 2주차: 인증 및 기록 기능 정비..

📚 목차🚀 배포 링크🌟 이번 주 개요🛠️ 작업 흐름 (일자별 순서 기반)🔍 문제 발생 및 해결 과정📦 현재까지 완성된 기능🌟 회고🧩 요약✅ 최종 마무리📈 향후 계획🚀 배포 링크배포 링크: https://next-tarot-app.vercel.app🌟 이번 주 개요이번 주는 UI 스타일 통일, 카드 등록/수정 기능 확장, 메타데이터 및 SEO 대응, 오류 해결 및 데이터 구조 정비 등 실사용자 경험을 마감단계로 다듬는 데 집중했습니다.특히 디자인과 기능의 완성도를 함께 고려하면서 기록 → 저장 → 분석 → 시각화 흐름까지 기능 구조를 견고히 마무리했습니다.🛠️ 작업 흐름 (일자별 순서 기반)1. /style-guide 기준 전체 UI 스타일 통일로그인, 회원가입, 운세 리딩 UI 리디..

📚 목차🌟 이번 주 개요🛠️ 작업 흐름 (일자별 순서 기반)🔍 문제 발생 및 해결 과정📦 현재까지 완성된 기능🌟 회고🧩 요약✅ 최종 마무리🌟 이번 주 개요이번 주는 OpenAI 및 날씨 API 연동을 통한 AI 기능 고도화, 기록 분석 기능 구현, 그리고 기존 기록 등록·목록·상세·수정 흐름의 UI/UX 보완 및 오류 해결에 집중한 한 주였습니다.사용자 데이터 흐름을 연결하고 실제 리딩 → 저장 → 분석까지 확장할 수 있도록 기능 구조를 정리하고, 다양한 오류 해결 작업도 함께 진행했습니다.🛠️ 작업 흐름 (일자별 순서 기반)1. OpenAI API 연동한 타로 리딩 기능 구현질문 유형과 카드에 따라 감성적인 해석을 생성하도록 GPT 프롬프트 구성응답 결과를 sessionStorage에 ..