[React] useReducer와 ReactContext 개념 잡기

요새 매번 컴퓨터로 필기하며 공부를 했었는데요...저는 아무래도 아날로그가 잘 맞는 것 같습니다.노트에 직접 한자한자 적으면서 할때 가장 이해가 잘 되고, 집중도 잘 되는 거 같아요. 그래서 이번엔 한입리액트 몇 안남은 강의를 들으며 노트 필기로 내용정리를 했습니다.코딩이란게 종이에 적으면서 공부하기엔 너무 어려운 부분이라(컴퓨터 언어잖아요...) 굉장히 지저분한 필기가 되었지만 ㅋㅋㅋ어쨌든 저만 알아볼 수 있으면 되니까요^__^... 이미 이전에 useReducer와 Context를 각각 두번씩 블로그에 타자 치며 열심히 정리도 하고 강의도 들었었는데...와오늘 직접 종이에 적으면서 하니 이제야 구조가 제대로 이해가 되었고, GPT없이도 직접 코드를 칠 수 있겠더라고요 ㅋㅋㅋ;; 다소 비효율적이지만 다..

• format_list_bulleted Study Notes/React
• · 2025. 10. 15.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(4)

📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git 저는 framer motion으로 스크롤애니메이션 구현할때마다,특정 임계값에 스크롤이 걸치면 무한으로 애니메이션이 트리거되는 현상이 일어나더라고요... 저번 잡생각 프로젝트때도 이것때문에 진짜 고생고생해서 현상이 거의 안보이게 완화시키는 것 까지는 성공했지만,100%해결하지는 못했었습니다. 다른분들은 어떻게 이 점을 해결하셨는지 궁금하네요! 저는 이번 학습에서 들어올 때 기준과, 나갈 때 기준을 다르게 두는 완충(버퍼) 작용을 해주는 훅을 사용해서 해결했습니다!!바로 비교될 수 있도록 3-1, 3-2로 기존 코드와 함께 영상으로 글 마지막에 정리해두었습니다~!! Week 1 ..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 10. 15.
• textsms

[Framer Motion] Framer Motion을 정복해보자😵‍💫-1(3)

📌실습파일 전체 다운: https://github.com/yeom-kenco/framer-motion-study-kit.git Week 1 — Step 3 (Variants / Stagger / AnimatePresence)개념 핵심Variants(상태에 이름 붙이기): 숫자/스타일을 직접 쓰는 대신 hidden / show / exit 같은 의미 있는 상태 이름으로 정의해서 가독성/재사용성/오케스트레이션을 높인다.Stagger(간격 재생): 부모 variants.show.transition에 staggerChildren, delayChildren을 넣으면 부모가 자식들의 시작 타이밍을 지휘한다.AnimatePresence + exit(퇴장): 조건부 렌더에서 사라질 때 바로 unmount하지 않고 e..

• format_list_bulleted Study Notes/Framer Motion
• · 2025. 10. 15.
• textsms

[Project] 동행이음 - 의료취약계층 셔틀 플랫폼 in JEJU

[kakao x goorm] 구름톤 in jeju 15기 #제주 #클라우드 #제주인프라개선주어진 세가지 키워드에 맞춰, ‘제주의 외곽과 중심을 잇는 새로운 의료 인프라’를 구상했습니다. 프로젝트 기간: 2025.09.24 ~ 2025.09.26 (3일)프로젝트 인원: FE(2명), BE(1명), 디자이너(1명), 기획자(1명) 🔗배포사이트 바로가기 🔗깃허브 바로가기🔗발표자료 바로가기🔗디자인 시안 바로가기🔗팀노션 바로가기🤯 서비스 기획 배경 (Problem)주기적으로 병원에 재방문해야하는 "만성 질환 환자들"하지만 제주 외곽지역의 환자들은 교통 인프라의 어려움을 겪고 있다는 사실, 알고 계신가요?📌 핵심 기능🎥 시연 영상 🍊팀 모다들엉구름의 디자인 시스템 활용과 더불어 짧은 기간 안..

• format_list_bulleted Project & Challenge/[Project] 동행이음 - 의료취약계층 셔틀 플랫폼
• · 2025. 10. 2.
• textsms

디자인 시스템 사용해보기(2): Vapor (by goorm)

이번 해커톤은 Vapor 디자인 시스템을 사용하여 진행하게 되었습니다! 🔗Vapor UI이에 앞서, 꼭 알아야 할 요소들을 Docs 기반으로 가볍게 정리해봤습니다.이 정도만 알아도 어떻게 사용하면 될지 감이 올 것 같습니다. 꼭 알아야 하는 10가지1. 설치 & 전역 스타일패키지: @vapor-ui/core + 아이콘이면 @vapor-ui/icons까지 설치.전역에 Vapor CSS를 반드시 import. (Next/App Router는 app/layout.tsx, Vite는 src/main.tsx)// 전역(예: app/layout.tsx 또는 main.tsx)import '@vapor-ui/core/styles.css'; 2. Tailwind CSS와의 통합 (v4)Vapor는 Tailwind v..

• format_list_bulleted 웹 개발 일기
• · 2025. 9. 24.
• textsms

디자인 시스템 사용해보기(1): Vapor (by goorm)

AI의 발전으로 요즘은 개발 속도가 정말 어마무시하게 단축된 것 같습니다. 그래서인지 저는 요즘 단순히 UI와 기본적인 기능을 정확히 구현하는 것만으로는더이상 강점이 되지 않는다고 느낍니다. 저 또한 앞으로는 디자인과 UI 구현에만 많은 공을 들여 개발하기 보다는최적화와 고도화에 더 시간을 쓰고 공부해야할 것 같다고 느낍니다! 이러한 상황에서 디자인 시스템은 빠르고 일관된 UI 개발을 지원해줘서 정말 편리합니다.저는 다음주에 해커톤에 나가게 되어서, 빠른 UI 구현 능력이 굉장히 필요한데요.이에 앞서 디자인 시스템 Vapor를 소개해드리려 합니다! 그냥 혼자 공부하며 기록한거라 제 글에 오류가 많을 수 있습니다.함께 사용해보며 마구마구 지적해주세요!! 🔗 Overview - Vapor UI Vapor..

• format_list_bulleted 웹 개발 일기
• · 2025. 9. 20.
• textsms