목록react (23)
JS' 공부흔적
API KEY는 개인 정보이다. 따라서 깃허브에 프로젝트 코드를 올릴 때는 이를 숨기고 올려야 한다. 이때 .env 파일을 생성하여 API KEY를 환경 변수로 설정해놓고 필요한 곳에서 불러다 쓰면 된다. 먼저 .env 파일을 만들자. 여기서 주의할 점은 .env 파일은 최상단 경로에 위치해야 한다! 그리고 아래와 같이 환경 변수를 선언한다. // .env REACT_APP_API_KEY = api key 입력 이때 환경 변수명은 꼭 REACT_APP_으로 시작해야한다. 또한 따옴표로 문자열을 감싸지 않아야 한다. 이와 관련된 내가 겪은 에러는 여기를 참고하면 된다. 이제 필요한 곳에서 환경 변수를 불러다 쓰면 되는데 아래와 같이 사용한다. const API_KEY = process.env.REACT_A..
Axios에는 인터셉터라는 것이 존재한다. 이는 서버에 요청이 전달되기 전과 서버로부터 응답을 받을 때 가로채서 특정 동작을 수행하도록 하기 위해 존재한다. 인터셉터와 react-spinners 라이브러리를 사용하여 api 요청을 할 때 로딩 중인 상태를 알 수 있도록 로딩바를 구현해보자. 아래 나올 코드는 이전 글과 이어지는 코드이다. [Axios] Axios 인스턴스 생성하기 지금까지 axios를 사용할 때는 아래와 같이 사용했다. const url = "https://jsonplaceholder.typicode.com/"; const getInfo = () => { axios .get(url + "posts") .then((res) => { console.log(res); }) .catch((e) ..
지금까지 axios를 사용할 때는 아래와 같이 사용했다. const url = "https://jsonplaceholder.typicode.com/"; const getInfo = () => { axios .get(url + "posts") .then((res) => { console.log(res); }) .catch((e) => { console.error(e); }); }; 또다른 방법으로는 인스턴스를 생성하여 사용하는 방법이 있는데, 이를 사용하면 사용자 정의 구성을 사용할 수 있다. 또한, axios를 모듈화함으로써 재사용성을 높일 수 있다. 이때 재사용성을 높이기 위해 커스텀 훅을 만들어 사용하겠다. // useAxios.js export const useAxios = () => { const..
웹 페이지를 보다 보면 커서를 올려놓았을 때 해당 색상이 바로 변하는 것이 아니라 서서히 변하는 것을 볼 수 있다. 예를 들면 애플 홈페이지의 header navigation 부분이 있다. 이를 구현하기 위해서는 css의 transition 속성을 사용하면 되는데, 자세한 것은 문서를 참고하길 바란다. 간단한 예제로 분홍색 버튼에 커서를 올려놓았을 때 베이지 색으로 변하도록 구현하겠다. 아래와 같이 버튼을 만들고 간단하게 스타일링했다. 참고로 React와 styled-components를 사용한 예제이다. const Home = () => { return ( GET ); }; const Btn = styled.button` all: unset; margin-bottom: 20px; border: 1px ..
useReducer는 reducer를 사용하여 다양한 상태를 다른 값으로 업데이트할 때 사용하는 Hook이다. 여기서 reducer란, 현재 상태 state와 업데이트를 위해 필요한 정보가 담겨있는 Action 값을 파라미터로 받아서 state를 변경하는 함수이다. Redux에서도 사용하는 개념이니 아래 글을 참고해도 좋을 것 같다. [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자. npm i 2junsu.tistory.com 참고로 Redux..
이번 글에서는 리코일의 selector에 대해 알아보도록 하겠다. selector selector는 리코일에서 관리하는 상태의 특정 부분만 선택할 때 사용한다. selector를 사용하는 이유는 최소한의 상태 집합만 atoms에 저장하고, 다른 모든 파생되는 데이터는 selectors에 명시한 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지하기 위함이다. 아래에 나올 코드에 대해 미리 말하자면, TempFahrenheit만을 atom에 저장하고, 이로부터 파생되는 tempCelcius는 굳이 보존하지 않기 위해 selector를 사용했다. selector는 key와 get 함수를 필수로 받아야한다. 또한 set 함수도 선택적으로 받을 수 있는데, get 함수만 사용하게 되면 selecto..
저번 글에 이어 리코일의 또 다른 개념에 대해 알아보도록 하겠다. [Recoil] 리코일의 기본 개념 (1) - RecoilRoot, atom, useRecoilState 리코일은 리액트를 위한 상태관리 라이브러리이다. CMC 11기 활동을 하며 리코일을 처음 도입해봤는데 기본 개념에 대해 기술하고자 한다. RecoilRoot 리코일의 모든 요소는 아래와 같이 RecoilRoot 내 2junsu.tistory.com 저번 글에서는 상태를 불러오고 변경하기 위해 useRecoilState를 사용했다. 이번에는 상태를 불러오기만을 위한 개념, 상태를 변경하기만을 위한 개념에 대해 알아보도록 하겠다. useRecoilValue useRecoilValue는 컴포넌트에서 업데이트 함수는 필요 없고 상태 값만 필요..
리코일은 리액트를 위한 상태관리 라이브러리이다. CMC 11기 활동을 하며 리코일을 처음 도입해봤는데 기본 개념에 대해 기술하고자 한다. RecoilRoot 리코일의 모든 요소는 아래와 같이 RecoilRoot 내에서 써야한다. Test 컴포넌트 내에 recoil을 사용할 것이다. //App.jsx import React from "react"; import Test from "./Test"; import { RecoilRoot } from "recoil"; const App = () => { return ( ); }; export default App; atom 리코일은 기본적으로 atom을 사용하여 상태를 정의한다. 리덕스의 initialState와 비슷한 개념이라고 생각하면 된다. atom을 만들 ..
라이징 테스트에서 원티드를 클론코딩하던 도중 이력서 작성 페이지에서 이슈가 발생했다. 실제 원티드에서는 textarea에 내용을 입력하면 라인수에 따라 textarea 영역이 늘어난다. 즉 아래 요소들이 아래로 밀린다. 그러나 나의 경우, textarea의 height는 고정돼있고 스크롤에 의해 글 내용이 보여졌다. 이를 해결하기 위해 useRef 훅과 onKeyUp, onKeyDown을 사용했다. const ref = useRef(); ... { autoResizeTextarea(ref); }} onKeyUp={() => { autoResizeTextarea(ref); }} className="detail" name="detail" placeholder="세부사항" onChange={handleInpu..
Airbnb 클론 코딩을 진행하면서 로그인 드롭다운 메뉴를 구현하다가 해당 메뉴 밖의 어느 부분을 클릭하더라도 드롭다운 메뉴가 닫히도록 구현해보기로 다짐했다. useRef와 EventListener를 사용하여 구현했다. 기본적인 원리는 다음과 같다. 에서 "특정 영역"에 ref를 부여한다. 현재 페이지에서 클릭할 때마다 이벤트가 감지되도록 구현하고, 그때마다 close 함수를 호출한다. close 함수에서는 ref 영역(특정 영역)이 이벤트가 감지된 영역을 포함하는 지를 확인한다. 포함하지 않는다면 ref 영역(특정 영역) 외부를 클릭한 것이므로 이때 메뉴가 닫히도록 구현한다. 1. 에서 "특정 영역"에 ref를 부여한다. 나의 경우, 위에 두 영역을 "특정 영역"으로 설정해서 useRef를 2개 설정했..