반응형 Frontend/React Frontend/React 2023. 2. 6. [React] fetch web APIs vs Axios 리액트 스터디에서 axios를 다루게 되어 기존 fetch Api와 Axios의 차이를 기록하려고 한다. 개요 JS를 사용할 때 서버에 네트워크 요청을 보내고 서버의 데이터를 받아와야 할 때가 있다. 가령 넷플릭스를 이용한다고 하면, 서버의 DB에서 영화 정보 등을 받아와야 한다. 이때 영화 정보 등을 받아오는 작업을 AJAX(Asynchronous Javascript And XML)라고 한다. 이때 중요한 것은 비동기적으로 응답을 받아온다는 것이다. 받을 수 있는 응답의 포맷은 JSON, XML, HTML 등 다양하다. 또한 JS는 네트워크 요청을 비동기적으로 해냄으로써 페이지 전체를 리프레시하지 않고 일부분만을 업데이트할 수 있게 해 준다. 이번 기록에서는 네트워크 요청에 많이 사용했던 fetch 메.. Frontend/React 2023. 1. 23. [React] Formik 라이브러리(Field,Formk, 버튼 선택) 이번 프로젝트 form 관리를 formik을 통해 하기로 결정돼 formik에 대한 공부 기록을 남기려고 한다. form state 관리에 사용되는 라이브러리인 react-hook-form에 대해 기록한 적이 있다. [React] react-hook-form 사용법(useForm, watch) 프로젝트 진행 중 로그인, 회원가입 기능을 구현하면서 react-hook-form이라는 편리한 API를 찾게 되어서 간단한 사용법을 기록하려고 한다. react-hook-form은 여러 개의 input 태그를 효율적으로 관리할 choi-records.tistory.com 하지만 지금 가장 많이 사용되는 라이브러리가 formik이기도 하고, 현재 진행 중인 프로젝트에서 사용되는 라이브러리이므로 formik을 공부해 .. Frontend/React 2023. 1. 16. [React] React Hook 동작 원리(useState,useEffect) 렉시컬 스코프, 클로저에 대한 공부를 하고 hook의 동작 원리에 대해 궁금해져 공부해 본 것에 대한 기록이다. 개요 지난 JS 기록에서 렉시컬 스코프와 클로저에 대해 다뤘다. [JS] 클로저를 이용한 정보 은닉 구현(클로저, 렉시컬 스코프 개념) 일급 객체를 공부하다 보니 렉시컬 스코프, 클로저에 대한 궁금증이 생겨 이에 대해 공부한 기록이다. Lexical Scope 렉시컬 스코프는 말 그대로 어휘의 범위이다. 변수가 사용 가능한 범위를 알기 choi-records.tistory.com 위의 기록에서 나아가 React Hook의 동작 원리를 이해해보려고 한다. 먼저 useState, useEffect 순서로 원리를 이해하고, 이를 바탕으로 다른 Hook들이 어떻게 작동하는지에 대한 원리를 이해할 것이.. Frontend/React 2023. 1. 9. [ReactJS] React 스터디(1)(node, VirtualDOM, CRA, npm&yarn, 컴포넌트) Virtual DOM virtual DOM에서는 이전 기록에서 다룬 적 있다. [React] 리액트 특징, 라이프 사이클 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 오직 사용자의 View 에만 초점을 맞춘다. 리액트의 대표적인 3가지 특징 JSX문법 의미 : 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 choi-records.tistory.com 간단히 말하면, Virtual(가상) DOM은 메모리에 가상의 DOM을 저장했다가 리렌더링시에 변경 사항을 반영해서 렌더링함으로써 성능을 향상한다. 자세한 설명은 위의 기록을 참고하자. 리액트 & NodeJS NodeJS는 자바스크립트의 런타임이다. 자바스크립트는 브라우저에서만 동작이 가능한 언어였다. 하지만 NodeJS가 자바스크립트.. Frontend/React 2022. 12. 29. [React] 폰트 깜빡임 현상 해결(Global Style, CSS) 프로젝트 진행 중 폰트 적용이 늦어지는 깜빡임 현상을 해결한 과정을 기록하려고 한다. 문제 상황 위에서 말했듯 컴포넌트가 렌더링 될 때마다 폰트 적용이 늦어져 깜빡임 현상이 일어났다. 처음에는 리렌더링을 막는 방향으로 해결해보려고 했다. 메모제이션을 사용하고, 관련 문서들을 찾아보며 리팩토링 해봤지만 해결되지 않았다. 근본적인 문제가 폰트 관련 문제이므로 폰트 적용에 문제가 있는 것이 아닌가 생각이 들었다. 해결 전 원래 폰트 적용은 styled-components의 GlobalStyle을 이용해 적용했다. import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; import GangwonEdu_OTFB.. Frontend/React 2022. 12. 18. [React] Recoil(Atom, Selectors, Atom Effects) Recoil 라이브러리의 Atom, Selectors, Atom Effects에 대한 공부 기록이다. Recoil 공식문서를 바탕으로 작은 프로젝트에 Reoil을 적용하는 과정을 기록할 예정이다. Motivation 컴포넌트의 상태는 공통된 상위 요소까지 끌어올려야만 공유될 수 있으며, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. 동기 | Recoil 호환성 및 단순함을 이유로 외부의 글로벌 상태관리 라이브러리보다는 React 자체에 내장된 상태 관리 기능을 사용하는 것이 가장 좋다. recoiljs.org 공식 문서의 첫 번째 동기에서는 전역 상태 관리 기능.. Frontend/React 2022. 11. 30. [React] Context, useContext, Recoil(전역 상태 관리) 전역 상태 관리에 대한 공부를 하던 중 React에서 지원하는 Context와 Recoil의 사용법과 차이에 대한 정리를 했다. 이에 대한 기록이다. Context API context를 사용할 때 고려해야 할 점 context의 주된 용도는 다양한 레벨에 네스팅된 많은 컴포넌트에게 데이터를 전달하는 것입니다. context를 사용하면 컴포넌트를 재사용하기가 어려워진다. 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있다. 데이터 값이 변할 때마다 모든 하위 컴포넌트에게 널리 Broadcast 하는 것이 context다. createContext createContext는 context 객체를 생성한다. import {createConte.. Frontend/React 2022. 11. 16. [React] CRA 프로젝트 초기 설정(ESLint,Prettier) 단기 프로젝트를 진행하면서 프로젝트 초기 설정을 해볼 기회가 생겨서 이에 대한 기록을 남기려고 한다. ESLint 개요 ESLint는 코드 스타일을 통일해주는 역할을 한다. 공식문서에서는 JS 코드의 문제를 발견하고 고쳐준다고 나와있다. 설치 먼저 CRA 프로젝트에서 진행하는 설정이므로 리액트 앱을 만들어준 후 ESLint를 설치해준다. ESLint는 코드를 통해 사용하는 것이 아닌 vscode에서 적용하는 것이기 때문에 패키지와 vscode의 ESLint extension을 설치해야 한다. $ npm create-react-app $ npm i -D eslint 몇 가지 질문이 나오는데 해당 프로젝트에 맞는 답변을 고르고 설치를 마치면 .eslintrc 파일이 생성된다. //.eslintrc.json .. Frontend/React 2022. 9. 30. [React] Server State&Client State,React-Query 프로젝트를 진행하면서 비동기로 처리되는 Server State와 Client State의 차이를 체감하고 React-Query를 공부한 기록을 남기려고 한다. Server State, Client State 배경 내가 Server State와 Client State의 차이를 체감한 것은 좋아요 기능을 구현했을 때이다. 그 이유는 이 간단한 기능을 구현하는데 서버와 클라이언트의 입장을 모두 고려해야 하기 때문이다. 서버 좋아요 개수 증가 요청을 받는다. DB에 좋아요 개수를 증가시키고, 응답을 보낸다. 클라이언트 하트 이모티콘을 누른다. 바로 증가된 개수를 확인한다. 여기서 좋아요 개수는 Server State로 비동기 요청이 이루어지는 데이터다. 때문에 요청이 이루어지면 기존의 값은 더이상 유효하지 않으.. 이전 1 2 다음 반응형
![[React] fetch web APIs vs Axios](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FqX1fs%2FbtrX8iWdyhg%2FAAAAAAAAAAAAAAAAAAAAALfIamcZHVZzk0hmZ5fRtBRoHxwLUa1bpOw9wv9e9U2L%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DB90cPnnkZHPpNwFiXQeqmPI9y5k%253D)
![[React] Formik 라이브러리(Field,Formk, 버튼 선택)](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcAsVLj%2FbtrWX54mOCX%2FAAAAAAAAAAAAAAAAAAAAAMZTDMFOnhxnLyo636r9KUsqliKzGBvRa9sNvy8ecAlZ%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DC%252BQ4ZoyJhuIpPCIPUNYFk0uOBK8%253D)
![[React] React Hook 동작 원리(useState,useEffect)](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdduoFb%2FbtrWdHEBu8t%2FAAAAAAAAAAAAAAAAAAAAAAIBR_DA72pe0ZXGJ9hL1Fvf6KxhMa68tUIKhKzVYswn%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DhTHKa%252BWsEhOUDFp%252FM7Poy%252BN4U1A%253D)
![[ReactJS] React 스터디(1)(node, VirtualDOM, CRA, npm&yarn, 컴포넌트)](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbTXPFK%2FbtrVOTRxVsJ%2FAAAAAAAAAAAAAAAAAAAAAFK3N-Obu3ZxSlIxKii8EX0Eglb-Cs9e7mAIpxik9K3d%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DIsiX8HLVJPfZpfBBDCez%252FyHOvJ0%253D)
![[React] 폰트 깜빡임 현상 해결(Global Style, CSS)](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbc0cNI%2FbtrUSwjAPjW%2FAAAAAAAAAAAAAAAAAAAAAHmvBLS2dULGHm1SnYTBQfPm6YhdnJj4pQw8I0150CyF%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DQESj7e3eYl%252F92ptSSY2na1KC%252BGI%253D)
![[React] Recoil(Atom, Selectors, Atom Effects)](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FnmYz7%2FbtrTRFWrEeh%2FAAAAAAAAAAAAAAAAAAAAAC-goei2dIGFiaugqJaj2sz9MQzdIWYMb5DhjtsIehnb%2Ftfile.svg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DHBr%252BGD0UmYEekGtPmVXYDFHVlG4%253D)
![[React] Context, useContext, Recoil(전역 상태 관리)](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2F2n4P6%2FbtrSMIlsBGw%2FAAAAAAAAAAAAAAAAAAAAAEiHwehEvMPJ483emd0tXG_zAOwVlvVfQnoC0g4GRjKh%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D6rcPAwND5%252B3oxC%252BYrNkx1fRlu6s%253D)
![[React] CRA 프로젝트 초기 설정(ESLint,Prettier)](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fo1EPy%2FbtrSPPEmd1i%2FAAAAAAAAAAAAAAAAAAAAAPeGq66uYBRaXD8kJp29NX8AMBHhHPK-sg64RhF-mXD-%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D1%252Bt0MpIRSd%252BdYeVfMESHdijT9vs%253D)
![[React] Server State&Client State,React-Query](http://i1.daumcdn.net/thumb/C230x230/?fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbuk4TF%2FbtrSLI0hzGn%2FAAAAAAAAAAAAAAAAAAAAAG9tygtNwFkAGhmrexmDxLInZUfXb5UsIsOnpIrwgBph%2Ftfile.svg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DgF7QR02v5DGqrGEwWOLhyCuQgzk%253D)