1. 타입 흐름 유지하기 타입 정보가 그대로 유지되면서 타입 흐름이 계속 전달되는 것은 개발자로 하여금 타입 체크에 대한 신경을 줄일 수 있게 도와준다. 직접 루프를 구현하는 것보다 내장된 함수형 기법과 로대시 같은 유틸리티 라이브러리를 사용하는 것이 타입 정보를 그대로 유지하는데 적합하다. 타입 정보가 그대로 유지되는 것엔 다음과 같은 장점을 가지고 있다. 타입 흐름을 개선한다. 가독성을 높인다. 명시적인 타입 구문의 필요성을 줄인다. 몇 가지 예시를 통해 절차형 프로그래밍, 함수형 프로그래밍 그리고 로대시를 통해 구현하여 어떤 특징이 있는지 살펴보자. 2. CSV 데이터 파싱하기 다음과 같은 CSV 데이터가 있다. 이를 파싱해보자. const csvData = `연도,제조사,모델,설명,가격 1997,..
새로운 버전의 티처캔에서 타이머를 구현하게 되었다. 이전 버전에서도 타이머를 구현했기에 큰 어려움은 없었으나 이전 버전에서 미처 발견하지 못한 문제와 타이머 폰트 크기에 대한 문제가 생겨 이에 대해 기록을 남기고자 한다. 1. 백그라운드에서의 타이머 첫 번재 문제는 '백그라운드에서의 타이머'라고 할 수 있다. 타이머가 실행 중인 탭이 아닌 다른 탭으로 이동되었을 때(탭이 비활성화되었을 때), 타이머를 구현하기 위해 사용한 'setInterval'함수는 백그라운드의 탭의 자원 사용을 최소화하기 위해 'setInterval'의 콜백 함수의 호출 시간이 지정된 시간보다 늦어질 수 있다. 즉 예를 들어, 1000ms 마다 콜백 함수를 호출하는 것을 원했으나 그보다 더 긴 시간인 2000ms마다 호출되는 것이..
라이브러리 없이 자바스크립트로 달력 만들기는 우테코 '하루스터디' 프로젝트를 진행하면서 직접 만든 달력을 바닐라 자바스크립트로 다시 구현하면서 정리한 내용입니다. '하루스터디' 프로젝트에서는 리액트로 달력을 구현했지만 이번에는 바닐라 자바스크립트에서 구현을 합니다. 리액트도 자바스크립트 라이브러리이므로 리액트에서 사용하고자 한다면 환경에 맞게 변형하여 사용할 수 있습니다. 다음은 '하루스터디' 프로젝트에서 달력 구현과 관련된 PR입니다. [FE] member record Calendar 기능 추가 by nlom0218 · Pull Request #613 · woowacourse-teams/2023-haru-study 관련 이슈 closed #602 구현 기능 및 변경 사항 사용자 기록 페이지에 달력 기능..
프로젝트를 본격적으로 시작하기 전 기본적인 웹팩 설정을 마무리하였다. 하지만 여러 가지의 이유로 인해 웹팩 설정을 추가하거나 수정해야 하는 경우가 생긴다. 현재 진행 중인 프로젝트의 경우 폰트를 추가하고, png, jpg와 같은 asset 그리고 라우팅으로 인해 웹팩 설정을 추가하고 수정을 해야 했다. 웹팩으로 리액트 시작하기 세 번째 파트에서는 이러한 문제를 해결하는 과정을 다룬다. 1. 폰트 적용하기 폰트 가져오기 서비스에 적용하고 싶은 폰트의 otf파일을 다운받고 프로젝트 내 폴더로 옮긴다. 이후 이를 바탕으로 새로운 @font-face을 만든다. @font-face는 .css파일에서 만든다. /* src/fonts/font.css */ @font-face { font-family: 'S-Core ..
개요 미션 기간 Repository PR & Review github pages storybook 장바구니 1단계 23-05-26 - 23-06-05 Repo PR & Review 🛒 장바구니 📚 스토리북 미션 회고 2단계 미션에서는 우테코 3, 4단계에서 마주치게 될 협업의 과정을 미리 체험할 수 있는 경험을 할 수 있었다. 함께 2단계 요구사항에 대한 명세서를 작성하고 재화 관련 서비스를 무엇으로 할지를 정하는 것이 그것이었다. 장바구니 협업 미션의 요구사항은 다음과 같이 크게 2가지이다. 1. 재화 과련 서비스(포인트, 쿠폰, 할인) 2. 주문 목록 1단계 미션이 끝난 다음날인 26일 금요일 나와 도리는 에단, 베베와 함께 이에 대해 이야기를 하고자 잠실 캠퍼스로 향했다. 다른 크루들도 잠실로 많이..
리액트에는 상태라는 개념이 존재합니다. 시도 때도 없이 바뀌는 이런 상태를 어떻게 다루어야 버그 없는 컴포넌트를 만들 수 있을까요? 물론 상태를 대~~충 다루어도 컴포넌트를 만들고 상태를 다루는 데는 큰 무리가 없을 겁니다. 하지만 서비스의 규모가 점점 커지다 보면 어느 순간 내가 만들었던 상태들이 제멋대로 변하면서 원치 않는 상황을 마주하는 경험을 하게 될 것입니다. 그제야 상태의 구조를 바꾸기 위해 뜯어고치기 시작한다면 그땐, 이미 상태가 꼬일 대로 꼬이지 않았을까요? 그래서 저희는 상태를 잘 구조화하여 리팩터링을 쉽게 할 수 있게 해야 하며, 오류 없이 상태를 업데이트를 할 수 있어야 합니다. 그러면 어떻게 상태를 만들어야 할까요? 가이드라인은 가까운 곳에 있습니다. 바로 리액트 공식문서입니다. 리..
들어가기 전 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의..
개요 미션 기간 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. 인덱스 시그니처란? 공식문서에는 아래와 같이 인덱스 시그니처의 사용 시점에 대해 설명하고 있다. 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 타입이 있다...
