먹고 기도하고 코딩하라

(* 타입스크립트 + 리액트 조합으로 프로젝트를 만드실 분은 이 부분은 스킵하시고 아래쪽을 보세요) 타입스크립트 프로젝트를 위한 설정을 진행해 보자. 먼저 node와 npm은 기본적으로 설치되어 있다는 전제 하에 진행하도록 하겠다. (node, npm이 설치되어 있지 않다면 여기서 다운로드받기 바란다) Windows 환경에서 진행할 텐데 리눅스나 맥 환경에서도 각자 터미널을 켜든지 해서 비슷하게 진행하면 될 것이다. 먼저 프로젝트 루트 디렉터리가 될 디렉터리를 하나 만든 다음 cmd를 열어 해당 경로로 이동한다. npm init -y 일단 npm init으로 노드 프로젝트를 만들어준다. 간단하게 package.json이 만들어졌을 것이다. 아마 이미 전역으로 타입스크립트가 설치된 분들도 계실 텐데, 난 ..

웹앱을 만들면서 DOM 요소를 조작하다 보면 어떤 요소의 부모 요소에 접근해야 하거나 자식 요소에 접근해야 하는 일이 생긴다. 그 때마다 parentNode를 쓰면 안 되고 parentElement를 쓰면 되고 하는 식으로 비슷해 보이는데 기묘하게 쓰임새가 다른 것들은 그냥 시도하면서 고개만 갸웃거렸는데 이번에 정리를 하려고 한다. 라고 하기 전에 먼저 노드와 엘리먼트 사이에 무슨 차이가 있는지 짚고 넘어가는 게 명확한 이해에 도움이 될 것 같다. 먼저 구글링을 해 보니 나처럼 아주 혼란스러워하는 스택오버플로우 질문자의 글이 보였고, 거기에 아주 좋은 답변이 추천도 많이 받아서 일부를 소개하고자 한다. node는 DOM 계층구조에 속한 객체의 어떤 타입이든 가리킬 수 있는 이름입니다. node는 내장 D..

클로저 자바스크립트 함수와 스코프를 공부하다 보면 클로저(Closure) 개념과 맞닥뜨리게 된다. 클로저란 한마디로 특정 스코프(주로 자신의 외부)의 변수를 기억하고 접근할 수 있는 함수 혹은 내부 함수와 외부 스코프의 변수들을 잇는 연결고리이다. 자신(내부 함수)을 포함하는 외부 스코프 바깥에서 내부 함수를 호출하더라도 외부 스코프 변수를 여전히 접근할 수 있는 함수라고 생각하면 된다(함수가 특정 스코프에 접근할 수 있도록 의도적으로 해당 스코프에서 정의하는 경우가 많음). 기본적으로, 자바스크립트의 모든 함수는 적어도 1가지 컨텍스트(전역 컨텍스트)에 클로저이다. 클로저 예시를 들기 위해 외부 함수의 변수나 함수에 접근할 수 있는 내부 함수를 반환하는 예시를 많이 들지만, 사실 클로저라고 무조건 함수..

TAVE 7기에서 진행한 React.js 스터디 내용을 정리한다. 우리 팀은 'the road to learn react' 한국어판 교재를 사용했고, 나는 집에 있는 을 가끔 살펴보기도 했다. 이 포스팅 시리즈는 이 교재를 활용해 어떻게 스터디를 진행했는지 그 실습 내용과 스터디에서 배운 내용을 정리한다. 리액트 컴포넌트 리액트 컴포넌트는 render() 메소드가 있는 자바스크립트 클래스 형식이거나 함수이다. (그래서 컴포넌트를 함수형/클래스형으로 나뉜다고 설명하기도 한다.) 리액트는 여러 가지 컴포넌트를 조합해서 웹앱을 구성한다. 컴포넌트를 통해 UI를 재사용 가능한 개별 조각들로 나누고 코드 재활용성을 높이는 것이 목적이다. 컴포넌트들은 props라는 입력을 부모 컴포넌트로부터 받고(없을 수도 있다)..

지난 3월부터 5월까지 동아리에서 리액트 기초 스터디를 했는데 이제서야 블로그에 정리할 시간이 나네요. 앞으로 며칠간 리액트 스터디를 하며 정리가 필요한 내용들을 블로그에 쓰려고 합니다. 교재는 'the road to learn react'를 사용했고 저는 추가로 제가 가진 책 '실전 리액트 프로그래밍'을 봤습니다. 무료로 다운로드받을 수 있고, 저자에게 원하는 금액만큼 지불할 수도 있습니다. 최소 결제 금액은 4.99불입니다. 참고로, 교재 자체는 군더더기 없이 담을 내용만 담았으나 돈이 1도 안 들어간 만큼 디자인이나 그림 설명, 웹페이지를 보며 설명하는 내용은 별로 없으며, 번역 퀄리티는 전반적으로 좋으나 번역에서 생기는 어쩔 수 없는 어색함이 약간 있으므로 이 점 고려하는 것이 좋겠습니다. 그럼 ..

타입스크립트 강좌와 핸드북을 읽으며 정리하고 연습한 내용을 적는다. 순서는 완전 짬뽕. Ctrl + F4로 검색하며 읽어 보세요. 타입스크립트는 뭔가? 타입스크립트는 컴파일 언어지만, 전통적 컴파일 언어와는 다르다. 정적 타입 언어의 장점만을 가져온 것이다. 타입 체킹을 하며 리팩토링이나 에러 잡기에 효율적인 언어이다. 타입스크립트는 프로그래밍 언어이고, 타입스크립트 문법으로 작성한 소스 코드를 자바스크립트로 바꿔주는 것이 타입스크립트 컴파일러(tsc)이다. 자료형 타입스크립트를 쓰는 사용자가 만든 타입은 결국 자바스크립트의 기본 자료형(string, number, boolean, null, undefined 등)을 비롯한 타입스크립트 자료형들로 쪼개진다. 기본(primitive) 자료형들은 객체(obj..

원래 자바스크립트로 만들었던 투두리스트를 타입스크립트로 옮겨 봤다. 결과는 성공적. 자바스크립트를 타입스크립트로 옮기는 데에만 집중하기로 해서 HTML 구조나 디자인 등은 일체 건드리지 않았다. 타입스크립트로 만들었다고 뭐 별 건 없는 거 같다. 그냥 배운 걸 충실히 활용해서 js로 만드는 것보다 얼마나 더 잠재적인 에러를 줄일 수 있느냐에 집중하며 만들었다. 타입스크립트로 옮기며 느낀 점은... 1. DOM 요소를 다루는 것이 약간 까다롭다. 예를 들면 childNodes[0]번을 선택했을 때 이것이 undefined일 수도 있다는 식으로 나의 앞길을 막는다(그러나 장기적으로는 나를 보호해 주려는 손길인 것을...). // javascript if (!newTask.flagStatus) { newTas..

요즘 타입스크립트를 새로 배우고 있다. 타입스크립트는 기존 자바스크립트에 타입을 부여한 프로그래밍 언어이다. 각종 변수에 타입을 줄 수 있다는 게 자바스크립트와 가장 다른 점일 것이고, 또한 클래스(더불어 private, protected, static 등의 접근 지정자까지!), 인터페이스 등을 사용할 수 있어 OOP 프로그래밍을 하기 안성맞춤인 언어이다. 타입스크립트를 공부하기 좋은 무료 자료들에는 다음과 같은 것들이 있다. 한눈에 보는 타입스크립트 5분 안에 보는 타입스크립트 TypeScript Deep Dive 캡틴판교님 타입스크립트 핸드북 나는 '5분 안에 보는 타입스크립트' 핸드북과 인프런에서 '타입스크립트' 검색하면 나오는 Mark Lee 님 무료 강좌, 그리고 캡틴판교님 TS 핸드북을 봤는데..