강릉의 바다를 처음 본 날을 잊을 수 없다. 자주 가던 서해 바다는 언제나 눈 끝에 뻘과 이름 모를 섬이 닿았다. 하지만 동해의 바다는 깊이도, 넓이도 가늠할 수 없는 지평선 같았다. 항상 넓은 곳으로 나아가고 싶은 꿈을 가진 내게 강릉의 넓은 바다는 괜스레 마음을 일렁이게 하는 무언가가 있었다. 많은 부트캠프 중에서 항해99를 선택한 이유는 여러 가지가 있었지만 그중 하나는 ‘항해’라는 단어에 영향을 받아서도 있다. 99일 동안 넓은 바다를 헤쳐가며 목표를 향해간다는 스토리텔링은 마음을 사로잡기에 충분했다. 나는 더 큰 세계로 갈 거니까. 매니저님, 동기들과 우왕좌왕 배를 조종하는 법을 배우며 천천히 나아간 지도 53일째가 되었다. 새로운 사람 만나기를 좋아하고 그 사람이 살아온 시간, 장점 등을 듣는..
요구사항 정의 구현해야 할 기능 1) 공통 UI 구현하기 API 명세서 작성하기 2) 본문 CRUD 구현 본문 리스트 조회하기 본문 조회하기 본문 추가하기 본문 삭제하기 본문 수정하기 3) 배포 json-server 서버 배포 (heroku 사용) 리액트 프로젝트 배포 (S3, vercel 등 자유) 필수 요구사항 동적 라우팅 사용 1개 이상의 Custom Hook 구현 Form에 유효성 검증 기능 적용 버튼 컴포넌트 1개로 모든 버튼 구현 배포된 결과물에서는 console.log()가 보이지 않도록 처리 .env를 이용해서 API 서버의 URL 코드 상에서 숨기도록 처리 프로젝트 설명 자신이 좋아하는 과자를 소개할 수 있는 웹페이지를 만들고자 했다. 2023.04.28 ~ 2023.04.30 기간동안 ..
요구사항 정의 구현해야 할 기능 Button styled-components를 이용해 구현하며, props를 적절하게 활용할 것 버튼 label에 선택적으로 아이콘을 넣을 수 있도록 구현 Modal 취소, 확인이 있고, overlay 클릭 시 모달이 닫히지 않음 닫기 버튼만 있고, overlay 클릭 시 모달이 닫힘 모달을 on 시키는 버튼의 형태는 각각 달라야 하며 위에서 만든 버튼 재사용 가능 Inpnut 일반 형식의 Input 숫자를 넣었을 때 3자리 숫자마다 ,가 찍히는 input form을 구현하고 각 inpnut에 값 입력 후 저장 버튼 클릭 시 { name: '아무 텍스트', price: '콤마가 없는 금액' } 을 alert에 표시 Select select 클릭 시 option들이 나오고 ..
요구사항 정의 구현해야 할 기능Create TodoRead Todos, TodoUpdate TodoDelete Todo 요구사항[공통]todos 데이터는 리덕스를 사용해 전역으로 상태 관리todos 모듈은 Ducks 패턴으로 구현 [메인 페이지]디자인과 화면 구성은 자유롭게 구현Todo의 상태에 '완료' 그룹과 '진행 중' 그룹을 나뉘어서 보이도록 구현Todo 추가 시 제목 input과 내용 input은 다시 빈 값이 되도록 구현input에 값이 있는 상태에서 상세페이지로 이동하는 경우, input의 value 초기화Todo의 완료상태가 true면 상태 버튼의 라벨을 취소, false면 라벨을 완료로 보이도록 구현Layout 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운..
요구사항 정의 구현해야 할 기능 UI 구현하기 Todo 추가하기 Todo 삭제하기 Todo 완료 상태 변경하기 (완료 ↔ 진행 중) 요구사항 디자인은 자유이나 화면 구성은 동일하게 진행 제목과 내용을 입력하고, 추가하기 버튼 클릭 시 Working에 새로운 Todo 추가 추가 완료되면 제목, 내용 input 빈 값으로 바뀌도록 구성 Todo의 isDone 상태가 true면 상태 버튼의 라벨을 취소, 상태가 false면 버튼의 라벨을 완료로 조건부 렌더링 Todo의 상태가 Working이면 위쪽에 위치, Done이면 아래쪽에 위치 Layout 최대 넓이는 1200px, 최소 넓이는 800px로 제한하고, 전체 화면의 가운데로 정렬 컴포넌트 구조는 자유롭게 구현하고 분리한 컴포넌트는 README에 작성 컴포..
리액트 기초 개념을 정리하다 궁금한 것들이 생겨 메모장에 정리하고 있었다. 그러다 아, chatGPT한테 물어보면 기다릴 필요 없이 바로 질문할 수 있겠군 싶어 이것저것 물어보았다. 대답에 또 궁금한 게 생기면 꼬리에 꼬리를 물고 질문해보기도 하고 정말 궁금했던 것들을 물어보기도 하고. 1. Virtual DOM을 초보자가 이해할 수 있도록 쉽게 설명해줘 어제 브라우저 렌더링의 결과물인 DOM에 대해 공부하고 리액트의 Virtual DOM과 무슨 차이가 있는 건지 계속 헷갈려서 질문했다. 더 효율적인 렌더링을 위해 VDOM을 쓴다는 건 알겠는데 그래서 정확히 어떻게 하는지! 2. 리액트에서 VDOM이 자주 리렌더링되는 것도 프론트엔드의 성능이나 성능 최적화에 안 좋은 영향을 주니? 항상 궁금한 성능 관련..
