본문 바로가기

Frontend

 (46)
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메서드의 첫 번째 인수는 테스트에 대한 설명을 넣고 두 번째 인수..
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-..
CSS position CSS position 프로퍼티는 해당 요소가 화면에 어떻게 위치할 것인지를 결정한다. static: 요소의 default 값이며, top, right, bottom, left, z-index와 같은 값에 영향을 받지 않는다. relative: 초기 요소의 위치는 static인 경우와 같지만 top, right, bottom, left, z-index와 같은 프로퍼티로 오프셋을 설정할 수 있다. z-index의 값이 auto가 아닌 경우에는 stacking context를 생성한다. absolute: 해당 요소는 일반적인 레이아웃 구성에서 벗어나 특정 공간을 부여받지 않는다. 해당 요소는 가장 가까운 위치를 가진 부모요소를 기준으로 위치가 결정된다. 해당 요소 역시 z-index값이 auto가 아니라면 ..
history, location, match History 히스토리 API는 여러 자바스크립트 환경에서 세션 히스토리를 관리할 수 있는 패키지이다. 히스토리의 종류로는 다음 3가지가 있다. 보통 히스토리 객체는 browser history를 의미한다. browser history란 HTML5의 history API가 지원되는 브라우저에서 사용되는 히스토리 객체이다. history 객체는 또한 다음과 같은 속성을 가진다. length: 히스토리 스택의 사이즈 action: 현재 액션 push, replace, pop location: 현재 location. location은 아래 속성을 가질 수 있다. pathname: (문자열)URL의 경로 search: (문자열)URL의 쿼리 문자열 hash: (문자열)URL의 해시부분 state: (객체) pu..
프론트 비동기 작업 이해하기(feat. React) 프론트 단에서 데이터를 랜더링할 때, 데이터를 먼저 패치받아야 한다. 따라서 위의 작업은 비동기 방식으로 진행 되어야 한다. 자바스크립트에서 비동기 작업을 처리하는 방법에는 여러가지가 있다. 그 중 몇 가지 방법에 대해 설명하겠다. 콜백함수 function increase(number, callback) { setTimeout(()=> { const result = number +10; if(callback) callback(result); }, 1000); } increase(0, result => { console.log(result); }) 하지만 만약 비동기적으로 처리해야할 작업의 수가 많아진다면 어떻게 될까? 작업의 수만큼 콜백의 깊이가 깊어지고 가독성이 매우 나빠지게 될 것이다. 우리는 이러한..
2021-06-22 :: React로 스탑워치 만들기 const [timer, setTimer] = useState(0); const [isActive, setIsActive] = useState(false); const countRef = useRef(null); const startTimer = () => { if (!isActive) { setIsActive(true); setTimer(0); countRef.current = setInterval(() => { setTimer((timer) => timer + 1); }, 10); } }; const stopTimer = () => { setIsActive(false); clearInterval(countRef.current); }; timer에 시간이 저장이 되고 아래와 같이 formatting을 ..
2021-05-21 :: useEffect 이번 글을 통해 useEffect 라는 Hook을 사용하여 컴포넌트가 마운트 되었을 때, 언마운트 되었을 때, 그리고 업데이트 될 때 특정 작업을 처리하는 방법에 대해 알아보겠다. Mount/Unmount 우선 마운트/언마운트를 관리해보자. import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(..

티스토리툴바