라이브러리 없이 자바스크립트로 달력 만들기는 우테코 '하루스터디' 프로젝트를 진행하면서 직접 만든 달력을 바닐라 자바스크립트로 다시 구현하면서 정리한 내용입니다. '하루스터디' 프로젝트에서는 리액트로 달력을 구현했지만 이번에는 바닐라 자바스크립트에서 구현을 합니다. 리액트도 자바스크립트 라이브러리이므로 리액트에서 사용하고자 한다면 환경에 맞게 변형하여 사용할 수 있습니다. 다음은 '하루스터디' 프로젝트에서 달력 구현과 관련된 PR입니다. [FE] member record Calendar 기능 추가 by nlom0218 · Pull Request #613 · woowacourse-teams/2023-haru-study 관련 이슈 closed #602 구현 기능 및 변경 사항 사용자 기록 페이지에 달력 기능..
새로운 버전의 티처캔에서 타이머를 구현하게 되었다. 이전 버전에서도 타이머를 구현했기에 큰 어려움은 없었으나 이전 버전에서 미처 발견하지 못한 문제와 타이머 폰트 크기에 대한 문제가 생겨 이에 대해 기록을 남기고자 한다. 1. 백그라운드에서의 타이머 첫 번재 문제는 '백그라운드에서의 타이머'라고 할 수 있다. 타이머가 실행 중인 탭이 아닌 다른 탭으로 이동되었을 때(탭이 비활성화되었을 때), 타이머를 구현하기 위해 사용한 'setInterval'함수는 백그라운드의 탭의 자원 사용을 최소화하기 위해 'setInterval'의 콜백 함수의 호출 시간이 지정된 시간보다 늦어질 수 있다. 즉 예를 들어, 1000ms 마다 콜백 함수를 호출하는 것을 원했으나 그보다 더 긴 시간인 2000ms마다 호출되는 것이..
이전 챕터에서 Schedule, Date Picker을 만들었지만 월(month)을 이동할 수 없어 이전, 다음 달을 볼 수 없는 아쉬움이 있었습니다. 이번 챕터에서는 이를 개선하고자 Shift Month Button을 만들어보겠습니다. 1. Calendar class에 기능 추가하기 Calendar class의 private filed을 보면 #year, #month가 있습니다. 이를 바탕으로 현재 년, 월에 해당하는 날에 대한 데이터를 getCalendarStorage() 메서드에서 만들고 있습니다. 때문에 월(month)을 이동하기 위해선 #month 값을 업데이트해야 합니다. 이와 관련된 로직을 Calendar class에 다음과 같이 추가합니다. // Calendar.ts shiftMonth =..
프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 현재 진행 중인 프로젝트의 경우 폰트를 추가하고, png, jpg와 같은 asset 그리고 라우팅으로 인해 웹팩 설정을 추가하고 수정을 해야 했다. 웹팩으로 리액트 시작하기 세 번째 파트에서는 이러한 문제를 해결하는 과정을 다룬다. 1. 폰트 적용하기 폰트 가져오기 서비스에 적용하고 싶은 폰트의 otf파일을 다운받고 프로젝트 내 폴더로 옮긴다. 이후 이를 바탕으로 새로운 @font-face을 만든다. @font-face는 .css파일에서 만든다. /* src/fonts/font.css */ @font-face { font-family: 'S-Core ..
리액트에는 상태라는 개념이 존재합니다. 시도 때도 없이 바뀌는 이런 상태를 어떻게 다루어야 버그 없는 컴포넌트를 만들 수 있을까요? 물론 상태를 대~~충 다루어도 컴포넌트를 만들고 상태를 다루는 데는 큰 무리가 없을 겁니다. 하지만 서비스의 규모가 점점 커지다 보면 어느 순간 내가 만들었던 상태들이 제멋대로 변하면서 원치 않는 상황을 마주하는 경험을 하게 될 것입니다. 그제야 상태의 구조를 바꾸기 위해 뜯어고치기 시작한다면 그땐, 이미 상태가 꼬일 대로 꼬이지 않았을까요? 그래서 저희는 상태를 잘 구조화하여 리팩터링을 쉽게 할 수 있게 해야 하며, 오류 없이 상태를 업데이트를 할 수 있어야 합니다. 그러면 어떻게 상태를 만들어야 할까요? 가이드라인은 가까운 곳에 있습니다. 바로 리액트 공식문서입니다. 리..
개요 미션 기간 Repository PR & Review github page 점심 뭐 먹지 미션 1단계 23-04-14 - 23-04-17 Repo PR & Review 🍚 점심 뭐 먹지 미션회고 2단계 미션의 필수 요구 사항은 1단계와 동일하지만 프로그래밍 요구사항은 다음과 같이 수정되었다. 1. Step1의 Class Component를 Function Component로 마이그레이션 한다. 2. Custom Hooks을 이용하여 재사용 가능한 기능을 분리한다. 이에 따라 Function Component와 Custom Hooks에 초점을 두어 미션을 진행했다. Function Component으로 마이그레이션 하는 과정은 크게 어렵지 않았다. 똑같은 작업을 반복하는 것이기 때문에 금방 완료할 수 ..
1. 유효한 상태 효과적으로 타입을 설계하기 위해서, 유효한 상태만 표현할 수 있는 타입을 만들어 내는 것이 가장 중요하다. 여기서 말하는 유효한 상태란 무엇일까? 유효의 사전적 의미를 살펴보면 다음과 같다. 효력이나 효과가 있음. 즉, 효력이나 효과가 있는 상태가 유효한 상태라고 할 수 있다. 프로그래밍 관점에서 살펴보면 어딘가에 사용될 수 있는 상태이다. 다음과 같은 상태가 있다. interface State { a: string; b: string; c?: string; d?: string; } 이와 같은 상태는 다음과 같이 여러 가지 상태를 포함한다. interface StateOne { a: string; b: string; } interface StateTwo { a: string; b: st..
1. 타입 흐름 유지하기 타입 정보가 그대로 유지되면서 타입 흐름이 계속 전달되는 것은 개발자로 하여금 타입 체크에 대한 신경을 줄일 수 있게 도와준다. 직접 루프를 구현하는 것보다 내장된 함수형 기법과 로대시 같은 유틸리티 라이브러리를 사용하는 것이 타입 정보를 그대로 유지하는데 적합하다. 타입 정보가 그대로 유지되는 것엔 다음과 같은 장점을 가지고 있다. 타입 흐름을 개선한다. 가독성을 높인다. 명시적인 타입 구문의 필요성을 줄인다. 몇 가지 예시를 통해 절차형 프로그래밍, 함수형 프로그래밍 그리고 로대시를 통해 구현하여 어떤 특징이 있는지 살펴보자. 2. CSV 데이터 파싱하기 다음과 같은 CSV 데이터가 있다. 이를 파싱해보자. const csvData = `연도,제조사,모델,설명,가격 1997,..
1. 인덱스 시그니처란? 공식문서에는 아래와 같이 인덱스 시그니처의 사용 시점에 대해 설명하고 있다. Sometimes you don’t know all the names of a type’s properties ahead of time, but you do know the shape of the values. In those cases you can use an index signature to describe the types of possible values. 타입의 속성을 모르지만 값의 형태를 알고 있을 때, 인덱스 시그니처를 사용하여 타입을 설명할 수 있다. 2. 인덱스 시그니처의 기본 문법 type Props = { [property: string]: string }; Props 타입이 있다...
1. 타입은 할당 가능한 값들의 집합 자바스크립트에서는 변수에 다양한 값을 할당할 수 있다. 이러한 값들을 타입스크립트가 런타임 이전에 여기에 할당할 수 있는가?라는 의문을 품고 오류를 체크하기 시작한다. 오류를 통해 타입스크립트에서의 집합이라는 개념에 다가가보자. 1-1. 타입 오류1 타입스크립트가 만약 오류를 발견하면 아래와 같은 오류를 발견할 수 있다. Type 'number' is not assignable to type 'string'. 숫자 타입은 문자열에 타입에 할당을 할 수 없다는 것이다. 이 문구는 집합의 관점에서 아래처럼 해석할 수 있다. 숫자 타입은 문자열 타입의 부분 집합이 아니다.(두 타입의 관계) 1-2. 타입 오류2 또 다른 오류를 보며 집합이라는 개념을 적립해 보자. AB의 ..
