As i wish

클로저란? 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 무슨말인지 모르겠다.... MDN web docs를 보면 조금 이해가 편하다. 클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하기 위해서는 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. developer.mozilla.org function init() { var name = "Mozilla"; // name은 init 에 의해 생성된 지역변수다 function displayName() { // displayName() 은 내부 함수이며,클로저다 alert(name); // 부모 함수에서 선언된 변수를 사용한다 } displayName(); } init(..

오늘은 가위바위보 게임을 바탕으로 React에 라이프 사이클, 고차 함수, Hooks useEffect에 대하여 포스팅 해보겠습니다. 계속 해서 언급 하지만 제 포스팅은 '제로초' 님의 리액트 강좌를 바탕으로 합니다. 제로초님의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 먼저 라이프사이클에 대하여 알아보겠습니다. 리액트 라이프 사이클은 하나의 component의 생명 주기를 의미 하는데요. 처음 component가 rendering 되고 없어 질 때 까지 를 의미 합니다. 여러가지가 있는데, 기본적으로 componentDidMount, componentDidUpdate, componentWillUnMount 요 3가지가 가장 중요하죠. 대략적인 의미는 다음과 같..

안녕하세요. 오늘은 '반응속도 체크' 게임을 만들어 보겠습니다. 앞서 계속해서 언급했지만 제 포스팅은 '제로초' 님의 유투브 강좌를 듣고 복습하는 내용으로 꾸며집니다. 제로초님의 웹게임 강좌 리액트 무료 강좌(웹게임) - YouTube www.youtube.com 오늘은 '반응속도 체크' 게임을 통하여 jsx 안에서 조건문, 그리고 타이머에 관하여 공부했습니다. 일단 결과창 부터 확인해 보겠습니다. 이렇게 상태가 총 3가지 정도가 있고 파랑 -> 빨강 -> 초록 에 따라서 클릭 했을 때에 변화를 주는거죠. 먼저 파랑(waiting) 일때 클릭하면 빨강(ready)화면이 됩니다. 그 다음 특정 시간이 지나면 초록(now) 화면이 되는데 이 때, 화면을 클릭해서 반응속도를 체크하는거죠. 물론 빨강(ready..

안녕하세요. 엄티 입니다. 오늘은 EC2 (ubuntu) 를 재시작 했을 때에 저의 node app을 pm2를 사용하여 재시작 하는 법에 대하여 포스팅해보겠습니다. 먼저 node app 을 ubuntu 환경에서 사용하기 위해서는 여러가지 방법이 있지만 저는 pm2 를 사용하였습니다. pm2 란 PM2 - Node.js 프로세스 관리 도구 PM2 - Node.js 프로세스 관리 도구 :: Outsider's Dev Story 서버에서 웹 애플리케이션을 운영할 때 보통 데몬으로 서버를 띄워야 하고 Node.js의 경우 서버가 크래시나면 재시작을 하기 위해서 워치독(watchdog) 류의 프로세스 관리자를 사용하게 된다. 나 같은 경우 아주... blog.outsider.ne.kr 노드를 더 우아하게 pm2 ..

안녕하세요. 엄티 입니다. 오늘은 You don't know JS에 크게 2장으로 이루어진 챕터 중 2 장에 1번 '비동기성: 지금과 나중'에 대하여 포스팅해보겠습니다. 저의 포스팅은 한빛미디어에서 나온 'You don't know JS'를 기준으로 포스팅합니다. 일단 프로그래밍 비동기적 요소가 많이 포함되어있습니다. 실제 실무를 접하더라도 자바스크립트뿐만 아니라 파이썬, 자바 도 마찬가지로 비동기적 요소가 들어가 있죠. 예를 들어 서버에 REST ful API, Database 접근, 사용자 입력, AJAX 등 대부분이 다 비동기적 요소로 구성되어 있기 때문에 비동기적 요소를 알아야 합니다. 1. 프로그램 덩이 자바스크립트 프로그램은. js 파일 하나로도 작성할 수 있지만 보통은 여러 개의 덩이, 곧 ..

You don't know JS에 PART 1에 마지막 장인 '작동 위임'에 대하여 포스팅해보겠습니다. 지금 까지 [[Prototype]]에 대하여 공부하였고 '클래스'나 '상속'의 맥락에서 [[Prototype]] 이 적절하지 않은 지 공부했습니다. 따라서 [[Prototype]] 은 자바스크립트에서 여타 다른 클래스 지향 언어들과 달리 한 객체가 다른 객체를 참조하기 위한 내부 링크라고 정의할 수 있죠. 또한 참조하는 객체에 존재하지 않는 프로퍼티/메서드를 참조하려고 할 경우 엔진은 [[Prototype]] 링크를 따라가며 연결된 객체마다 프로퍼티/메서드가 있는지 뒤져보고 발견되지 않으면 다음 [[Prototype]] 링크에 연결된 객체를 타고 이동하는데 이것을 '프로토타입 연쇄'라고도 정의하였습니다..

오늘은 EC2 (Ubuntu) 에서 node를 설치 및 업그레이드 하는 법을 포스팅 해보겠습니다. 실제 저는 서비스를 운영할 때에 node js를 사용합니다. 근데 버전이 계속해서 나오고 있고, 업그레이드도 되고 있기 때문에 그에 맞게 node 버전 및 npm 버전을 업그레이드 해 줄 필요가 생깁니다. 아주 간단합니다. 저는 node를 설치 할때 nvm 모듈을 사용하여 node를 설치하였는데요. 업그레이드 역시 nvm으로 설치 및 업그레이드 해보겠습니다. 1. nvm 설치 1-1 설치 $ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash 1-2 확인 $ nvm ls -bach: nvm: comma..

안녕하세요. 오늘은 컴포지트 패턴에 대하여 공부해보겠습니다. 컴포지트 패턴 객체들을 트리 구조로 구성하여 부분과 전체를 나타내는 계층구조로 만들수 있다. 클라이언트에서 개별 객체와 다른 객체들로 구성된 복합 객체(composite)를 똑같은 방법으로 다룰 수 있다. 쉽게 말해 컴퓨터의 디렉토리 구조라고 생각하시면 됩니다. 컴퓨터에 어떤 디렉토리가 있다고 가정 했을 때, 디렉토리 안에는 디렉토리가 있을 수도 있고, 파일이 있을수도 있죠. 근데 클라이언트 입장에서는 이게 디렉토리인지, 파일인지 구분 없이 만들 수 있게 되어야 합니다. 즉, 클라이언트는 개별 객체(파일), 복합 객체(디렉토리) 를 같은 방법으로 다룰 수 있어야 합니다. 그럼 저는 헤드퍼스트에 나온 예제를 참고하여, 메뉴로 구성해 보겠습니다. ..

You don't know JS에 3 장 객체에 대하여 포스팅해보겠습니다. 앞서 this에 관해 포스팅했었는데 참고해주세요. 3.1 객체 정의 일반적으로 JS에서 객체는 선언적(리터럴) 형식과 생성자 형식, 두 가지로 정의할 수 있습니다.. // 선언적(리터럴) 형식 var myObj = { key: value // ... } // 생성자 형식 var myObj = new Object(); myObj.key = value; 두 형식 모두 생성되는 객체는 같습니다. 그러나 리터럴 형식은 한 번의 선언으로 다수의 키/값을 추가할 수 있고, 생성자는 한 번에 한 프로퍼티만 추가 할 수 없어요. 3.2 타입 자바스크립트는 대략 7가지 정도 타입이 있는데, null undefined boolean number s..

기본은 모르고 자꾸 개발만 하다 보니 이상하게 제 지식이 역삼각형 형태가 되는 것 같아서. 기본적인 책을 사서 읽어보고 정리를 하려고 합니다. 책은 한빛미디어에서 나온 "You don't know JS - 카일 심슨"의 책을 바탕으로 정리해보겠습니다! 우선 this는 모든 함수 스코프 내에 자동으로 설정되는 특수한 식별자입니다. 일단 스코프란 링크를 참조해 주세요. 일단 this 가 사용된 코드를 보겠습니다. function identify() { return this.name.toUpperCase(); } function speak() { var greeting = 'Hello, Im ' + identify.call(this); } var me = { name: 'Kyle' }; var you = { ..