개학이 연기되고 학교에서 한 과제가 내려졌는 데, 2주 내로 프로젝트를 진행하여 제출해야하는 과제였습니다. 마침 기존에 하던 토이 프로젝트가 끝나가고 방학동안 하고 싶었지만 못했던 기술을 써보기에 좋은 기회라고 생각했습니다.

Dependency Injection, 의존성 주입이 무엇이고 어떤 이점이 있는지 예시를 통해 정리한 글입니다.

2019년 한 해가 얼마 남지 않았군요. 12월 달이 되기 전에 미리 써야지 하다가 진짜 12월 마지막 날이 되서 쓰게 되네요... 그래서 2019년이 가기전에, 2019년을 반성하고 되돌아 보면서 올해보다 멋진 2020년을 준비해보려고 합니다. 2019 이모저모 20

학교에 고등학생 개발자를 채용하기 위해 기업설명회가 열렸었는데, 지원하고 싶은 3학년 학생과 2학년 학생들을 대상으로 채용 면접이 진행되었습니다. 성장하는 스타트업 회사이고, 떨어져도 좋은 경험이 될 수 있을 것 같아 웹 프론트 개발에 지원하여 면접을 진행하였습니다. 난생처음 보는 기술면접에서 ...

지난 포스트에 이어 이번 글에서는 Storybook에서 스냅샷을 이용하여 컴포넌트 테스트 자동화를 해보겠습니다. 🖼️ Snapshot Testing? snapshot 테스트 케이스는 UI component를 렌더링한 뒤, 스크린샷을 찍고, 테스트 부근에 저장된 레퍼런스 이미지와 찍은 것들을 비교합니다. 만약 이전에 찍었던 이미지와 테스트했을 때와의...

지난 글에서 간단하게 Storybook이 무엇이고 어떤 기능을 제공하는지 알아보았습니다. 이번글에서는 React.js에서 Storybook을 어떻게 적용하고 사용하는지 간단한 투두리스트를 만들면서 알아보려고 합니다. 📙 Storybook-cli 설치 및 시작 먼저 간단하게 create-react-app을 이용하여 프로젝트를 생성하겠습니다. 이제 ...

이번 포스트에서는 Storybook 이라는 것을 알아볼까 합니다. Storybook은 UI 구성 요소(컴포넌트)를 개발하기위한 오픈 소스 도구입니다. 예전에는 페이지 단위의 개발을 하였다면 요즘에는 컴포넌트 단위로 프론트엔드를 개발하고, 많은 분들이 React, Vue나 Angular를 이용하여 개발합니다. 여기서 컴포넌트는 외부에 영향을 받지 않고 ...

Typescript를 배우면서 중요한 내용을 정리한 글입니다. 이전부터 타입스크립트의 장점과 필요성을 알고는 있었지만 Typescript를 쓰지 않고도 개발을 잘 해왔기 때문에 사용을 꺼려왔었습니다. 그리고 평소처럼 React로 javascript만을 이용하여 웹 어플리케이션 개발을 하던 도중 (대충 Props로 값을 넘겨줄 때, 타입정의를 하지 않...

과거에는 브라우저가 웹서버에 웹페이지를 요청하여 클라이언트를 제공하여 웹페이지가 작동하였습니다. 하지만 최근에는 SPA(Signle-Page-Application)를 이용하여 클라이언트(대표적으로 React, Vue, Angular)를 구현하며, 클라이언트를 서버와 분리하여 클라이언트 로직을 분명히 합니다. 또한 서버에 API를 요청하므로써 웹 ...

오늘 써볼 글은 React의 상태관리를 할 때 많이 사용하는 라이브러리인 Mobx의 데코레이터를 CRA에서 yarn eject 없이 사용하는 법을 알아보겠습니다 :) 보통은 Mobx 말고도 데코레이터를 사용할 수 있습니다. 하지만 Mobx를 사용하면서 데코레이터를 많이 사용하고 react에서 데코레이터를 사용할 때 여러가지 설정에 관한 문제를 겪었기 때...

도커란 간단하게 말해 서버환경에서의 다양한 프로그램, 실행환경을 컨테이너라는 격리된 환경에서 실행할 수 있게 해주는 컨테이너 기반의 오픈소스 가상화 플랫폼 입니다. 이를 이용하면 복잡한 서버환경을 코드로 쉽게 관리할 수 있고 안정적인 배포환경 (무중단 배포 등) 구성

이 포스트에서는 CORS에 대한 이슈에 대해서 다뤄볼려고 합니다. 웹 개발을 하다보면 한번쯤 겪게되는 이슈로 클라이언트와 서버의 오리진이 다를 때 발생하는 이슈입니다. 🤔 CORS? 크로스 도메인? CORS는 Cross Origin Resource Sharing의 약자로 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘을 말합니다. 이...