요구 분석부터 실제로 쇼핑몰 페이지 개발까지, 8주간의 촘촘한 기록

1. 오늘의 과업 리스트 📋+ 밑에 "상품 목록 페이지 구성", "상품 목록 페이지 요구사항 분석" 과업 2개가 추가로 있다. 2. 요구사항 분석과 작업 분배 전략1) 개발자의 역할 2) 요구사항 분석고객 만족을 위해서 시스템이 제공하는 기능과 특성들을 도출해 나가는 과정전체 프로젝트의 성공을 결정하는 중요한 단계고객이 원하는 기능을 정확히 파악실제 개발할 시스템의 기능을 정의효율적인 작업 분배 가. 현행 시스템 파악 나. 분석의 기준시스템을 계층적이고 구조적으로 표현인터페이스나 내부 시스템 구성요소 간의 인터페이스 분석분석 단계 이후의 설계와 구현단계에 필요한 정보 제공 다. 요구사항의 유형 라. 요구사항 개발 프로세스 3) 퀴즈학습한 내용을 바탕으로 퀴즈를 풀게 되어있다. 제출 후 결과를..

1. 오늘의 과업 리스트 📋 2. 사용자 관점 UX(User Experience)의 특징주관성(Subjectivity): 사람들의 개인적, 신체적, 인지적 특성에 따라 다르므로 주관적이다.맥락성(Contextuality): 경험이 일어나는 상황 또는 주변 환경에 영향을 받는다.총체성(Holistic): 개인이 느끼는 총체적인 심리적, 감성적인 결과이다.2024 시나공 정보처리기사 필기 기본서 참고 ❓사용자 관점이 대두된 배경- 차별성과 니즈 만족을 위해- 팬덤의 시대 → SNS와 브랜드 → 팬덤 활용 → 팬들과의 소통 3. 고객 관점1) 고객 유형 가. 부서별 고객인턴IN메타 체험 직종을 예시로 들어 설명했다.경영기획: 구성원(내부고객)광고마케팅: 소비자영업: 구매자(실제고객)여행상품: 구매자(실제..

1. 오늘의 과업 리스트 📋2. 주간 미팅프론트엔드에 새로운 기술 도입 제안IT 특성상 빠른 업데이트가 중요하지만, 동시에 기술 안정성도 중요하니 균형이 필요새 프레임워크 도입 후보군 조사 (기한: 다음주 수,목까지)슈킹 앱 개발 관련 (지난 주 미팅 토대로 진행중)2주차 일정표이번주 일정표를 보고 주간 계획을 세워보았다.[주간 계획 2주차]1. 요일 별 출근시간: 월 오후9시, 화~금 오후1시 2. 잘 배우고 싶은 주제: jest를 이용한 단위테스트 3. 잘 배우기 위해 어떻게 할 것인지: 배운 내용 기록하기, 관련 주제 추가 공부하기 3. 상품 목록 페이지 구현수님께서 개발 환경을 설정할 때 블로그를 참고하기도 하지만 개발자라면 공식 문서와 친해지는 것을 추천한다고 말씀하셨다. 😊 나는 이미 저번..

1. 오늘의 과업 리스트 📋 2. 회고의 이해1) 프로젝트 회고회고: 뒤를 돌아다봄, 지나간 일을 돌이켜 생각함프로젝트 회고: 프로젝트의 생명 주기에서 특정 시점에 프로젝트 구성원들과 함께 프로젝트의 진행상황 또는 결과물을 돌아보는 시간 혹은 미팅 2) KTP 회고 진행 순서 (50분)KPT에 대한 설명 (5분)Keep, Problem 작성 (5분)각자 작성한 Keep, Problem 공유 (10분)Try 작성 (7분)각자 작성한 Try 공유 (8분)팀 및 프로젝트에 활용할 Try&Action 선정 (15분) 3. 회고의 목적과 방법1) 회고의 목적지난 시간 동안 '잘 된 점'과 '아쉬운 점', 그에 따른 후기 등을 공유할 수 있다. 이를 기반으로 아쉬웠던 부분을 바로잡고 프로젝트가 좋은 방향으로 발전..

1. 오늘의 과업 리스트 📋 2. 코드 리뷰와 리팩터링1) 코드 리뷰 수행 과정 가. 코드 리뷰 준비코드 리뷰를 시작하기 전에 프로세스를 완료하는 데 필요한 모든 정보가 있는지 확인해야 한다. 어떤 종류의 소프트웨어인가?사용 대상은 누구인가?프로그램의 기대 실행 결과는 무엇인가?코드를 작성하는 데 우선순위는 무엇인가? (성능, 코드의 간결성, ...)위 항목들을 알지 못한 채 코드 리뷰를 시작하면 작업이 비효율적이며 코드 리뷰 진행이 중단될 수 있다. 또한, 코드 리뷰 프로세스를 시작하기 전에 테스트를 실행하여 코드 작동 방식을 더 깊이 이해하고 발생할 수 있는 버그에 대한 일반적인 추측을 가질 수 있다. 나. 코드 리뷰 체크리스트 - 디버그 : 코드 리뷰를 실행하려는 데에는 여러 가지 이유가 있지만..

1. 오늘의 과업 리스트 📋 2. 주간 미팅기획팀 요청) 웹 접근성을 위한 WCAG 가이드라인 기준 프로젝트 검토 요청글로벌을 고려한 WCAG반응형 웹 디자인 검토 - 다양한 디바이스에서 사용자 경험 최적화 방안2.1 기준, 표준에 맞지 않는 항목 체크2.0에는 맞출 수 있도록 대안 정리목요일까지 1차 검토4주차 일정표이번주 일정표를 보고 주간 계획을 세워보았다. [주간 계획 4주차]1. 요일 별 출근시간: 월~수 오후7시, 목 오후 9시, 금 오후4시2. 잘 배우고 싶은 주제: 기획 초안 작성, 발표 자료 준비3. 잘 배우기 위해 어떻게 할 것인지: 배운 내용 기록하기, 실습 미루지 않기 3. 4MAT - 기획하기 11) 기획의 목적기획- 조직의 가치향상을 위한 특정한 활동을 성공적으로 수행하기 위한..

1. 오늘의 과업 리스트 📋 2. 파워포인트 활용11) 색상색상은 문서의 옷! 기획 목적에 맞는 색상 컨셉을 정해서 전달력을 높임색 조합 활용하기스포이트 활용 (파워포인트 버전 확인 필요)브랜드 컬러, 컬러 헌트, 스킴 컬러 등의 사이트에서 고른 색 조합을 캡쳐해서 파워포인트에 가지고 온 다음, 원하는 색상 위에 스포이트를 대고 클릭해서 색상 사용다른색 (색 도구) → 사용자 지정 → RGB 또는 색상 코드 입력 2) 텍스트글꼴: 삐침 있는 글꼴 vs 삐침 없는 글꼴 (가독성에 차이가 있다)크기: 모두가 잘 보이는 크기, 통일된 글씨 크기 유지굵기: 글씨 굵기 변화로 내용 강조색상: 색상 차이로 강조, 비강조 표현자간: 좁은 글자 간격 → 응집력 → 가독성 향상줄간격: 발표 문서의 주요 줄간격 1.2..

1. 오늘의 과업 리스트 📋 2. 고객사 대상 리뷰1) docs/02.payments_review.md 파일 생성고객사가 보낸 이메일, 피그마 시안 등에서 요구했던 ui, 기능 등을 적는다. 2) 기능 동작 확인배포한 url에 접속하여 프로젝트의 각 기능을 실행하면서 작동 여부를 확인한다. 만약 동작하지 않는 기능이 있다면 그 부분을 표시한다. 3) 파일에 각 기능의 동작 상태와 기능을 설명전문 용어는 피하고 일반적인 언어를 사용해 작성한다. 3. 프로젝트 회고 및 액션 플랜 도출Keep: 시안에 맞는 디자인 구성, 요구사항에 맞춘 기능 개발, 좋은 팀워크, 생산성 높은 미팅 Problem: 일정 관리 실패, CI/CD 구축 실패 Try: 회의 더 자주하기, 기능 최적화 시도하기, CI/CD 구축 재..

1. 오늘의 과업 리스트 📋 2. MSW 이해1) 왜 모킹이 필요한가?개발자는 다양한 역할의 팀원들과 협업하게 된다. 제한된 일정 때문에 백엔드 개발과 프론트엔드 개발을 동시에 진행하는 경우가 생긴다. 프론트엔드에서는 백엔드가 제공하는 API를 호출해야 하는데, 서버가 없거나 아직 API가 완성되지 않은 경우, 혹은 가상의 API를 호출해 데이터 입출력을 테스트하고 싶을 때 모킹을 할 수 있다. 때로는 하드코딩을 통해 직접 가상의 데이터로 화면을 구성하지만 서버를 거쳐서 내려오는 데이터와 같은 형식이라고 보장하기 어렵다. 이런 불편함을 해소하기 위해 나온 것이 모킹이라는 개념이다. 2) 모킹이란?모의 데이터를 뜻하는 Mock을 만들어 활용하는 것이다. 애플리케이션의 개발과 테스트를 위해 실제 객체를 모..

1. 오늘의 과업 리스트 📋 2. 경청1) 경청의 개념과 중요성경청다른 사람의 말을 주의 깊게 들으며, 말하는 사람에 공감하는 능력 📍경청의 중요성우리가 상대방의 소통 내용에 관심과 흥미를 가지고 있음을 전달하며, 상대방으로 하여금 개방적이고 솔직한 의사소통을 하도록 촉진상대방을 인간적으로 존중함은 물론 그의 감정, 사고, 행동을 평가하거나 비판 또는 판단하지 않고 있는 그대로 받아들임2) 올바른 경청을 방해하는 요인내 생각에 집중한 상태짐작하기 (자기 확신)대답할 말 준비하기걸러내기 (상대방의 메시지 회피)내 기준 내세우기판단하기: 부정적 판단을 하거나 비판하기 위해 상대의 말을 듣지 않는 것조언하기: 타인의 문제를 본인이 직접 해결하고자 하는 것언쟁하기: 단지 반대하고 논쟁하기 위해서만 상대의 말..

1. 오늘의 과업 리스트 📋 2. 전체 페이지 연결 1) 상품 상세 페이지 구상상품 정보상품 사진브랜드 이름상품 이름가격구매 수량장바구니 담기 버튼관련 상품2) 마크업 구현function ProductDetail() { return ( 브랜드A 상품 이름 35,000원 1 ..

1. 오늘의 과업 리스트 📋 2. 완성한 쇼핑몰 페이지 문서화개발자는 코드를 작성하는 것뿐만 아니라 협업을 위해 문서화를 습관화 하는 것이 중요하다.1) 프로젝트 저장소에 마크다운 파일 생성2) 문서화 내용 작성프로젝트 개요: 쇼핑몰 연동 프로젝트는 상품 목록, 상품 상세, 결제 완료 페이지를 유기적으로 연결하고, 데이터 일관성을 유지하면서 사용자에게 매끄러운 쇼핑 경험을 제공하는 것을 목표로 합니다.개발 환경: React, JavaScript, BootStrap5컴포넌트 구조: ProductDetail : 개별 상품의 상세 정보와 같은 브랜드의 관련 상품을 표시합니다.PayCompleted : 결제 완료 후 총 결제 금액을 보여주고, 상품 목록으로 이동할 수 있는 버튼을 제공합니다.3) 중간점검접속할..