4.1 자바스크립트 - 실행 컨텍스트와 스코프 (Execution Context, Scope)

시작하기 전어찌해야 간결하고 이해하기 쉽게 작성할지 고민이 많았었습니다. 다시 About Javascript 카테고리 포스트 관련하여 공부한 내용 중 정리가 된 부분들을 작성해보도록 하겠습니다.실행 컨텍스트/스코프에 대해 배우기 전아래 요소에 대해서 먼저 설명을 합니다. 이부분을 이해하고 다음 실행 컨텍스트/스코프 섹션을 들으시면 이해에 도움이 되실겁니다.원시값참조값동적 프로퍼티값 복사매개변수타입판별원시값과 참조값변수에는 원시값과 참조값을 담을 수 있습니다. 원시값은 Undefined, Null, 불리언, 숫자, 문자열인 값입니다. 참조값은 메모리에 저장된 객체입니다.자바스크립트는 메모리 위치에 직접 접근하는 것을 허용하지 않으며, 객체를 조작한다는 것은 객체 자체가 아니라 해당 객체에 대한 참조를 조작..

[ETC] Heroku Push 시, Username/Password 입력 무반응

Heroku Push 안되는 현상Mac환경에서 작업하여 Heroku에 Push할때는 별 이상없는데, 회사에서 수정해볼까 하고 소스를 받아서 수정 후 git push heroku master를 해보니 username, password를 입력하라고 뜹니다.C:\heroku>git push heroku master Username for 'https://git.heroku.com': Password for 'https://gnin@git.heroku.com': 처음보는 문구에 당황하긴 했지만 우선 입력해 보았습니다.remote: ! WARNING: remote: ! Do not authenticate with username and password using git. remote: ! Run `heroku l..

[ETC] 초고속 코딩도구 Emmet, SublimeText에서 사용하기

Emmet초고속 코딩 도구! 이름이 거창합니다. 하지만 아래 주소로 가셔서 사용 데모를 보시면 왜 초고속인지 이해가 되실거라 믿습니다. Emmet 공식 사이트간단하게 설명하자면 CSS 셀렉터를 이용하여 HTML코드로 변경하는 도구입니다.이 외에도 수많은 기능이 있으며 아래에서 설명하겠습니다. 이 포스트의 목적은 제가 작업중에 생각이 안날 때 쉽게 찾기 위함이었으나, 간단한 기능적 설명도 달아서 기능을 모르셔도 한번 봐두시면 도움이 될 것 입니다.설치하기package control을 이용하여 설치하겠습니다. 설치방법은 이전 포스트를 참조부탁드립니다.지난 포스트 보기Package Install에서 Emmet을 검색하여 설치합니다.Emmet의 경우 설치 후 Sublime Text의 재시작이 필요합니다. 재시작..

(사용자를)생각하게 하지마! - (Don't Make Me Think)

(사용자를) 생각하게 하지마! (Don’t Make Me Think)제목에서 말하는 바가 무엇 일까요?이 책은 UX 디자인에 관한 책입니다. 이제 이해가 되네요. 사용자가 바로 이해할 수 있는 UX디자인을 말하는 것 인가 봅니다. 저는 디자인맹인지라 한 수 배우고자 조용히 책을 집어들었습니다.제 3판제 3판이라고 합니다. 2판에서 추가된 내용은 약간의 변경과 모바일섹션의 추가 뿐이라고 합니다. 1판에서 2판으로에 변화도 크게 없다고 합니다. 나온지 오래된 책인데도 그 당시에 작성한 디자인 철학이 아직도 적용된다는 뜻이라 약간 놀랐습니다.이 책만 보면 UX에 대한 고민은 끝?끝이 아닙니다! 시작부터 아래와 같은 문구로 경고해 줍니다.절대적인 사용성 원칙은 없습니다 - 그때그때 다르게 적용되며 개발자나 디자..

폴리글랏 프로그래밍 - 새로운 자바 언어를 기다리는 히치하이커를 위한 안내서

폴리글랏 프로그래밍뉴욕의 프로그래머이며 칼럼리스트이신 임백준님의 폴리글랏 프로그래밍을 보았습니다. 전에 누워서 읽는 알고리즘 후기 포스트에서 얘기했던 것 처럼 필체에 이끌려 관련 책들을 찾아 보는데 폴리글랏 프로그래밍이라는 생소한 용어가 보이더군요. 목차를 보니 자바, C#, 스칼라라는 대항목과 대항목에 포함된 기술적 개념들이 소항목으로 들어가있었습니다. (일급함수, LINQ 등등) 폴리글랏 프로그래밍이라면서 폴리글랏 프로그래밍이 항목에 없기에 매우 의아했습니다.폴리글랏 프로그래밍이란?폴리글랏이란, 여러 개의 언어를 사용하는 것을 말하고 있습니다. 여기서 언어란 영어, 일본어, 한국어같은 언어입니다. 하지만 이 책에서는 프로그래밍언어를 말합니다. 미국에 프로그래밍 업계에서도 사용한지 좀 된 용어라고 합니..

[ETC] Webpack에서 NODE_ENV 사용하기 및 Heroku 환경변수 설정

Heroku에 작업물을 올리고 빌드를 했더니 오류가 발생한다.디버그 해보니 로컬에서 작업할 때 사용한 NODE_ENV 환경변수를 webpack에서 빌드 후에 제대로 불러오지 못하고 있었다. process.env.NODE_ENV를 사용하기 위해서 webpack definePlugin 기능을 사용하였고 말끔하게 해결됐다.DefinePlugin 사용WebPack Config에 아래와 같이 설정을 추가해 주자module.exports = [{ plugins: [ new webpack.DefinePlugin({ 'process.env': { 'NODE_ENV': JSON.stringify(process.env.NODE_ENV) } }) }] 위 플러그인을 추가해주고 다시 빌드 하니 정상적으로 동작하는걸 확인 할 ..

[ES6] Object.assign, TypeError: undefined is not a function

오류 발생Node.js + Express + Redux 환경에서 작업 중, Object.assign 사용 시 아래와 같은 오류가 발생하였다.TypeError: undefined is not a function 원인Object.assign 함수의 경우 ES6에서 지원하기 때문에 지원하지 않는 브라우저에 대해서 TypeError가 발생한다.기존 webpack에 transpiler로 Babel을 사용중이었다. 그러나….해결알고보니 Babel을 사용하여도 모던’브라우저에서만 정상적으로 동작하고 하위 브라우저에서는 동작하지 않는다고 한다.polyfill ( 모든 기능이 작동할 수 있도록 처리 해주는 기능 )이 추가로 설정되지 않아서 생기는 문제였다. 그런 문제로 Babel Polyfill을 설치 하니 정상적으로 ..

[ETC] Sublime Text 테마, 컬러 스킴 설정

테마 변경이전 포스트에서 처럼 package install로 테마설치 할 수 있으며 지원하는 테마는 아래 페이지에서 확인이 가능합니다.지난 포스트 보기 테마 보러가기들어가셔서 원하는 테마를 직접보시고 설치하기 원하시는 테마의 제목을 기억해둡시다 Package Install에서 검색하여 선택해주면 설치 끝!하지만 그대로인 반전설치후 바로 적용되는 것이 아닌 테마 활성화 코드를 입력해주어야 합니다. 예를들면 https://packagecontrol.io/packages/Agila%20Theme 이 테마의 내용을 보시면, 하단에 이런 내용이 있습니다. How to Activate Theme 목차를 보시면 옵션에서 어떻게 바꿔야 하는지 잘 설명해주고 있습니다. 이와같이 옵션에서 테마를 설정해주면 바로 테마가 활..

[ETC] Sublime Text3 소개 및 추천 패키지

Sublime Text3Sublime Text란?간편하게 사용할 수 있는 텍스트 에디터 입니다. 주로 프론트엔드에서 많이 사용하며, node.js로 구성된 백엔드에서도 사용하기도 합니다.현대에 사용되는 언어는 대부분 지원하며, 없다면 추가 package 설치하여 사용 할 수 있습니다.특이하게 설정등이 json으로 되어있어서 처음에는 당혹스러울 수 있으나, 적응하게 되면 편…하다고는 못하겠으나 확장성이 좋습니다. 생각해보니 검색하기도 좋고 설정 할 수 있는 부분이 너무 많아서 GUI라면 약간 아찔하네요.아래 경로에서 다운받을 수 있습니다.Sublime text3 Download설정에 Default와 User?기본 sublime 설정이나 package 설정을 보면 Setting - Default, Setti..

[Express] 세션 expires 잘못된 설정으로 인한 오류

express구동 시 오류 발생/app/node_modules/express-session/node_modules/cookie/index.js:136 if (opt.expires) pairs.push('Expires=' + opt.expires.toUTCString()); ^ TypeError: opt.expires.toUTCString is not a function at Object.serialize (/app/node_modules/express-session/node_modules/cookie/index.js:136:56) at setcookie (/app/node_modules/express-session/index.js:576:21) at ServerResponse. (/app/node_mod..

[TIP] MAC에서 node install 시 권한 오류 발생 할때

MAC에서 node install 전역 설치시 오류npm install http-server -g 위처럼 http-server를 설치 하려고 하는데 아래와 같은 오류가 발생했습니다. 확인해 보니 -g 를 붙여서 전역으로 설치 할 경우 발생하는 오류였습니다.npm ERR! Darwin 15.5.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "http-server" "-g" npm ERR! node v6.2.0 npm ERR! npm v3.8.9 npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ERR! syscall access..

[ETC] Git & GitHub 사용하기

Git & GitHubGitGit은 프로젝트 관리도구 입니다. 무료로 사용할 수 있는 오픈소스이며, 작은 규모, 큰 규모 상관없이 프로젝트 수행 시 필요한 거의 모든 기능을 제공합니다.GitHub웹에서언제 무슨 파일을 추가 한지, 어떤 내용을 수정한지, 이전에 지운 내용은 무엇인지 등 프로젝트를 전반적으로 유용하게 관리할 수 있게 해줍니다. 내컴퓨터에서 작업한 프로젝트를 GitHub에 올려서 관리 할 수 있으며 검색, 다운로드 등, 공유 등 다양한 기능을 지원합니다. 명령어Git GUI보다는 명령어를 자주쓰기 때문에 명령어 위주로 작성하겠습니다.초기화디렉터리를 Git으로 관리할 때 가장 먼저 할 일은 초기화 하는 것입니다. init 명령어를 사용하며, 명령어를 실행하면 .git 디렉터리가 프로젝트에 생성..