본문 바로가기

분류 전체보기

 (134)
JEST Jest는 페이스북에서 관리하는 자바스크립트 테스팅 프레임워크이다. 따로 설정해야할 사항이 없고 간결하고 직관적인 점이 특징이다. 사용 법은 아래와 같다. 1. 패키지 설치 npm i --save-dev jest npm을 이용해 jest 패키지를 개발용으로 설치한다. 2. package.json에 스크립트 변경 "scripts" : { "test": "jest --coverage" } --coverage 옵션을 부여하면 테스트 결과를 더욱 자세히 볼 수 있다. 3. 테스트 파일을 생성 테스트 파일의 형식은 {fileName}.test.js으로 한다. 테스트 파일 내에 테스트할 함수를 require한 뒤 test()메서드를 사용한다. test메서드의 첫 번째 인수는 테스트에 대한 설명을 넣고 두 번째 인수..
D3.js with React D3.js는 데이터에 기반해 문서를 조작하는 자바스크립트 라이브러리이다. D3는 HTML, SVG, CSS를 이용해 데이터를 생동감 있게 표현한다. const svgElement = d3.select(ref.current); svgElement.attr('width', width).attr('height', height); svgElement.append('g').attr('transform', `translate(${margin}, ${margin})`); React와 D3.js 모두 DOM에 대한 제어권을 갖기 때문에 이를 컨트롤 해주어야 한다. 해당 프로젝트에서는 useRef 훅을 통해서 할당받은 reference를 svg에 지정하고 아래 코드와 같이 select한다. 그리고 svg에 크기와 색상과..
React Navigation Hello React Navigation 웹에서는 a태그를 이용해서 쉽게 다른 페이지로 이동이 가능하다. 사용자가 링크를 클릭하면 해당 링크의 URL은 브라우저의 history 스택에 push된다. 사용자가 뒤로가기 버튼을 누르면, 브라우저는 현재 페이지를 stack에서 pop하고 그 아래에 있던 이전 페이지가 브라우저에 노출된다. 리액트 네이티브는 이와 같은 웹의 내부 기능을 사용할 수 없기 때문에 React Navigation과 같은 라이브러리가 필요하다. React Navigation의 네이티브 스택 네비게이터는 앱의 화면간 전환과 네비게이션 히스토리 관리 기능을 제공한다. 만약 하나의 스택 네비게이터만 사용한다면 웹과 개념적으로 비슷한 구조를 구축할 수 있다. React Navigation의 스택..
2021-07-31 :: Typescript 내용 정리 자바스크립트에서 primitive는 객체도 아니고 메서드도 갖지 않는 값이다. 타입스크립트에서 type은 non-primitive 값이다. ts에서 타입을 지정할때 type이라는 키워드를 사용해서 지정한다. 컴포넌트의 속성 children은 ReactNode 타입이다. react로부터 import한 FC타입 안에는 children 속성이 이미 포함되어 있기 때문에 ReactNode 타입을 따로 지정해줄 필요는 없다. react에서는 ComponentProps라는 타입을 지원한다. 이 타입은 다음과 같은 구문을 통해 사용하는 제너릭 타입이고 컴포넌트의 속성 타입을 알아낼 수 있다. type TouchableOpacityProps = ComponentProps; react-native는 StyleProp 타..
React Native 시작하기 npx react-native init projectName npx react-native start npx react-native run-android npx react-native init projectName --template react-native-template-typescript npm start npm run android npx react-native init 명령어를 통해 프로젝트를 시작해도 터미널 상에서는 패키지등이 설치되는 듯 보였으나 디렉터리 안에 들어가보면 아무 파일이 없었다. 당연히 npm start 명령어도 먹히지 않았다. --template react-native-template-typescript 옵션을 추가했을 때, 파일은 생성되었으나 여전히 npm start 명령어를 ..
react-chartjs-2 https://www.npmjs.com/package/react-chartjs-2 react-chartjs-2 React components for Chart.js www.npmjs.com import React from "react"; import { Bar } from "react-chartjs-2"; const data = { labels: ['1', '2', '3', '4', '5', '6'], datasets: [ { label: "Dataset 1", data: [12, 19, 3, 5, 2, 3], backgroundColor: "red", }, { label: "Dataset 2", data: [2, 3, 20, 5, 1, 4], backgroundColor: "blue", } ] }; c..
Private Route with React Router React Router은 React 생태계에서 가장 중요한 컴포넌트 중 하나이다. 우리는 먼저 예제를 통해서 private, public, restricted route와 같은 다양한 라우트를 설계하는 방법을 배울 것이다. 설명을 위해 아래 컴포넌트를 가진 간단한 어플리케이션을 만들어 보자. 1. Home: 모두가 접근할 수 있는 public 라우터 2. Dashboard: 권한을 가진 사용자만 접근할 수 있는 private 라우터 3. Sign-in: 권한을 가지지 않은 사용자만 볼 수 있는 restricted 라우터 Private Route PrivateRoute 컴포넌트는 모든 private 라우트를 위한 청사진이다. 만약 유저가 로그인 되어있다면 해당 컴포넌트를 렌더링하고 그렇지 않다면 sign-..
Git remote permission Error A라는 아이디로 최초 글로벌 유저 등록을 했고, 나중에 B라는 아이디로 다시 글로벌 유저등록해서 B아이디로 push를 진행하려 할 때, 그 push의 시점은 여전히 A라는 github 아이디를 찾고 있다. 키체인에서 github.com 인터넷 암호창에 들어가서 계정부분을 바꾸고 암호보기를 체크해준다. https://recoveryman.tistory.com/392

티스토리툴바