새로운 버전의 티처캔에서 타이머를 구현하게 되었다. 이전 버전에서도 타이머를 구현했기에 큰 어려움은 없었으나 이전 버전에서 미처 발견하지 못한 문제와 타이머 폰트 크기에 대한 문제가 생겨 이에 대해 기록을 남기고자 한다. 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..
이전 챕터에서 shift Month Button를 통해 이전과 다음 달로 이동할 수 있게 되었습니다. 그렇다면 다음과 같은 경우엔 어떻게 해야 할까요? 오늘이 2023년 10월 31일인데 2020년 10월의 달력을 보고 싶다. 버튼을 36번 클릭하여 3년 전으로 이동해야 합니다. 너무나 많은 버튼 클릭입니다. 사용성도 많이 떨어집니다. 사용자는 간단하게 자신이 원하는 년(year), 월(month)로 이동하는 것을 바라고 있습니다. 이를 이번 챕터에서 Navigation 기능을 추가하면서 해결합니다. 1. Calendar class에 기능 추가하기 이전 챕터에서는 shiftMonth 메서드를 추가하여 월(month)을 이동할 수 있게 했습니다. 하지만 매개변수로 next, prev, today를 받기 때..
웹 브라우저는 렌더링 과정을 통해 사용자가 볼 수 있는 실제 웹사이트 화면을 그립니다. 브라우저의 렌더링 엔진이 이 역할을 하고 있습니다. 서버에서 받은 여러 파일을 읽고 해석한 결과가 바로 웹사이트의 화면이라고 할 수 있는데요. 이때 html, css, javascript, 이미지, 폰트 등 다양한 파일을 받습니다. 어떤 파일들을 받는지 확인하고자 한다면 개발자 도구를 열고 Network 탭을 열고 새로고침을 해보세요. 만약 서버에서 불러와야 할 파일이 너무 많고 각각의 파일의 크기도 크다면 사용자는 완성된 화면을 늦게 보게 될 것입니다. 이는 사용자가 서비스를 이탈하는 가장 큰 이유 중 하나이기도 합니다. 때문에 개발자들은 보다 빠르게 렌더링을 할 수 있도록 속도를 개선하는 것을 중요하게 생각합니다...
이전 챕터에서 Schedule, Date Picker을 만들었지만 월(month)을 이동할 수 없어 이전, 다음 달을 볼 수 없는 아쉬움이 있었습니다. 이번 챕터에서는 이를 개선하고자 Shift Month Button을 만들어보겠습니다. 1. Calendar class에 기능 추가하기 Calendar class의 private filed을 보면 #year, #month가 있습니다. 이를 바탕으로 현재 년, 월에 해당하는 날에 대한 데이터를 getCalendarStorage() 메서드에서 만들고 있습니다. 때문에 월(month)을 이동하기 위해선 #month 값을 업데이트해야 합니다. 이와 관련된 로직을 Calendar class에 다음과 같이 추가합니다. // Calendar.ts shiftMonth =..
이전 글에서 달력을 만들기 위한 데이터를 만들었습니다. 이번에는 데이터를 활용하여 두 가지 종류의 달력을 만들어 봅니다. 하나는 Schedule입니다. Schedule은 달력에서 특정 데이터를 확인할 수 있습니다. 예를 들면 다음과 같은 달력에 해당합니다. 1. 구글 캘린더(일정을 확인할 수 있다.) 2. 가계부(지출한 금액을 확인할 수 있다.) 위 달력은 모두 특정 데이터를 담은 달력입니다. 또 다른 달력은 Date Picker입니다. 이름 그대로 날짜를 선택할 수 있는 달력입니다. 이는 html의 input 태그를 사용하여 구현할 수도 있는데, 커스튬은 불가능하기 때문에 원하는 UI를 만들기 위해선 처음부터 스스로 만드는 것을 추천합니다. 이번 챕터에는 코드량이 많아 세세한 코드에 대한 설명은 하지 ..
라이브러리 없이 자바스크립트로 달력 만들기는 우테코 '하루스터디' 프로젝트를 진행하면서 직접 만든 달력을 바닐라 자바스크립트로 다시 구현하면서 정리한 내용입니다. '하루스터디' 프로젝트에서는 리액트로 달력을 구현했지만 이번에는 바닐라 자바스크립트에서 구현을 합니다. 리액트도 자바스크립트 라이브러리이므로 리액트에서 사용하고자 한다면 환경에 맞게 변형하여 사용할 수 있습니다. 다음은 '하루스터디' 프로젝트에서 달력 구현과 관련된 PR입니다. [FE] member record Calendar 기능 추가 by nlom0218 · Pull Request #613 · woowacourse-teams/2023-haru-study 관련 이슈 closed #602 구현 기능 및 변경 사항 사용자 기록 페이지에 달력 기능..
프론트엔드 성능 베이스캠프의 두 번째 주제는 필요한 것만 요청하기이다. 간단하게 생각해서 당장 필요 없는 모듈은 불러오지 않다는 것이다. 이와 관련하여 구체적인 요구사항은 다음과 같다. Home 페이지에서 불러오는 스크립트 리소스에 gif 검색을 위한 giphy 모듈이 포함되어 있지 않아야 한다. react-icons 패키지에서 실제로 사용하는 아이콘 리소스만 빌드 결과에 포함되어야 한다. 이번 챕터에서는 이러한 요구사항을 만족하기 위해 작업한 과정을 다룬다. 1. 준비과정 빌드가 되었을 때 번들된 파일이 어떤 모습인지 먼저 확인해 보자. 눈으로 보면서 비교하는 것이 중요한데 이를 도와주는 것이 Webpack Bundle Analyzer라는 도구(플러그인)이다. 이를 통해 번들된 파일에 어떤 모듈이 얼마..
프론트엔드 성능 베이스캠프는 우아한테크코스 레벨 4 웹 성능 미션을 바탕으로 마주한 문제를 해결한 과정을 다룬다. 그중 첫 번째는 요청 크기 줄이기이다. 요청 크기라고 하면 다음과 같은 것들을 생각할 수 있다. 소스코드 이미지와 같은 assets 파일 폰트 이 중 소스코드와 이미지와 같은 assets 파일의 크기를 줄여보도록 한다. 성능 테스트에 사용되고 개선되는 코드는 여기에서 확인할 수 있다. 또한 해당 시리즈에서는 특별히 언급을 하지 않는 이상 성능 측정 환경은 dev 환경이다. 1. 소스코드 크기 줄이기 1-1. 기존 소스코드 크기 서비스를 실행하게 되면 bundle.js가 불러와진다. bundle.js 크기를 비교하기 전 package.json의 scripts를 다음과 같이 수정하자. { "sc..
