profile
블로그 이사! https://hailey0930.github.io

[React] React Query 공부하기

GraphQL을 썼던 나는 회사에서 Rest API를 쓰면서 아주 다양한 불편함을 겪는 중... 동기 덕분에 React Query란 라이브러리를 알게 되었고, GraphQL을 썼던 때와 생김새가 비슷하다고 생각됐다 그래도 처음 쓰는 라이브러리이고 많이 사용되고 있는 라

2023년 1월 24일
·
0개의 댓글
·

[React] useRef with TypeScript

이 전에 부트캠프를 다니면서 useRef에 대해 살펴보았지만, TypeScript와 함께 조금 더 심도있게 (?) 살펴보자!TypeScript에서 useRef를 사용할 경우 제네릭과 초기값을 설정해야 한다.제네릭 : 값의 타입을 넣어준다.초기값 : 타입에 맞는 초기값을

2022년 12월 21일
·
0개의 댓글
·

[React] React Router

History 객체를 생성하고, 초기 위치를 상태로 만들고 URL을 참조한다.History 객체 ? History 객체는 History stack을 조작할 수 있도록 API를 제공하는 객체다. History stack은 접속 이력 스택으로 생각하면 된다. 브라우저의 뒤

2022년 11월 29일
·
0개의 댓글
·
post-thumbnail

[React] CRA 폴더 구조 알아보기

CRA는 Next.js와 달리 html 파일이 있다html 파일이 있다는 것도 혼란스러운데 public 폴더에 있다구요?CRA 폴더 구조부터 머리에 담아두자!index.html : 개발한 React 프로젝트를 브라우저에 나타내기 위한 파일React는 SPA이므로 하나의

2022년 11월 28일
·
0개의 댓글
·
post-thumbnail

[React] 상태관리와 전역상태관리 라이브러리

상태란 컴포넌트 내부에서 관리되며 어플리케이션의 렌더에 영향을 미치는 플레인 자바스크립트 객체이다. 변화하는 데이터 라고도 한다.상태들은 일관적이여야 한다. 즉, 서로 다른 컴포넌트에서 동일한 상태를 다룬다면 그 출처가 같아야 한다.예를 들어, 인스타 피드에 공유된 포

2022년 11월 21일
·
0개의 댓글
·
post-thumbnail

[React] 반응형 구현하기 (with react-responsive)

반응형 웹이란 태블릿, PC, 모바일 등 다양한 디바이스의 해상도로 접근할 때 불편함이 없는 서비스를 제공하기 위해 디바이스에 맞는 해상도에 따라 레이아웃과 스타일에 최적화를 해주어 사용자에게 편의성이 높은 UI 화면을 제공하는 것이다.media query란 CSS3에

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

브라우저 렌더링 과정과 React의 Virtual DOM

DOM(Document Object Model)은 브라우저 렌더링 엔진의 HTML parser에 의해 생성된 트리 구조의 Node 객체 모델이다.DOM의 목적은 JS를 사용하여 문서에 대한 추가, 삭제, 이벤트 처리 등을 처리하는 인터페이스 제공이다.HTML을 파싱하여

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

[React] React와 Next.js 비교하기

Next.js는 모든 페이지를 미리 렌더링 (pre-rendering) 한다.Next.js가 클라이언트 측에서 모든 작업을 수행하는 것이 아니라, 각 페이지의 HTML을 미리 생성하는 것이다.생성된 HTML은 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다.

2022년 11월 17일
·
0개의 댓글
·

[React] React 17 버전과 18 버전의 차이점

React 18에서는 기존에 사용하던 ReactDOM.render 대신 ReactDOM.createRoot가 도입되었다.React에서 Root란 렌더 트리의 가장 최상위 레벨이 되는 포인터를 말한다.React 코드를 DOM에 붙이는 역할을 한다.18 이전 버전에서는 R

2022년 11월 17일
·
0개의 댓글
·

[React] Batching과 렌더링 최적화

React 18버전부터 Batching이 더욱 강화되었다.Batching은 React에서 굉장히 중요한 개념이며 최적화에 크게 기여하고 있다고 하는데, 이번에 Batching에 대해 처음 알게 되었다...Batching에 대해 살펴보자!Batch는 '일괄'이란 뜻이다.

2022년 11월 17일
·
0개의 댓글
·

[React] sourceMap (with CRA)

CRA란 별다른 설정 없이 react 개발환경을 구축해주는 boilerplate이다.CRA를 활용할 경우 쉽게 환경설정을 할 수 있다는 장점이 있다.public 디렉토리에 index.html과 logo, favicon 등의 static asset 및 기본적인 리액트 코

2022년 11월 15일
·
0개의 댓글
·

CSS 사용법 (with React)

기존에 emotion을 사용하는 방법에 익숙해져 있어 CSS의 기본 사용법을 까먹었다CSS 기본 사용법을 React와 함께 살펴보자!Rreact 공식 레퍼런스에서는 명확한 스타일링 가이드르 제공하지 않는다.React 컴포넌트에 CSS 인라인 스타일을 바로 적용하는 것이

2022년 11월 11일
·
0개의 댓글
·

React eject

Create React App(CRA)이라는 boilerplate를 통해 하나의 프로젝트를 build할 수 있다는 점은 하나하나 dependency들을 설정하는 시간을 줄여준다는 장점이 있다!개발자들에게 불필요하고 복잡하고 도움이 안되는 반복적인 일들을 하지 않도록 도

2022년 11월 11일
·
0개의 댓글
·

[Codecamp-Week7] memoization

기능 구현에 급급한 코린이는 비효율성 같은건 따질 생각도 하지 못했다..!useState를 쓸 경우 useState를 제외한 모든 값이 리렌더링 된다는 사실을 인지하지 못하고 있었다.페이지가 리렌더링되는 과정을 살펴보고, 불필요한 리렌더링을 막을 수 있는 방법에 대해

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

[Codecamp-Week6] React vs Next

초반부터 항상 프레임워크가 뭔지 개념이 너무 애매했다6주차에 접어든 지금에서야 Next js를 매일 쓰다보니 프레임워크가 어떤 것인지 감이 좀 잡혔다!프레임워크 중 React와 Next js의 차이점에 대해 살펴보자!(Next js 안에 React도 포함되어 있다!)R

2022년 8월 11일
·
0개의 댓글
·

[Codecamp-Week5] React Currying

6주차에 쓰는 5주차 블로그..^^Currying이란 여러 개의 인자를 받는 함수의 일부 인자를 고정시키는 새로운 함수를 만드는 기법으로, React에서 많이 사용된다.매개변수를 하나만 사용하는 HOF라고 생각하면 될까..?기존 함수는 a, b 매개변수 두 개를 사용하

2022년 8월 10일
·
0개의 댓글
·
post-thumbnail

[Codecamp-Week5] React HOC vs HOF (with 권한 분기)

HOC, HOF 개념은 이전 글에서 공유한 Closure와 관련있다.Closure에 대해 모른다면 이전 글부터 숙지하기!HOC (Higher Order Component)는 보통 권한 분기를 위해 많이 활용되므로, 권한 분기에 대해 먼저 알아보자!권한 분기란 한글 그대

2022년 8월 7일
·
0개의 댓글
·
post-thumbnail

[Codecamp-Week5] Global state (Redux, Mobx, Context API, SWR)

자유게시판 작업을 하는 동안 항상 props drilling 때문에 머리가 아팠다넘겨주는 곳에서도 다 써줘야하고, 받는 곳의 types 파일에도 다 써줘야하고...이번 블로그는 이러한 고민을 어느정도 덜게 해 줄 Global State(전역상태관리)에 대해 살펴보고자

2022년 8월 2일
·
0개의 댓글
·

[Codecamp-Week4] useEffect

이전 글에선 class형 component에서의 lifecycle을 살펴보았다.이번 글에선 functional (함수형) component의 lifecycle에 대해 살펴보자!함수형 컴포넌트에서는 class 컴포넌트와 달리 useEffect 하나로 다 해결 할 수 있다

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

[Codecamp-Week4] useRef

React에는 다양한 Hook이 있다.Hook 중 하나인 useRef에 대해 알아보자!useRef란 useState처럼 React Hook 중 하나로, HTML 태그를 변수에 저장하도록 도와주는 역할을 한다.따라서 focus를 선택하거나 하나의 태그를 다른 태그로 대체

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