전체 글

타입스크립트에서 prop-types를 사용할까?

리액트에서 prop-types 라이브러리를 사용해 props의 타입을 체크할 수 있다. 그리고 타입스크립트를 사용해 props의 타입을 체크할 수 있다. 같은 일을 하는 것 같지만 다른 일을 한다. 각각 무슨 일을 하는지 알아보고 타입스크립트에서 prop-types를 사용할지 체크해보길 바란다. 타입스크립트 타입스크립트는 동적 언어인 자바스크립트를 정적 언어로 사용하기 위한 언어이다. 정적 언어는 컴파일 시에 타입이 결정되고, 동적 언어는 런타임에 타입이 결정된다. 타입스크립트는 런타임에 타입 체크를 하지 않는다. 이는 타입스크립트 Design Goals 3번 '실행한 프로그램에 런타임 오버헤드를 부과하지 않는다.'에 부합한다. 타입스크립트로 Props의 타입을 체크하기 위해 일반적으로 아래와 같이 작성..

부스트캠프 웹 풀스택 6기 멤버십 스프린트 4회차

부스트캠프 웹 풀스택 6기 멤버십 스프린트 3회차 부스트캠프 웹 풀스택 6기 멤버십 스프린트 2회차 부스트캠프 웹 풀스택 6기 멤버십 스프린트 1회차 부스트캠프 웹 풀스택 6기 멤버십 합격 챌린지에 입과한 모든 캠퍼가 멤버십에 입과 하는 것 blog.hyunmin.dev 😸 TL;DR 마지막 스프린트는 팀 프로젝트로 진행했다. 2인 1조로 랜덤 하게 팀이 구성되어 2주간 협업했다. 하루에 많으면 10시간씩 얘기하며 협업하다 보니 부스트캠프 활동 처음으로 지친다는 생각이 조금 들었다. 하지만 다행히도 좋은 팀원을 만나서 2주를 잘 마무리할 수 있었다. 🏀 미션 React 이번 미션부터는 React 라이브러리 사용이 허용됐다. 바닐라 JS로 SPA를 구현 후에 React를 다시 보니 이전에 보이지 않던 부분..

부스트캠프 웹 풀스택 6기 멤버십 스프린트 3회차

부스트캠프 웹 풀스택 6기 멤버십 스프린트 2회차 부스트캠프 웹 풀스택 6기 멤버십 스프린트 1회차 부스트캠프 웹 풀스택 6기 멤버십 합격 챌린지에 입과한 모든 캠퍼가 멤버십에 입과 하는 것은 아니다. 특정 기준으로 멤버십에 입과할 자격을 blog.hyunmin.dev 😸 TL;DR 구현의 집착을 버리고 한결 가볍게 개발했다. 학습해야 할 키워드가 끝도 없이 제공돼서 2주 만에 엄청나게 성장해버린 기분이다. 이 정도면 튼 살이 생길 지경이다. 🏀 미션 SPA 바닐라 JS로 SPA를 구현하는 것은 항상 머리가 아프다. 저번 미션까지는 준일님의 블로그를 참고하여 SPA 모듈을 설계했다. 하지만 이번에는 양방향 데이터 바인딩, 관찰자 패턴을 도입해 Vue.js 스럽게 탈바꿈하여 기술 독립을 했다. 자바스크립트..

자바스크립트의 Data Binding

Angular React Vue 단방향, 양방향 단방향 단방향, 양방향 프론트엔드 프레임워크 및 라이브러리 삼대장은 모두 데이터 바인딩을 지원한다. 그만큼 필요하다는 뜻이라고 생각한다. 이번 포스트에서 데이터 바인딩에 대해서 알아보겠다. 이 포스트는 데이터 바인딩 개념 자체를 알아보는 글이다. vue에서의 데이터 바인딩을 알아보고 싶다면 v-model, angular에서의 데이터 바인딩을 알아보고 싶다면 Binding syntax 을 참고하면 된다. 사전 지식 Observation pattern 클래스 Data Binding 컴퓨터 프로그래밍에서 데이터 바인딩은 제공자와 소비자로부터 데이터 원본을 결합시켜 이것들을 동기화하는 기법이다. (위키백과) 여기서 소비자와 제공자는 뷰와 데이터이다. 즉, 데이터와..