썸네일 [🚨응급실 알리미] React-query에서 error 처리 프로젝트를 진행하면서 일관된 에러 처리에 대한 중요성을 느꼈습니다. 에러가 발생하면 사용자에게 적절하게 알리고, 일관된 방식으로 대응하는 것은 사용자의 경험을 향상 시키는데 큰 역할을 합니다. [응급실 알리미] 서비스의 발생할 수 있는 에러 상황과 대응 방법 응급실 알리미는 로그인 없이 응급실 정보를 제공하며, 정보는 일방향으로만 제공됩니다. 따라서 일반적으로 권한이 없는 유저가 접근했을때, 데이터 변경 HTTP 메서드에 따른 에러 처리를 하지 않았습니다. 1. get이 실패한 상황(api 요청 에러) 사용자 화면에 각 API에 따른 유의미한 메시지와 함께 toast 알림으로 표시한다. 새로 고침 버튼을 넣어 새로 고침을 유도하여 다시 API를 요청한다. 개발자 error 로그를 남긴다 2. 404가 발..
썸네일 [🚨응급실 알리미]React Query와 Router loader 함께 쓰기 응급실 알리미의 구조 설계 초기 때 Router의 loader를 사용하여 미리 데이터를 받아와 컴포넌트를 렌더링 하려고 하였습니다. 하지만 loader함수는 컴포넌트가 아니기 때문에 데이터를 가져오기 위해 useQuery훅이나 recoil의 상태 관리 훅을 사용할 수 없었습니다. 해결책을 찾지 못하고 차선책으로 API를 사용하는 공통 컴포넌트에서 React Query로 데이터를 가져와 rocoil로 관리하기로 하였습니다. 프로젝트 완성 후 리팩토링 과정에서 React Query와 Router loader를 연결할 수 있는 방법을 찾았고 그 과정을 정리한 글입니다 현재 상황 제일 최상위인 app 컴포넌트에서 모든 페이지에 사용하는 공통 API를 호출하여 Recoil 전역 변수에 업데이트합니다. 또 sele..
썸네일 [🚨응급실 알리미] Recoil과 React-query를 선택한 이유 🚨응급실 알라미, 상태 관리 라이브러리는 무엇을 선택할까❓ 필자는 FE 2명으로 구성되어 응급실 알라미 서비스를 개발하였습니다. 응급실 알라미는 경증 질환의 일반인을 대상으로 한 플랫폼으로, 공공데이터 API를 활용하여 필요한 데이터를 가져옵니다. 우리 팀의 고려사항은 다음과 같습니다. 공공데이터 API를 활용 상태 관리 라이브러리 미사용 경험 - 필자는 이 프로젝트를 통해 Redux나 다른 상태 관리 라이브러리를 처음 사용해보려고 합니다. 반면 다른 팀원은 이미 Redux를 경험한 상태입니다. 제한된 개발 기간(2주) 따라서 이러한 고려사항을 가지고 상태 관리 라이브러리 선택에 고민한 과정을 담은 글입니다. 1. Redux Redux는 상태 관리 라이브러리 중 가장 오래되고, 가장 많이 사용되는 라이브..
썸네일 Virtual DOM이 뭔가요? virtual DOM에 공부한 내용을 정리한 글입니다. 먼저, virtual DOM에 앞서서 DOM이 무엇이고, 가상 DOM이 나온 배경을 공부하기 위해 브라우저 로드 과정에 대해 짚고 넘어가겠습니다. 브라우저 렌더링 과정 브라우저는 아래의 단계로 로딩합니다. HTML을 파싱하여 DOM 객체 트리를 구성하고, 외/내부 css를 파싱하여 CSSOM 트리를 구성합니다. DOM 트리와 CSSOM트리가 생성되면 스타일을 매칭시켜주는 과정을 거쳐 렌더트리를 구성합니다. - 페이지를 렌더링 하는데 필요한 노드만을 가집니다. - 예를 들어 display:none인 속성을 가진 노드는 렌더트리에서 제외됩니다. 렌더트리를 기준으로 레이아웃을 배치하고 렌더트리를 화면의 픽셀로 변환(페인트)합니다. - 레이아웃 단계에서는 ..
썸네일 useState를 바닐라JS로 구현하기 이전 글에서는 React의 공식 문서를 참조하여 useState의 개념을 정리했습니다. 하지만 공부하는 과정에서 useState가 어떻게 동작하는지 내부적으로 구성되어 있는지 궁금했습니다. 그래서 JavaScript로 useState를 직접 구현해보면서 동작 원리를 이해하는 것을 목표로 했습니다. HTML 구조 설정 는 나중에 컴포넌트가 렌더링될 위치를 나타낸다. useState 함수 state 관리 state는 외부에서 관리를 한다. 내부에서 관리하게 되면 useState 실행할때마다 state를 초기값으로 변경되기 때문에! state는 state값이 있으면 state 값이고 없다면 초기값으로 저장된다. setState함수는 새로운 상태값을 받아 state 변수를 업데이트 하고, render 함수를 호..
[공식문서 톺아보기] batching / setState는 비동기인가요? batching(일괄처리)란? React는 state 업데이트 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 이 말의 의미는 React는 상태 변화를 비동기적으로 관리한다는 의미이다. 그렇기 때문에 리렌더링은 모든 state 업데이트 함수 호출이 완료된 이후에만 일어난다. ⇒ batching ⇒ 공식문서에선 음식점에서 주문 받는 웨이터를 예로 들고 있다. 웨이터는 한 가지의 요리만 듣고 주문을 넣는 것이 아니라 모든 주문을 받고 혹은 테이블에 있는 다른 사람의 주문을 받고 주문을 넣으러 간다 ⇒ 왜? 너무 많은 리렌더링을 하지 않아도 된다. 또 일부 변수만 업데이트된 반쯤 완성된 렌더링을 하지 않는다. React에서 batching을 사용하는 이유? 렌더링 횟수를 줄여 성능을 향상시킨다..
썸네일 [공식문서 톺아보기] useState() useState는 React에서 상태를 관리하는데 매우 중요한 hook이다. useState를 사용하면 컴포넌트의 상태를 추척, 관리할 수 있으며, 컴포넌트의 렌더링을 최적화하고 재사용성을 높일 수 있다. 아래의 내용은 공식문서 useState에 관한 내용을 정리한 글이다. useState() const [state, setState] = useState(initialState); 규칙 컴포넌트의 최상위 레벨에서 useState를 호출해야 한다. 주의! 반복문이나 조건문 안으로 호출 할 수 없음. 배열 구조 분해를 사용해 [someting, setSomething]과 같은 state 변수의 이름을 지정하는 것이 관계이다. 첫 번째 요소는 상태를 의미함. 첫 번째 렌더링 중에는 전달한 initialStat..
drawer navigation 에러 해결 '리액트 네이티브를 다루는 기술' 책을 읽고 실습하면서 drawer navigation 라이브러리를 설치 후 에러를 만났습니다. 에러 내용 Error: Failed to create a worklet. Did you forget to add Reanimated Babel plugin in babel.config.js? See installation docs at https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation#babel-plugin ., js engine: hermes 에러 원인 react-native-reanimated 라이브러리의 Babel 플러그인을 설정하지 않았기 때문에 발생하였습니다. 에러 해결 방..
썸네일 [python/파이썬] 리스트 요소 회전하는 4가지 방법 - 음수인덱스/문자열슬라이싱/%모듈/deque 안녕하세요! 맨덕입니다. 오늘은 알고리즘 문제를 풀다보면 일차원 리스트를 회전하여 푸는 문제가 많아 일차원리스트를 회전하는 방법 4가지에 대해 정리했습니다. 방법 1. 음수 인덱스를 활용하여 회전을 한다. : 음수 인덱스는 뒤에서 부터 접근한다. a = [1, 2, 3, 4, 5]을 n만큼 왼쪽으로 회전해라 def left_rotate(test_list, n): # 새로운 배열 만들고 초기화 new_list = [None for _ in range(len(test_list))] # [None, None, None, None, None] for i in range(len(test_list)): # 새로운 배열에 값 추가하기 new_list[i-n] = test_list[i] return new_list a..
comprehension 오늘은 comprehension에 대해 공부했습니다. 매번 for문을 돌려 조건에 해당되면 빈 배열에 추가하는 식으로 코드를 짜다가 빈 배열을 만들지 않고 바로 리스트 형태로 반환하는 문법을 찾았습니다. 하지만 간결한만큼 가독성이 떨어진다는 단점도 함께 공부했습니다. comprehension list,dictionary,set, generator comprehension이 있다. 코드가 간결하다 반복문으로 빈 배열을 만들고 추가하는 것 보다 속도가 빠르다. 새로운 배열을 만들때 유용하다. 하지만 가독성이 떨어진다는 단점이 있다 List Comprehension 표현식과 제어문을 통해 특정한 값을 가진 리스트를 간결하게 생성하는 방법 [표현식 for 변수 in iterable] [표현식 for 변수 in ..
썸네일 python 문자열 뒤집는 3가지 방법 - reversed / [::-1] / for 로꾸거 로꾸거 로꾸거 말해말!! 문자열을 뒤집는 3가지 방법을 정리했습니다. 1. slice로 문자열 뒤집기 먼저 slice에 대해 잠시 정리하자면, 문자열/list[시작 인덱스:끝 인덱스(포함X): step] 시작 인덱스 또는 끝 인덱스 또는 step을 넣지 않는다면, 전체를 뜻합니다. num = [1,2,3,4,5] print(num[::]) # [1,2,3,4,5] / 전체를 뜻함 print(num[2::] # [3,4,5] / index 2부터 끝까지를 뜻함 # step의 의미 => 증가폭을 뜻합니다. num = [1,2,3,4,5,6,7,8,9,10] num[1::2] # index 1번째부터 끝까지 2씩 증가하며 slice를 한다는 뜻 print(num[1::2]) # [2, 4, 6, 8, ..
가장 많이 쓰이는 print 공식문서로 톺아보기 python에서 아주 많이 쓰이는 print 단순히 console에서 쓴 코드를 확인하는 용도로만 생각했는데 공식 문서에서 한번 print에 대해 공부했습니다. 공식 문서와 console에 help 이용하기 공식문서사이트 console에 help(내장함수)를 치면 정보를 얻을 수 있습니다. Built-in Functions The Python interpreter has a number of functions and types built into it that are always available. They are listed here in alphabetical order.,,,, Built-in Functions,,, A, abs(), aiter(), all(), a... docs.python.org..
라이브러리 브랜드 그룹 | 맨덕`s 개발일기

티스토리툴바