본문 바로가기

항해9970

[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.
[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문을 사용한다거나, 삼항 연산자나 && 연산자 등 내가 원하는 답을 찾기가 너무 어려웠다. 예.. 2023. 4. 22.
[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으로 적용했을 경우,.. 2023. 4. 21.

티스토리툴바