본문 바로가기

항해99/실전 WIL | TIL25

[TIL-017] JSON-Server / fetch와 axios 차이 / 면접 스터디 3회차 Today목표 : 4/28일 면접 스터디 3회차 JSON - Server ✅ 아주 간단한 DB와 API 서버를 생성해주는 패키지다. 사용 목적 : 백엔드와 협업 시에 백엔드의 DB구축과 API Server가 완성될 때 까지 프론트에서 개발에 임시적으로 사용할 mock data를 생성하기 위함 => json-server를 통해서 임시 API를 구축하고, 서버의 data를 mocking(흉내,모의) 할 수 있으며 이것을 통해 선제적으로 FE 개발을 진행할 수 있다. 사용 방법 1. json-server 설치 => json-server는 보통 4000번 port를 이용한다. yarn add json-server yarn json-server --watch db.json --port 4000 2. db.json.. 2023. 4. 29.
[TIL-016] React Lv2과제 모범 답안과 비교 / 숙련 주차 시험 Today목표 : 4/27일 Lv2과제 모범답안과 비교 ❗todo-list 모범답안과 내 코드 비교하기 1. working zone / done zone filtering 코드 내코드 {done === true && todos .filter((todo) => todo.isDone) .map((todo) => { return ; })} {done === false && todos .filter((todo) => !todo.isDone) .map((todo) => { return ; })} 모범 답안 todos.filter((item) => { return area == 'workingZoen' ? item.isDone == false : item.isDone == true }).map((item) => {.. 2023. 4. 27.
[TIL-015] React Lv3과제 에러 디버깅2 Today목표 : 4/26일 React Lv3과제 에러 디버깅2 ❗onClick이벤트 위임으로 인해 StOutCon 내부의 StModalCon까지 onClick이 전달되어 모달창 내부 클릭 시에도 모달창이 닫히는 현상 발생 시도한점 어제 해결하지 못했던 이벤트 위임 취소를 오늘 해결했다. 이전에는 이벤트를 전달하는 주체에서 e.stopPropagation()를 사용해야 한다고 생각하여 다음과 같이 외부 컨테이너에서 e.stopPropagation()을 실행했었는데 중단이 되지 않았었다. { type === "small" && onClick(); e.stopPropagation(); }} > 해결한점, 알게된점 오늘 이 부분을 다음과 같이 이벤트를 전달 받는 주체에서 이벤트 위임을 중단시켰더니 이벤트 위임.. 2023. 4. 27.
[TIL-014] React Lv3과제 에러 디버깅 Today목표 : 4/25일 React Lv3과제 에러 디버깅 ❗onClick ( ) 리팩토링 전 에러 구문 onClick={ type === "small" && onClick; } 리팩토링 후 구문 onClick={() => { type === "small" && onClick(); }} onClick={ type === "small" && onClick; } 코드에서는 onClick 속성에 조건문이 포함되어 있으며, type 값이 "small" 일 때에만 onClick 함수가 실행됩니다. 그러나 이 코드는 올바른 자바스크립트 구문이 아니므로 에러가 발생합니다. onClick={() => { type === "small" && onClick(); }} 코드에서는 onClick 속성에 새로운 함수가 할당.. 2023. 4. 26.
[TIL-013] REST API란 무엇인가? Today목표 : 4/24일 REST API란 무엇인가 REST API, RESTful 하다?✅ REST API란 무엇인가? 항상 채용 사이트에 들어가보면 개발자 채용 공고에서 볼 수 있었던 단어가 REST API사용, RESTful API... RESTful하게 개발하는 것을 지향하는 등 의 말들을 자주 볼 수 있었다. 오늘은 REST가 무엇인지, RESTful하다는게 무엇인지 공부했다. 1. REST API URI를 통해 정보의 자원을(only 자원만을) 표현하고, 자원의 행위는 HTTP Method로 명시한다. RE : Representational / S : State / T :Transfer의 약자 => '상태 이동을 표현/나타낸다' => 어떤 자원에 대해 CRUD를 진행할 수 있게 HTTP M.. 2023. 4. 25.
[TIL-012] 리덕스 실습 및 이해, styled-component 리팩토링 Today목표 : 4/22일 리덕스 실습 및 이해, styled-component 리팩토링 알게된 점, Redux 상태관리 state의 구조✅ state를 처음에는 다음과 같이 배열로 구상하였다. const initialTodos = [ { id: 1, title: "리액트 공부중", text: "재밌는 리액트 공부하기!", isDone: false, }, ]; 리턴도 역시 배열로 리턴해 주었었다. export const todos = (state = initialTodos, action) => { switch (action.type) { case ADD_TODO: return [...state, action.payload]; case DELETE_TODO: const deletedTodos = stat.. 2023. 4. 23.

티스토리툴바