profile
안녕하세요, Frontend에 관심이 많은 주니어 개발자 권형석입니다. 공부한 내용이나 관심있는 정보를 글로 정리하며 익숙하게 만들고자 합니다.
post-thumbnail

Error Boundary

React는 16버전부터 컴포넌트에서 발생하는 에러를 기록하며, 깨진 컴포넌트 대신 fallback UI를 보여주는 ErrorBoundary라는 개념을 도입하였습니다.ErrorBoundary를 통해 컴포넌트에서 에러가 발생했을 때, 이를 캐치하고, 사용자들에게 에러가

2023년 5월 19일
·
0개의 댓글
·
post-thumbnail

Suspense

리액트의 suspense는 비동기적으로 로딩되는 컴포넌트를 처리할 수 있는 기능을 제공한다.Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다.suspense

2023년 5월 16일
·
0개의 댓글
·
post-thumbnail

useMemo

useMemo는 이전 값을 기억해서 성능을 최적화하는 용도로 사용된다. useMemo에서 memo는 memoization을 의미한다. 프로그램이 동일한 연산을 반복해야 할 때, useMemo hook에 의존하고 있는 배열인 의존성배열에 입력한 값이 변하지 않는다면 기존

2023년 5월 12일
·
0개의 댓글
·
post-thumbnail

React Quill 에디터 사용하기

사용하고 있는 패키지 매니저로 설치하면 된다.yarn add react-quill 또는 npm i react-quilltoolbar를 커스텀할 경우, CustomToolbar 컴포넌트를 만들고 import 해서 사용하면 된다. 최상단의 태그에는 toolbar를 id로

2023년 5월 10일
·
0개의 댓글
·
post-thumbnail

Access Token & Refresh Token

우선, Access Token과 Refresh Token은 JWT(Json Web Token) 방식의 보안 강화 방식이다. JWT 토큰에 대한 설명Access Token만을 통한 인증 방식의 문제는 만약 토큰이 탈취될 경우 보안에 취약하다는 점이다. Access Tok

2023년 4월 28일
·
0개의 댓글
·
post-thumbnail

React Query - 4 (병렬 & 종속 쿼리)

병렬 쿼리는 동시성을 최대화하기 위해 병렬 혹은 동시에 실행되는 쿼리이다.map 함수와 같은 반복문 메서드를 사용하면서, 그 내부에서 hook을 선언했을 때 자주 발생하고 보이는 에러react-hooks의 규칙(https://ru.react.js.org/doc

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

React Query - 3 (쿼리 키)

쿼리는 기본적으로 사용자가 부여한 유니크한 키값으로 구분되며, 프로미스 기반 메서드로 서버에서 데이터를 가져올 수 있다.컴포넌트나 훅에서 쿼리를 구독하려면 useQuery를 호출해야 한다.useQuery의 첫번째 파라미터는 사용자가 설정한 고유키값이고, 두번째 파라미터

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

React Query - 2 (stale data)

useQuery, useInfiniteQuery는 기본적으로 캐시된 데이터를 오래된 데이터 (stale data)로 간주한다.다만, 리액트 쿼리에서는 캐시된 데이터의 stale time을 조정할 수 있는 옵션을 기본으로 제공해주기 때문에 각 쿼리당 데이터를 refetc

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

React Query - 1 (필요성)

원격에 위치한 공간에 저장되며 앱이 소유하거나 제어하지 않는다.데이터를 가져오고 업데이트 하기 위해선 비동기 API가 필요하다.다른 사람과 소유권이 공유된다.Application에서 데이터가 잠재적으로 out-of-date 상태가 될 수 있다.out-of-date된 데

2023년 4월 27일
·
0개의 댓글
·
post-thumbnail

context API

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때, 속성값이 사용되는데 가까운 거리에 있는 몇 개의 하위 컴포넌트로 전달할 때는 속성값으로 충분하다. 하지만, 부모 컴포넌트와 가장 말단에 있는 컴포넌트 사이에 수천개의 컴포넌트가 있는 경우, 속성값을 내려주는 코드를

2023년 3월 30일
·
0개의 댓글
·
post-thumbnail

배열 고차함수 정리 ✍️ (map / filter / find / every / some / reduce / sort )

고차 함수는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 다시 말해, 고차 함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수도 있다.간단한

2023년 3월 21일
·
0개의 댓글
·
post-thumbnail

Git Rebase

emoji: 🎶title: git branchdate: '2023-03-03 13:10:00'author: 권형석tags: gitcategories: git gitbranch gitflowgithub.io 블로그에 작성했던 글을 옮겼습니다.<span style=

2023년 3월 21일
·
0개의 댓글
·
post-thumbnail

요즘 트렌드인 Tailwind CSS

부트캠프에서부터 지금까지 프론트엔드 스타일링 라이브러리중 하나인 @Emotion/styled-components를 사용해왔다.따로 styles.ts파일을 만들고, 그곳에 스타일링을 지정한 이후 사용할 컴포넌트로 import해온 뒤 적용해주는 방식으로.하지만 스타일을 수

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

자바스크립트 자료형 Set 🎆

new Set

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

사이트 배포 후에 이미지 엑박뜨는 오류

이미지 파일을 모두 public이라는 폴더에서 각 컴포넌트별로 하위 폴더를 만들어서 관리하고 있었다. 하지만 배포 후, 잘 뜨던 이미지가 갑자기 안뜨는것....구글링 결과, public에서 하위 폴더를 만들고 이미지를 불러온다면 오류가 발생할 수 있다고 한다.https

2022년 9월 30일
·
0개의 댓글
·

JSON

데이터를 문자열의 형태로 나타내기 위해서 사용된다. 이름이 암시하듯 JSON은 본래 자바스크립트에서 파생되었지만 현재는 거의 표준으로 자리잡아 대부분의 다른 프로그래밍 언어에서도 지원하는 데이터 포멧. JSON은 특히 네트워크를 통해 서로 다른 시스템들이 데이터를 주고

2022년 9월 23일
·
0개의 댓글
·
post-thumbnail

[에러 해결] git push error, git pull error

리모트에 로컬에 없는 사항이 들어 있으므로 업데이트가 거부되었습니다...You have divergent branches and need to specify how to reconcile them...힌트: 리모트에 로컬에 없는 사항이 들어 있으므로 업데이트가힌트: 거

2022년 9월 19일
·
0개의 댓글
·
post-thumbnail

JS Event loop

개념적으로는 처음에 이해하기가 힘들어서 코드와 결과로 먼저 확인해보기로 했다.export default function EventLoopPage() { const onClickTimer = () => { console.log("=======시작=======");

2022년 7월 1일
·
0개의 댓글
·

Immutable과 Mutable

ImmutableImmutable 객체는 내용이 변하지 않는 객체를 말한다. 객체는 다양한 이유로 불변적일 수 있는데,예시로 아래와 같은 경우가 있다.성능 향상을 위해 (객체의 변경에 대한 계획 없음)메모리 사용을 줄이려고 (전체 개체를 복제하는 대신 개체 참조 만들기

2022년 7월 1일
·
0개의 댓글
·