ts-loader를 사용해 안전하게 매번 컴파일 타임에 타입을 체크하다 보니 빌드 속도가 13~15초 가 나오기 때문에 개발하는데 영향을 준다. 어떻게 하면 빌드 속도를 개선하면서 안전하게 타입 체크를 할 수 있을까?ts-loader 빌드 속도 (13s ~ 15s)

SPA(Single Page Application)의 단점은 검색 엔진 최적화가 되지 않는다는 점은 SPA를 학습하신 분이라면 모두 알고 있을거라 생각합니다. 고생해서 만든 프로젝트가 검색 엔진에 노출되지 않는 문제를 마주하지 않도록 검색 엔진 최적화를 진행해주었습니다

저희 서비스는 슬랙메시지를 아카이빙 해주는 서비스입니다.단순히 메세지를 아카이빙 해주는 것 보다는 사용자 입장에서 메세지를 Reminde 할 수 있는 기능이 추가되면 좋지 않을까?! 라는 생각에서 부터 시작할 수 있었습니다.이전에 받았던 메시지 중 몇 일 후 혹은 몇

줍줍은 랜딩 페이지와 메시지 피드 페이지에서 사용자 렌더링 속도 개선을 목표로 성능 최적화를 진행했습니다.줍줍의 성능 개선 전 성능 측정 결과를 보면 아래와 같습니다.WebPageTest 에서  Paris - EC2 Chrome Network Fast 3G 환경 기준

리액트 & 타입스크립트를 사용한다면 props로 children을 내려주고 children의 타입을 설정해 주는 경험을 해보신 적이 있을 것이다.children의 타입을 설정할 때 여러분들은 어떻게 타입을 선언해주시나요?!아래 코드처럼 children에 ReactNod

우선 줍줍 프로젝트에 달력 컴포넌트가 필요했던 이유는,사용자들이 저장된 메시지를 찾을 때 특정 날짜를 기준으로 메시지를 탐색할 수 있도록 보다 나은 사용자 경험을 제공하기 위해 달력 컴포넌트를 적용했다.최종적으로 달력 컴포넌트가 줍줍 프로젝트 내부에서 어떻게 동작하는지

이번 글에서는 React 프로젝트를 진행할 경우 폰트를 다루는 방법에 대해 소개하려고 한다. 폰트를 다루는 방법을 설명하기에 앞서 웹 폰트란 무엇인지? 웹 폰트 형식은 어떤게 있는지 먼저 확인해보자.웹 폰트는 사용자가 가지고 있지 않은 폰트를 웹 페이지에서 사용할 수

사용자의 슬랙 메시지를 보관해주는 줍줍 프로젝트 특성상 사용자가 특정 날짜를 기준으로 메시지를 조회했는데, 특정 날짜의 메시지 데이터만 조회되고 다른 날짜의 메시지는 볼 수 없어 다시 검색해야한다면 불편하지 않을까? 라는 생각이 들었다.여기서 만약 양방향으로 무한 스크

이번 글에서는 React 프로젝트를 진행하는 경우 아이콘을 svg로 다루는 방법에 대해 소개하려고 한다. 아이콘을 다루는 방법은 다양하지만 왜 아이콘을 svg로 사용해야하는지에 대해 먼저 알아보도록 하자. 아이콘을 import해 사용할 수 있는 방법은 확장자를 p

setState()는 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, component는 리렌더링 된다.props와 state는 일반 Javascript의 객체이다.두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지

Virtural DOM (VDOM)은 UI의 이상적인 또는 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그래밍 개념이고 이러한 과정을 Reconciliation(재조정)이라고 한다.Virtual DOM에 대해

ReactDOM.render는 2번째 인자로 전달한 root 컨테이너의 컨텐츠를 제어할 수 있다. 즉, root 컨테이너의 자식 노드들을 제어할 수 있다는 의미가 된다. 제어한다는 의미?React의 diffing 알고리즘을 root 컨테이너의 자식 컴포넌트들에게 적용한

Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있다.useEffect는 class component의 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각할

react에서 svg를 사용하는 법을 확인하기에 앞서, svg와 png의 차이점에 대해서 간략하게 설명해보려 한다.이미지를 svg로 사용하게 되면 좋은 점은 아래와 같다.모든 크기의 브라우저를 원할하게 지원한다. (무한한 확장 가능)svg의 일부를 스타일링 할 수 있다

Context 객체를 생성하는 방법은 아래와 같다.defaultValue에는 실제 Provider의 value에 넣는 객체의 형태와 일치시켜주는 게 좋다.Context 코드를 볼 때 내부 값이 어떻게 구성되어있는지 파악하기 쉽고, 실수로 Provider를 사용하지 않았

리액트 사용 방법이 익숙하지 않아... 사용하기 어렵다..!리액트 적응기를 일주일에 하나씩 작성하며 리액트 사용법에 대해 익숙해지자!!리액트에서 key는 컴포넌트 배열을 렌더링했을 때 어떤 원소에 변동이 있었는지 알아내려고 사용한다.key가 없을 때는 Virtural

콜백함수는 다른 코드(함수 또는 메서드)에게 인자를 넘겨줌으로써 그 제어권도 함께 위임한 함수이다.콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백함수를 적절한 시점에 실행한다.setInterval에 첫 번째 인자로 cbFunc()를 넘겨주면 cbFunc

자판기 미션에서 처음으로 적용한 타입스크립트!타입스크립트가 익숙하지 않고 부족한 부분이 많은 것 같다.🥲앞으로 키워드를 가지고 하나씩 정리해봐야겠다.😑이번에는 리뷰어님이 알려주신 interface / type의 convention 그리고 readonly 속성에 대해

1. 발생한 문제..😡 우테코 나만의 유튜브 강의실 미션중 마주한 문제이다.. 우선 상황은 이렇다! Youtube API 키를 사용해서 검색된 결과의 동영상의 정보를 가지고와 검색된 결과의 타이틀, 썸네일을 보여주는 작업을 하고 있었다. 문제는 Youtube A

1. 발생한 문제.. 😡 나만의 유튜브 강의실 미션중 마주한 문제이다... test 코드를 작성하고, 기능을 구현하고... 를 하던 중! 미션에서 사용중인 localStorage, fetch를 사용한 코드를 jest에서 test 하게 된다면.. 짠...! ReferenceError 코드를 보면 localStorage is not defined를 볼...