아래와 같은 PTE 시험 관련한 여러 글을 작성했었고, 페이스북 그룹도 만들어서 PTE Academic 시험을 준비하시는 모든 분들에이 서로 공유할 수 있는 환경도 만들어 드리고자 하였으나 잘 되지 않더군요. 


제가 해외 커뮤니티에서 많은 팁과 도움을 받아서 한국분들께도 도움을 드리고 싶었지만, 제가 PTE 시험 이야기를 나눴던 수백명의 분들 중 학원 수강을 하셨던 분들이나 과외를 받으셨다는 분들 이미 점수가 나오신 분들도 이미 공개된 제 팁과 의견을 받아가고 본인이 필요한 질문에 대한 답변만 받아갈 뿐, 본인이 가지고 있는 노하우는 다른분들을 위해서 아무것도 공유를 하지 않습니다. 그래서 50명이 넘어가던 페이스북 그룹은 폐쇄를 하였습니다.


그리고 추가로 네이버 쪽지, 페이스북 메시지,  비밀댓글 등으로 많은 분들이 질문을 해주셨고, 모두 답변을 드렸습니다.

질문을 해주신 100명이 넘는 분들께 개인적으로 후기를 좀 남겨달라고 말씀드리고, 가지고 계신 자료를 공유해달라고 말씀드렸지만 단 한분을 제외하고는 어떤분도 공유해주시지 않았습니다. 그 한분께는 감사한 마음에 서울에서 만나서 시험에 필요한 팁을 좀 전해 드렸습니다.


남의 도움을 쉽게 받지만 자신이 남에게 도움을 주려는 생각이 인색한 분들에게 제가 무한히 개인적으로 시험에 관해서 도움을 드릴 수는 없을 것 같습니다. 제가 그동안 8번의 시험과 준비기간동안 알게된 노하우를 그냥 공개를 해 드렸던 것은 영어 학원을 운영하거나 돈을 받고 자료를 팔려고 했던 것이 아니라 많은 분들이 저처럼 영어시험 때문에 많이 고생하지 않기를 바라는 마음에서 시작한 일이었습니다. 


일단 제가 가지고 있는 자료나 템플렛 등을 올리거나 시험에 대한 tip을 추가하는 것은 일단 그만 두었습니다.

1. 블로그에 작성했던 내용은 커뮤니티로 옮겨서 그냥 두겠습니다.

2. 커뮤니티와 페이지의 운영은 계속 할 생각입니다.

http://pte-a.com <- 커뮤니티

https://www.facebook.com/pteacom <- 페이스북 페이지

3. 블로그 / 개인메시지 / 쪽지 이메일로 질문해주셔도 개인적인 답변은 못 드립니다.

 - 부득이하게 블로그의 PTE시험 관련 댓글은 막아두었습니다.

4. 궁금한 점은 커뮤니티의 Q&A 게시판에 올려주세요.

5. 향후 PTE 시험과 관련한 내용은 커뮤니티에 올리도록 하겠습니다.


인생의 소중한 순간을 영어시험 준비로 고생하고 계신 모든 한국분들도 좋은 결과가 있었으면 하는 바랍니다.



Posted by do Jason

2016.08.18 16:52 개발

Grunt 설치 및 셋팅


Grunt는 무엇인가?

Grunt는 JavaScript를 위한 task 기반의 command line 빌드 툴이다. 예를 들어서 JavaScript 프로젝트를 진행할 때, 만약 주기적으로 해야할 일이 있다면, grunt를 설치 후 다양한 작업을 할 수 있다.


Grunt 설치

1. Node.js & npm설치 확인

기존에 Node.js가 설치 되어 있어야 함, npm을 통해서 설치해야 하기 때문에..

만약 설치가 안되어 있다면 아래 링크로 이동해서 설치

2016/08/18 - [개발] - Node.js 설치 및 셋팅, npm 이란?


2. CLI (command line interface) 인스톨

npm install -g grunt-cli 를 커맨드창에 입력

C:\Users\Jason>npm install -g grunt-cli

C:\Users\Jason\AppData\Roaming\npm\grunt -> C:\Users\Jason\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt

C:\Users\Jason\AppData\Roaming\npm

`-- grunt-cli@1.2.0

  +-- findup-sync@0.3.0

  | `-- glob@5.0.15

  |   +-- inflight@1.0.5

  |   | `-- wrappy@1.0.2

  |   +-- inherits@2.0.1

  |   +-- minimatch@3.0.3

  |   | `-- brace-expansion@1.1.6

  |   |   +-- balanced-match@0.4.2

  |   |   `-- concat-map@0.0.1

  |   +-- once@1.3.3

  |   `-- path-is-absolute@1.0.0

  +-- grunt-known-options@1.1.0

  +-- nopt@3.0.6

  | `-- abbrev@1.0.9

  `-- resolve@1.1.7

C:\Users\Jason>

참고로 cli는 향후 매번 grunt가 실행될 때, 로컬에 저장된 Grunt가 발견되면 CLI는 Grunt 의 라이브러리들과 Gruntfile로부터의 설정 정보를 가져와 요청한 task를 실행한다. (grunt-cli code )


3. Grunt 프로젝트 시작하기

3-1. package.json 생성


필요한 grunt와 grunt 플러그인들의 정보를 가지고 있는 파일

예제)

{

  "name": "reponsive-images",

  "version": "0.1.0",

  "repository": {

    "type": "git",

    "url": "https://github.com/udacity/responsive-images.git"

  },

  "devDependencies": {

    "grunt": "^0.4.5",

    "grunt-contrib-clean": "~0.6.0",

    "grunt-contrib-copy": "~0.8.0",

    "grunt-contrib-jshint": "~0.10.0",

    "grunt-contrib-nodeunit": "~0.4.1",

    "grunt-contrib-uglify": "~0.5.0",

    "grunt-mkdir": "~0.1.2"

  },

  "dependencies": {

    "grunt-responsive-images": "^0.1.6"

  }

}


3-2. Gruntfile.js or Gruntfile.coffee 파일 생성

이 파일은 task를 정의하거나 Grunt 플러그인들은 로드한다.
예제)
module.exports = function(grunt) {

  grunt.initConfig({
    responsive_images: {
      dev: {
        options: {
          engine: 'im',
          sizes: [{
            name: 'small',
            width: '30%',
            suffix: '_small',
            quality: 20
          },{
            name: 'large',
            width: '50%',
            suffix: '_large',
            quality: 40
          }]
        },

        /*
        You don't need to change this part if you don't change
        the directory structure.
        */
        files: [{
          expand: true,
          src: ['*.{gif,jpg,png}'],
          cwd: 'images_src/',
          dest: 'images/'
        }]
      }
    },

    /* Clear out the images directory if it exists */
    clean: {
      dev: {
        src: ['images'],
      },
    },

    /* Generate the images directory if it is missing */
    mkdir: {
      dev: {
        options: {
          create: ['images']
        },
      },
    },

    /* Copy the "fixed" images that don't go through processing into the images/directory */
    copy: {
      dev: {
        files: [{
          expand: true,
          src: 'images_src/fixed/*.{gif,jpg,png}',
          dest: 'images/'
        }]
      },
    },
  });

  grunt.loadNpmTasks('grunt-responsive-images');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-mkdir');
  grunt.registerTask('default', ['clean', 'mkdir', 'copy', 'responsive_images']);

};


4. Grunt와 grunt 플러그인 설치

예제)

npm install grunt --save-dev <- grunt 의 최신버전을 설치

npm install grunt-responsive-images --save-dev  <- grunt-responsive-images grunt의 반응형 이미지 플러그인 설치


5. 커맨드창에 grunt를 입력하면 실행 됨


참고)

1. http://gruntjs.com/getting-started

2. Udacity Front-End Web Developer Nanodegree




Posted by do Jason

Node.Js는 무엇인가?

웹 개발은 Front-end 와 Back-end로 나뉜다. 간단히 말하면 프론트앤드는 웹페이지 쪽의 사용자가 볼 수 있는 부분이고, 백앤드는 서버쪽을 차지하고 있다. 원래 JavaScript는 프론트앤드에서 사용이 주로 됐지만, 2009년 Node.js라는 framework의 등장으로 자바스크립트로 서버단 기술까지 제어할 수 있게 되었다.

Node.js(노드js) 는 JavaScript 엔진 V8 위에서 동작하는 이벤트 처리 I/O framework이다. 서버 환경을 포함한 프론트앤드 백앤드 모두를 JavaScript라는 같은 언어로 관리할 수 있게 되었다. 기존의 Front-end 개발자들도 다른 언어를 배울 필요 없이 쉽게 서버단 처리를 할 수 있게 만들어줬다.


Node.js 설치 (윈도우 기반)

1. 다운로드 사이트 방문

https://nodejs.org/ko/ 


2. 최신 버전(node-v6.4.0-x64.msi) 다운받아서 실행


-끝- 설치는 간단합니다!ㅎㅎ


NPM 이란?

Node Package Modules의 약자다. 즉, Node.js에서 사용가능한 모듈들을 패키지화시켜 모아놓은 것이다.

예를 들어서 Grunt 라는 툴을 설치하기 위해서는 npm을 통해서 설치하고 관리 할 수 있다.

이 경우 위에 언급한 것처럼 Node.js 를 설치후 Command 창에 npm을 입력해보면 npm 명령어의 문법을 알려준다.

아래와 같이 보여지면 사용 가능한 것으로 보면 된다.


C:\Users\Jason>npm


Usage: npm <command>


where <command> is one of:

    access, adduser, bin, bugs, c, cache, completion, config,

    ddp, dedupe, deprecate, dist-tag, docs, edit, explore, get,

    help, help-search, i, init, install, install-test, it, link,

    list, ln, logout, ls, outdated, owner, pack, ping, prefix,

    prune, publish, rb, rebuild, repo, restart, root, run,

    run-script, s, se, search, set, shrinkwrap, star, stars,

    start, stop, t, tag, team, test, tst, un, uninstall,

    unpublish, unstar, up, update, v, version, view, whoami


npm <cmd> -h     quick help on <cmd>

npm -l           display full usage info

npm help <term>  search for help on <term>

npm help npm     involved overview


Specify configs in the ini-formatted file:

    C:\Users\Jason\.npmrc

or on the command line via: npm <command> --key value

Config info can be viewed via: npm help config


npm@3.10.3 C:\Program Files\nodejs\node_modules\npm


C:\Users\Jason>


Posted by do Jason
 TAG Node.js, 개발


웹페이지 개발시 방법론 - Code, Test, Refine


1. Look for natural boxes

2. Look for repeated elements & semantic elements

3. Write your HTML

4. Apply your styles (from biggest to smallest)

5. Fix things

그리고 다시 3~5반복함, 원하는 웹페이지가 만들어질 때까지



반응형 디자인(Responsive design)

viewport 테그 - 웹페이지를 모바일 디바이스에 최석화 시켜줌

<meta name="viewport" content="width=device-width, initial-scale=1.0">

initial-scale=1의 의미는

device independent pixel과 CSS pixel의 비율이 1:1


모바일에서 사람이 touch 가능한 최소 크기는 40, 적어도 48px 정도는 설정 해줘야 함

nav a, button {

min-width:48px;

min-height:48px;

}



Posted by do Jason


Verifying tools

To verify HTML: http://validator.w3.org/#validate_by_input
To verify CSS: http://jigsaw.w3.org/css-validator/#validate_by_input


Placehold sites

http://placehold.it/

<img src="http://placehold.it/350x150">


https://placekitten.com/

<img src="http://placekitten.com/200/300">

or <img src="http://placekitten.com/g/200/300">



Fonts

https://fonts.google.com/



Editor

http://www.sublimetext.com/

Sublime Text > Preferences > Settings - User 에 아래입력 후 저장
 {
    "autocomplete": true,
    "color_scheme": "Packages/Color Scheme - Default/Monokai.tmTheme",
    "draw_white_space": "all",
    "font_size": 15,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": true
 }

https://atom.io/



Frameworks


jQuery

<script type="text/javascript" src="js/[JQuery file name]"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

next



Posted by do Jason

2016.08.11 14:24 개발

CSS 문법 정리

display: inline block 차이점

1. display: inline

라인1
라인2시작삽입 라인2끝
라인3

2. display: block

라인1
라인2시작삽입 라인2끝
라인3

3. display: inline-block

라인1
라인2시작삽입 라인2끝
라인3



CSS Box Model

margin, border, padding, content 구성
1. Width에는 border, padding, content 만 포함된다




Icon font 사용


<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=zocial" />
<a href="_blank" class="zocial-twitter">Twitter</a>


Posted by do Jason
 TAG css, 개발, 개발자

2016.08.09 12:15 개발

CentOS 사용팁

VMware 설치 후 CentOS를 다운받아서 설치 이후에 CentOS에 필요한 팁을 정리 해 보려고 합니다.



한글 설정

CentOS 설치 후에 한영키를 누르면 당연히 반응하지 않습니다. 다음과 같은 방법으로 한글을 입력해 봅시다.
1. Applications - System Tools - Settings - Keyboard - Input Sources 에는 English(US) 만 default로 설치되어 있습니다.
2. + 버튼 클릭 후 Korean(Hangul)을 추가하고
3. 텍스트 입력 창에 윈도우키+스페이스(Space) 를 클릭하면 한영 전환이 됩니다.

CentOS에 Git 설치하기

다양한 방법이 있지만 Yum을 이용해서 설치해보겠습니다.
1. 터미널을 열고 sudo yum install git 을 입력합니다.
만약 dojasoncom(제 계정명) is not in the sudoers file. This incident will be reported. 라고 나오는 경우는
해당 사용자가 /etc/sudoers 에 등록이 안되어 있기 때문입니다. 아래와 같이 등록 해봅시다.
1. root로 사용자 전환
su -
2. write 퍼미션 추가
chmod u+w /etc/sudoers
3. 퍼미션 변경 확인 - w 권한이 부여되었는지 확인
ls -al /etc/sudoers
4. vi /etc/sudoers 변경 후 가장 하단에 아래 추가 후 저장
dojasoncom    ALL=(ALL)    ALL
5. 퍼미션 440으로 원복
chmod 440 /etc/sudoers
6. 퍼미션 원복 확인 - 440(-r--r-----) 으로 변경 되었는지 확인
ls -al /etc/sudoers

2. Git이 다운 후 설치되는 중간에 여부를 묻는데( Is this ok [y/d/N]: ), 여기서 y를  몇번 입력하면 설치가 완료된다. 

커널(Kernel) 삭제하기

제 경우는 커널 업그레이드를 하다가 해당 버전에 문제가 생겨서 이전 버전으로 부팅하고 업그레이드 중 문제가 생긴 커널을 삭제 하였습니다.

1. 설치된 목록 보기
rpm -q kernel
2. 현재 사용중인 커널 보기
uname -a
3 커널 삭제하기
yum erase <커널명>



Posted by do Jason
이전버튼 1 이전버튼

Yesterday211
Today34
Total151,845
Statistics Graph

최근에 받은 트랙백

글 보관함