요구사항 정의 구현해야 할 기능 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들이 나오고 ..
Flux 패턴의 등장 배경 Flux 패턴은 페이스북(현 메타)에서 MVC 모델의 단점을 보완하기 위해 발표한 애플리케이션 아키텍처이다. 페이스북은 기존에 MVC 모델을 사용하였다. MVC 모델에서는 View가 다양한 상호작용을 위해 여러 개의 Model을 동시에 업데이트하고 Model 역시 여러 개의 View를 업데이트할 수 있는데, 새로운 기능이 추가되거나 규모가 커질수록 복잡한 데이터 흐름을 가지게 되어 예측 불가능한 코드를 만들게 되고 버그가 발생하게 되었다. 따라서 페이스북은 대규모 애플리케이션에서 데이터의 흐름을 일관성 있게 관리하여 프로그램의 예측 가능성을 높일 수 있도록, 단방향 데이터 흐름을 가진 Flux를 고안하게 된다. Flux 패턴이란? Flux 패턴은 단방향 데이터 흐름을 유지하는 ..
SPA와 MPA 표로 간단하게 정리하기 구분 SPA (Single Page Application) MPA (Multi Page Application) 정의 한 개의 페이지로 구성된 어플리케이션 여러 개의 페이지로 구성된 어플리케이션 특징 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한 번에 다운로드 한다. 새로운 페이지를 요청할 때마다 정적 리소스가 다운된다. 렌더링 CSR (Client Side Rendering) 방식 👉🏼 클라이언트 단에서 렌더링 진행 SSR (Server Side Rendering) 방식 👉🏼 서버 단에서 렌더링을 마치고 클라이언트는 받아서 실행 장점 리렌더링으로 인한 깜빡임이 없어 유연한 UI, 자연스러운 UX 구현이 가능하다. 유저가 보는 화면 방식이 웹 크롤러가 보는 방..
데이터 바인딩이란? 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 JS 객체)를 일치시키는 것을 말한다. 즉, HTML에서 변경된 내용이 데이터에 영향을 미치는 가를 말하는데, 이에 대한 차이를 기준으로 '양방향', '단방향' 바인딩으로 나눌 수 있다. 양방향 바인딩 양방향 데이터 바인딩의 대표인 AngularJS는 엘리먼트에 데이터를 바인딩하면 JS 코드로 데이터를 변경할 수도 있고, 엘리먼트의 값(input)을 수정해서 데이터를 변경할 수도 있다. 단방향 바인딩 React와 같은 단방향 바인딩은 JavaScript에서 HTML로만 데이터 바인딩이 가능하다. 즉, HTML에 바인딩한 데이터를 JS에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을 때 JS..
요구사항 정의 구현해야 할 기능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이 자주 리렌더링되는 것도 프론트엔드의 성능이나 성능 최적화에 안 좋은 영향을 주니? 항상 궁금한 성능 관련..
