새로운 버전의 티처캔에서 타이머를 구현하게 되었다. 이전 버전에서도 타이머를 구현했기에 큰 어려움은 없었으나 이전 버전에서 미처 발견하지 못한 문제와 타이머 폰트 크기에 대한 문제가 생겨 이에 대해 기록을 남기고자 한다. 1. 백그라운드에서의 타이머 첫 번재 문제는 '백그라운드에서의 타이머'라고 할 수 있다. 타이머가 실행 중인 탭이 아닌 다른 탭으로 이동되었을 때(탭이 비활성화되었을 때), 타이머를 구현하기 위해 사용한 'setInterval'함수는 백그라운드의 탭의 자원 사용을 최소화하기 위해 'setInterval'의 콜백 함수의 호출 시간이 지정된 시간보다 늦어질 수 있다. 즉 예를 들어, 1000ms 마다 콜백 함수를 호출하는 것을 원했으나 그보다 더 긴 시간인 2000ms마다 호출되는 것이..
viewport에 따라 컴포넌트의 길이가 변할 때 취해야 할 작업이 종종 존재한다. 이전 과거를 떠오르면 달력 컴포넌트, Tabs 컴포넌트를 만들 때가 이에 해당한다. 조금 더 자세한 예시를 들자면 다음과 같다. 위는 Tabs 컴포넌트이다. Panel1부터 Panel10까지 모두 viewport 내에서 확인할 수 있다. 하지만 가로의 길이를 줄이다 보면 Panel10부터 화면에서 사라지게 될 것이다. 때문에 가려지는 것을 방지하기 위해 추가 작업이 필요하다. Tabs의 컴포넌트같은 경우엔 화살표를 추가하여 사용자가 화살표를 클릭하여 보이지 않는 Panel를 찾는 것이 해결방법이 될 것이다. 이와 같은 기능을 구현하기 위해선 가로(혹은 세로)의 사이즈가 변하는 것을 감지할 수 있어야 한다. 어떻게 감지할 ..
모던 리액트 Deep Dive 02장 리액트 핵심 요소 깊게 살펴보기의 JSX파트를 정리한 글입니다. 1. JSX란? JSX 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성해 두고, 이 JSX를 트랜스파일이라는 과정을 거쳐 자바스크립트(ECMAScript)가 이해할 수 있는 코드로 변경하는 것이 목표인 문법이다. 2. JSX의 구성요소 JSX는 다음과 같은 4가지의 컴포넌트를 기반으로 구성돼 있다. 1. JSXElement 2. JSXAttributes 3. JSXChildren 4. JSXStrings 2-1. JSXElement JSX를 구성하는 가장 기본 요소로, HTML의 요소(element)와 비슷한 역할을 한다. 이는 다음과 같은 형태 중 하나여야 한다. 1. JSXOpeningEleme..
웹 브라우저는 렌더링 과정을 통해 사용자가 볼 수 있는 실제 웹사이트 화면을 그립니다. 브라우저의 렌더링 엔진이 이 역할을 하고 있습니다. 서버에서 받은 여러 파일을 읽고 해석한 결과가 바로 웹사이트의 화면이라고 할 수 있는데요. 이때 html, css, javascript, 이미지, 폰트 등 다양한 파일을 받습니다. 어떤 파일들을 받는지 확인하고자 한다면 개발자 도구를 열고 Network 탭을 열고 새로고침을 해보세요. 만약 서버에서 불러와야 할 파일이 너무 많고 각각의 파일의 크기도 크다면 사용자는 완성된 화면을 늦게 보게 될 것입니다. 이는 사용자가 서비스를 이탈하는 가장 큰 이유 중 하나이기도 합니다. 때문에 개발자들은 보다 빠르게 렌더링을 할 수 있도록 속도를 개선하는 것을 중요하게 생각합니다...
지금까지 하나의 파일(webpack.config.js)에서 환경(dev, prod)에 대한 웹팩을 설정하였다. 환경에 따른 분리가 필요하면 삼항연사자를 사용한다. 아직은 파일이 크지 않아 삼항연산자도 충분하다. 하지만 앞으로 설정이 많아지고 복잡해지면 삼항연산자로 인한 환경 구분은 상당히 피로감을 줄 수 있다. 때문에 환경에 따라 파일을 분리하는 것이 효율적이다. 웹팩으로 리액트 시작하기 네 번째 파트에서는 환경에 분리하여 웹팩을 설정하는 과정을 다룬다. 다음의 글은 웹팩 공식문서를 참고하여 작성했다. Production | 웹팩 Production | 웹팩 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번..
프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 현재 진행 중인 프로젝트의 경우 폰트를 추가하고, png, jpg와 같은 asset 그리고 라우팅으로 인해 웹팩 설정을 추가하고 수정을 해야 했다. 웹팩으로 리액트 시작하기 세 번째 파트에서는 이러한 문제를 해결하는 과정을 다룬다. 1. 폰트 적용하기 폰트 가져오기 서비스에 적용하고 싶은 폰트의 otf파일을 다운받고 프로젝트 내 폴더로 옮긴다. 이후 이를 바탕으로 새로운 @font-face을 만든다. @font-face는 .css파일에서 만든다. /* src/fonts/font.css */ @font-face { font-family: 'S-Core ..
웹팩으로 리액트 시작하기의 두 번째 파트에서는 eslint, tsconfig, webpack, 설정을 통해 절대 경로를 적용하는 방법을 다룬다. 1. eslint 설정 eslint 을 아직 설치를 하지 않았으니 이를 먼저 설치한다. 또한 import에 관한 플러그인을 함께 설치한다. yarn add -D eslint eslint-plugin-import 이후 간단한 명령어를 통해 eslint설정 파일을 생성한다. 다음의 명령어를 실행하면 각자가 원하는 eslint을 설정할 수 있다. 해당 과정을 통해 여러 가지의 플러그인이 생성되고 eslint설정 파일이 루트경로에 생성된다. npx eslint --init 이제 생성된 eslint 설정 파일에서 다음과 같은 설정을 추가한다. import 플러그인 추가 ..
리액트를 시작하기 위해 Create-React-App(CRA) 혹은 Vite을 많이 사용한다. 이러한 도구는 webpack설정 없이 편하게 리액트를 시작할 수 있도록 도와준다. 때문에 많은 개발자들이 사용하고 있는 도구이다. 하지만 단점도 분명 존재한다. webpack설정을 추가하거나 수정하는 것이 매우 번거롭다는 것이다. 이러한 단점 때문에 webpack설정을 도와주는 다양한 라이브러리가 등장하였다. craco, react-app-alias, react-app-rewired 등이 그것이다. 충분히 좋은 라이브러리들이지만 처음부터 webpack을 직접 설정을 했다면 번거로운 작업은 하지 않아도 된다. 또한 프론트엔드 개발자로서 webpack은 학습해야 하는 개념이기 때문에 직접 webpack을 설정하여 ..
리액트에는 상태라는 개념이 존재합니다. 시도 때도 없이 바뀌는 이런 상태를 어떻게 다루어야 버그 없는 컴포넌트를 만들 수 있을까요? 물론 상태를 대~~충 다루어도 컴포넌트를 만들고 상태를 다루는 데는 큰 무리가 없을 겁니다. 하지만 서비스의 규모가 점점 커지다 보면 어느 순간 내가 만들었던 상태들이 제멋대로 변하면서 원치 않는 상황을 마주하는 경험을 하게 될 것입니다. 그제야 상태의 구조를 바꾸기 위해 뜯어고치기 시작한다면 그땐, 이미 상태가 꼬일 대로 꼬이지 않았을까요? 그래서 저희는 상태를 잘 구조화하여 리팩터링을 쉽게 할 수 있게 해야 하며, 오류 없이 상태를 업데이트를 할 수 있어야 합니다. 그러면 어떻게 상태를 만들어야 할까요? 가이드라인은 가까운 곳에 있습니다. 바로 리액트 공식문서입니다. 리..
들어가기 전 21년 말, react-router-dom을 사용할 땐 v6.3이었다. 현재는 메이저 버전은 동일하지만 v6.4를 기점으로 기존에 없던 새로운 기능이 추가되어 이를 소개하고자 한다. 아래의 사진에서 보는 것과 같이 React Router 공식 문서에서도 v6.4에 대해 무엇이 새로운지 소개하고 있다. React Router 공홈 바로가기 현재 react-router-dom의 최신 버전은 v6.11.1이다. 얼마나 자주 업데이트 되는지 궁금해서 Version History를 찾아봤는데, v6.11.1은 현재기준(23년 5월 16일) 12일 전에 공개가 되었다. 그리고 v6.4.0은 8개월 전인 22년 9월에 공개되었다. 꾸준히 기능이 업데이트되고 있다고 생각한다. 더 재밌는 점은 이전의 v5의..
