본문 바로가기

항해99/실전 WIL | TIL

[TIL-015] React Lv3과제 에러 디버깅2 Today목표 : 4/26일 React Lv3과제 에러 디버깅2 ❗onClick이벤트 위임으로 인해 StOutCon 내부의 StModalCon까지 onClick이 전달되어 모달창 내부 클릭 시에도 모달창이 닫히는 현상 발생 시도한점 어제 해결하지 못했던 이벤트 위임 취소를 오늘 해결했다. 이전에는 이벤트를 전달하는 주체에서 e.stopPropagation()를 사용해야 한다고 생각하여 다음과 같이 외부 컨테이너에서 e.stopPropagation()을 실행했었는데 중단이 되지 않았었다. { type === "small" && onClick(); e.stopPropagation(); }} > 해결한점, 알게된점 오늘 이 부분을 다음과 같이 이벤트를 전달 받는 주체에서 이벤트 위임을 중단시켰더니 이벤트 위임.. 더보기
[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 속성에 새로운 함수가 할당.. 더보기
[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.. 더보기
[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.. 더보기
[TIL-011] Styled-component 동적으로 활용하기, 기술 면접 스터디 발표 Today목표 : 4/21일 Styled-component 동적으로 활용하기, 기술 면접 스터디 발표 알게된 점, Styled-component 파일 구조✅ src/ components/ Button/ index.js Button.styles.js Card/ index.js Card.styles.js 위 파일 구조를 참고하여 모듈화하여 styled-component를 사용하는 연습을 해야 할 것 같다. Styled-component 동적으로 활용하기✅ Styled-component에서 동적으로 style을 변경하고 싶어 구글링을 하면서 여러가지 방법을 찾아보았다. 하지만 보통 inline 방식이거나, switch문을 사용한다거나, 삼항 연산자나 && 연산자 등 내가 원하는 답을 찾기가 너무 어려웠다. 예.. 더보기
[TIL-010] 리액트 라우터(Router), 기술 매니저님 질문/응답 정리 Today목표 : 4/20일 리액트 라우터(Router), 기술 매니저님 질문/응답 정리 알게된 점, 리액트 라우터(Router)✅ 리액트 라우터를 공부하면서 정리한 내용을 포스팅하였다. [React] React-router-dom이란 무엇인가? Rounting이란? : Rounting : 경로 선택, 경로 결정 : 해당하는 페이지로 이동하기 위해 새로운 URL로 서버에 요청을 하면 그 응답으로 data를 받아 새로운 페이지를 보여주는 것, 즉 해당 경로의 페이지로 junvelee.tistory.com 기술 매니저님께 질문 / 응답✅ 1. SCSS 등에서 컴포넌트의 타입에 따라 스타일을 다르게 적용시키는 방법 먼저 todo-list에서 사용했던 방식으로 className에 inline으로 적용했을 경우,.. 더보기
[TIL-009] 리덕스(Redux)의 이해 및 활용 Today목표 : 4/19일 리덕스(Redux)의 이해 및 활용, todo-list에 Redux 적용 시키기 알게된 점, 리덕스(Redux)의 이해 및 활용✅ 다음 포스팅에 공부한 내용을 정리해 보았다. 리덕스(Redux)의 이해 및 활용해 보기 리덕스(Redux) ✅ 1. 리덕스란 무엇인가? = 전역 상태관리 패키지 라이브러리 '중앙 State 관리소'를 사용할 수 있게 도와주는 라이브러리다. - 리덕스가 필요한 이유 1) useState의 불편함 = props 드릴링 junvelee.tistory.com styled-component 사용해보기 ✅ styled-component를 사용해 보면서 느낀점 먼저 주의 : styled-component와 styled-component's'는 다르다... 설치.. 더보기
[TIL-008] 리액트 Hooks, 최적화 과정, VDOM 이해 Today목표 : 4/18일 리액트 Hooks, 최적화 과정, VDOM 이해 알게된 점, 리액트 Hooks(useContext, useCallback, useMemo, )✅ 1. useContext => react context API로 전역 데이터를 관리한다. 부모 -> 자식으로 데이터를 전달할 때. props으로 내려주면서, 드릴링 현상이 일어난다. - props drilling의 문제점 1. 너무 깊어지면(만약 단계가 100..이렇게) 어디에서 props를 내려주고 있는지 파악이 어려움 2. 어떤 컴포넌트에서 에러 발생 시 디버깅이 힘들어짐 useContexnt => 데이터를 전역 데이터로 관리함으로서 하위 컴포넌트에서도 접근 가능하게 하여 props 드릴링을 하지 않아도 된다. context의 필.. 더보기
728x90
반응형

티스토리툴바