본문 바로가기

전체 글

 (60)
[리액트 공식 문서] 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주차 프로젝트) 이젠 마지막을 달려서 이젠 프로젝트의 마지막 주가 되었다. 우선 이번 프로젝트를 하면서 아쉬웠던 점은 디테일한 점보다는 구현에 신경을 더 많이 썼다는 점이다. 문제가 발생했을 때도 이 점에 대해서 상세하게 문서화를 했어야 했는데, 이 점을 잘하지 못하고 넘어갔다는 점이 아쉽다. 다음 프로젝트에서는 구현보다는 좀 더 디테일한 면을 신경을 많이 써야겠다. 그리고 이번에는 정말 좋은 팀원들을 만난 거 같다. 문서화를 어떻게 하면 좋을지 구체적으로 알 수 있었고, 특히 깃헙의 기능 중에서 이슈, 프로젝트 등 다양한 기능들을 많이 사용해 볼 수 있었다. 또, 백엔드 분들이 백엔드 입장에서는 왜 이렇게 하면 좋은지 구체적으로 설명해주셔서 좋았고, 원하는 것을 요청드리면 바로 가능하다고 말씀도 해주시고, 백엔드 분들..
[코드스쿼드] 11주차 회고록(3주차 프로젝트) 공통 컴포넌트 구조 이번 프로젝트에서 공통 컴포넌트를 중점적으로 맡게 되었다. 저번에 기획서의 전체적인 구조를 살펴보지않고, 필요한 화면의 기획서만 쪼개서 살펴보다 보니, 공통 컴포넌트가 props가 변동되고, 스타일이 이중으로 적용되는 문제점이 발생되었다. 이 점을 해결하고자 기획서를 하나 하나 살펴보면서 어떤 스타일이 필요한지, 어디에서 이 컴포넌트를 사용하는지 구체적으로 파악을 하였다. 그래서 내부에서 스타일을 관리할 수 있게 정리하였고, props도 최대한 줄여보려고 노력했다. 이 컴포넌트 구현하면서 느꼈던 점은 구현을 빨리하려고 최소의 부분만 적용한 컴포넌트를 만들었는데, 처음부터 기획서를 꼼꼼하게 살펴보면서 공통 컴포넌트를 구현해야겠다는 점을 알게 되었다. 이렇게 꼼꼼하게 살펴봐도 예상치 못한..
[코드스쿼드] 10주차 회고록(2주차 프로젝트) 팀의 진행사항을 한 눈에 파악 우선 우리 팀의 첫번째 룰은 스프린트 계획을 세우고, 팀원들이 한 눈에 볼 수 있도록 스프린트 계획을 노션에 작성하는 것이였는데, 페어와 월요일 아침에 한 주의 스프린트 계획을 세워보았다. 이런 식으로 스프린트 계획을 세워보니 우리가 이번 주에 어떤 것을 해야하고, 서로 각자 어떤 것을 하면 좋을 지 한 눈에 볼 수 있어서 좋았다. 그래서 이걸 토대로 데일리 스크럼을 작성하고, 매일 아침 데일리 스크럼 시간에 팀원들과 공유하였다. 이렇게 공유하다보니, 각자 어떤 걸 했고, 오늘은 어떤 걸 하는지 진행 사항을 한 눈에 파악할 수 있어서 좋았다. 그 전에 프로젝트 했을 때는, 팀의 진행사항을 확인 할 수 없었고, 오로지 그 팀원이 잘 하겠지하면서 진행했었는데, 그 점이 잘못 되..

티스토리툴바