웹프론트엔드

지난 포스팅에 이어서 Next.js 튜토리얼 글을 이어서 작성해 보고자 한다. 시작하기에 앞서 이제부터 타입스크립트를 사용할 계획이라 TS 설치를 먼저 진행한다. $ npm i typescript @types/react @types/node --save-dev // node_modules 폴더를 지우고 $ npm i $ npm run build & npm run dev 그러면 프로젝트 root 디렉토리 위치에 다음 파일들이 자동으로 생성이 될 것이다. next-env.d.ts tsconfig.json 그리고 기존의 어플리케이션도 jsx 파일을 tsx로 바꾸어 주면 정상적으로 실행이 된다. 오늘 해볼 작업들은 다음과 같다. Link를 통해 페이지를 이동 getStaticProps()를 통한 동적 데이터 추..

이전 RxJS 포스팅에서는 다음과 같은 주제들에 대해 다루어 보았다. Ch01. 반응형으로 생각하기 Ch02. RxJS로 배우는 반응형 프로그래밍 이번 포스팅에서는 위에서 살펴본 개념들을 바탕으로 옵저버블을 만들어 보고, 모든 데이터 소스에 대한 시간에 따른 데이터 입출력을 옵저버블 컨텍스트로 관리하는 법을 배우려고 한다. 이런 상황을 가정해 보자 사용자가 서버에 장기 실행 ajax 요청을 보내고, 호출 후 다른 버튼을 눌러 다른 페이지로 이동하였다. 특정 데이터를 사용할 수 있게 데이터를 풀링했는데 예외가 발생하여 이제 데이터를 사용할 수 없게 되었다. 우리가 사용자에게 무한히 시스템 리소스를 사용할 수 있게 하지는 못하고 따라서 이러한 경우 문제가 발생할 수 있다. 이를 해결하기 위해 RxJS를 사용..

지난 8월 들었었던 이웅재님의 우아한 타입스크립트 내용을 정리해서 블로그 포스팅 해 보려고 한다. 1/2부로 나누어서 세미나를 진행하였고, 포스팅도 2번에 나누어서 할 생각이다. 많은 사람들이 타입스크립트를 쓰면 버그도 사라지고, 테스트 코드를 작성하지 않아도 된다고 착각하는 경우가 있다. 이는 분명히 잘못된 생각이며, 타입스크립트를 가지고 타이핑을 잘 하면 우리가 가질 수 있는 이점은 런타임 전에 오류를 미리 파악할 수 있다는 점이다. 작성자와 사용자 타입스크립트의 타입 시스템은 다음과 같은 특징을 가지고 있다. 타입을 명시적으로 지정할 수 있음 타입을 명시적으로 지정하지 않으면, 타입스크립트 컴파일러가 자동으로 타입을 추론 우리는 함수를 가운데에 매개로 해서 구현자와 사용자를 연결한다. 때로은 이 둘..

이번 포스팅에서는 리액트의 Context API의 개념과 Use Cases에 대해서 정리해 본다. Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 예를 들면 프로젝트 내의 환경 설정, 사용자 정보와 같은 것들이 있을 수가 있다. 과거에는 이러한 데이터를 최상위 컴포넌트의 state에 담아서 props로 전달했었다. 하지만 이렇게 하는 경우 컴포넌트의 깊이가 깊어질 수록 거쳐야 하는 컴포넌트가 많아서 번거로움이 있었다. 이를 해결하기 위해서 Redux나 MobX와 같은 별도의 라이브러리를 사용하기도 하지만, 별도의 라이브러리가 없어도 Context API를 통해 전역 상태를 관리할 수가 있다. 지금부터 리액트 공식 문서에서 제공하는 Context API를 하..

오늘은 우아한 테크러닝 3주차(5회차, 6회차)에서 공부했던 내용들에 대해서 정리해 보려고 한다. 다섯 번째 세션 9월 15일 화요일 5번째 수업에서는 다음과 같은 내용을 다루었다. 리덕스 (Redux) 커링 (Currying) 몽키패치 (Monkey Patch) 미들웨어 (Middleware) 다음과 같이 리듀서와 스토어를 생성한 후, 스토어의 변경이 일어날 때마다 확인할 수 있는 subscribe 메서드를 사용한다. 그리고 store의 dispatch 메서드를 이용하여 action을 실행할 수 있다. import { createStore } from "./redux"; function reducer(state = { counter: 0 }, action) { switch (action.type) { ..

안녕하세요 오웬입니다.저는 지난 6월, 굿닥에 웹 프론트엔드 개발자로 입사하여 3개월동안 수습기간을 진행하였습니다. 오늘은 수습기간을 마치는 기념(?)으로 그 회고를 해 보려고 합니다. 지난 3개월동안 제가 느끼고 경험했던 것들, 그리고 굿닥이라는 회사에 대해 소개하는 글을 짧게 작성해 보도록 하겠습니다. 입사 첫 날입사 첫 날 느꼈던 설렘과 긴장감을 아직도 기억합니다. 제 개인적으로 정규직 오퍼를 받은 회사였고, 정말 깊은 고민을 해서 결정한 회사여서 기대감도 있었고 한편으로 걱정도 있었습니다. "과연 내가 가서 잘 할 수 있을까?" 그렇게 입사 첫 날이 시작되었고, 회사에 가서 기본적인 회사 소개와 본부별 소개를 듣고 장비를 받아서 환경설정을 하다 보니 하루가 정말 빠르게 지나갔던 것 같습니다. 그리..

오늘은 우아한 테크러닝 2주차(3회차, 4회차)에서 공부했던 내용들에 대해서 정리해 보려고 한다. 세 번째 세션 9월 8일 화요일 세 번째 시간은 React에 대해 알아보는 시간이었다. 리액트가 만들어진 이유와 가상 DOM (Virtual DOM), 그리고 간단한 실습과 리액트에서 상태관리를 어떻게 하는지에 대해서 공부했다. 과거에 우리는 직접 DOM을 조작해서 JS로 화면을 그려주었다. 여기에 사용되었던 대표적인 라이브러리가 jQuery였다. list에 들어있는 데이터를 기반으로, rootElement의 innerHTML에 넣어 DOM을 직접 조작했다. 이 코드를 보면서 민태님이 몇 가지 조언을 해주셨는데 다음과 같다. 코드는 끊임없이 변화하다 보니 좀더 변화에 잘 대응할수 있는, 빠르게 수정할 수 있..

이번 포스팅에서는 리액트 컴포넌트 성능 최적화 방법들을 알아보고자 한다. 컴포넌트가 리렌더링되는 경우는 다음과 같다. 자신이 전달받은 props가 변경될 때 자신의 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 forceUpdate 함수가 실행이 될 때 매번 하나의 변화가 생길 때 마다 모든 요소들이 다시 불러와 지면 그 갯수가 적을 때는 큰 차이가 없지만, 수 백개, 수 천개 그리고 그 이상의 요소들을 불러올 때 성능이 느려지게 될 것이다. 따라서 리렌더링을 시키는 요소들을 어느정도 통제해 줄 필요가 생기게 되는데, 여기에서 많이 쓰이는 함수가 React.memo() 함수이다. React.memo() 클래스형 컴포넌트에서는 shouldComponentUpdate라는 라이프사이클을 사용하면 되는데..