하나씩 배워나가는 개발일지

리팩토링 내용 2주간의 프로젝트 기간이 끝나고 다시 2주동안 리팩토링을 진행하기로 했다. 전에는 객실(룸) 이미지가 없었기에 기본 숙소 이미지로 대체했었지만, 이번엔 오픈 api에서 더 많은 정보를 불러와서 해당 내용들을 추가하는 방식으로 진행하기로 했다. 내가 진행한 리팩토링 내용은 다음과 같다. 카카오맵 API 추가 -> 숙소 위치 마커 렌더링 마커 클릭 시 커스텀 오버레이 렌더링 -> 클릭 시 길찾기 페이지 생성 숙소상세정보 API 변경에 따른 추가 정보 get 객실 추가 정보 처리 장바구니 API 변경에 따른 로직 처리 예약하기 API 변경에 따른 로직 처리 리팩토링 기간 2023년 12월 4일 ~ 2023년 12월 15일 결과물 - 객실 이미지 슬라이더 구현 - 이미지 없을 시 기본 이미지 렌더..

프로젝트 내용 패스트캠퍼스x야놀자 웹 프론트엔드 부트캠프 미니프로젝트를 진행했다. 주제는 다음과 같다. 본 프로젝트는 숙박 예약 서비스를 완성하는 것을 목표로 함 본 프로젝트의 개발 범위는 다음과 같다 - 회원 인증 ◼ 회원가입 ◼ 로그인 - 상품 조회 ◼ 전체 숙박 상품 목록 조회 (옵션) 카테고리를 임의 생성하여 분류하여 출력 ◼ 개별 숙박 상품 상세 소개 - 상품 선택 및 장바구니 담기 ◼ 숙박 상품 옵션 선택 ◼ 장바구니 담기 ◼ (또는) 바로 결제하기 - 장바구니 ◼ 장바구니 보기 ◼ 장바구니에서 주문하기 버튼 클릭 시, 예약(주문) 페이지로 이동 - 예약(주문) 하기 ◼ 만 14세 이상 이용 동의 (상세 설명서 X, 체크박스로만 간단히 처리) ◼ 결제하기 버튼 클릭 시, 상품을 주문한 것으로 ..

리덕스란? 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 리덕스 Data Flow Action: 간단한 JS 객체. 작업 유형을 지정하는 type 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성도 가질 수 있음 Reducer: 어플리케이션 상태 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부 상태 업데이트함 Redux store: 이들을 하나로 모으는 객체 저장소는 어플의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐 Dispatch: 스토어 내장 함수 중 하나로 리듀서에..

리액트에서 한 컴포넌트 안에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법에는 여러가지가 있음 React Context란? Context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공 React Context는 컴포넌트 트리의 깊이에 관계없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공 Context는 전역 데이터를 관리하는 데 사용 ex) 전역 상태, 테마, 서비스, 사용자 설정 등 Context API란? 전역 데이터를 Context에 담아서 사용하려면 먼저 Context를 생성해야 함 const MyContext = React.createContext(defaultValue); Cont..

이번 과제로는 JS를 이용한 사진 관리 웹사이트를 만들어보았다. 먼저 기본 화면을 봐보도록 하자. 로그인 화면 관리 시스템 화면 학생 정보 등록 화면 정보 입력 화면 정보 등록 완료 시 화면 학생 프로필 및 수정 화면 학생 정보 수정 화면 수정된 학생 정보 화면 선택 박스 체크 화면 선택한 객체 삭제 화면 학생 정보 부분 리스트(스크롤) 페이지 CSS를 이용한 애니매이션 화면 반응형 화면 [흐름] 다음과 같이 구성했다. 과제 기간은 약 10일로 지난 과제 기간보다 길었지만 생각없이 신청한 공모전, 교내 경진대회 등으로 시간을 다 날려먹어서 과제 할 시간이 약 4일정도밖에 없어서 요구한 필수 기능들만 구현을 했다. 파이어베이스의 파이어스토어 데이터베이스를 사용했고 웹페이지에서 등록하면 해당 객체 정보가 파..

지난 과제로 당근마켓 메인페이지를 만들어보았다. 멘토님께서 다음과 같이 리뷰를 해주셨는데, 내가 만든 웹사이트는 크게 어려운 기능이 없었어서, 코멘트가 따로 필요 없었던 것 같다. 그래서, 이번 리팩토링 시간에 지난 번에 구현하고 싶었는데 못했던 부분인 '반응형 웹사이트'를 만들어보고자 한다. 이게 당근마켓 메인페이지인데, 화면을 일정 크기 이상 줄이면 먼저 서치바가 없어지고 서치 아이콘이 생기고 거기서 더 크기가 줄어들면 리스트들이 없어지고 채팅하기 버튼이 없어지고 메뉴 아이콘이 생긴다. 먼저, 서치바 아이콘과 메뉴 아이콘을 일단 html 코드에 순서대로 넣어주고 화면이 클 때는 "display: 'none'" 으로 안보이게 속성값을 지정해주었다. 채팅하기 그리고 css에서 미디어 쿼리를 사용해 화면 ..

23/07/12 실시간 강의 개강 첫 날엔 OT를 진행하고 2일차부터 깃허브 강의를 시작했다. 첫 날은 로컬저장소 개념인 git을 배웠는데 이 부분은 예전에 다 정리해둬서 생략했다. 오늘은 브랜치 관련해서 배웠는데 프로젝트를 하면서 예전에 배웠지만 개념이 확실하지는 않아 제대로 정리해보려 한다. 개발할 때 브랜치를 나누는 이유 안전성을 위해 개발용 브랜치, 테스트용 브랜치 등등 main(deploy)을 배포용 버전으로 사용 develop 브랜치에서 개발을 다 마치면 main에 반영 브랜치 merge, rebase, pr 등에 대해 배웠는데 merge는 프로젝트하면서 자주 써서 잘 아는내용이라 기본적인 내용은 생략하고 fast-forward, rebase, pr에 대해 정리해보려한다. fast-forwar..