본문 바로가기
반응형

전체 글38

[인턴IN메타] React 사용자 경험을 극대화하는 카드 등록 페이지 구현기 : CardContext 활용하기 카드 등록 페이지 구현기 지난 포스팅에서는 상품 목록에 '담기' 버튼을 추가하고, 무한 스크롤 기능과 다크/라이트 모드에 상관없이 명확한 시인성을 확보하는 작업을 다뤘습니다. 이번 주차에는 지난 '담기' 기능에 이어 '구매' 기능을 구현해 보았습니다. 사용자가 '구매' 버튼을 클릭하는 순간, 우리는 새로운 과제에 직면합니다. 바로 결제 페이지, 그중에서도 핵심인 '카드 등록' 기능입니다.단순히 정보를 입력받는 폼(Form)을 넘어, 어떻게 하면 사용자가 안전하고 편리하게 자신의 결제 정보를 맡길 수 있을지 고민하는 것은 서비스의 신뢰도와 직결됩니다. 이번 3주차 인턴IN메타 챌린지에서는 고객의 요구사항을 기반으로 React를 활용하여 사용자 친화적인 카드 등록 페이지를 구현한 경험을 공유하고자 합니다. .. 2025. 7. 24.
[인턴IN메타] React 실전 프로젝트: 요구사항 분석부터 무한 스크롤, 다크 모드 구현까지 이번 '인턴IN메타' 2주차에서는 React를 기반으로 실제 고객사의 요구사항이 담긴 상품 목록 페이지를 개발하는 과제를 수행했습니다. 단순한 기능 구현을 넘어, 사용자 경험(UX)과 코드의 안정성까지 고려하는 실전적인 프로젝트였습니다.본 포스팅에서는 주어진 요구사항을 어떻게 분석하고 기술적으로 해결했는지, 나아가 Intersection Observer를 활용한 무한 스크롤과 Context API를 이용한 다크/라이트 모드 전환 등 추가 기능을 왜, 그리고 어떻게 구현했는지 상세히 다뤄보겠습니다. 마지막으로 React Testing Library를 활용한 테스트와 GitHub Pages 배포, 그리고 프로젝트를 통해 얻은 교훈을 담은 KPT 회고까지 공유합니다.1. 프로젝트의 시작: 고객 요구사항 분석 .. 2025. 7. 19.
[인턴IN메타] React의 '왜'를 파고들다: 레거시 코드에서 배우는 최신 프레임워크의 본질 아는 것과 '설명할 수 있는 것'의 차이베테랑 개발자일수록 기본기의 중요성을 강조합니다. 저 역시 이번 인턴IN메타 1주 차 React 기본 개념 학습을 통해 그 중요성을 다시 한번 체감했습니다. 익숙하다고 생각했던 개념들이었지만, '왜 그렇게 동작하는가?'라는 스스로의 질문 앞에서 순간 머뭇거리게 되더군요.특히 퀴즈의 오답들은 React가 클래스 컴포넌트에서 함수형 컴포넌트와 Hook으로 진화해 온 이유를 명확하게 보여주는 '살아있는 역사'와 같았습니다. 이 글을 통해 단순히 'state는 변경 가능, props는 불가능'과 같은 단편적인 지식을 넘어, React의 핵심 철학과 발전 방향을 함께 고찰해보고자 합니다. 1. 틀린 문제에서 발견한 성장의 기회: React의 진화와 '왜'기존에 다수의 Rea.. 2025. 7. 13.
[React] map() 함수를 사용한 리스트 렌더링 : key 속성으로 반복되는 컴포넌트를 만들어 보자 1. map() 함수란?map() 함수는 JavaScript 배열 함수 중 하나로, 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과를 모아 새로운 배열을 반환한다. React에서 map() 함수는 주로 배열 데이터를 컴포넌트로 변환할 때 사용된다. JavaScript 사용 예시const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled); // [2, 4, 6, 8, 10]  2. React에서 map() 함수 사용하기React에서 map() 함수는 배열 데이터를 JSX 요소로 변환하는 데 자주 사용된다. 아래의 예시는 사용자 목록을 렌더링한 예시이다. 여기서 users .. 2024. 5. 18.
반응형