본문 바로가기

Client

 (40)
<Front-end> 쓰로틀링과 디바운싱 1. 소개 - 최근에 수많은 이벤트를 발생시킬 수 밖에 없는 부분을 개발하면서 고민에 빠졌었다. 이 정도로 많은 요청이 있을때마다 이벤트를 발생시키는 것이 옳은건지, 이것을 최적화 할 수는 없는지 고민을 했다. - 예를 들면 사용자가 스크롤을 내릴 때마다 특정 함수를 발생시킨다고 가정하자. 스크롤 좌표가 바뀔때마다 함수가 실행될텐데 정말 이것이 올바른 방법일까? - 이러한 의문에 쓰로틀링과 디바운스에 대해 공부해보라는 조언을 받았고, 이렇게 정리해보려 한다. - 참고로 제목에서는 프론트엔드의 기술이라고 썼지만, 이는 순전히 필자가 웹 프론트엔드 개발자이기 때문이다. 그렇기 때문에 아래에서도 웹을 예시로 들 예정이다. 디바운싱과 쓰로틀링은 프로그래밍 기법 중 하나임을 명심하길 바란다. 2. 쓰로틀링 * 의..
<리액트 기초> 동적 라우트 매칭 * 동적 라우트 매칭 - 지난 장에서는 라우트를 3개만 사용했으나 이 이상으로 갯수가 늘어나면 너무 방대해지고 관리하기 힘들기 때문에 동적 라우트 매칭을 사용한다. import React from 'react'; import { BrowserRouter, Route, Link} from 'react-router-dom' import GameMatcher from './GameMatcher' const Games = () => { return ( 숫자야구 가위바위보 로또 게임 매쳐 ); }; export default Games; - 이 때에는 새로운 컴포넌트를 만들어서 기존의 라우터들을 관리하게 되고, 여기서는 그것들을 관리하는 하나의 라우트만 작성한다. 이 때 :name 부분을 파라미터 또는 param..
<리액트 기초> 리액트 라우터 * 리액트 라우터 도입 - 리액트 라우터는 하나의 웹사이트에서 마치 여러개의 웹사이트를 이동하는 경험을 제공해준다. - 리액트 라우터를 사용하기 위해서는 먼저 터미널에서 설치를 해야한다. npm i react-router npm i react-router-dom - 실제로 쓰는 건 React-Router-DOM이다. 리액트라우터 돔이 리액트라우터의 일부를 꺼내어 활용한다. * 리액트 라우터 사용 - 기존과 같이 Client.jsx에서 index.html의 root태그에 돔으로 접근하도록 하고, 별도의 Games.jsx 컴포넌트 파일을 만들었다. 여기에 지난 시간까지 만든 게임들의 링크를 넣어서 이동하도록 할 것이다. import React from 'react'; import { BrowserRouter..
<리액트 기초> Context API * 소개 - 지난 장까지 우리는 부모와 자식관계가 다중관계일 때 props를 물려주기 위해서 한단계씩 아래로 물려주었다. 이는 가독성뿐만 아니라 유지보수를 하기도 번거롭다. - 위와 같은 상황에서 더 간편하게 props를 물려주게 도와주는 것이 ContextAPI이다. * 사용 - Form이라는 컴포넌트 파일에 main컴포넌트인 MineSearch에서 dispatch를 넘겨주려고 한다. Form은 다음과 같이 작성되어있다. const Form = () => { //... const onClickBtn = useCallback( (e) => { dispatch({ type: START_GAME, row, cell, mine}) },[row, cell, mine]); return ( 시작 ) }; expor..
<리액트 기초> useReducer · useReducer * 소개 - useReducer은 리덕스의 일부 기능들을 사용하게 해준다. - 비동기 부분 처리를 위해서 리덕스를 써야하지만 reducer와 context로 일부 대체가 가능해졌다. * 사용 - 틱택토 게임을 만들기 위해서 3x3 표를 만들 것이다. const TicTacToe = () => { const [winner, setWinner] = useState(''); const [turn, setTurn ] = useState('O') ; const [tableData, setTableData] = useState([ ['','',''], ['','',''], ['','',''] ]); //... } - 표를 만들기 위해서 2차원배열을 만들었다. 현재 컴포넌트는 TicTacToe..
<리액트 기초> useMemo & useCallback * useMemo - 지난 장에서 보았던 컴포넌트를 이어보자. function getWinNumbers() { // winNumbers라는 배열에 숫자 6개를 넣어서 반환하는 함수 } const Test0 = () => { const [winNumbers, setWinNumbers] = useState(getWinNumbers()); const [winBalls, setWinBalls] = useState([]); const [redo, setRedo] = useState(false); const timeouts = useRef([]); //... } - 여기서 개선할 사항이 하나있다. 함수형 컴포넌트는 state의 변경에 의해서 랜더링 될때마다 컴포넌트 전체가 다시실행된다. 즉 여기서는 state가 바..
<리액트 기초> useEffect * useEffect - 지난 장에서도 봤듯이 useEffect는 Hooks에서 componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 한다. - 이번 장과 다음 장에서 다룰 예시는 함수로 랜덤한 숫자 6개를 배열에 담고, 그 숫자들을 1초간격으로 하나씩 보여주는 것이다. 추가로 버튼을 누르면 새로운 숫자 6개로 다시 시작한다. function getWinNumbers() { // winNumbers라는 배열에 숫자 6개를 넣어서 반환하는 함수 } const Test0 = () => { const [winNumbers, setWinNumbers] = useState(getWinNumbers()); const [winBalls, setWinBal..
<리액트 기초> setInterval 사용하기 1. 리액트 라이프 사이클 * 라이프 사이클 - 클래스 컴포넌트에서는 랜더링이 되는 순간, 즉 컴포넌트가 돔에 붙는 순간 특정 기능을 실행할 수 있다. 그리고 리랜더링 될 때, 컴포넌트가 제거될 때에도 특정 기능을 부여할 수 있다. - componentDidMount() : 컴포넌트가 첫 랜더링 되는 순간 실행할 함수를 선언할 수 있다. 주로 비동기 요청( ex. setInterval)을 많이 넣는다. - componentWillUnmount() : 컴포넌트가 지워지기 직전에 실행되며 주로 componentDidMount에서 정의된 동작을 정리하기 위함이다. 세트로 묶어서 작성해야한다. 대부분 부모가 현 컴포넌트를 제거할 때 실행된다. - componentDidUpdate() : 리랜더링 후에 실행되는 ..
<리액트 기초> setTimeout 사용하기 * setTimeout - 이번 장에서는 리액트에서 setTimeout을 사용하는 방법에 대해서 다뤄보자. timeout; statTime; endTime; onClickScreen = () => { const { state } = this.state; if (state==='waiting') { this.setState({ state: 'ready', }); this.timeout = setTimeout( () => { this.setState( { state: 'now', }); this.startTime = new Date(); }, Math.floor(Math.random() * 1000) + 2000); // 2초~3초 랜덤 } else if (state === 'ready') { clearTi..
<리액트 기초> 조건부 연산자 * 리액트에서의 조건문 - 리액트의 렌더링 부분에서 jsx문법을 사용할 때 조건문 if를 사용할 수 없다. - 정확하게 말하자면 억지로 if문을 사용하려고하면 매우 지저분 해진다. - 이는 앞서 봤었던 map에서도 마찬가지인데 for문 대신 map으로 반복문을 만들었었다. - 그렇다면 jsx에서 조건문을 어떻게 만드는 것이 좋을까? state의 result라는 배열에 값이 있을 경우에만 그 값을 이용한 태그를 만들고 싶다고 가정하자. renderAverage = () => { const { result } = this.state; return ( result.length === 0 ? null : 결과 : {result} ) }; render() { const { message } = this.state..

티스토리툴바