J2P Blog

I'm JaePil Jung, FrontEnd Developer.

 
Latest stories

Deno icon
Deno v0.3.1 Release Review

2019.02.281 Min Read — In Deno

Add import.meta.main PR Link: #1835 Issue Link: #1834 Ref lin: proposal-import-meta 기존에 추가된 사용해서 main 모듈인지 확인할 수 있지만 타이핑 하기 쉽고 확장가능 하도록 가 추가 되었다. How to use? Fix console.table display of Map PR…

Vue.js icon
How to use Storybook for Vue

2019.02.233 Min Read — In Vue.js

Create Vue Project Vue CLI 명령으로 새로운 프로젝트를 생성한다. Installation Storybook Storybook을 쓰기 위한 필요한 패키지를 설치 한다. Add Storybook command to npm scripts Storybook을 실행하기 위한 커맨드를 npm scripts에 추가 한다. Add Storybook…

Deno icon
Deno v0.3.0 Release Review

2019.02.194 Min Read — In Deno

Add Deno global namespace object PR Link: #1748 Issue Link: #1705 deno 모듈을 사용하는 대신 Deno 전역 변수가 추가 되었다. deno 모듈을 import 해서 사용하는 방식은 가까운 시일에 제거 되므로 코드를 업데이트 해야 한다. before after Add window.location PR…

Deno icon
Deno v0.2.11 Release Review

2019.02.094 Min Read — In Deno

Add deps to --info output ( #1720 ) Deps type selection history Bert Belder 이 deps 모양에 대해서 3가지 제안을 했고 라이언이 Advanced를 선택했다. Before 이전에는 local, type, compiled, map 만 보였다. After 이제는 deps가 추가 되어서 import…

ESLint icon
Apply eslint to a node project

2019.01.212 Min Read — In ESLint

Install ESLint 프로젝트 디렉토리에서 위와 같이 설치한다. 만약 글로벌로 설치 하고 싶다면 다음과 같이 설치 한다. Init ESLint ESLint를 dev 로 설치 했다면 위와 같은 명령으로 ESLint 를 init 한다. 글로벌로 설치 했다면 위와 같이 실행한다. ESLint config Use a popular style guide…

React icon
How to not create sourcemap when building from CRA project

2019.01.092 Min Read — In React

React 프로젝트를 프로덕션에 배포 하기 위해서 build를 하게 되는데 js, css 파일들의 sourcemap 이 같이 생성 된다. sourcemap은 minify 된 파일 디버깅을 편하게 하기 위해서 만드는걸로 알고 있는데 프로덕션 배포시에 이 파일이 딱히 필요없다고 생각한다. 그래서 build 할 때 sourcemap을 생성하지 않고 build…

CSS3 icon
iOS input box inner shadow

2018.11.211 Min Read — In CSS3

iOS 에서 input box를 보면 안쪽 상단에 shadow 가 있는걸 알게 보게 되었다. 난 넣은 적이 없는데... 찾아보니 iOS 에서 기본적으로 설정되어 있는 테마를 기반으로 넣고 있다고 한다. 다음과 같이 css 에 추가 해주면 기본 설정되어 있는 속성이 삭제 된다. 여러 가지 속성들이 있는거 같은데 지금은 모든 설정을 쓰지 않을거고 input…

CSS3 icon
justify-content property

2018.11.042 Min Read — In CSS3

justify-content flex blox를 사용했을 때 자식 요소의 정렬을 정해주는 설정이다. Values 자식 요소들이 앞쪽 기준으로 나열된다. (default…

CSS3 icon
flex-direction property

2018.10.241 Min Read — In CSS3

flex-direction flex container 내부에 자식 요소들을 어떻게 배열할 것인지를 설정하는 속성 값이다. values 값으로는 row, row-reverse, column, column-reverse 4개를 가질 수 있다. row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따른다고 한다. column 혹은 column…

Webpack icon
Django webpack loader

2018.10.222 Min Read — In Webpack

일반적으로 Vue 또는 React를 사용하게 되면 SPA로 작업하겠지만 기존에 Django 프로젝트에 API 가 준비 되어 있지 않다면 바로 SPA로 만들기 힘들다. 우리 회사 프로젝트가 그렇다... Django Template와 Vue를 같이 쓰기 위해 Django webpack loader를 적용해 회사에서 Vue를 사용하기 위한 작업을 했다. Vue…

Sass icon
Using scss in a project created with CRA 2.0

2018.10.181 Min Read — In Sass

App.css 파일을 App.scss 파일로 변경하고 App.js 에서 import 해보자. 위와 같은 오류 메시지를 볼 수 있다. 오류에 친절하게도 설명이 있다. 프로젝트 디렉토리에서 패키지를 설치 하자. 이제 App.js 파일에서 App.scss 파일을 import 하면 scss 에 선언한 내용이 적용 된다.

Deno icon
How to use Deno flags

2018.09.065 Min Read — In Deno

Deno 기본 사용 방법 —allow-write Allow file system write access. 코드에서 파일을 쓰려면 옵션을 사용해야 한다. 위와 같이 file.ts 파일 생성한다. 생성한 파일을 터미널에서 실행한다. flag를 사용해서 실행하면 정상적으로 파일이 생성된다. —allow-net Allow network access…

Deno icon
Deno Installation

2018.09.051 Min Read — In Deno

Clone Deno Project Setup Build Run Download Deno Binary

Rust icon
Rust Installation

2018.08.292 Min Read — In Rust

요즘 Deno 에 관심이 생기면서 코드를 보고 있는데 거기에서 rust를 사용하는걸 알게 되었다. 프로젝트 초기 단계이고 잘하면 프로젝트에 기여 할 수도 있다고 생각해서 rust 문법을 공부해 볼려고 한다. 그래서 가장 기본인 rust 설치부터 해볼까 한다. Install 위와 같이 rust 설치를 같이 설치가 끝났다. Rust version…

JavaScript icon
Visibilitychange 이벤트 사용하기

2018.08.271 Min Read — In JavaScript

회사에서 동영상 서비스를 하고 있는데 안드로이드 디바이스 파이어폭스를 사용하는 유저가 브라우저를 내려도 동영상 재생이 계속 되어서 소리가 들리는 문제가 있었다. 간단하게 window blur 이벤트가 발생하거나 window focusout…

Git icon
Fixed git commit author

2018.08.212 Min Read — In Git

git log로 수정할 commit 확인하기 rebase 시작하기 rebase 하기 vi edior가 시작 되면서 위와 같이 나오면 -> 로 변경한다. 저장하고 나온다. commit amend 하기 위와 같은 메시지가 보이면 다음과 같이 입력해준다. author에 자신이 변경하고자 하는 author 정보를 넣어주면 된다. 다음 commit…

Vue.js icon
Vuex actions 안에서 router 변경하기

2018.06.201 Min Read — In Vue.js

Vuex actions 에서 비동기로 로그인 처리를 하고 promise 를 reture 해주는 방식으로 코드를 작성했었다. 이유는 로그인 처리가 끝나고 페이지를 이동해주기 위해서였다. 또 Vue methods 함수안에서 처리하고 있어서 mapActions를 쓰지 못하는게 싫었고... 코드를 좀 더 보기 좋게 하기 위해서 Vuex actions…

Jest icon
Jest에서 localStorage 사용

2018.06.191 Min Read — In Jest

회사 프로젝트 로그인 부분에서 token을 받아와 localStorage에 저장을 하고 있다. Jest를 사용해서 테스트 코드를 작성하다 보니 localStorage 가 없어서 테스트가 정상적으로 동작 하지 않았다. 그래서 좀 찾아보니 다음과 같은 패키지를 설치해서 해결 할 수 있다는걸 알게 되었다. 설치 설정 package.json jest…

React icon
Browser에서 React 사용하기

2018.06.092 Min Read — In React

회사 프로젝트 서버는 현재 django를 사용하고 있고 django template 에는 jQuery, vanilla.js 등 섞여 있는 상태이다. webpack을 쓰지 않고 현 상태에서 특정 부분만 react로 변경 가능한지 궁금했고 브라우저에서 react를 바로 사용하려면 어떻게 해야 하는지 궁금해서 테스트를 해보았다. react.js, react…

Django icon
Django 모델의 관계 시각화 하기

2018.06.081 Min Read — In Django

회사에 django 프로젝트가 있는 모델이 한눈에 들어오질 않아서 이전 회사에서 누군가 모델을 그래프 이미지로 만들어서 확인하던게 생각났다. 그래서 어떻게 하는지 방법을 찾아봤다. 설치 또는 requirements-dev.txt 파일에 추가해준다. 설정 settings.py 파일에 추가해준다. 실행 문제 이미지를 만들기 위해서 graph_models…

Vue.js icon
Vue.js img src 데이터 값 넣기

2018.06.081 Min Read — In Vue.js

JavaScript 코드 HTML 코드 위와 같이 해줬는데 description은 나오는데 thumbnail이 나오지 않는다 어떻게 해야 하는건가 하고 찾아봤다. 위와 같이 하면 된다고 해서 코드를 수정해봤다. 정상적으로 이미지가 나오는걸 확인했다. 참조 img src data binding? · Issue #202 · vuejs/Discussion…

Jest icon
Jest matchers 알아보기 - 1

2018.02.081 Min Read — In Jest

toBe 기대치 값이 원하는 값인지 비교할 때 사용한다. toBe 앞에 not 을 붙여주면 값이 같지 않음을 비교한다. 테스트 코드 실행 toEqual 두 객체의 값을 비교할 때 사용한다. toEqual 앞에 not 을 붙여주면 같지 않음을 비교한다. 테스트 코드 아래와 같이 객체가 같을 때와 같지 않을때 비교를 할 수 있다. 실행

Jest icon
Jest 시작하기

2018.02.082 Min Read — In Jest

설치 npm 또는 yarn 으로 개발 환경에서 쓰는 모듈이기 때문에 개발 옵션을 주고 아래와 같이 설치한다. 코드 작성 파일을 만들고 아래와 같이 코드를 작성한다. 테스트 코드 작성 테스트용 파일을 만들고 아래와 같이 코드를 작성한다. 기본적으로 * .test.js…

JavaScript icon
Number.isNaN 함수

2018.01.311 Min Read — In JavaScript

알고리즘 문제를 풀다가 해당값에 문자열이 포함되어 있는지 숫자만 있는지 구분을 하는 문제가 있어서 parseInt 를 써서 NaN 이면 숫자가 아니라고 판단하려고 했다. 하지만 아래와 같은 결과가 나왔다... 그럼 NaN 인지 판단은 어떻게 할 수 있단말인가... 검색 해보니 isNaN() 이라는게 있다는걸 알게 되었다. 예제는 다음과 같다.

Java icon
OSX Java 업데이트하기

2018.01.313 Min Read — In Java

오늘 T 아카데미 토크 ON 세미나에서 selenium 을 실행하려고 했는데 다음과 같은 오류 메시지가 나왔다. 어쩌구 저쩌구 하는거 보니 왠지 Java 버전 문제 같아서 Java 최신버전을 설치하는 방법을 알아봤다. Java SE Development Kit 9 - Downloads 에서 Java JDK…

Node.JS icon
Node.js readline 사용하기

2018.01.301 Min Read — In Node.js

요즘은 기술면접 전에 알고리즘 코딩 테스트를 하는게 일반적인 면접 과정인거 같다. 그래서 Baekjoon Online Judge 에서 알고리즘 공부를 꾸준히 해볼까 한다. 첫번째 문제 “Hello World…

Gatsby icon
Gatsby CNAME 복사하기

2018.01.291 Min Read — In Gatsby

Octopress , Hexo 블로그를 지나서 이제야 Gatsby 블로그로 정착하려고 한다. 가장 마음에 드는 건 코드가 React 로 되어 있다는 것이다. 개인 취향이겠지만 요즘 가장 관심이 쏠리고 공부하고 있는 것이 React 인지라 코드를 보면서 공부도 되고 코드 분석하면서 배울 게 있다고 생각한다. 그런 점에서 Gatsby…

Webpack icon
Webpack 개념 정리

2018.01.293 Min Read — In Webpack

요즘은 라이브러리들이 init cli 를 지원해서 webpack 를 직접 설정 할 일이 별로 없어진거 같긴 하다. 그래도 면접에서 webpack 에 대해서 물어본다면 기본은 알아야 하지 않을까 싶어서 개념에 대해서 정리해 보려고 한다. webpack 의 핵심 개념은 4 가지(Entry, Output, Loaders, Plugins)라고 한다. Entry…

JavaScript icon
JavaScript Array 변경 함수

2018.01.242 Min Read — In JavaScript

이직을 준비하면서 알고리즘을 공부하면서 느낀거지만 가 중요한 부분을 차지하고 있는거 같다. 그래서 Array 객체의 method 중에서 Array 를 변경할 수 있는 method 를 정리해볼까 한다. Array.prototype.push() 설명 예제 하나의 요소를 추가하는 경우 하나 이상의 요소를 추가하는 경우 Array.prototype.pop…

React icon
create-react-app에서 Mobx decorators 사용하기

2018.01.091 Min Read — In React

Mobx 를 공부해보려고 create-react-app 으로 프로젝트를 생성했다. 예제에 있는 코드를 입력하고 build 가 되길 기다렸는데 다음과 같은 에러가 발생했다. decorator 가 정상적으로 동작하지 않는것이다. decorator 는 es7 에 포함되는걸로 알고 있는데 create-react-app 기본 babel 설정에 es…

React icon
classnames 라이브러리 제거

2018.01.041 Min Read — In React

3 년만에 react-bingo 프로젝트를 다시 시작 하면서 코드를 보니 예전에 props 의 값에 따라서 class 를 추가 하고 빼주기 위해서 classnames 를 사용했던 코드들이 있었다. 요즘은 classnames 라이브러리 없이 여러개의 class 를 props, 특정값에 따라서 넣고 뺄 수 있는지 찾아보니 ES…

22017년 회고

2017.12.314 Min Read — In postmortem

오늘 교회에서 라는 목사님의 말씀을 듣고 2017 년을 돌아보며 처음으로 1 년 회고를 써보았다. 그동안은 새해가 되면 나에게 부족한것들에 대한 반성과 새로운 다짐은 없이 나는 작년에 모했지? 정도만 머리로 생각하고 넘겼었다. 이제 회사도 퇴사했고 1…

Visual Studio Code icon
Visual Studio Code에서 Prettier 설정하기

2017.12.291 Min Read — In Visual Studio Code

Prettier 를 cli 로 사용할 수 있지만 Visual Studio Code 에서 편하게 쓰고 싶어서설정하는 방법을 알아봤다. 설치 CMD + Shift + P 단축키를 입력해서 Command Palette 를 열고 다음을 입력해서 Prettier - Code formatter 를 설치한다. Prettier - Code formatter…

React icon
Ant Design 설정하기

2017.12.113 Min Read — In React

예전에 다른분이 추천을 하는 링크를 봐서 기억하고 있었는데 회사에서도 프론트 개발자분들이 주로 사용하는거 같아서 설정 방법을 알아봤다. create-react-app 으로 주로 사용하고 있어서 설정하는 방법을 정리 해볼까 한다. 프로젝트 생성 으로 프로젝트를 생성한다. 프로젝트 구조 생성된 프로젝트의 구조는 다음과 같다. antd 설치 css…

TTerraform 리모트 스테이트 백엔드로 AWS S3 사용하기

2017.09.217 Min Read — In SRE

configuration.tf 파일 생성 파일을 생성해서 terraform 기본 버전 설정값과 provider 설정값을 위와 같이 추가 해준다. Terraform Init 명령으로 초기화 하기 명령을 실행해서 디렉토리를 테라폼을 사용할 수 있도록 초기화 한다. 0.9.x 버전에서는 가 terraform 바이너리에 포함되어 있어서 0.10.x…

PPhoenix framework 시작해보기

2017.04.082 Min Read — In Language

Install Elixir Install Hex Hex 는 elixir, erlang 패키지를 관리해주는 시스템이다. node 의 이랑 같은거다. Install Phoenix Framework phoenix 를 설치 하기 위해서 아래와 같은 명령어를 입력한다. Create Phoenix Project phoenix 는 brunch…

ccocos2d-x 세로 모드

2015.04.241 Min Read — In etc

xcode 를 열어서 ios 디렉토리 안에 파일을 열어서 아래 부분을 수정한다. 자동회전없이 항상 세로화면으로 설정하고 싶으면 아래 부분도 수정한다.

React icon
React 개발환경 설정

2015.04.131 Min Read — In React

요즘 React 에 흥미를 느끼면서 이거저거 해보고 공부를 하고 있다. 이전에는 프론트엔드 개발을 하면서 build 만 watch 같은 것들을 따로 설정하지 않고 작업을 했었는데 React 를 공부하는 김에 겸사 겸사 공부를 하게 되었다. 기본 디렉토리 구조 디렉토리 구조는 아래와 같다. src 에는 개발단계에서 파일들을 쪼개서 개발을 하고 webpack…

React icon
react-native 시작하기

2015.04.031 Min Read — In React

설치 프로젝트 생성 프로젝트 실행 위와 같이 명령어를 치면 xcode 에서 testProject 가 열립니다. run 을 실행하면 build 가 되고 터미널 창이 하나 열리면서 서버가 실행이 된다. 그리고 iOS Simulator 이 실행되고 다음과 같은 화면을 확인 할 수 있다. 만약 xcode 에서 run…

Elastic Search icon
Elasticsearch 설치하기

2014.09.222 Min Read — In Elasticsearch

설치 source 설치 실행 elasticsearch 압축을푼 디렉토리 안에 bin 디렉토리에 있는 elasticsearch 파일을 실행한다. OSX brew install 실행 링크를 걸어주고 launchctl 로 실행한다. Testing 위와 같이 curl 로 request 를 날리면 다음과 같은 결과를 볼수 있다.

PostgreSQL icon
OSX에서 psycopg2 설치하기

2014.07.251 Min Read — In PostgreSQL

문제 djagno 에서 postgresql 을 쓰기 위해서 psycopg2 를 install 하려고 했는데 다음과 같은 에러가 발생했다. 해결방법 고맙게도 참 잘 설명해준다. 먼저 pg_config PATH…

Python icon
Python list에서 중복값 제거하기

2014.06.021 Min Read — In Python

프론트 단에서 중복된 데이터를 삭제해서 사용하다가백엔드에서 처리하고 데이터를 넘겨주는 방식이 더 좋다고 생각해서 Python 으로 list 에서 중복을 제거 하는 방법을 찾아봤다. 코드는 다음과 같다. 위에서 set 함수가 몬가 하고 알아보니. 순서하고 상관없는 컬렉션(unorderd collection…

Node.JS icon
Node.js로 html파일 indent 적용해서 파일 생성하기

2014.03.041 Min Read — In Node.js

간단하게 파일을 쓰려고 할때 다음과 같이 사용하면 된다. 근데 html 파일을 작성할때 내용을 자동으로 indent 해주는 모듈은 없을라나... 했는데 htmltidy 요런게 있구나~ 요렇게 해주면 index.html 파일에 이쁘게 indent 가 적용되서 저장된다~ 좋은데?!

Node.JS icon
Node.js로 크롤링해서 메일로 보내주기

2014.03.022 Min Read — In Node.js

우리 회사는 교육 부분에 많은 서비스 하고 있다. Google Play 교육 카테고리 최고 매출 순위를 보는 회사분들이 있는거 같다. 그래서 크롤링해서 메일로 보내주는 스크립트를 node.js 로 한번 만들어 봤다. 크롤링은 jsdom 모듈을 사용하고, jsdom 메일 보내기는 nodemailer 를 사용하였다. nodemailer…

DDrawing

2013.10.191 Min Read — In etc

어렸을때부터 그림을 그림을 배우고 싶었지만 여러 사정에 의해서 그림을 배우지 못했다. 최근 그림을 배우고 싶다는 생각이 커져서 큰맘을 먹고 그림을 배우기 시작했다. 학원을 다니는건 아니고 그냥 몇개씩 그려서 회사 디자이너분에게 모가 잘못되었는지 확인을 부탁하고 있다. (커피와 함께...) 그림을 배운지 이제 1…

Node.JS icon
node-webkit 사용해보기

2013.10.182 Min Read — In Node.js

갑자기 만들어 보고 싶은게 생겼는데 node-webkit 으로 만들면 괜찮을꺼 같아서 사용해 볼까 한다. 일단 난 mac 를 사용하니까 mac 에서 실행하는 방법을 알아보자. Downloads Linux: 32bit / 64bit Windows: win32 Mac: 32bit, 10.…

Blender icon
Blender 알아보기

2013.10.042 Min Read — In Blender

Blender 란 무료로 사용할 수 있는 3D 그래픽 프로그램이다. 오픈소스 진영의 대표적인 그래픽 프로그램이라고 한다. 윈도우, 맥, 리눅스등 여러 운영체제를 동시에 지원 하기 때문에 운영 체제가 달라도 작업들을 쉽게 공유 가능하다고 한다. 3D…

Django icon
Django super user 생성하기

2013.10.041 Min Read — In Django

Django 를 사용할때 syncdb 를 했을때 super user 가 생성이 안되는 경우나, 혹은 계정을 생성했지만 아이디 패스워드가 생각이 나지 않을때 user 를 확인해서 user 가 없으면 신규로 생성하거나 user 가 있는 경우에 password 를 변경 하는 방법에 대해서 적어 볼까 한다. User 확인 User 가 있는 경우 password…

OOctopress 테마 변경하기

2013.10.011 Min Read — In Blog

블로깅을 다시 시작하기 위해서 정리좀하다가 몬가 변화를 주고 싶다는 생각에 이전에 사용하던 Octopress 로 갈아타기로 마음 먹었다. 그러던중 혹시나 Octopress theme 가 생겼을까 싶었는데 검색을 해보니... 오~ 있다!!! Octopress Themes 찾아보니 github 에 3rd Party Octopress Themes…

Django icon
Start Django Framework

2012.07.194 Min Read — In Django

새로운 회사에 입사를 하게 되어 Django 프레임웍 를 이용해서 개발을 하게 되었다. 아직 Python 을 써본적도 없고 Django 프레임웍은 더더욱이나 써본일이 없다. 사실 프레임웍 자체가 아직은 낮설다. 그래도 모든 새로운걸 배우는건 재밌는 일이기에 매일 매일 즐겁게 배우고 있다. 그래서 "쉽고빠른 웹 개발 Django(인사이트)" EBook…

JavaScript icon
FRENDS Hackathon 2012 늦은 후기

2012.04.201 Min Read — In JavaScript

지난달 3 월 30 일 저녁 10 시부터 3 월 31 일 저녁 10 시까지 FRENDS Hackathon 2012 을 했다. 예전 한글과 컴퓨터에 포함되었던 산성비 게임을 웹으로 만들어 보면 재미있지 않을까해서 주제를 산성비 게임으로 정하고 만들어 보았다. 사실 3 월에는 둘째 출산으로 인해서 힘든 상태에 여러 귀차니즘이 발동을 해서 Hackathon…

JavaScript icon
Web Editor beforeunload event 적용하기

2012.04.051 Min Read — In JavaScript

현재 개발 하고 있는 사이트에서는 Tinymce Editor 를 사용하고 있는데 plugin 으로 Editor 을 사용중에 back space 를 누르거나 다른 페이지로 이동으로 하려고 할때 다음과 같은 modal…

JavaScript icon
Event Capturing Bubbling

2012.04.032 Min Read — In JavaScript

스터디를 진행하면서 다시 한번 알게 된것이 있어서 정리를 해볼까 한다. 보통 JavaScript 에서 click, over 등등... 이벤트가 발생하게 되면 target(예를들어 click 한 element) 에서만 이벤트가 실행 된다고 생각하고 있을것이다. 하지만 실질적으로 브라우저에서는 이벤트가 발생하게 되면 capturing 과 bubbling…

JavaScript icon
WYSIWYG Editor 만들기

2011.12.021 Min Read — In JavaScript

회사에서 작업하다가 bold, italic, underline 기능만 필요한 WYSIWYG 가 필요해서 어떻게 해야 할지 앞이 캄캄해서 그냥 오픈 소스를 써야 하나 했는데 역시 구글신이 간단한 방법을 알려줬다. contenteditable 사용해서 엘리먼트에 바로 편집이 가능하게 된다. 요것은 HTML…

Node.JS icon
Node.js 이용해서 chat을 만들어보자[3]

2011.11.292 Min Read — In Node.js

오늘은 닉네임 입력을 하고 로그인을 하고 페이지를 빠져나오게 되면 로그아웃이 되는걸 구현해 볼까 한다. 소스는 다음과 같이 수정을 하면 된다. server.js 소스에 보면 on Method 와 emit Method 가 있는데 간단하게 생각하면 된다 on Method 는 받는거고 emit Method 는 보내는 거다 라고 생각하면 된다. index.html…

Node.JS icon
Node.js 이용해서 chat을 만들어보자[2]

2011.11.212 Min Read — In Node.js

오늘은 socket.io 를 사용해서 서버와 통신(connection, disconnection)이 어떻게 가능한지 확인해볼까 한다. 먼저 서버와의 통신을 확인하기 위해서 다음과 같이 server.js 와 index.html 소스를 수정한다. Server, Client 소스에 socket…

Node.JS icon
Node.js 이용해서 chat을 만들어보자[1]

2011.11.142 Min Read — In Node.js

그동안 Node.js 에 대해서 맨날 보기만 하다가 H3 채팅을 보고 직접 만들어 보고 싶다는 생각이 들었다. 그래서 간단한 채팅을 만들어 볼려고 한다. 오늘은 기본적인 web server 구동을 시작해보겠다. 아래 소스는 github Repositorie 에 올리면서 진행하려고 한다. nodester 에서 호스팅을 받아서 nodester…

OOctopress Posting 하기

2011.11.143 Min Read — In Blog

국내에 이외로 많은 분들이 Octopress 를 써보고자 하는거 같다. 그래서 이전에 설치하는 방법만 올렸었는데 간단하게 Octopress 로 Posting 하는 방법을 써볼까 한다. 먼저 간단한 Posting 하는 방법에 대해서 알아보자. Posting 하는 과정을 간단하게 쭉 말해보면 rake new_post 제목 명령어로 markdown…

Go icon
Goclipse 설치

2011.11.071 Min Read — In Go

그동안 컴파일 언어를 제대로 사용해보지 않아서 인지 Go 언어를 공부하는데 컴파일 하는 부분이 나한테는 불편한 일이다. 그래서 IDE 를 찾아보니 Goclipse 라는 Eclipse 에 plugin 을 설치해서 사용하는 것이 있었다. 그래서 간단하게 설치하고 사용하는 방법에 대해서 작성해 볼까 한다. Eclipse 설치 Eclipse 에 Plugin…

Go icon
Start Go Language

2011.11.044 Min Read — In Go

Go for it 세미나에 다녀온 후로 Go 언어에 관심이 가기 시작했다. 그동안 컴파일 언어를 제대로 공부해본적이 없어서 인지 재미도 있는거 같고 스크립트 언어와 또다른 재미가 있는거 같다. Go for it 세미나에 가기전에 MBA 에서 제대로 PATH 설정 문제로 인해서 컴파일이 제대로 되지 않았는데 세미나에 다녀온 후로는 신기하게도 PATH…

Go icon
go[for]it 세미나 후기

2011.10.283 Min Read — In Go

먼저 신제용, 김종민 두 분께 발표하느라 고생하셨다는 말과 좋은 자리 마련해주신 권순선님께 감사의 말씀을 전해 드리고 싶다. 업무나 관심에 있어서 주언어는 JavaScript 이지만 나는 왠지 다른 언어에도 관심이 간다. 다른 언어들의 문법은 어떤지 또 JavaScript 랑은 어떤 부분에서 어떤 차이가 있는지 등 요런 부분에 관심을 가지고 있어서 Go…

JavaScript icon
JavaScript this란 무엇인가?

2011.10.243 Min Read — In JavaScript

JavaScript 를 개발할때 사용하거나 공부를 할때 해깔리고 어려운 부분중에 하나인 this 에 대해서 내가 아는 부분을 정리해 볼까 한다. 나 또한 this 에 대해서 많은 부분 해깔려 하던중 FRENDS 의 AJ( @andrwj )의 강의를 듣고 확실한 개념을 잡을 수 있었다. AJ( @andrwj )가 말하는 this…

Disqus icon
Disqus Comment Count Error

2011.10.201 Min Read — In Disqus

Octopress 에 _ config.yml 파일에 disqus show comment_count 옵션을 true 로 해줬음에도 해당 포스트의 comment count 가 제대로 나오지 않고 있었다. 일시적인 오류라 생각하고 그대로 두었는데 누군가 comment 를 쓰더라도 계속 0 으로 표시되니까 누가 comment…

CSS3 icon
CSS Property Word Wrap

2011.10.191 Min Read — In CSS3

마크업 작업을 하다보면 한글은 자동으로 줄바꿈이 되는데 영문(띄어쓰기 안된경)인 경우 줄바꿈이 되지 않고 박스 밖으로 쭉 나가는 경우가 있다. 진짜 그런지 함 확인해 보자. 한글인 경우 영문인 경우 위와 같이 영문인경우 줄바꿈이 제대로 이루어지지 않아서 박 밖으로 삐져 나가는 경우가 생겨서 놀라는 일이 생긴다. 요런 경우 css 속성중에 word-wrap…

CSS3 icon
CSS Webkit Hack

2011.10.171 Min Read — In CSS3

마크업 작업을 하다 보면 드물지만 webkit(chrome, safari)만 다르게 보일때가 있다. 이런 경우 css 에서 처리 해줄수 있는 방법이 이 없을까 하다가 검색해서 나온것이 media query 를 이용한 것이였다. 사용 방법은 다음과 같다. 직접 CSS 파일에 입력할 경우 Webkit 용 CSS 파일을 따로 만들어서 include 시킬 경우

JavaScript icon
JavaScript Global 객체

2011.10.071 Min Read — In JavaScript

Global Object JavaScript 에는 Global Object 가 있다. 쉽게 말하면 JavaScript 에서 기본적으로 제공되는 전역객체 이다. 어떤것들이 있는지 알아보자. Array Boolean Date Function Number Object RegExp String JavaScript Core…

JavaScript icon
JavaScript Console 사용하기

2011.10.074 Min Read — In JavaScript

Chrome, Firefox 에서 JavaScript 개발을 하더라도 console 창에서 log(), dir() 만 사용했었다. 위 동영상을 보고 console 에서 또 다른 기능 들에 대해서 알게되어 활용 할 수 있다면 JavaScript…

OOctopress Blog 시작하기

2011.10.015 Min Read — In blog

그동안 Wordpress 를 웹호스팅에 설치해서 사용을 하다가 만료가 되어서 Tumblr 에서 블로그를 사용하고 있었는데 Twitter 에서 우연찮게 Octopress 를 알게되었다. @reiot 님의 블로그를 Octopress 로 이전하시면서 Wordpress to Octopress 라는 Title 로 Posting 을 하셨다. Octopress…