분류 전체보기321 Recoil 알아보기 왜 Recoil 인가? 컴포넌트가 사용하는 데이터 조각만 사용할 수 있고 계산된 selector 를 선언할 수 있으며 비동기 데이터 흐름을 위한 내장 솔루션도 존재한다. 동적 키로 atom 을 만들고, selector 에 인자를 보내는 등 간단하게 가능하다. Recoil 시작하기 npm install recoil 어플리케이션을 RecoilRoot 로 감싸고 데이터를 atom 단위로 선언해준다. useState 는 useRecoilState 로 대체해주면 된다. atom atom은 하나의 상태이다. 컴포넌트가 구독할 수 있는 리액트 state와 유사하다. 즉, atom의 값을 변경하면 그것을 구독하고 있는 모든 컴포넌트들이 모두 리렌더링 된다. 먼저 atom을 생성하기 위해 어플리케이션에서 고유한 키 값과.. 2023. 5. 8. QA 라이브러리, JEST! Jest QA는 과거 대비 고객 만족도가 중요해진 현대에 각광 받고 있는 분야로, 모든 서비스에서 QA를 부서를 따로 둘 수 없기 때문에 개발자가 직접 테스트를 하게 된다. 예전에는 모든 테스트를 하나로 수행할 순 없이 Mocha 나 Jasmin으로 실행했지만 실제로 값을 비교하는 것은 Chai, Expect 를 사용하고 테스트 케이스는 Sinon, Testdouble을 썼었다고 한다. 대체로 유사한 방식이지만 다른 부분이 있어서 어려움이 존재했는데, 위의 여러가지를 하나에서 전부 수행할 수 있도록 해준 라이브러리가 JEST라고 한다. Jest 세팅 npm i -D jest 테스트는 jest를 이용할 것이므로 package.json 파일에서 스크립트 test 를 jest 로 수정해준다. 이제 npm te.. 2023. 5. 5. 오픈API 사용하여 웹 사이트 만들기 정부에서 제공하는 공공데이터들이 있다. 백으로 서버를 만들기 대신, 이번엔 공공api를 가져다가 혼자 프로젝트를 해보며 사용해보기로 하였다. 오픈 API란 응용프로그램이나 서비스를 개발하는데 필요한 운영체제나 라이브러리 등의 특정 기능을 추상화하여 사용하기 쉽도록 만든 인터페이스 여러 사람들이 공동으로 사용할 필요가 있는 자원에 대하여 이 자원의 사용을 개방하고 사용자들이 자원에 대한 전문적 지식이 없어도 사용할 수 있도록 제공하는 것이라 한다! 나의 경우 레시피 api 를 가져올 생각이라 농림축산식품 공공데이터 포털 사이트에 회원가입 후, API 인증키 자동 발급을 받는다. 이는 타인에게 양도가 불가하며 인당 1개의 인증키로 관리 된다고 한다. 오픈 API 사용 신청 요청 (자동 승인 처리됨) 활용하려.. 2023. 5. 4. 리액트로 꾸미기 - CSS Modules, TailWind CSS CSS Modules Styled Components Emotion ... React 관련 CSS 툴에는 위처럼 여러 툴이 존재 그중에서도 CSS Modules 를 가장 많이 사용한다고 함 CSS Modules? 기존의 css 파일의 이름을 파일명.module.css 형태로 변경해준다! 그런다음 해당 css 파일을 사용해주는 컴포넌트에 import styles from '../styles/Section.module.css'; 해당 형식으로 style을 객체형태로 import 해준다. export default function Section() { return ( Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat eaque harum ne.. 2023. 5. 1. 이전 1 ··· 37 38 39 40 41 42 43 ··· 81 다음