본문 바로가기

분류 전체보기

 (62)
[리액트 공식 문서] Reducer와 Context로 확장하기 Reducer와 Context - Reducer를 사용하면 컴포넌트의 state 업데이트 로직을 통합할 수 있다. - Context를 사용하면 다른 컴포넌트들에 정보를 전달할 수 있다. reducer와 context를 결합하기 - state와 dispatch 함수를 props를 통해 전달하느 대신 context에 넣어서 사용할 수 있는데, 이점은 prop drilling 없이 TaskBoard 아래의 모든 컴포넌트 트리에서 tasks를 읽고 dispatch 함수를 실행 할 수 있다. Reducer와 context 결합 방법 1. context를 생성한다. 2. state과 dispatch 함수를 context에 넣는다. 3. 트리 안에서 context를 사용한다. Step1: Context 생성하기 - ..
[리액트 공식 문서] context로 데이터 깊숙이 전달하기 context를 사용할 때 - 정보를 전달 할 때, 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달하는데, 중간에 여러 컴포넌트를 거쳐야할 때가 있는데, context를 이용하면 깊이 여부와 무관하게 아래 트리의 모든 컴포넌트에서 일부 정보룰 사용할 수 있다. props 전달의 문제 - 트리 깊숙이 prop을 전달해야 하거나 많은 컴포넌트에 동일한 prop이 필요한 경우 prop 전달이 장황하고 불편해질 수 있다. - 만약 최상위 컴포넌트와 멀리 떨어져있다면, state를 높이 끌어올리다보면 prop drilling이라는 상황이 발생한다. Context: props 전달의 대안 context를 생성합니다. 데이터가 필요한 컴포넌트에서 해당 context를 사용합니다. 데이터를 ..
[리액트 공식 문서] state 로직을 reducer로 추출하기 reducer를 쓰는 경우 - 여러 개의 state 업데이트가 여러 이벤트 핸들러에 분산되어 있는 컴포넌트는 과부하가 걸릴 수 있는데, 이 경우에 reducer라고 하는 단일 함수를 통해 컴포넌트 외부의 모든 state 업데이트 로직을 통합할 수 있다. reducer로 state 로직 통합하기 - 컴포넌트가 복잡해지면 컴포넌트의 state가 업데이트되는 다양한 경우를 한눈에 파악하기 어려워진다. (삭제, 추가 , 수정) - 컴포넌트가 커질수록 여기저기 흩어져 있는 state로직의 양도 늘어난다. - 복잡성을 줄이고 모든 로직을 접근하기 쉽게 한 곳에 모으려면, state 로직을 컴포넌트 외부의 reducer라고 하는 단일 함수로 옮긴다. useState에서 useReducer로 마이그레이션하는 방법 1...
[React+Typescript]EventSourece에 header 담기 문제 발생 리액트로 SSE 구현 중에 엑세스 토큰을 header에 담아서 보내야하는데, EventSource에서 headers를 넣을 수 없다는 오류가 발생했다. 'EventSourceInit'형식에 'headers'이(가) 없습니다. 원인 해결 EventSourcePolyfill 라이브러리를 이용해서 header 부분에 담을 수 있게 설정을 해주었다. 사용 방법은 아래와같다. const EventSource = EventSourcePolyfill || NativeEventSource; 최종 const EventSource = EventSourcePolyfill || NativeEventSource; useEffect(() => { if (!isLoading && getToken) { const fetc..
[React+Typescript]key of type of (icons)의 string 오류 문제 발생기존에 여러 icon svg를 사용하기 위해서 Icon 컴포넌트를 제작하였다.import { colorStyles } from '@/styles/color';import icons from '@/assets/index';import { ReactElement } from 'react';interface IconProps { iconType: keyof typeof icons; width?: number; height?: number; fill?: string; onClick?: () => void | undefined;}export const Icon = ({ iconType = 'alarm', width = 16, height = width, fill = colorStyles...
[비사이드 포텐데이] 10일간 해커톤의 여정 회고 포텐데이 신청 이번에 코드스쿼드를 수료 한 후에 8월달에 비사이드 포텐데이를 신청하고 기획자, 디자이너, 개발자와 4명이서 프로젝트를 진행했다. 코드스쿼드를 통해서, 팀프로젝트를 하면서 느낀 거지만, 나는 개인 프로젝트를 할 때보다, 팀 프로젝트를 할 때 더 신나하고 재밌어 한다는 점이다. 그래서 바로 새로운 프로젝트를 하고 싶었는데 그 전에 코드스쿼드를 하면서 진행하던 프로젝트를 좀 더 마무리를 짓고 시작하고 싶어서 수료는 6월말에 했지만, 포텐데이는 8월달에 신청하게 되었다. 직접 팀원 컨택 포텐데이를 신청하고, 신청한 사람들이 확정이 되면 기획자, 디자이너, 프론트엔드 개발자, 백엔드 개발자 따로 따로 명단 리스트들이 나온다. 그러면 거기서 본인의 자기소개서를 작성하고, 다른 사람의 자기소개서를 구..
[리액트 공식 문서] Quick start~ Thinking in React 컴포넌트 React 컴포넌트 이름은 항상 대문자로 시작해야 하고 HTML 태그는 소문자로 시작해야 합니다. export default 키워드는 파일의 주요 컴포넌트를 지정합니다 ... 또는 빈 ... 래퍼와 같이 하나의 공유 부모로 감싸야 합니다. 과 같은 태그를 닫아야 합니다. 데이터 표시하기 중괄호를 사용하면 코드에서 일부 변수를 삽입하여 사용자에게 표시할 수 있도록 JavaScript로 “이스케이프”할 수 있습니다. return ( {user.name} ); return ( ); JSX 중괄호 안에 문자열 연결과 같이 더 복잡한 표현식을 넣을 수도 있습니다: style={{}}은 특별한 구문이 아니라 style={ } JSX 중괄호 안에 있는 일반 {} 객체입니다. 조건부 렌더링 if문을 사용할 수..
[코드스쿼드] 12주차 회고록(4주차 프로젝트) 이젠 마지막을 달려서 이젠 프로젝트의 마지막 주가 되었다. 우선 이번 프로젝트를 하면서 아쉬웠던 점은 디테일한 점보다는 구현에 신경을 더 많이 썼다는 점이다. 문제가 발생했을 때도 이 점에 대해서 상세하게 문서화를 했어야 했는데, 이 점을 잘하지 못하고 넘어갔다는 점이 아쉽다. 다음 프로젝트에서는 구현보다는 좀 더 디테일한 면을 신경을 많이 써야겠다. 그리고 이번에는 정말 좋은 팀원들을 만난 거 같다. 문서화를 어떻게 하면 좋을지 구체적으로 알 수 있었고, 특히 깃헙의 기능 중에서 이슈, 프로젝트 등 다양한 기능들을 많이 사용해 볼 수 있었다. 또, 백엔드 분들이 백엔드 입장에서는 왜 이렇게 하면 좋은지 구체적으로 설명해주셔서 좋았고, 원하는 것을 요청드리면 바로 가능하다고 말씀도 해주시고, 백엔드 분들..

티스토리툴바