OWEN

아이템 1. 타입스크립트와 자바스크립트 관계 이해하기 타입스크립트는 문법적으로 자바스크립트의 상위집합. → 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다. → 자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니라도 타입 체커에게 지적당할 가능성이 높다. → 문법의 유효성과 동작의 이슈는 독립적인 문제 타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다. → 그러나 타입 체커가 모든 오류를 찾아내지는 않음 → 타입 체커를 통과하면서 런타임 오류를 발생시키는 코드는 충분히 존재. 타입스크립트 타입 시스템은 자바스크립트의 런타임 동작을 '모델링' 한다. const x = 2 + '3'; // 정상, string const..

4. 영지식 증명에 대해 어린아이에게 설명해 준다고 생각하고 본인만의 언어로 설명해주세요. 영지식 증명은 말 그대로 지식이 없이 해당 내용을 증명하는 것이다. 비유를 통해 설명을 해 보도록 한다. 증명자 재석은 어떤 동굴 안에 비밀의 문을 열 수 있는 열쇠를 가지고 있다. 동굴은 다음과 같은 고리 모양으로 되어 있으며 가운데 비밀의 문이 있다. 입구에서는 비밀의 문이 보이지 않는다. 검증자 명수는 키를 가지고 있을 수도 있고, 아닐 수도 있다. 명수가 키를 가지고 있는지 여부를 재석은 알아내야 하지만 명수는 그 사실을 알려주지 않는다. 이러한 상황 속에서 명수가 아무런 정보도 주지 않고 키를 가지고 있는지 재석이 증명하려면 다음과 같이 해볼 수가 있다. 먼저 명수가 A 또는 B 문으로 들어간다. 재석은 ..

최근에 웹 프론트엔드 개발자로 취업을 준비하는 개발자 지망생 분들을 멘토링을 하면서 여러가지 질문들을 받는데, 그 중에서 나도 고민을 하고 답변을 해준 질문들이 있었던 것 같아 그러한 질문들도 조금씩 블로그에서 다루어 보려고 한다. 이번 주제는 리액트에서의 상태관리를 어떤 방식으로 하는 것이 소위 best practice인가에 대한 질문을 받았고 이에 대한 내 생각을 정리해 보려고 한다. 어디까지나 이 글이 정답은 절.대. 아니며 자유로운 의견은 댓글로 남겨주면 감사할 것 같다. 질문 : 리액트에서 상태관리는 어떻게 해야 하나요? 상태관리 라이브러리는 꼭 써야 하나요? 쓰게 된다면 어떤 것을 써야 하나요? 이 이야기를 하려면 먼저 Flux 패턴에 대해서 이야기를 할 수 밖에 없을 것 같다. Flux 패턴..

오픈소스 컨트리뷰션 아카데미를 계속해서 진행하고 있다. 조금 늦은 감이 있지만.. 초반에 했었던 학습 중 이더리움에 대한 기본 과제 심화편 공부한 내용을 정리해 보려고 한다. 1. ECDSA가 무엇인지 또 어떻게 동작하는지 간단하게 설명하세요. 타원곡선 디지털서명 알고리즘(ECDSA, Elliptic Curve Digital Signiture Algorithm)은 타원곡선암호를 전자서명에 접목시킨 알고리즘이다. 일반적인 인증 시스템에서 보안 키의 보호가 점점 어려워짐에 따라 보완하기 위해 만들어졌으며 이 방식에서는 발신자에 의한 서명 시 사용되는 개인 키와 수신자가 발신자의 서명을 사용하는 공개키 한 쌍을 갖는다. 블록체인 네트워크에서 트랜잭션을 주고받을 때 수신자가 인증자의 공개 키로 메시지가 진짜인지..

오랜만에 백준 문제를 풀었다. Brute Force 부터 유형별로 차근차근 풀어보려 한다. 이 문제는 찐 Brute Force 문제이다. Brute Force는 하나하나 직접 다 해보는 방법을 말한다. 일반적으로 이 방법은 시간과 공간을 초과하기 때문에 만능은 아니지만.. 구현 방법이 떠오르지 않을 때는 가장 먼저 시도해 보면 좋은 방법이기도 하다. 이 문제는 5개의 테트로미노를 뒤집고 돌려서 종이에 놓았을 때 차지하는 4칸의 합을 가능한 경우 모두 구해준 뒤 가장 큰 값을 출력하면 된다. 테트로미노는 5개이지만 실제로 우리가 고려해야 하는 테트로미노는 다음과 같이 총 19개가 된다. 그리고 이 19개 각각에 대해 해당 종이(M*N)를 전부 돌면서 발생할 수 있는 모든 경우를 다 탐색해 주어야 한다. 이..

화 : [Javascript] 비동기, Promise, async, await 확실하게 이해하기 [Javascript] 비동기, Promise, async, await 확실하게 이해하기 – Under The Pencil 개요 본 글은 자바스크립트에서 Promise 에 대한 개념을 잡기 위해 작성한 글입니다. 자바스크립트의 기본 문법을 먼저 알아야 이 글을 조금 더 수월하게 보실 수 있습니다. 필자는 Node.js 기반에서 elvanov.com 수 : Apollo Client는 Redux와 무엇이 다른가 목 : 리액트의 Hooks 완벽 정복하기 리액트의 Hooks 완벽 정복하기 React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고..

회사에서 업무를 하면서 공부해야 하는 것들이 계속해서 생겨난다. 그러한 주제들을 중심으로 글을 읽었다. 월 : 변경에 유연한 컴포넌트 변경에 유연한 컴포넌트 이번 포스트에서는 변경에 유연하게 대응할 수 있는 컴포넌트에 대해 이야기해보려고 한다 TL;DR 컴포넌트는 데이터를 중심으로 추상화한다. 일반적인 인터페이스로 컴포넌트를 디자인한다. 변 jbee.io 화 : node_modules로부터 우리를 구원해 줄 Yarn Berry node_modules로부터 우리를 구원해 줄 Yarn Berry 토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다. toss.tech 수 : MVVM 패턴 MVVM 패턴 나의 첫 디자인 패..

브라우저가 어떻게 웹 페이지를 사용자에게 보여주는 지 그 과정을 자세하게 아는 것은 프론트엔드 개발자에게 꼭 필요한 지식이라고 생각한다. 따라서 면접 때 충분히 물어볼 수 있고, 면접 때 설사 물어보지 않더라도, 실무에서 트러블 슈팅을 할 때 알고 있어야 하는 내용이라고 생각을 해서 나름대로 정리를 해 보려고 한다. 먼저 아래의 그림을 보자. W3에서 말하는 사용자 액션이 발생하고(ex. https://www.google.com 을 브라우저 url에 입력한다) 브라우저가 이를 감지해서 웹 페이지를 아래의 그림 순서대로 로드한다. 여기에서 노란색 부분은 웹 페이지에서 벗어난 후 문서를 읽어들이기 전을 의미하고, 파란색 부분은 자바스크립트 이벤트는 없고 전부 네트워크 레벨에서 일어나는 일이다. 첫 번째 일어..