SW

0. Jest란? - 페이스북에서 만든 테스트 프레임워크 1. 사용 방법 1-1. 설치 npm install jest --save-dev 1-2. package.json의 scripts를 다음과 같이 수정 1-3. 코드 작성 * fn.js const fn = { add: (num1, num2) => (num1 + num2), }; module.exports = fn; * fn.test.js const fn = require('./fn'); test('1은 1이야.', () => { expect(1).toBe(1); }); test('2더하기 3은 5야.', () => { expect(fn.add(2, 3)).toBe(5); }); test('3더하기 3은 5야.', () => { expect(fn.add..

1. 참고 https://www.apollographql.com/docs/react/data/queries/ Queries Fetch data with the useQuery hook www.apollographql.com 2. update 1. polling 방식 쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화하려면 pollInterval 옵션을 설정해준다. 2. refetching 방식 polling 방식처럼 일정 간격으로 update를 하지 않고 특정 사용자 액션에 대한 응답으로 쿼리 결과를 refetch 해준다. refetch 를 refreshControl과 함께 사용하면 다음과 같다. 결과적으로, 화면을 아래로 당겨 새로고침하면..

0. Setup 리액트 네이티브 앱, 리액트 웹 어플리케이션이 있고, css 코드를 공유하고 싶을 때 사용한다. 왜냐하면 리액트 네이티브에 작업한 css코드는 사실 css가 아닌 JS object이기 때문이다. 이 포스팅에서는 SASS코드를 SASS설치 없이 사용하고, css파일 없이 css코드를 짤 수 있도록 해보겠다. 먼저 다음과 같이 디렉토리 구조 세팅을 하고 시작하겠다. 세팅 완료 후 다음과 같이 작성한다. 결과화면은 다음과 같다. 색상은 이 사이트에서 참고하였다. https://flatuicolors.com/ Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicol..

0. useEffect useEffect는 componentWillUnmount, componentDidMount, componentWillUpdate와 비슷하다. 이 모든 것과 동일한 function이다. react hooks로 작업할 때 중요하다. 다음 예시를 보자. useEffect는 ComponentDidMount, componentDidUpdate의 역할을 하기 때문에 시작하거나 버튼을 클릭할 때 콘솔에 hello가 찍힌다. useEffect의 첫번째 인자는 function으로서의 effect가 된다. 두번째 인자는 dependency이다. 만약 dependency(deps)가 있다면 effect는 (deps)리스트에 있는 값일 때만 값이 변하도록 활성화 될 것이다. 다음 dependency를 ..

0. react-native init 프로젝트 구조 react-native init test로 프로젝트를 생성하면 다음과 같은 구조를 볼 수 있다. android/ 안드로이드 네이티브 모듈을 담당하고 있다. 카카오톡으로 로그인하기처럼 react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 한다. ios/ ios의 네이티브 모듈을 담당하고 있다. node_modules 프로젝트와 관련된 모듈들이다. npm을 통해 설치한 모듈이 이곳에 위치한다. App.js 실제 디바이스에 표시되는 코드가 이곳에서 작성된다. App.js를 열어보면 View, Text 컴포넌트와 'Welcome to React Native!"같은 문자열이 있다. app.json 프로젝트의 이름과 앱..

0. Vanilla ToDo 간단한 ToDo에 Redux를 도입하는 과정을 잘 알기위해 먼저 다음과 같이 세팅한다. index.html index.js 위와 같이 코드를 작성한 후 실행시켜보면 항목을 추가할 때마다 ADD_TODO라는 action이 일어남을 콘솔에서 확인할 수 있다. 1. State Mutation Mutation은 변형이라는 뜻을 가지고 있다. Mutation의 예시를 보겠다. 아래코드에서는 friends를 변형한 것이다. 첫번째 friends에는 1명이 있었는데 두번째 friends에는 2명이 있다. 새로운 state를 create하고 그 새로운 state를 return할 것이다. mutation개념을 적용시킨 것은 다음과 같다. 이전 state를 가져온 후 text를 추가하여 ret..

0. Vanilla Counter Redux는 기본적으로 Javascript Application들의 state(상태)를 관리하는 방법이다. React뿐만 아니라 Angular, Vue.js, Vanilla Javascript 등 원하는 곳에 쓸 수 있다. 먼저 project를 시작하기 위해 다음과 같은 명령어를 실행한다. 디렉터리가 만들어지고 해당 디렉터리로 이동한다. redux를 사용하지 않는 버전을 보기 위하여 /src/index.js에서 간단하게 코드를 작성한다. yarn start 명령어를 실행하면 다음과 같은 화면을 볼 수 있다. 1. Store & Reducer redux를 사용하는 버전에 대하여 살펴보겠다. 먼저 redux를 사용하기 위해 yarn add redux(혹은 npm instal..

0. Hooks - Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능등을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. functional component에서 state를 가질 수 있게 해준다. 앱을 리액트 훅으로 만든다면, class component, componentdidmount, render 이런것들을 안해도 되고 모든것은 하나의 function이 되는 것이다. 이제 functional programming style이 되는 것이다. - 몇가지 Hooks를 알아보겠다. useTitle : react document 의..

0. 지리적 위치 정보 이용하기 모바일 앱에서 사용자의 위치를 안다는 것은 매우 중요하다. 리액트 네이티브는 지리적 위치 추적(geolocation) 기능을 기본적으로 제공한다. 이 기능은 플랫폼에 상관없이 동일하게 사용할 수 있다. 사용자 위치 얻어오기 사용자 위치를 얻어올 때는 navigator.geolocation을 호출하면 된다. getCurrentPosition은 성공 콜백(success callback), 에러 콜백(error callback), getOptions 이렇게 3개의 인자를 받는다. 성공 콜백만 필수 인자이다. 성공 콜백으로 전달되는 position 객체에는 좌표와 타임스탬프(time stamp)가 들어 있다. getOptions는 객체로서 timeout, enableHighAcc..

0. 스타일의 선언과 조작 리액트 네이티브는 모든 스타일이 자바스크립트 안에 존재하고 명시적으로 컴포넌트에 스타일 객체를 연결해야 한다. 리액트 네이티브에서는 스타일시트 대신에 자바스크립 기반의 스타일 객체를 사용한다. 먼저, 인라인 스타일을 사용할 수 있다. 인라인 스타일이 최선의 방법은 아니지만 문법적으로는 가장 간단하게 리액트 네이티브의 컴포넌트에 스타일을 적용하는 방법이다. 약식으로 간단히 스타일에 변화를 줄 때 쓴다. 많이 쓰는 방식은 StyleSheet.create방식이다. 반복적인 객체 할당을 줄여 성능적인 이점이 있다. 코드를 명확하게 구조화할 수도 있다. 한번 생성된 스타일은 변경할 수 없다(immutable). 두 개 이상의 스타일을 합치고 싶을 때 어떻게 해야 할까? style속성은 ..