목록전체 글 (74)
JS' 공부흔적
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..
formData는 우리가 HTML에서 form 태그를 사용하여 input 값을 서버에 전송하는 것 대신, 자바스크립트 단에서 폼 데이터를 다루는 객체이다. 주로 일반 데이터 말고 이미지 파일을 서버에 전송해야 할 때 formData를 사용하게 된다. RN으로 앱을 개발하던 중 리뷰 작성을 구현하기 위해 이미지 업로드 기능이 필요했다. 이때 formData를 사용했다. formData에 데이터를 저장하는 방법은 아래와 같이 append를 사용하면 된다. const formData = new FormData(); formData.append('rate', rating); formData.append('contents', message); formData.append('matchingId', matchingI..
이번 글에서는 리코일의 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..
개발을 하다 보면 모달창을 자주 사용하게 된다. 모달창은 보통 화면에 한가운데에 위치하게 되는데 이를 라이징 테스트에서 원티드를 클론코딩하며 내가 겪었던 과정과 함께 기술하겠다. 원티드에서는 대표적으로 로그인 및 회원가입에서 모달이 필요한데, 우선 가장 쉽게 떠올렸던 방법은 모달의 width와 height를 고정값으로 정했다. width: 500px; height: 500px; top: calc(50% - 250px); left: calc(50% - 250px); 위와 같이 화면 중앙에 모달을 배치했었다. 그러나 모달마다 크기가 다르기 때문에 이는 분명한 한계점이 있다. 그래서 생각한 방법은 width는 고정값을 주고, height를 다르게 받았다. left: `calc(50% - ${width / 2}..
오늘의집 클론코딩을 진행하면서 Axios로 api 통신을 하면서 에러가 발생했을 때, 지금까지는 catch문 안에 console.log(e)로만 출력을 했었다. 그치만 에러가 발생하는 경우는 여러가지가 있다. 예를 들어, 상품에 대한 리뷰를 작성할 때는 상품을 구매하지 않았는데 리뷰를 작성하려 할 때, 또는 이미 리뷰를 작성한 상품에 대해 또 리뷰를 작성하려고 할 때 에러가 발생한다. 이렇게 상황에 따른 에러 메시지를 출력할 때는 아래와 같이 작성하면 된다. axios.post(~) .then(~) .catch((e) => { alert(e.response.data.message); //메시지를 지정해 준 경우 }
Airbnb 클론 코딩을 진행하면서 로그인 드롭다운 메뉴를 구현하다가 해당 메뉴 밖의 어느 부분을 클릭하더라도 드롭다운 메뉴가 닫히도록 구현해보기로 다짐했다. useRef와 EventListener를 사용하여 구현했다. 기본적인 원리는 다음과 같다. 에서 "특정 영역"에 ref를 부여한다. 현재 페이지에서 클릭할 때마다 이벤트가 감지되도록 구현하고, 그때마다 close 함수를 호출한다. close 함수에서는 ref 영역(특정 영역)이 이벤트가 감지된 영역을 포함하는 지를 확인한다. 포함하지 않는다면 ref 영역(특정 영역) 외부를 클릭한 것이므로 이때 메뉴가 닫히도록 구현한다. 1. 에서 "특정 영역"에 ref를 부여한다. 나의 경우, 위에 두 영역을 "특정 영역"으로 설정해서 useRef를 2개 설정했..
단축 평가 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 논리합( || )과 논리곱( && ) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. 아래 예시를 통해 확인해보자. 'Apple' && 'Banana' // Banana 출력 'Apple' || 'Banana' // Apple 출력 이처럼 두 결과가 다른 것을 알 수 있는데 이유는 간단하다. 논리곱 연산자는 2개의 피연산자 모두 true여야 true를 반환하므로 2개의 피연산자를 모두 확인하여 마지막으로 확인한 피연산자의 값을 반환하는 것이고, 논리합 연산자는 2개의 피연산자 중 하나만 true이면 true를 반환하므로 이미 'Apple'이 true이므로 뒤는 평가하지 않고 바로 첫..