[DEV] ECMAScript6 - for-in for-of의 사용법과 차이점

headerimg 002 - ECMAScript6를 짧고 핵심내용만 빠르게

진짜 짧게 반복문은 무엇?


기본적인 사용법

For문은 알고 있겠지만 반복적인 작업을 위해 쓰게된다. 이전 포스트에서 for문에서 let을 이용한다는 것을 알아 두자.

let arr = [10, 11, 12];
for (let i = 0; i < arr.length; i++) {
  console.log("배열",i,": ", arr[i]);
}
// 배열 0 :  10
// 배열 1 :  11
// 배열 2 :  12
  1. for문은 i가 0부터 arr배열의 길이만큼 3번 반복한다.
  2. arr배열의 0번에 접근하여 console.log로 출력한다.
  3. 끗.

신상 반복문! in과 of


for-in loop

ES6에서는 2가지 반복문이 추가되었다. 먼저 볼것은 for-in이다.

let objects = {a: 1, b: 2, c: 3};
for (let key in objects) {
  console.log(key, objects[key], key+1);
}
// a 1 'a1'
// b 2 'b1'
// c 3 'c1'
  1. for-in문은 오브젝트에 대해서 반복시킨다. 물론 오브젝트가 아닌 배열에도 사용 할 수 있다.
  2. 가끔 JS엔진마다 순서가 바뀔 수 있어서 배열에 쓰는 것은 권장하지 않는다.
  3. 받아오는 반복 변수 key값은 String이다. 그래서 연산작업을 해선 안된다. key+1를 보면 이해할 수 있다. 그래서? 결론은 배열 출입 금지.


for-of loop

for-of에 들어 갈 수 있는 것은 String, Array, NodeList, TypedArray, Map, Set 등이다. 어? Object는 안들어가지네?

let array = ["x", "y", "z"];
for (let arr of array) {
  console.log(arr);
}
// x
// y
// z
  1. 오브젝트는 안된다.
  2. arr값은 for-in과 다르게 배열 속 값을 그대로 던저준다.
  3. 특이한 점은 array 대신에 String이 들어갈 수 있다. 궁금하다면 실험해보자


그래서 결론은?

사실은 위 예제말고도 상당히 다른 점이 많다. 하지만 너무 깊에 알면 몸에 좋지 않다…

공부징어들은 여기를 가보자


결론은

in은 Object. of는 Array

[DEV] ECMAScript6 - 변수 let, const 사용법

headerimg 001 - ECMAScript6를 짧고 핵심내용만 빠르게

ECMAScript는 뭐냐?

ECMAscript6(ES6)라고도 불리고 ECMA2015라고도 불린다. 자바스크립트의 표준으로 음.. 새로운 JS 표준이다. 깊게 알고 싶은 사람은 GoogleGod에게 질문하면 된다.


평소에 쓰던 JS같은 경우 함수단위로 스코프가 결정된다든지 호이스팅, 동적 타입이라든지 언어 자체가 느슨한 편이다. JAVA나 C++같은 언어는 너무 깐깐해서 더러웠는데 js너무 풀어놔서 좋은 가이드나 배울때 좋은 소스를 안보면 망하기 일수다.

중간이 없어ㅅㅂ꺼


왜?

왜 써야할까? 글쎄 이유는 다양하다. 더러운 호이스팅을 죽이자라든지, 노드JS를 하는 사람은 바벨과 NPM, 웹팩을 위해 배우기도 한다. 깐깐징어(java 등) 언어를 배웠던 사람들은 클래스가 그리워서 하든지 등등 …

개인적으로는 그냥 보기 좋다. 새로운 것도 좋아하고 코드가 좀더 효율적으로 돌아갔으면 하는 바람도 크다.

아 그래 변수

변수부터 알아보자 앞서서 스코프 이야기를 했는데, 스코프는 변수 범위다. 원래 JS에서는 var로 변수를 선언했다. 이유는 잘 몰라도 전역변수(global)를 하지말라는 것을 많이 들어봤을 것이다.

var x = 1;
if (true) {
    var x = 2;
    console.log(x);  // 2
}
console.log(x);  // 2

응? 이개 뭔 개소리여 할 사람도 있을 것이다. 나도 그렇다. var x = 1에서 x는 전역변수가 되었다. 거기다가 var키워드는 범위가 미친듯이 넒고 유언성있다. if속에서 새로 만든 변수같지만 같은 변수로 인식한다. 단편적인 예지만 실제로 이런 경우 때문에 원하는 값이 나오지 않아 고생을 많이한다.


let x = 1;
if (true) {
    let x = 2;
    console.log(x);  // 2
}
console.log(x);  // 1

이제 잘나오는구만,


let, const

그래 var가 별로 좋지 않다는 것을 알았다. let과 const는 무슨 차이지?

let은 여러번 할당 할 수 있다. const는 한번 뿐이다.

let x = 1;
x = 2;
console.log(x);  // 2


const y = 1;
y = 2;
console.log(y);  // "error"

let은 한번 넣고 두번 넣고 할당을 여러번 할 수있지만 const는 그렇지 않다.



당장 어딘가에 let과 const를 사용하고 싶다면?

for (let i = 0; i < 3; i++) {
    //do!!
}

const square = function calculatingSquareArea(a,b){
    return a*b;
};

for-loop문에 var 대신 let을 써보자. for문 밖에서 i값에 접근하지 못한다. 안정성 UP 함수를 선언할 때, var대신 const를 써보자 어짜피 함수할당은 1번만 하기 때문에 여러모로 좋다.


배열과 객체에도 const를 써도 좋다.

const car = {
  wheels : 5,
  windows : 6
};
car.engine = 1;
car.wheels = 4;

console.log(car);
// {
//   engine: 1,
//   wheels: 4,
//   windows: 6
// }

car = ''; // <-- Error

에러가 나야할 것 같지만 const로 선언한 배열과 객체 자체를 변경하지 않으면 상관없다.

[game] X-COM 2 고인물의 모드 추천

headerimg

XCOM2 200시간 고인물의 모드 추천!

WOTC DLC를 꼭 가지고 있어야합니다.

정품, 200시간 인증 headerimg


그냥 깔어! 필수 모드


Evac All - WotC

img

탈출 미션에서 하나하나 집에 보내기 너무 귀찮죠? Evac zone안에 전부다 집어넣고 저버튼 하나 누르면 끝.


[WOTC] Detailed Soldier Lists

img

병사 목록에서 눌러야 보이는 정보들을 보여줌. depth를 줄여주기 때문에 정말 편한 UI/UX를 제공함.


시간을 절약하는 모드

Stop Wasting My Time - WotC

Instant Avenger Menus - WotC

robojumper’s various speed-ups

Quicker Reload - wotc

No Reveal Cinematics

게임 속에서 적 발견 시 적이 으르렁 거리는거, 장전 속도, 어벤져 날라가는 모습 등 플레이시 지긋지긋한 부분을 모두 스킵ㅋ, 이거 쓰다가 안쓰면 암걸려주금.


WotC: robojumper’s Squad Select

img

바닐라에서 암걸렸던 출격 준비;; 유틸 장비 벗기구 방어구 벗기고, 다시 끼우고 전투는 20분하는데 준비하는 것만 10분;;;


Maps by Vozati [WotC Edition]

Xcom2를 하다보면 비슷비슷 지긋지긋한 맵들이 자주 나온다. 이 모드를 깔면 만사 해결. 대신 조금 난이도가 올라 갈 수 있음.


[WOTC] EC Map Pack 1

위에 맵팩으로 부족할 때 쓰면 좋음.


캐릭터 스킨

Empty WOTC Deco Slots for XCOM Soldiers (+ Some other empty things)

스킨을 커스터마이징 할 때, 꼭 필요한 모드로 스킨을 장착하지 않아도 되는 모드. 굉장히 유용함.


[WotC] Titanfall Gear

img

타이탄폴의 군인 장비를 가져옴, 다양한 파츠로 준비되어있어서 커스텀하기도 편함.


NieR: Automata - A2 & 2B Hair & Headband

img

니어 오토마타 머리 2종과 안대를 추가해줌. 의외로 안대가 쓸일이 많음. 사무라이 검과 같이 착용하면 니어오토마타 느낌도 나긴함.


NieR: Automata - A2 & 2B Hair & Headband

img

스커미셔 헬멧을 추가해줌.


[WOTC] Titanfall Sparks

img

고철 쓰레기장에서 괴짜 공돌이가 만든 것처럼 생긴 스파크를 타이탄폴의 타이탄으로 변경 참고로 타이탄폴 관련 모드는 퀄이 상당히 좋으니 여기서 꼭 찾아보길 바람.


[WOTC] Metal Gear Raiden Customization Pack

img

메탈기어 솔리드의 라이덴 스킨을 추가해줌, 헬멧부터 갑바, 다리, 어깨, 몸통장비, 팔뚝, 허벅지, 발목장비를 추가해주고 왜인지 모르겠으나 양복도 있고 검도 1개 추가해줌. 겁나 혜자 모드



워낙 깔려있는 모드가 많아서 천천히 업데이트중..

[DEV] javaScript - 객체 지향 프로그래밍

headerimg javaScript에서의 객체 지향

Objects(객체)

대학을 컴퓨터과학이나 관련 학과를 다니면서 객체라는 소리를 오지게듣는다.

하지만 JS에서 사용법은 아무도 안알려줘.. 아니 대학시절엔 JS과목은 없었다. 띠용

흠터레스팅..

html css js를 배우다보면 어 너무쉽네 라고 생각하게 만든다.

그리고 정신차리고 보면 Code는 스파게티처럼 꼬여만가고 아이고야.


1. 변수의 객체 객체는 뭐냐

객체 또는 오브젝트(object)는 저장공간에서 할당되어 값을 가지거나 식별자에 의해 참조되는 공간을 의미하며, 변수, 자료 구조, 함수 또는 메소드가 될 수 있다. 프로그래밍 언어는 변수를 이용해 객체에 접근하므로 객체와 변수라는 용어는 종종 함께 사용된다. 그러나 메모리가 할당되기 전까지 객체는 존재하지 않는다.

음…….

그래 맞는말인데 간단하게 하면?

그냥 덩어리다.

코드를 보면 그냥 car변수 그러니까 차가 있다. 차에 속해있는 부품이나 그런건 뭐가있지? 바퀴, 엔진, 좌석 등등

var car = {
  "wheels":4,
  "engines":1,
  "seats":5
};

console.log( "차의 바퀴 수는? -> ", car.wheels );

// 차의 바퀴 수는? -> 4

훨신 쉽다.


2. 함수의 객체 그래 변수의 객체는 알았어. 그럼 함수의 객체는 뭐지

const MotorBike = function() {
  this.wheels = 2;
  this.engines = 1;
  this.seats = 2;
};

함수도 아까 변수처럼 객체화 시킬 수 있다. 다른점은 this대문자로 시작했다는 점이다.


함수의 객체는 사실 Constructor라고한다. 왜 생성자일까?

const Car = function makingMyCarForTrip(wheels, engines, seats) {
  this.wheels = wheels;
  this.engines = engines;
  this.seats = seats;
};
const myCar = new Car(4, 1, 5);
myCar.windows = 6;

console.log(myCar);

/*
[object Object] {
  engines: 1,
  seats: 5,
  wheels: 4,
  windows: 6
}
*/

생성자에 함수의 파라미터를 추가하는 것도 좋은 방법이다. 이러면 생성 할 때마다 다른 자동차를 만들 수 있다.

마치 변수에 new Array(); 하듯이 똑같다. 이런식으로 myCar변수에 Car 생성자가 들어갔다(?) 바퀴, 엔진, 좌석에 접근할 수도 있고 새로 windows를 만들 수 도 있다. 아니면 차를 여러대 만들 수 도 있다.

3. 객체의 Private 사실 객체지향에서 요구하는 원칙이나 디자인패턴은 상당히 철저하다. 근데 막상 읽다보면 음.. 이유가.. 뭔데 실전에서 왜 그래야하는데?

[DEV] javaScript - Function 함수

headerimg javaScript에서 함수를 어떻게 선언하고 사용하는지 기초부터 최신기술까지

FUNCTION(함수) Definitions(정의)


1. 함수선언식(Declaration)

function areaSizeCal(width, hight) {
    return width*hight;
}

//호출
var squareArea = areaSizeCal(30, 40);

함수선언식은 선언 해놓고 언제든지 사용할 수 있게 저장해놓고 나중에 areaSizeCal(30, 40);으로 호출하는 방식.

  1. 매개변수는 생략 할 수 있음.
  2. 호출할 때 사용 해야하니 함수명은 생략 할 수 없음.
  3. 함수는 { } 중괄호로 감싸져야하고 return문으로 결과값을 반환 할 수 있음.
  4. } 중괄호가 끝난 후 ; 세미콜론은 일반적으로 적지 않는다. 세미콜론은 실행 가능한 statements문을 구분하는 역할을 하니~ 함수선언문은 실행문이 아니기 때문에 적지 않는다.


2. 함수 표현식(Expressions)

var x = function (a, b){
    return a * b;
};
console.log(x(5, 5)); // 25

함수표현식은 변수에 저장하는 방식임.

  1. 함수의 이름이 없는 익명함수!
  2. 변수, 객체나 배열과 같은 곳에 저장할 수 있다.
  3. 호출이나 접근은 변수 이름으로 할 수 있다.
  4. 호이스팅에 영향을 받지 않는다.
  5. 클로져나 콜백으로 사용할 수 있다. // 자세한 사항은 다음 포스트에서..


3. Self-Invoking Functions(자가 호출 함수) immediately-invoked function expression (IIFE : 즉시 호출 함수 표현)

var x = "Hello!!";
(function (text) {
    console.log(text); // I will invoke myself
})(x);
//Hello!!

괄호안에 있는 function은 바로 실행된다. 뒤에 ();는 외부 객체나 변수를 넣어서 전달 할 수 있음.

  1. IIFE는 다른 표현도 있다고하는데, 권장하지 않는다. 보기 껄끄러워서
  2. 모듈화 되어있는 스크립트에서는 앵간하면 쓰지 않는다.


4. 그래서 뭘쓰지?

// Perfected
const foo = function foo_more_descriptive_name() {
    // ...
};

// just ok
const foo = () => {
    // ...
};

요즘은 이렇게 쓰는게 좋다더라, 함수 표현식은 함수이름이 없다. 하지만 위에서처럼 함수 설명이 가능한 이름을 써준다. 그리고 foo 변수에 할당하여 사용한다. =>화살표 함수는 함수의 새로운 표현법이다.

  1. var는 ES2015부터는 const와 let 을 쓴다. 호이스팅과 변수관리 때문에 잘안쓴다.
  2. const는 한번 할당 후 읽기 전용이 된다. let은 재할당이 가능하다.
  3. const와 let은 block-scoped이다.
  4. 함수를 할당 할 때는 const 선언을 한다. //자세한 사항은 변수 파트에서..

[DEV] Jekyll(지킬) rouge, code Highlight 지원 리스트

headerimg 지킬 코드 하이라이트 지원 리스트!

Syntax Highlighting List

gem으로 설치하는 rouge이 지원하는 모든 언어! 알파벳순이고 Ctrl + F 찾으시면 됩니다.

  • actionscript: ActionScript [aliases: as,as3]
  • apache: configuration files for Apache web server
  • apiblueprint: Markdown based API description language. [aliases: apiblueprint,apib]
  • applescript: The AppleScript scripting language by Apple Inc. (http://developer.apple.com/applescript/)
  • biml: BIML, Business Intelligence Markup Language
  • c: The C programming language
  • ceylon: Say more, more clearly.
  • cfscript: CFScript, the CFML scripting language [aliases: cfc]
  • clojure: The Clojure programming language (clojure.org) [aliases: clj,cljs]
  • cmake: The cross-platform, open-source build system
  • coffeescript: The Coffeescript programming language (coffeescript.org) [aliases: coffee,coffee-script]
  • common_lisp: The Common Lisp variant of Lisp (common-lisp.net) [aliases: cl,common-lisp,elisp,emacs-lisp]
  • conf: A generic lexer for configuration files [aliases: config,configuration]
  • coq: Coq (coq.inria.fr)
  • cpp: The C++ programming language [aliases: c++]
  • csharp: a multi-paradigm language targeting .NET [aliases: c#,cs]
  • css: Cascading Style Sheets, used to style web pages
  • d: The D programming language(dlang.org) [aliases: dlang]
  • dart: The Dart programming language (dartlang.com)
  • diff: Lexes unified diffs or patches [aliases: patch,udiff]
  • dot: Graphviz graph description language
  • eiffel: Eiffel programming language
  • elixir: Elixir language (elixir-lang.org) [aliases: elixir,exs]
  • erb: Embedded ruby template files [aliases: eruby,rhtml]
  • erlang: The Erlang programming language (erlang.org) [aliases: erl]
  • factor: Factor, the practical stack language (factorcode.org)
  • fortran: Fortran 95 Programming Language
  • gherkin: A business-readable spec DSL ( github.com/cucumber/cucumber/wiki/Gherkin ) [aliases: cucumber,behat]
  • glsl: The GLSL shader language
  • go: The Go programming language (http://golang.org) [aliases: go,golang]
  • gradle: A powerful build system for the JVM
  • groovy: The Groovy programming language (http://www.groovy-lang.org/)
  • haml: The Haml templating system for Ruby (haml.info) [aliases: HAML]
  • handlebars: the Handlebars and Mustache templating languages [aliases: hbs,mustache]
  • haskell: The Haskell programming language (haskell.org) [aliases: hs]
  • html: HTML, the markup language of the web
  • http: http requests and responses
  • ini: the INI configuration format
  • io: The IO programming language (http://iolanguage.com)
  • java: The Java programming language (java.com)
  • javascript: JavaScript, the browser scripting language [aliases: js]
  • jinja: Django/Jinja template engine (jinja.pocoo.org) [aliases: django]
  • json: JavaScript Object Notation (json.org)
  • json-doc: JavaScript Object Notation with extenstions for documentation
  • jsonnet: An elegant, formally-specified config language for JSON
  • julia: The Julia programming language [aliases: jl]
  • kotlin: Kotlin http://kotlinlang.org
  • liquid: Liquid is a templating engine for Ruby (liquidmarkup.org)
  • literate_coffeescript: Literate coffeescript [aliases: litcoffee]
  • literate_haskell: Literate haskell [aliases: lithaskell,lhaskell,lhs]
  • llvm: The LLVM Compiler Infrastructure (http://llvm.org/)
  • lua: Lua (http://www.lua.org)
  • make: Makefile syntax [aliases: makefile,mf,gnumake,bsdmake]
  • markdown: Markdown, a light-weight markup language for authors [aliases: md,mkd]
  • matlab: Matlab [aliases: m]
  • mosel: Optimization language used by Fico’s Xpress. (http://www.fico.com/en/products/fico-xpress-optimization-suite/)
  • moonscript: Moonscript (http://www.moonscript.org) [aliases: moon]
  • nasm: Netwide Assembler
  • nginx: configuration files for the nginx web server (nginx.org)
  • nim: The Nim programming language (http://nim-lang.org/) [aliases: nimrod]
  • objective_c: an extension of C commonly used to write Apple software [aliases: objc]
  • ocaml: Objective CAML (ocaml.org)
  • pascal: a procedural programming language commonly used as a teaching language.
  • perl: The Perl scripting language (perl.org) [aliases: pl]
  • php: The PHP scripting language (php.net) [aliases: php,php3,php4,php5]
  • plaintext: A boring lexer that doesn’t highlight anything [aliases: text]
  • powershell: powershell [aliases: posh]
  • praat: The Praat scripting language (praat.org)
  • prolog: The Prolog programming language (http://en.wikipedia.org/wiki/Prolog) [aliases: prolog]
  • properties: .properties config files for Java
  • protouf: Google’s language-neutral, platform-neutral, extensible mechanism for serializing structured data [aliases: proto]
  • puppet: The Puppet configuration management language (puppetlabs.org) [aliases: pp]
  • python: The Python programming language (python.org) [aliases: py]
  • qml: QML, a UI markup language [aliases: qml]
  • r: The R statistics language (r-project.org) [aliases: r,R,s,S]
  • racket: Racket is a Lisp descended from Scheme (racket-lang.org)
  • ruby: The Ruby programming language (ruby-lang.org) [aliases: rb]
  • rust: The Rust programming language (rust-lang.org) [aliases: rs]
  • sass: The Sass stylesheet language language (sass-lang.com)
  • scala: The Scala programming language (scala-lang.org) [aliases: scala]
  • scheme: The Scheme variant of Lisp
  • scss: SCSS stylesheets (sass-lang.com)
  • sed: sed, the ultimate stream editor
  • shell: Various shell languages, including sh and bash [aliases: bash,zsh,ksh,sh]
  • shell_session: A generic lexer for shell session and command line [aliases: terminal,console]
  • slim: The Slim template language
  • smalltalk: The Smalltalk programming language [aliases: st,squeak]
  • smarty: Smarty Template Engine [aliases: smarty]
  • sml: Standard ML [aliases: ml]
  • sql: Structured Query Language, for relational databases
  • swift: Multi paradigm, compiled programming language developed by Apple for iOS and OS X development.(developer.apple.com/swift)
  • tap: Test Anything Protocol [aliases: tap]
  • tcl: The Tool Command Language (tcl.tk)
  • tex: The TeX typesetting system [aliases: TeX,LaTeX,latex]
  • toml: the TOML configuration format (https://github.com/mojombo/toml)
  • tulip: The tulip programming language http://github.com/jneen/tulip [aliases: tlp]
  • twig: Twig template engine (twig.sensiolabs.org)
  • typescript: TypeScript, a superset of JavaScript [aliases: ts]
  • vb: Visual Basic [aliases: visualbasic]
  • verilog: The System Verilog hardware description language
  • viml: VimL, the scripting language for the Vim editor (vim.org) [aliases: vim,vimscript,ex]
  • xml: XML
  • yaml: Yaml Ain’t Markup Language (yaml.org) [aliases: yml]

[Review] 12솔져스(12Strong)은 실화와 얼마나 비슷할까?

headerimg 실화를 바탕으로 9.11 테러 직후 11일간의 비공식 작전! 실제와 얼마나 비슷할까?

배우와 실제 얼굴

배우실제 얼굴
face크리스 헴스워스(미치 넬슨)face마크 넬슨 대위
face마이클 섀넌face밥 패닝턴 준위
face네이비드 네가반face도스툼 장군
face윌리암 피츠너face존 멀홀랜드 대령
face롭 리글face맥스 바우어스 대령

영화와 실화에 대한 궁금증

실제로 마크 넬슨은 9/11 당시 사무직으로 일하고 있었는가?

실제로 영화에서 크리스 헴스워스가 연기한 마크 넬슨은 특스 부대 대장으로써 복무중 승진으로 행적직 근무 중으로 TV를 통해 알았다고 함. 영화에서 처럼 9/11에 대한 소식을 듣자마자 맥스 바우어스 대령에게 파병 요청을 했음. 물론 영화에서 책상 부시는 장면은 없었뜸. 쌍남자;;


9/11 당시 실제로 그린베레들은 훈련 중이였나?

영화 초반에 보면 몇 몇의 그린베레들이 낮은 강에서 훈련중이였다고 함. 실제로 595 특수부대는 컴버 랜드 강을 따라 야간 훈련에 참가하고 있었는데, 짙은 안개 때문에 보트이동을 포기하고 강둑에서 밤을 보냈다고ㅋㅋ. 그래서 영화에서도 face

스타벅스 들렀다 오냐?

영화에서는 다른 팀원이 도착해서 9/11 상황을 알려주지만 실제로는 복귀도중 라디오에서 비행기가 세계 무역 센터에 자폭하는 것을 알았다고 함.


9/11 테러 이후 12 솔져스가 아프가니스탄에 첫 파견된 미군인가?

Nope. ODA 595(Operational Detachment-Alpha 595)는 아프가니스탄으로 파견된 특수부대 3개 중 하나라고 함. 원래는 무역센터 공격이 있은 지 3일 후인 9월14일 최초의 파병으로 아프간에 도착할 예정이였지만, 3번의 출발 지연으로 10월 5일에 출발했다고함. 가는 시간을 생각하면 너무 늦… 9월 26일 7명으로 이루어진 CIA특수작전단(SAD) '조브레이커'팀이 가장 먼저 아프간 국경을 넘었다고 함. 실제 첫 임무는 아프가니스탄에서 첫 공중격추된 조종사를 구출하는 임무였지만 도스툼을 도와주는 임무로 바뀌었다고 하더라~


왜 ODA 959팀이 선택되었나?

ODA 595팀은 아프간 북부 이웃 국가인 우즈베키스탄의 특수 작전 부대와 계속 적으로 일하던 팀이였고, 가장 최근까지 활동했던 터라 믿음직 스러웠다고함. 팀 전체가 2년간 같이 살아왔고 평균 8년의 복무기간을 가지고있는 베테랑 팀이였음. 실제로 사막의 폭풍작전과 소말리아, 코소보에서 활동도 했었다고함. 또한 헴스워스가 연기한 마크 넬슨은 실제로도 전투경험이 없었다고함.


마크넬슨은 세계 무역센터의 잔해를 가지고 있었나?

img 영화에서 마크넬슨이 세계 무역센터의 잔해를 받는 장면이 있음. 이 후 마자르 전투에서 승리 한 후 땅에 묻는 장면이 있는데, 실제로는 맥스 바우어스 대령이 가지고 있었다고함. 나~아중에 탈레반이 무너진 지 몇 달 후, 특별 작전팀이 마자르에가서 잔해를 묻었다고 함. img


도스툼은 실제로도 도라이같은 사람이었나?

도스톰은 실제로도 폭력적인 성향으로 유명했다고함. 멀홀랜드 대령은 “우리는 도스툼에 대해 아무것도 몰랐다. 이 사람들은 손에서 피를 묻히고 있었고 이들중 깨끗한 사람은 아무도 없었다.”라고 했다. 실제로도 도스툼은 결국 아프가니스탄의 부통령이 되었다고 함.


미군은 도스툼에게 정말로 선물을 주었나?

영화에서 보면 처음 말사료를 주는데, 표정이 겁나 좋지 않았다. 실제로도 전혀 좋아하지 않았고 나중에 러시아산 보드카를 1병 주었더니 "Excellent"라고 말함 ㅋㅋ img


영화에서처럼 정말 살아남기 힘든 임무였는가?

영화에서보다 더 살아남기 힘든 임무였다고함. 마크넬슨은 "그 누구도 우리가 살아남을 것이라고 기대하지 않았다."라고했음. img

여기선 절대로 생포당하면 안돼

고향에서 7,000마일(11,265km) 떨어져 있는 전장에서 1인당 100,000달러(1억 600만원) 현상금이 걸린 상태로 96시간 동안 4000배 이상 차이나는 전투를 중화기, 탱크, 박격포 등을 가진 50,000명과 싸웠고 임무 완수모두 생환했으니;; 개억지 판타지 영화급 기적임.


영화에서 처럼 실제로 말을 타고 싸웠나?

미군 특수 부대는 가장 최첨단의 기술을 사용하는 전투에 익숙하지만 아프간 지역에서 기마병으로써 싸우길 강요받았다고함. 물론 산악지형이고 이동 거리가 멀기 때문에 어쩔 수 없는 선택이기도 함. 실제로 지휘부에서 도스툼의 군대가 기마병으로 이루어져 있다는 것을 몰랐다고함. img img


실제로 밥 패닝턴은 허리디스크로 고생핬나?

마이클 섀넌이 연기한 할스펜서(실명:밥 패닝턴)는 요추 추간판 탈출증으로 고생했다고함. 임무 중에 너무 괴로워하며 말을 타고 다녔다고 함. ㅋㅋ 영화에서 잠깐 나오듯이 위생병이 진통제를 줬다고 하는데.. 몰핀처럼 마약성 진통제가 아니였을까?


도스툼은 미군 1명보다 부하500명을 잃는게 차라리 낫다고 했나?

img

미군 1명이 다치느니 내 부하 500명을 잃는게 낫소

실제 도스툼은 미군이 다치면 미국이 지원을 안해줄 것으로 생각해서 이렇게 말했다고함. 나중에서야 영화처럼 넬슨 대위가 도스툼과 신뢰를 쌓아서 전투 중에 아무말 없이 믿어주었다고 함.


배우 롭리글은 실제로 아프가니스탄에 파병을 갔었다

배우 롭 리글은 실제로 해병대로 2001년에 아프간에 파병을 갔었다. 실제로 맥스 바우어 아래에 위치한 부대에 있었고 가끔은 보고도 했다고 함. img

이 해병은 커서 자신의 상관인 맥스 바우어를 연기하게 된다. </br>

img

무역센터 앞 Horse Soldier 동상 </br>

img

마지막으로 실제 ODA 595팀의 사진

참고


Special Forces Who Avenged 9/11 (Alex Quade’s “Horse Soldiers” SHORT) HistoryVsHollywood

[DEV] HTML의 구조와 에디터 추천

headerimg 거두절미 HTML5 강좌

  1. HTML의 개요
  2. 실험
  3. 구조
  4. Editor(문서 편집 에디터)

HTML의 개요

html은 웹페이지를 만드는 3가지 큰 요소 중 1부분을 차지한다. 보통 마크업(Markup)이라 한다. 가끔 보면 특이한 마크업이 있는데 jade, pug 등은 node.js에 express라는 서버에서 사용한다.

실험

html은 메모장으로 간단하게 실험해볼 수 있는데,

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

위 코드를 메모장에 써보자

  1. 메모장에 위코드를 붙여넣기 img

  2. 저장할때, .html로 저장. img

    index.html로 저장

  3. 브라우저로 열어본다. img

    잘 작동 하는 것을 볼 수 있다.

구조

원리 앞에 HTML코드를 보면 html은 <>인 Opening Tag와 </> Closing Tag가 한쌍으로 이루어져있다.

img

Attribute는 tag의 속성값을 넣는 구역으로 class가 foo로 지정되어있다.

Content는 tag안의 표시할 정보를 넣는 구역이다.

HTML 구조 앞에 실험해본 HTML의 구조는 아래처럼 시각화 할 수 있다.

흰색 영역은 <body> 태그는 브라우저 안에 표시된다. <head> 태그는 브라우저 이름이나 다른 meta 데이터가 들어가는 구역이다.

<!DOCTYPE>는 브라우저에게 문서 유형을 보여주는 곳인데 HTML태그보다 먼저 맨위에 작성되어야한다. HTML5는 아래와 같이 작성하면된다.

<!DOCTYPE html>

html5 전에는 겁나 귀찮았는데 아주 쉬워졌다. 굿.

Editor(문서 편집 에디터)

앞으로 작성할 html문서들을 계속 메모장에 사용할 수 없으니 간단히 Editor를 추천한다.

Visual Studio Code 줄여서 vsCode라고 한다. 다양한 커스터마이징과 강력한 기능들이 있다. 특히나 마이크로소프트가 모든 플랫폼 용으로 개발한 편집기로 git제어 디버깅 등 꼭 필요한 기능이 기본으로 들어있어서 좋다. 참고로 일렉트론기반으로 제작되었다. 무거울 것같은 마소이지만 vsCode만큼은 너무나 가볍게 잘돌아간다. 저사양PC에서도 좋다. 나도 사용중.

Atom은 vsCode전에 사용한 편집기로 역시 Electron 기반이다. vsCode와 비슷하지만 단점으로는 조금 무겁고 버벅거림이 있을 수 있다. 가끔은 아예 응답없음이 떠버려서 난감한 경우도 있지만 어쨌든 자동저장이라 껏다 키면된다. 장점은 vsCode보다 UI UX에 접근하여 커스터마이징이 매우매우 자유롭고 상당히 특이한 플러그인들이 많다. 대표적으로 Power Mode 이 플러그인 때문에 6개월 정도 사용했지만 결국 vsCode로 이전했다..ㅠ

Power

미친 .. 다시 사용하고 싶어질만큼 매력적이다.

다른 에디터도 많지만 일단 기본적으로 웹개발에서는 이 두 개가 대표적이다.

[DEV] Jekyll(지킬) Error(에러) Invalid CP949 character "₩xE2"

headerimg Window에서 Jekyll CP949 에러 해결 방법

윈도우에서 CP949 에러! 무엇?

image

이런 메시지가 가끔 뜬다. 보통은 새로운 플러그인이나 기능을 추가하거나 테마를 받아 실행해볼 때, 많이 일어난다. 기본 jekyll 프로젝트에서는 보지 못한 에러라 많이 당황했다. 로그에 보이듯이 SASS가 문제

윈도우에서 SASS를 사용하는 패키지 인코딩이 문제카더라.. 구글링에서는 _config.yml 파일에 UTF-8 인코딩으로 추가 하라던데 "응, 안돼. 돌아가"

해결법

chcp 65001

image

자~알 굴러간다. 굿!

참고

Liquid Exception: Incompatible character encoding

위와 같은 encoding 에러도 아래 명령어로 해결될 수 있다.

윈도우에서 Jekyll 문서 으로 Ruby2.0 기준으로 잘 설명한 git이 있어서 링크 남깁니다.

[DEV] Jekyll(지킬)을 Windows(윈도우 10)에 설치하기

headerimg Jekyll은 기본적으로 윈도우는 지원하지 않는다. 윈도우에서 지킬을 설치하기 위해 퇴근 후 고생했던 방법!

윈도우에서 지킬 설치하기

  1. 기본 설치
  2. 지킬과 부가기능 설치
  3. 지킬 프로젝트 생성과 실행

준비물과 요구사항 image

기본 설치

다운로드 하는 곳: [다운로드]

루비 설치

image

NOTE: 2.4버전 이상으로 시도했지만 여러 테마들과 여러 gem들이 버전이 안맞아서 에러가 겁나 났습니다. 3일 내내 고생한 부분이니 왠만하면 2.3.3 버전으로 설치하시길 바랍니다.

image NOTE: 설치 하실 때, Add Ruby executables to your PATH는 꼭 체크 하시길 바랍니다. 자동으로 정말 귀찮은 환경변수를 등록해줍니다.

DevKit(데브킷) 설치

데브킷은 원하는 위치에 압축을 풀어 놓습니다. C드라이브 바로 아래에 위치하는 것이 편합니다.

Win + R 후 “cmd” 입력! 명령 프롬프트 실행

cd c:\devkit
ruby dk.rb init
ruby dk.rb install

위 명령어로 데브킷을 설치합니다.

설치 완료되면 ruby –version gem –version 명령어로 ruby와 gem이 잘 설치 되었는지 확인해봅니다. image

지킬과 부가기능 설치

NOTE: gem은 npm이나 yarm 처럼 ruby에서 쓰는 패키지 매니저입니다. 자세한 사항은 이곳 에서 확인하세요.

아래 명령어로 지킬과 나머지 필수 패키지를 설치합니다.

gem install jekyll
gem install minima
gem install bundler
gem install jekyll-feed
gem install tzinfo-data

모두 설치가 되었으면 CMD로 돌아가서 Jekyll 프로젝트를 생성합니다.

지킬 프로젝트 생성과 실행

jekyll new .

image

위와 같이 잘 생성된다면 로컬에서 실행 해봅시다.

jekyll serve

image

image

NOTE: http://127.0.0.1:4000 에 접속하면 서버가 생성 되었습니다.

Pagination


© 2018. All rights reserved.