본문 바로가기

Frontend

(6)

바벨(Babel) 설정하기 바벨(Babel)을 왜 사용할까? 바벨은 트랜스파일러로 최신 자바스크립트(타입스크립트, JSX 포함)가 모든 브라우저에서 동작하도록 변환해 줍니다. 실행이 안되는 구버전 웹브라우저를 대응하기 위해 배포할 때에 예전 방식의 자바스크립트로 변환해서 배포하려고 사용합니다. 바벨 빌드 과정 파싱(Parsing): 코드를 분해하는 과정 변환(Transforming): ES6 -> ES5 변환하는 과정 출력(Printing): 변경된 결과물을 출력하는 과정 플러그인 바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타냅니다. 필요한 경우 플러그인을 직접 만든 커스텀 플러그인을 사용하거나 잘 만들어진 플러그인을 가져다 사용합니다. ex) .babelrc { "plugins": ["transform..

React-Query React-Query란? React 애플리케이션에서 데이터를 가져오기 위한 라이브러리입니다. 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 비동기 과정에서 데이터를 관리하기 편하게 할 수 있습니다. 사용하는 이유 아래와 같이 React는 데이터를 가져올 때 useEffect를 사용하고 useState를 사용하여 상태를 유지합니다. import React, { useEffect, useState } from "react"; import axios from "axios"; const App = function () { const [sate, setState] = useState([]); const load = async () => { const { data } = await axios.g..

CRA(Create React App) 웹팩 설정하기 CRA는 프로젝트 초기 세팅 및 복잡한 과정을 해결해줍니다. 예를 들어, 아래와 같은 명령어로 타입스크립트 환경의 리액트 프로젝트를 만들 수 있습니다. yarn create react-app my-app --template typescript 이렇게 프로젝트를 만들게 되면 바벨이나 웹팩 같은 종속된 라이브러리나 설정이 보이지 않습니다. 숨겨진 종속성 및 설정을 확인하고 수정하기 위해서는 eject 명령어를 사용해야 하는데 이 방법은 단방향 프로세스로 한번 실행하면 다시 원상태로 복구할 수 없고 이후 직접 유지보수를 해야 합니다. 기존 설정을 유지하면서 새로 추가하고 싶은 설정만 추가하는 방법 이 방법은 기존 설정들을 신경 쓰지 않고 원하는 설정만 적용할 수 있기 때문에 관리 및 유지 보수하기 좋습니다. ..

React에서 setInterval 사용하기 업데이트 함수 setState를 활용하여 구현 import { useEffect, useState } from "react"; import "./App.css"; function App() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { setCount((prev) => prev + 1); }, 1000); return () => { clearInterval(timer); }; }, []); return ( {count} ); } export default App; 위 소스는 1초마다 카운트를 1 씩 올려주는 코드입니다. useEffect 두 번째 인자에 빈 배열을 넣어 componene..

React 18 버전 업데이트 정리 1. Automatic Batching 자동 배치란 여러 개의 state 업데이트를 하나로 묶어 render 함수를 호출(리렌더링 성능 개선)하는 것을 말합니다. 기존 17 버전에서도 이러한 배칭 처리는 되었지만 비동기 부분에서는 자동 배치 처리가 되지 않았습니다. 하지만 18 버전부터는 비동기에서도 자동 배치 처리를 지원합니다. import { useState } from "react"; import "./App.css"; function App() { const [number, setNumber] = useState(0); const [boolean, setBoolean] = useState(true); const onClick = () => { setNumber((prev) => prev + 1);..

TDD (테스트 주도 개발) TDD(Test Driven Development)란? TDD란 Test Driven Development라는 약자로 테스트 주도 개발을 의미한다. 테스트는 서비스의 품질 확인 및 버그를 찾는 데 사용할 수 있다. 내가 작성한 코드가 예상하는 대로 동작하는지 검증하고 확인하는 것이다. 테스트 주도 개발은 무엇일까? 테스트 주도 개발이란 테스트를 통해서 개발이 이끌어지는 개발 방법론이다. 예를 들어, 아래와 같이 진행한다. 1. 테스트를 먼저 작성한다.(간단하게 어떤 결과가 예측되어야 하는지 기술하는 단계) 2. 작성한 테스트의 기능만큼의 개발을 진행한다. 3. 코드를 리팩토링 한다. 여기서 테스트를 작성하지 않은 부분은 구현하지 않는 것이다. 테스트 주도 개발은 위와 같은 사이클을 반복한다. 1. 먼저 ..

이전 1 다음

티스토리툴바