복소평면님의 기록 모음

아는 것과 '설명할 수 있는 것'의 차이베테랑 개발자일수록 기본기의 중요성을 강조합니다. 저 역시 이번 인턴IN메타 1주 차 React 기본 개념 학습을 통해 그 중요성을 다시 한번 체감했습니다. 익숙하다고 생각했던 개념들이었지만, '왜 그렇게 동작하는가?'라는 스스로의 질문 앞에서 순간 머뭇거리게 되더군요.특히 퀴즈의 오답들은 React가 클래스 컴포넌트에서 함수형 컴포넌트와 Hook으로 진화해 온 이유를 명확하게 보여주는 '살아있는 역사'와 같았습니다. 이 글을 통해 단순히 'state는 변경 가능, props는 불가능'과 같은 단편적인 지식을 넘어, React의 핵심 철학과 발전 방향을 함께 고찰해보고자 합니다. 1. 틀린 문제에서 발견한 성장의 기회: React의 진화와 '왜'기존에 다수의 Rea..

이번 '인턴IN메타' 2주차에서는 React를 기반으로 실제 고객사의 요구사항이 담긴 상품 목록 페이지를 개발하는 과제를 수행했습니다. 단순한 기능 구현을 넘어, 사용자 경험(UX)과 코드의 안정성까지 고려하는 실전적인 프로젝트였습니다.본 포스팅에서는 주어진 요구사항을 어떻게 분석하고 기술적으로 해결했는지, 나아가 Intersection Observer를 활용한 무한 스크롤과 Context API를 이용한 다크/라이트 모드 전환 등 추가 기능을 왜, 그리고 어떻게 구현했는지 상세히 다뤄보겠습니다. 마지막으로 React Testing Library를 활용한 테스트와 GitHub Pages 배포, 그리고 프로젝트를 통해 얻은 교훈을 담은 KPT 회고까지 공유합니다.1. 프로젝트의 시작: 고객 요구사항 분석 ..

카드 등록 페이지 구현기 지난 포스팅에서는 상품 목록에 '담기' 버튼을 추가하고, 무한 스크롤 기능과 다크/라이트 모드에 상관없이 명확한 시인성을 확보하는 작업을 다뤘습니다. 이번 주차에는 지난 '담기' 기능에 이어 '구매' 기능을 구현해 보았습니다. 사용자가 '구매' 버튼을 클릭하는 순간, 우리는 새로운 과제에 직면합니다. 바로 결제 페이지, 그중에서도 핵심인 '카드 등록' 기능입니다.단순히 정보를 입력받는 폼(Form)을 넘어, 어떻게 하면 사용자가 안전하고 편리하게 자신의 결제 정보를 맡길 수 있을지 고민하는 것은 서비스의 신뢰도와 직결됩니다. 이번 3주차 인턴IN메타 챌린지에서는 고객의 요구사항을 기반으로 React를 활용하여 사용자 친화적인 카드 등록 페이지를 구현한 경험을 공유하고자 합니다. ..

최근 '인턴IN메타' 4주차 과정에서 발표 자료 시각화 및 스토리보드 작성을 집중적으로 학습하며 과거의 경험을 되돌아보게 되었습니다. 이번 포스팅에서는 4주차에 학습한 실전 발표 자료 작성법 A to Z를 공유하고자 합니다. 이 글을 통해 여러분은 단순히 예쁜 자료가 아닌, '논리적으로 설득하고 목표를 달성하는' 기획서와 발표 자료를 만드는 것을 목표로 합니다. 1. 기획의 뼈대를 세우는 4MAT 프레임워크좋은 발표는 화려한 디자인이 아닌, 탄탄한 논리 구조에서 시작합니다. 청중은 "그래서 이걸 왜 해야 하죠?"라는 근본적인 질문에 대한 답을 원합니다. 이때 가장 효과적인 프레임워크가 바로 4MAT(4 Master of Art Teaching) 입니다. 4MAT은 세계적인 교육학자 버니스 매카시(Ber..