개발

지난 포스팅에 이어서 이웅재님의 우아한 타입스크립트 세미나 2편을 정리해 보려고 한다. 이번 포스팅에서는 실전 타입스크립트 코드를 작성하는 측면에서 적용해볼 수 있는 부분들에 대해 알아본다. 1. Conditional Type 활용하기 Conditional Type이란 타입이 조건부로 적용되는 것을 의미한다. 타입 T를 제네릭 형태로 받는다. 예를 들면 아래의 예제 코드처럼 T가 string인 경우는 StringContainer로, T가 number이면 NumberContainer로 받을 수 있다. 이번에는 infer라는 키워드를 살펴보도록 하자. 조건부 타입에서 infer는 타입변수를 참조하기 위해서 사용이 된다. 프로미스의 제네릭은 보통 리턴타입을 의미한다. 아래의 예제는 Promise의 배열인 경우..
요즘에 실무에서 프론트엔드 개발을 하기 시작하면서, 과거에 혼자서 프로젝트를 할 때와 다른 점들이 몇 가지가 보이기 시작했다. 그 중에 하나가 디자인 패턴인데, 아직도 나는 디자인 패턴을 왜 써야 하고 또 잘 쓰려면 어떻게 써야 하는지에 대해서 잘 모른다. 그래서 주말에 조금씩 디자인 패턴을 공부해 보기로 했다. 교재는 이고 디자인 패턴 관련된 책 중에서 오랫동안 많은 사람들한테 읽혀진 책 중 하나이다. 책의 내용을 정리하면서, 최근에 추가되거나 수정된 내용들을 적절하게 업데이트 하는 식으로 공부 및 포스팅을 작성해 보려고 한다. 개발자들은 혼자서 프로젝트를 하는 경우보다 여럿이 함께 하는 경우가 훨씬 더 많다. 그리고 혼자 하더라도 그 사람이 처음부터 끝까지 프로젝트를 책임지고 한다는 보장은 없다. 그..
· Dev. Life
오랜만에 해커톤에 참여했다. 작년 8월 중국 해커톤 대회 이후로 거의 11개월 만이다. 그 사이에 개인적으로 많은 일이 있었다. 소프트웨어 마에스트로를 하고 동시에 스타트업에서 인턴을 하고 인턴이 끝나자마자 토스에 입사를 했다. Scraping Developer로 짧게 일하다가 갑작스럽게 퇴직을 하고 다시 취준을 하고, 그러다가 지금 새로운 회사에서 Web Frontend Developer로 입사해서 일을 하고 있다. 개발자들 중에 안 바쁜 사람이 어딨겠냐만 ㅋㅋ 정신없이 살다보니 (취준은 취준대로, 회사는 회사대로) 해커톤이나 사이드 프로젝트를 제대로 하기가 쉽지 않았다. 사이드 프로젝트에 대한 열망은 항상 있었다. 무언가를 만드는 것이 좋아서 프로그래밍을 시작했고, 시각적인 인터랙션이 좋아서 웹 프론..
이번 포스팅에서는 자바스크립트의 타입과 값에 대한 내용을 정리해 보려고 한다. 기본적인 내용이라 대부분의 자바스크립트 개발자라면 어느 정도 알고 있을만한 내용이지만, 어렴풋이 알고 있는 개념들을 확실하게 정리하고 넘어가기 위해 이 글을 작성했다. 자바스크립트에는 7가지 내장 타입이 있다. null undefined boolean number string object symbol(ES6) 값 타입은 typeof로 알 수 있는데 다른 타입들은 정확하게 매치가 되고 null만 type이 object로 매칭된다. 그리고 자바스크립트 내장 타입에는 없지만 typeof가 반환하는 문자열 중에는 "function"도 있다. function은 object의 하위 타입이다. typeof true === "boolean"..
지난 포스팅 #1. 웹 브라우저 & HTML #2. CSS #3. JavaScript (Part1) 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요. 클로저는 독립적인 변수를 가리키는 함수이다. 그리고 클로저 안에 정의된 함수는 만들어진 환경을 기억한다. 클로저를 통해 은닉화를 할 수 있으며, 콜백 함수 등을 사용할 때 발생할 수 있는 에러를 해결하는데도 유용하다. function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); //myFunc변수에 displayName을 리턴함 //유효범위의 어휘적 환경을 유지 m..
JavaScript ES6에서 기존의 ES5와 비교해 보았을 때 많은 변화가 생겼다. 그 중의 하나는 ES6에서 컴포넌트 정의를 위한 모듈 형태를 지원한다는 것이다. 이 과정에서 기존의 자바스크립트에서 모듈을 정의한 방법인 AMD, CommonJS와는 다른 방식으로 모듈을 사용하게 되었다. 바로 import/export 문을 통해서 언어 내부적으로 자바스크립트 모듈 의존성을 지원하게 된 것이다. 이 글은 (과거의 나처럼) 기존의 CommonJS 방식의 require로 모듈을 불러오는 방식과 ES6의 import로 모듈을 불러오는 방식을 혼동하는 사람들을 위해서 작성하게 되었다. 먼저 기존의 CommonJS 방식의 모듈 사용 방식과 비교해 보았을 때 ES6 방식이 가진 장단점을 살펴보고 가자. ES6 방식..
두 번째로 자료구조에서 살펴 볼 내용은 연결 리스트(LinkedList)이다. 연결 리스트 연결 리스트는 어떤 데이터 덩어리(이를 노드라고 표현)를 저장할 때, 그 다음 순서의 자료가 있는 위치를 데이터에 포함시키는 방식으로 자료를 저장하는 자료구조이다. 따라서 각각의 노드들은 자기 자신 다음에 어떤 노드가 오는지를 기억하고 있다. 배열이 가지고 있는 단점들을 해결하기 위해서 만든 자료구조이다. 예를 들면 배열에서는 하나의 값을 삭제하고 추가하는 데에 시간복잡도가 O(n)이었다면, 연결 리스트에서는 삭제시에 하나의 노드를 빼 주고 나서 삭제된 노드 이전의 노드가 삭제된 노드 이후의 노드를 바로 참조할 수 있게 연결해 주면 되기 때문에 시간복잡도가 O(1)이고 삽입도 비슷한 이유로 O(1)이다. 연결리스트..
소마에서의 생활도 이제 절반이 넘어갔다. 연수 생활을 하면서 계속 느끼는 거지만... 내가 어떻게 소프트웨어 마에스트로에 선발이 됬는지 의구심이 들 때가 참 많다. 정말 실력있고 인성이 좋은 분들이 많다. 멘토들도 그렇고 멘티들도 그렇고 그런 분들을 매일매일 만나고 연락하면서 끊임없이 나를 비춰보게 되는 점이 소마 기간동안 내가 발전하는 계기가 되는 것 같다. 8월에는 멘토 특강을 참 많이 들었다. S멘토님의 특강이 가장 기억에 남는다. 자신이 들어갔던 첫 회사에서 하루 16시간 이상씩 개발을 하면서 열악한 환경이었지만, 그렇게 개발을 해서 이루어낸 성과들을 이야기 해 주셨을 때 나는 넘사벽 같다는 생각이 종종 든다. 예를 들어 1000 만큼의 비용이 드는 문제를 본인의 경험과 지식으로 100까지 줄인 ..
DevOwen
'개발' 태그의 글 목록 (2 Page)