호다닥

What is HTTP and how it works

3jun — Thu, 22 Jul 2021 21:48:13 +0900

What is Http?

Hyper Transfer Protocol

Http is application layer protocol that allows web-based applications to communicate and exchange data.
TCP/IP based Protocol
Http used to deliver contents for example images, videos, audios, documents

3 Important things

HTTP is connetionless - after making the request, the client disconnect from the server, then when response is ready the server re-establish the connection again and deliver the response
The HTTP can deliver any sort of data, as long as the two computers are able to read it.
The HTTP is a stateless - the client and server know about each other just during the current request, if it closes, and the two computers want to connect again, they need to provide information to each other anew, and the connection is handled as the very first one.

Why the HTTP?

The http was designed mainly to fetch html documents and sends it to the client.

It was designed in a exquisite way.

It was being continually evoved and features were being added to it.

It became the most convenient way to quickly and reliably move data on the web.

HTTP Message

HTTP message contains plain text based information. somtimes the body contains binary data.

The Request Http message and Response Http message

The method is a command that tells the server what to do. E.g GET / POST

URI is a set of readable characters and a way to locate the resource.

The status code tells the client if the request succeeded or failed. E.g : 200: OK, 404: file not found

To sum up

The HTTP is a TCP/IP based application layer protocol that allows web-based applications to communicate and exchange data.
The computers that communicate via the HTTP must speak the http protocol.
The http is stateless, connectionless, and can deliver any data.
We use the http protocol because it its a convenient way to quickly and reliably move data on the web.
The request response cycle works on the web via http messages.
A http message contains three sections, the start line, the headers, and the body

This content was made by https://www.youtube.com/watch?v=eesqK59rhGA

유튜브/올리버쌤 - It's stupid : 바보 같다 고 해석하시나요?

3jun — Fri, 18 Jun 2021 18:35:10 +0900

It's stupid : 바보 같다 고 해석하시나요?
stupid 는 '바보' 보다 강도가 조금 더 쎈 표현이다.

친하지 않은 사람에게 stupid 라고 하면 불쾌해할 가능성이 높은 표현이다.

그럼 It's stupid 는 어떤 의미일까?

단, stupid 는 뉘앙스나 문맥에 따라서 '미쳤다' 라는 의미로 사용하기도 한다.
insane, ridiculous 와 같은 느낌

올바른 예시
His truck had a really expensive stereo system in it. It was stupid
걔 트럭에 엄청 비싼 스피커 있어. 완전 미쳤어

His parents spent a ton of money on his birthday party. It was stupid.
걔네 부모님이 걔 생이레 돈 엄청 많이 썼더라. 완전 대박이었어.

stupid + good = very good

The food was stupid good.
We had a stupid good time.

유튜브/올리버쌤 - ‘원래’를 영어로 혹시 [Originally] 라고 하시나요?

3jun — Fri, 11 Jun 2021 20:38:33 +0900

originally : 뿌리, 근원, 처음

올바른 사용 예시

I'm originally from Texas : 난 원래 텍사스에서 왔어, 내 뿌리는 텍사스에 있다.

잘못된 예시

She's originally pretty : 걔가 처음에는 예뻤는데(지금은 글쎄..) 이런느낌이 있다.

This was originally for Frank but you can have it : 이거 원래 프랭크한테 주려고 했는데, 이제 프랭크한테 안 주고 너에게 줄게

원래

for instance 1 : 사람에 대해서 말할 때 -> 현재완료를 사용하기

Has he always been like that? : 걔 원래 항상 그래?

She's always been kind of shy : 걔 원래 좀 소심하잖아

for instance 2 : 사물에 대해서 말할 때 -> be supposed to

Are the pockets supposed to stick out like that : 그 주머니 원래 그렇게 나와 있는거야?

That's what it's supposed to taste like : 그거 원래 맛이 그래

잘못된 예시의 올바른 표현

She's always been pretty : 걔 원래 예쁘지

Capturing 과 Bubbling

3jun — Sun, 27 Dec 2020 10:48:18 +0900

ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

ko.javascript.info

capturing 과 bubbling 을 컨트롤하기 위한 꿀팁!!

if ( event.target !== event.currentTarget ) {
	return;
}

/* 위 코드를 각각의 eventListner 에 삽입해준다. */


cf) 
 event.stopPropagation();
 event.stopImmediatePropagation();

stopPropagation 이나 stopImmediatePropagation 은 부모 컨테이너에서 작동하는 event의 동작에 영향을 미칠 수 있기 때문에 사용을 권장하지 않는다.

PoiemWeb: JS 요약

3jun — Mon, 26 Oct 2020 23:55:39 +0900

프로그래밍 언어

약속된 구문 (문법, Syntax)로 구성된 프로그래밍 언어를 사용하여 기계어를 대신 전달한 후, 컴파일러 (Compiler) 혹은 인터프리터(Interpreter)를 통해 기계어로 반환한다.

*** 구문(Syntax) & 의미(Semantics)

Javascript

자바스크립트는 일반적으로 프로그래밍 언어로서 기본 뼈대를 이루는 ECMAScript와 브라우저가 별도 지원하는 클라이언트 사이드 Web API, 즉 DOM, BOM, Canvas, XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker 등을 아우르는 개념이다.

특징

별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.

(대부분의 모던 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리속도가 느린 인터프리터의 단점을 해결했다.)

명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다.

*** 프로토 타입 기반의 객체지향언어 vs 클래스 기반의 객체지향 언어

Internet Explorer 나 구형 브라우저는 ES6를 지원하지 않는다. 따라서 이런 브라우저들을 고려해야 한다면 babel 같은 트랜스파일러를 사용하여 ES6로 구현한 소스코드를 ES5 이하의 버전으로 다운그레이드할 필요가 있다. 또한 ES6에서 도입된 모듈 import/export는 아직 대부분의 브라우저가 지원하고 있지 않다. 따라서 프로젝트에서 모듈을 도입하려면 Webpack과 같은 모듈 번들러를 사용해야 한다.

Node.js

Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)이다. 간단히 말해 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있는 자바스크립트 실행 환경이 Node.js이다.

주로 서버 사이드 애플리케이션 개발에 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다. Node.js는 데이터를 실시간 처리하여 빈번한 I/O가 발생하는 SPA(Single Page Application)에 적합하다. 하지만 CPU 사용률이 높은 애플리케이션에는 권장하지 않는다.

npm(node package manager)은 자바스크립트 패키지 매니저이다. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공한다.

브라우저 동작원리

브라우저의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 서버에 요청(Request)하고 서버의 응답(Response)을 받아 브라우저에 표시하는 것이다.

1. 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다.

2 HTML, CSS 파일은 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱(Parsing)되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합된다.

3. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.

자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다. 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.

브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있다는 것을 의미한다. 따라서 script 태그의 위치는 중요한 의미를 갖는다.

body 요소의 가장 아래에 자바스크립트를 위치시키는 것은 좋은 아이디어이다. 그 이유는 아래와 같다.

HTML 요소들이 스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작한다면 에러가 발생한다.

자바스크립트의 기본문법

데이터 타입(Data Type)	프로그래밍 언어에서 사용할 수 있는 값의 종류
변수(Variable)	값이 저장된 메모리 공간의 주소를 가리키는 식별자(identifier)
리터럴(literal)	소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위

// 숫자 리터럴
10.50
1001

// 문자열 리터럴
'Hello'
"World"

// 불리언 리터럴
true
false

// null 리터럴
null

// undefined 리터럴
undefined

// 객체 리터럴
{ name: 'Lee', gender: 'male' }

// 배열 리터럴
[ 1, 2, 3 ]

// 정규표현식 리터럴
/ab+c/

// 함수 리터럴
function() {}

자바스크립트의 모든 값은 데이터 타입을 갖는다. (7가지)

원시 타입 (primitive data type)
- number
- string
- boolean
- null
- undefined
- symbol (New in ECMAScript 6)
객체 타입 (Object data type)
- object

자바스크립트는 C나 Java외는 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다. 다시 말해, 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다.

연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(Operand)라 한다.

// 산술 연산자
var area = 5 * 4; // 20

// 문자열 연결 연산자
var str = 'My name is ' + 'Lee'; // "My name is Lee"

// 할당 연산자
var color = 'red'; // "red"

// 비교 연산자
var foo = 3 > 5; // false

// 논리 연산자
var bar = (5 > 3) && (2 < 4);  // true

// 타입 연산자
var type = typeof 'Hi'; // "string"

// 인스턴스 생성 연산자
var today = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)

자바스크립트는 암묵적 타입 강제 변환을 통해 연산을 수행한다.

키워드(keyword)는 수행할 동작을 규정한 것이다. 예를 들어 var 키워드는 새로운 변수를 생성할 것을 지시한다.

// 변수의 선언
var x = 5 + 6;

// 함수의 선언
function foo (arg) {
  // 함수 종료 및 값의 반환
  return ++arg;
}

var i = 0;
// 반복문
while (1) {
  if (i > 5) {
    // 반복문 탈출
    break;
  }
  console.log(i);
  i++;
}

프로그램(스크립트)은 컴퓨터(Client-side Javascript의 경우, 엄밀히 말하면 웹 브라우저)에 의해 단계별로 수행될 명령들의 집합이다

// 함수
function myFunction(x, y) {
  return x + y;
}

// if 문
if(x > 0) {
  // do something
}

// for 문
for (var i = 0; i < 10; i++) {
  // do something
}

문들은 일반적으로 위에서 아래로 순서대로 실행된다. 이러한 실행 순서는 조건문(if, switch)이나 반복문(while, for)의 사용으로 제어할 수 있다 이를 흐름제어(Control Flow)라 한다.

블록 유효범위(Block-level scope)를 생성하지 않는다. 함수 단위의 유효범위(Function-level scope)만이 생성된다.

표현식(Expression)은 하나의 값으로 평가(Evaluation)된다.

// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.
// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.

객체

자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 “모든 것”이 객체이다. 원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

자바스크립트 객체는 키(이름)와 값으로 구성된 프로퍼티(property)의 집합이다.

객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다. 객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 이 프로토타입은 타 언어와 구별되는 중요한 개념이다.

데이터 타입과 변수

변수는 값의 위치(주소)를 기억하는 저장소이다. 값의 위치란 값이 위치하고 있는 메모리 상의 주소(address)를 의미한다. 즉, 변수란 값이 위치하고 있는 메모리 주소(Memory address)에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자(identifier)이다.

자바스크립트는 동적 타입(Dynamic/Weak Type) 언어이다. 변수의 타입 지정(Type annotation)없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정(타입 추론, Type Inference)된다.

변수 호이스팅 (Variable Hoisting)

console.log(foo); // ① undefined
var foo = 123;
console.log(foo); // ② 123
{
  var foo = 456;
}
console.log(foo); // ③ 456

var 키워드를 사용하여 선언한 변수는 중복 선언이 가능하기 때문에 위의 코드는 문법적으로 문제가 없다.

①에서 변수 foo는 아직 선언되지 않았으므로 ReferenceError: foo is not defined가 발생할 것을 기대했겠지만 콘솔에는 undefined가 출력된다.

이것은 다른 C-family 언어와는 차별되는 자바스크립트의 특징으로 모든 선언문은 호이스팅(Hoisting)되기 때문이다.

호이스팅이란 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성을 말한다. 즉, 자바스크립트는 모든 선언문(var, let, const, function, function*, class)이 선언되기 이전에 참조 가능하다.

변수가 어떻게 생성되며 호이스팅은 어떻게 이루어지는지 좀더 자세히 살펴보자. 변수는 3단계에 걸쳐 생성된다. 자세한 내용은 Execution Context을 참조하기 바란다.

선언 단계(Declaration phase)

변수 객체(Variable Object)에 변수를 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다.

초기화 단계(Initialization phase)

변수 객체(Variable Object)에 등록된 변수를 메모리에 할당한다. 이 단계에서 변수는 undefined로 초기화된다.

할당 단계(Assignment phase)

undefined로 초기화된 변수에 실제값을 할당한다.

①이 실행되기 이전에 var foo = 123;이 호이스팅되어 ①구문 앞에 var foo;가 옮겨진다.(실제로 변수 선언이 코드 레벨로 옮겨진 것은 아니고 변수 객체(Variable object)에 등록되고 undefined로 초기화된 것이다.) 하지만 변수 선언 단계와 초기화 단계가 할당 단계와 분리되어 진행되기 때문에 이 단계에서는 foo에는 undefined가 할당되어 있다. 변수 foo에 값이 할당되는 것은 2행에서 실시된다.

②에서는 변수에 값이 할당되었기 때문에 123이 출력된다.

자바스크립트의 변수는 다른 C-family와는 달리 블록 레벨 스코프(block-level scope)를 가지지 않고 함수 레벨 스코프(function-level scope)를 갖는다. 단, ECMAScript 6에서 도입된 let, const 키워드를 사용하면 블록 레벨 스코프를 사용할 수 있다. 자세한 내용은 Scope를 참조하기 바란다.

함수 레벨 스코프(Function-level scope)

함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.

블록 레벨 스코프(Block-level scope)

코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다.

var 키워드로 선언된 변수의 문제점

ES5에서 변수를 선언할 수 있는 유일한 방법은 var 키워드를 사용하는 것이다. var 키워드로 선언된 변수는 아래와 같은 특징을 갖는다. 이는 다른 C-family 언어와는 차별되는 특징(설계상 오류)으로 주의를 기울이지 않으면 심각한 문제를 발생시킨다.

함수 레벨 스코프(Function-level scope)
- 전역 변수의 남발
- for loop 초기화식에서 사용한 변수를 for loop 외부 또는 전역에서 참조할 수 있다.
var 키워드 생략 허용
- 의도하지 않은 변수의 전역화
중복 선언 허용
- 의도하지 않은 변수값 변경
변수 호이스팅
- 변수를 선언하기 전에 참조가 가능하다.

대부분의 문제는 전역 변수로 인해 발생한다. 전역 변수는 간단한 애플리케이션의 경우, 사용이 편리한 면이 있지만 불가피한 상황을 제외하고 사용을 억제해야 한다. 전역 변수는 유효 범위(scope)가 넓어서 어디에서 어떻게 사용될 지 파악하기 힘들다. 이는 의도치 않은 변수의 변경이 발생할 수 있는 가능성이 증가한다. 또한 여러 함수와 상호 의존하는 등 부수 효과(side effect)가 있을 수 있어서 복잡성이 증가한다.

변수의 유효 범위(scope)는 좁을수록 좋다.

ES6는 이러한 var의 단점을 보완하기 위해 let과 const 키워드를 도입하였다.

문과 표현식

표현식의 역할은 값을 생성하는 것이다. 문의 역할은 표현식으로 생성한 값을 사용해 컴퓨터에게 명령을 내리는 것이다. 문에는 표현식인 문과 표현식이 아닌 문이 있다. 예를 들어 선언문은 값으로 평가될 수 없다. 따라서 표현식이 아닌 문이다. 하지만 할당문은 그 자체가 표현식인 문이다. 아래 예제를 살펴보자.

// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.

// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.

할당연산자

할당 연산자(Assignment Operator)는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다

=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

var x;

x = 10;   // 10
x += 5;   // 15
x -= 5;   // 10
x *= 5;   // 50
x /= 5;   // 10
x %= 5;   // 0

var str = 'My name is ';
str += 'Lee'; // My name is Lee

동등 / 일치 비교 연산자

==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	부등 비교	x != y	x와 y의 값이 다름
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름

동등 비교 연산자는 편리한 경우도 있지만 수많은 부작용을 일으키므로 사용하지 않는 편이 좋다.

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

비교(==) 연산자는 예측하기 어려운 결과를 만들어낸다.

** typeof 연산자로 null 값을 연산해 보면 null이 아닌 “object”를 반환한다 따라서 null 타입을 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용하도록한다.

제어문 (5.8 Control Flow)

조건문에는 if..else 문과 switch 문 2종류가 있다.

반복문에는 for 문과 while문 do..while 문이 있다.

객체 (5.10 Object)

자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

이와 같이 객체는 데이터를 의미하는 프로퍼티(property)와 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)로 구성된 집합이다.

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 “프로토타입(prototype)”이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다.

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값
프로퍼티 값 : 모든 값

객체생성방법

1. 객체 리터럴

가장 일반적인 자바스크립트의 객체 생성 방식이다.

var emptyObject = {};
console.log(typeof emptyObject); // object

var person = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}

person.sayHello(); // Hi! My name is Lee

2. Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성할 수 있다. 빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법이다.

생성자(constructor) 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다. 생성자 함수를 통해 생성된 객체를 인스턴스(instance)라 한다. 일반 함수와 생성자 함수를 구분하기 위해 생성자 함수의 이름은 파스칼 케이스(PascalCase)를 사용하는 것이 일반적이다.

var person = new Object();
// 프로퍼티 추가
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function () {
  console.log('Hi! My name is ' + this.name);
};

console.log(typeof person); // object
console.log(person); // {name: "Lee", gender: "male", sayHello: ƒ}

person.sayHello(); // Hi! My name is Lee

객체 리터럴 방식으로 생성된 객체는 결국 빌트인(Built-in) 함수인 Object 생성자 함수로 객체를 생성하는 것을 단순화시킨 축약 표현(short-hand)이다.

3. 생성자 함수

객체 리터럴 방식과 Object 생성자 함수 방식으로 객체를 생성하는 것은 프로퍼티 값만 다른 여러 개의 객체를 생성할 때 불편하다. 동일한 프로퍼티를 갖는 객체임에도 불구하고 매번 같은 프로퍼티를 기술해야 한다.

var person1 = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

var person2 = {
  name: 'Kim',
  gender: 'female',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

생성자 함수를 사용하면 마치 객체를 생성하기 위한 템플릿(클래스)처럼 사용하여 프로퍼티가 동일한 객체 여러 개를 간편하게 생성할 수 있다.

// 생성자 함수
function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function(){
    console.log('Hi! My name is ' + this.name);
  };
}

// 인스턴스의 생성
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');

console.log('person1: ', typeof person1);
console.log('person2: ', typeof person2);
console.log('person1: ', person1);
console.log('person2: ', person2);

person1.sayHello();
person2.sayHello();

생성자 함수 이름은 일반적으로 대문자로 시작한다. 이것은 생성자 함수임을 인식하도록 도움을 준다.
프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.
this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.
생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)하다. 즉, 생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

객체 프로퍼티 접근

객체의 프로퍼티 값에 접근하는 방법은 마침표(.) 표기법과 대괄호([]) 표기법이 있다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male',
  1: 10
};

console.log(person);

console.log(person.first-name);    // NaN: undefined-undefined
console.log(person[first-name]);   // ReferenceError: first is not defined
console.log(person['first-name']); // 'Ung-mo'

console.log(person.gender);    // 'male'
console.log(person[gender]);   // ReferenceError: gender is not defined
console.log(person['gender']); // 'male'

console.log(person['1']); // 10
console.log(person[1]);   // 10 : person[1] -> person['1']
console.log(person.1);    // SyntaxError

프로퍼티 키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우 프로퍼티 값은 마침표 표기법, 대괄호 표기법 모두 사용할 수 있다. 대괄호([]) 표기법을 사용하는 경우, 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이어야 한다.

for-in 문

for-in 문을 사용하면 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male'
};

// prop에 객체의 프로퍼티 이름이 반환된다. 단, 순서는 보장되지 않는다.
for (var prop in person) {
  console.log(prop + ': ' + person[prop]);
}

/*
first-name: Ung-mo
last-name: Lee
gender: male
*/

var array = ['one', 'two'];

// index에 배열의 경우 인덱스가 반환된다
for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
*/

for-in 문은 객체의 문자열 키(key)를 순회하기 위한 문법이다. 배열에는 사용하지 않는 것이 좋다. 이유는 아래와 같다.

객체의 경우, 프로퍼티의 순서가 보장되지 않는다. 그 이유는 원래 객체의 프로퍼티에는 순서가 없기 때문이다. 배열은 순서를 보장하는 데이터 구조이지만 객체와 마찬가지로 순서를 보장하지 않는다.
배열 요소들만을 순회하지 않는다.

// 배열 요소들만을 순회하지 않는다.
var array = ['one', 'two'];
array.name = 'my array';

for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
name: my array
*/

이와 같은 for-in 문의 단점을 극복하기 위해 ES6에서 for-of 문이 추가되었다.

const array = [1, 2, 3];
array.name = 'my array';

for (const value of array) {
  console.log(value);
}

/*
1
2
3
*/

for (const [index, value] of array.entries()) {
  console.log(index, value);
}

/*
0 1
1 2
2 3
*/

for–in 문은 객체의 프로퍼티를 순회하기 위해 사용하고 for–of 문은 배열의 요소를 순회하기 위해 사용한다.

함수 (5.12 Function)

자바스크립트의 함수는 객체(일급 객체, First-class object)이다.

함수를 정의하는 방식은 3가지가 있다.

함수 선언문
함수 표현식
Function 생성자 함수

1. 함수 선언문

함수 선언문(Function declaration) 방식으로 정의한 함수는 function 키워드와 이하의 내용으로 구성된다.

함수명

함수 선언문의 경우, 함수명은 생략할 수 없다. 함수명은 함수 몸체에서 자신을 재귀적(recursive) 호출하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자이다.

매개변수 목록

0개 이상의 목록으로 괄호로 감싸고 콤마로 분리한다. 다른 언어와의 차이점은 매개변수의 타입을 기술하지 않는다는 것이다. 이 때문에 함수 몸체 내에서 매개변수의 타입 체크가 필요할 수 있다.

함수 몸체

함수가 호출되었을 때 실행되는 문들의 집합이다. 중괄호({ })로 문들을 감싸고 return 문으로 결과값을 반환할 수 있다. 이를 반환값(return value)라 한다.

// 함수 선언문
function square(number) {
  return number * number;
}

2. 함수 표현식

자바스크립트의 함수는 일급 객체이므로 아래와 같은 특징이 있다

무명의 리터럴로 표현이 가능하다.
변수나 자료 구조(객체, 배열…)에 저장할 수 있다.
함수의 파라미터로 전달할 수 있다.
반환값(return value)으로 사용할 수 있다.

함수의 일급객체 특성을 이용하여 함수 리터럴 방식으로 함수를 정의하고 변수에 할당할 수 있는데 이러한 방식을 함수 표현식(Function expression)이라 한다.

// 함수 표현식
var square = function(number) {
  return number * number;
};

함수 표현식 방식으로 정의한 함수는 함수명을 생략할 수 있다. 이러한 함수를 익명 함수(anonymous function)이라 한다. 함수 표현식에서는 함수명을 생략하는 것이 일반적이다.

// 기명 함수 표현식(named function expression)
var foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
var bar = function(a, b) {
  return a * b;
};

console.log(foo(10, 5)); // 50
console.log(multiply(10, 5)); // Uncaught ReferenceError: multiply is not defined

함수는 일급객체이기 때문에 변수에 할당할 수 있는데 이 변수는 함수명이 아니라 할당된 함수를 가리키는 참조값을 저장하게 된다. 함수 호출시 함수명이 아니라 함수를 가리키는 변수명을 사용하여야 한다.

var foo = function(a, b) {
  return a * b;
};

var bar = foo;

console.log(foo(10, 10)); // 100
console.log(bar(10, 10)); // 100

변수 bar와 변수 foo는 동일한 익명 함수의 참조값을 갖는다.

함수가 할당된 변수를 사용해 함수를 호출하지 않고 기명 함수의 함수명을 사용해 호출하게 되면 에러가 발생한다. 이는 함수 표현식에서 사용한 함수명은 외부 코드에서 접근 불가능하기 때문이다. (사실은 함수 선언문의 경우도 마찬가지이다.)

함수 표현식과 함수 선언문에서 사용한 함수명은 함수 몸체에서 자신을 재귀적 호출(Recursive function call)하거나 자바스크립트 디버거가 해당 함수를 구분할 수 있는 식별자의 역할을 한다.

함수 선언문으로 정의한 함수 square의 경우, 함수명으로 호출할 수 있었는데 이는 자바스크립트 엔진에 의해 아래와 같은 함수 표현식으로 형태가 변경되었기 때문이다.

var square = function square(number) {
  return number * number;
};

함수명과 함수 참조값을 가진 변수명이 일치하므로 함수명으로 호출되는 듯 보이지만 사실은 변수명으로 호출된 것이다.

결국 함수 선언문도 함수 표현식과 동일하게 함수 리터럴 방식으로 정의되는 것이다.

3. Function 생성자 함수

함수 선언문과 함수 표현식은 모두 함수 리터럴 방식으로 함수를 정의하는데 이것은 결국 내장 함수 Function 생성자 함수로 함수를 생성하는 것을 단순화시킨 short-hand(축약법)이다.

Function 생성자 함수는 Function.prototype.constructor 프로퍼티로 접근할 수 있다.

Function 생성자 함수로 함수를 생성하는 문법은 다음과 같다.

new Function(arg1, arg2, ... argN, functionBody)

var square = new Function('number', 'return number * number');
console.log(square(10)); // 100

Function 생성자 함수로 함수를 생성하는 방식은 일반적으로 사용하지 않는다.

함수 호이스팅

함수 선언문의 경우, 함수 선언의 위치와는 상관없이 코드 내 어느 곳에서든지 호출이 가능한데 이것을 함수 호이스팅(Function Hoisting)이라 한다.

자바스크립트는 ES6의 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅(Hoisting)한다.

함수 선언문으로 정의된 함수는 자바스크립트 엔진이 스크립트가 로딩되는 시점에 바로 초기화하고 이를 VO(variable object)에 저장한다. 즉, 함수 선언, 초기화, 할당이 한번에 이루어진다.

var res = square(5); // TypeError: square is not a function

var square = function(number) {
  return number * number;
}

함수 선언문의 경우와는 달리 TypeError가 발생하였다. 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

변수 호이스팅은 변수 생성 및 초기화와 할당이 분리되어 진행된다. 호이스팅된 변수는 undefined로 초기화 되고 실제값의 할당은 할당문에서 이루어진다.

함수 표현식은 함수 선언문과는 달리 스크립트 로딩 시점에 변수 객체(VO)에 함수를 할당하지 않고 runtime에 해석되고 실행되므로 이 두가지를 구분하는 것은 중요하다.

더글러스 크락포드(Douglas Crockford)는 이와 같은 문제 때문에 함수 표현식만을 사용할 것을 권고하고 있다

또한 함수 선언문으로 함수를 정의하면 사용하기에 쉽지만 대규모 애플리케이션을 개발하는 경우 인터프리터가 너무 많은 코드를 변수 객체(VO)에 저장하므로 애플리케이션의 응답속도는 현저히 떨어질 수 있으므로 주의해야 할 필요가 있다.

매개변수 (Parameter, 인자)

인수(argument)

반환값

함수는 자신을 호출한 코드에게 수행한 결과를 반환(return)할 수 있다. 이때 반환된 값을 반환값(return value)이라 한다.

return 키워드는 함수를 호출한 코드(caller)에게 값을 반환할 때 사용한다.
함수는 배열 등을 이용하여 한 번에 여러 개의 값을 리턴할 수 있다.
함수는 반환을 생략할 수 있다. 이때 함수는 암묵적으로 undefined를 반환한다.
자바스크립트 해석기는 return 키워드를 만나면 함수의 실행을 중단한 후, 함수를 호출한 코드로 되돌아간다. 만일 return 키워드 이후에 다른 구문이 존재하면 그 구문은 실행되지 않는다.

function calculateArea(width, height) {
  var area = width * height;
  return area; // 단일 값의 반환
}
console.log(calculateArea(3, 5)); // 15
console.log(calculateArea(8, 5)); // 40

function getSize(width, height, depth) {
  var area = width * height;
  var volume = width * height * depth;
  return [area, volume]; // 복수 값의 반환
}

console.log('area is ' + getSize(3, 2, 3)[0]);   // area is 6
console.log('volume is ' + getSize(3, 2, 3)[1]); // volume is 18

dataset 사용하기

3jun — Sun, 11 Oct 2020 22:42:08 +0900

dataset 을 사용하기에 앞서 HTML에 data attribute를 customize 해줘야한다.

<ul class="navbar__menu">
   <li class="navbar__menu__item active" data-link="#home">Home</li>
   <li class="navbar__menu__item " data-link="#about">About</li>
   <li class="navbar__menu__item" data-link="#skills">Skills</li>
   <li class="navbar__menu__item" data-link="#work">My Work</li>
   <li class="navbar__menu__item" data-link="#testimonials">Testmonials</li>
   <li class="navbar__menu__item" data-link="#contact">Contact</li>
</ul>

dataset attribute를 customize 하기 위해서는 data-(변수명) 으로 작성하고 value를 주면 된다.

그럼 dataset 에 -link라는 변수에 값들을 할당한 것이다.

const navbarMenu = document.querySelector(".navbar__menu");
navbarMenu.addEventListener("click", (event) => {
  console.log(event.target.dataset.link);
});

CSS basics

3jun — Fri, 2 Oct 2020 21:47:04 +0900

box-sizing : ( content-box (defualt) / border-box )

--subject-font: 32px;font-size: var(subject-font);

border-box 는 box size를 결정할 때 border까지 합한다. 즉, padding 과 border를 모두 포함한다. 기본값인 content-box는 컨텐츠만 지정한다.

position : ( static / absolute (default) / relative )

static은 기본값으로 아무런 효과 없다. relative 는 원래 있던 자리를 기준으로 이동한다. absolute 는 근접한 부모 중에 기본값인 static이 아닌 부모의 기준에서 움직인다. 중간에 position: relative 인 부모가 없으면 결국엔 body를 기준으로 위치가 결정된다.

position : ( sticky / fixed )

position 이 static / relative / sticky 이면 그 안에 들어 있는 박스 안 ㅇㅇㅇㅇㅇㅇㅇㅇ에서 변경이 일어나게 되고 position 이 absolute 이면 들어있는 근접한 부모 박스들 중에 static이 아닌 박스에 위치변경이 일어나고 fixed 의 경우에는 들어있는 박스와 상관없이 그냥 viewport 에서 포지션 변경이 일어난다.

sticky를 사용할 때는 top과 left 같은 포지션을 지정해줘야한다.

custom properties

CSS 역시 Javascript와 마찬가지로 특정 변수에 값을 부여하여 반복적으로 사용되는 코드를 간결하게 작성할 수 있다.

변수를 선언할 때는 "--[변수명]: [변수값];" 으로 선언하고 사용할 때는 "property : var(변수명); " 으로 작성하면 된다.

--subject-font: 32px;
// subject-font 라는 변수에 32px 이라는 값을 선언

font-size: var(--subject-font);
// font-size의 value값으로 --subject-font 변수에 저장된 값을 할당

이렇게 custom 된 property 들은 변수가 선언된 것의 모든 자식요소에 접근이 가능하다.

따라서 보통 가장 상위 컨테이너인 root 에 변수를 선언하여 모든 요소들이 접근할 수 있도록 한다.

:root {
	--subject-font: 32px;
    }

data attribute

HTML5 에서 추가된 기능으로 HTML 태그 자체에서 제공하는 속성들 뿐만 아니라 원하는 데이터를 DOM, 즉 HTML 요소에 추가할 수 있다.

<div data-index="1" data-display-name="coding"></div>
<div data-index="2" data-display-name="developing"></div>

// 임의로 div에 data-index, data-display-name 이라는 data attribute 를 선언하고 각각 특정 값을 부여

<style>

[data-display='coding'] {
	background-color:red;
}

</style>

두개의 div 중 data-display 값이 coding 인 첫번째 div의 background-color 만을 red로 변경하였다.

SCSS : variable, nesting, mixins, extends

3jun — Sun, 26 Jul 2020 19:45:16 +0900

SCSS : CSS Processer (전처리기)

CSS Processor 에는 scss 외에도 stylus, less 도 있다.

scss가 sass 를 위한 공식적인 syntax로 릴리즈 되면서 scss와 sass 가 점점 업계 표준으로 되어가고 있다.

scss는 css를 programming language 처럼 syntax를 개선하는데, 이를 사용하면 css 없는 많은 유용한 기능을 사용할 수 있다. 단, 이것을 위해 compile과 build 하는 과정이 필요하다.

gulp 는 compile 하거나 transform 해주는 nodeJS package

gulpfile.babel.js 에서 routes 상수를 확인하면 해당 gulpfile 이 styles.scss 라는 특정 파일을 보고 있음을 알 수 있다. src:"src/scss/styles.scss"

src 주소파일에서 일어나는 모든 일은 css로 compile 된다. scss 파일에 coding 하면 css 파일로 compile 되고 이 모든 과정은 terminal의 console 창에서 확인 가능하다.

Browser 은 scss 파일을 이해하지 못하므로 html 에서는 scss가 아닌 compile 된 css 파일을 link 해주어야 한다.

variable

website에서 가장 중요한 colors 혹은 가장 중요한 styles 등을 저장하고 싶을 때 사용한다.

scss에서 variable을 사용하는 방법은 scss 폴더ㅔ _variable.scss 파일을 생성하고 해당 파일에 코딩을 하면 된다.

scss 에서 언더스코어( _ ) 로 시작하는 파일은 css로 변하지 않았으면 하는 파일들 즉, css로 translate 되거나 compile 되기를 원치 않는 scss 만을 위한 파일이다.

ex) $[varialbe 이름]:[value]; ←이와 같은 방식으로 variable 을 지정하고, styles.scss 파일에 import 해서 사용하면 된다.

Nesting

nesting은 target 하는 element 를 더 명확하게 나타냄으로써 코드를 좀더 정확하게 해준다.

child element 들을 따로 적인 않고 parent 요소의 하위에 바로 작성하면 된다.

nesting 을 중복하는 것 역시 가능하다.

mixins

https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!

Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다.

heropy.blog

CSS : flex 와 Grid

3jun — Sun, 26 Jul 2020 01:33:09 +0900

Flex

flex 는 기기의 속성에 따라 디자인이 유동적으로 바뀌지 않는 CSS의 단점을 개선하기 위해 사용된다.

요소의 사이즈가 불명확하거나 동적으로 변화할때 유용하게 사용할 수 있다.

단, 부모가 flex-container 이어야만 자식 element 를 움직일 수 있다.

FlexBox layout 에서 content, items, self 의 차이

Grid

주요 properties

grid-auto-rows ( / [column])

grid-auto-flow : row(default) ( / [column])

- 내가 지정한 grid보다 더 많은 cell 들이 생성될 때, 추가 생성되는 cell 들을 어디로 생성할지 결정

minmax - element 크기 변화에 limit 을 준다. ( 최대값을 fr 혹은 auto로 할 때 )

auto-fill / auto-fit - repeat farction에만 사용한다. auto-fill 은 주어진 사이즈에 가장 많은 cell 들을 만들고, auto-fit은 만들어진 cell을 최대한 늘려서 공간을 채운다.

** grid-column-start / grid-column-end property 는 각 요소가 어디서 끝날 지를 지정함으로써 grid layout 을 만들 수 있는데 이때 각 value 값은 grid의 순서가 아닌 line의 순서로 결정된다.

*** 위 기능은 grid-column : [grid-column-start] / [grid-column-end] 로 간소화할 수 있다.

span 을 통해 grid의 cell 몇칸 차지할 지 지정할 수도 있는데, 이때는 반드시 시작점이 있어야 정상 작동한다.

ex) grid-column : 2 / span 2

2번째 line에서부터 2칸 차지한다.

** grid-template-areas property 를 사용하여 각 grid layout를 만들 수 있는데, 그 전에 하위 element 에 grid-area property 를 사용하여 각 grid cell 에 name을 지정해줘야 하고 이때 name 은 String 이면 안된다. ( 각 grid의 name value " " 로 감싸져 있으면 안된다.

참고자료

https://poiemaweb.com/css3-flexbox

CSS3 Flexbox Layout | PoiemaWeb

poiemaweb.com

https://webclub.tistory.com/628

모던 레이아웃 - 플렉스박스(Flexbox)

플렉스박스(Flexbox) 개요 불과 몇 해 전까지만해도 float , position 만으로도 어느 정도의 레이아웃 구현이 가능했습니다. 하지만 데스크탑 시대를 벗어나 모바일 시대에 접어들면서 보다 유연한 형�

webclub.tistory.com

https://heropy.blog/2019/08/17/css-grid/

CSS Grid 완벽 가이드

CSS Grid(그리드)는 2차원(행과 열)의 레이아웃 시스템을 제공합니다.Flexible Box도 훌륭하지만 비교적 단순한 1차원 레이아웃을 위하며, 좀 더 복잡한 레이아 ...

heropy.blog

css-tricks.com/

CSS-Tricks

CSS-Tricks is a website about websites.

css-tricks.com

JS. function에서의 console.log 와 return

3jun — Thu, 25 Jun 2020 15:57:13 +0900

function에서 console.log 와 return의 차이

5번째 줄 코드에서 greetNicolas 는 sayHello 함수의 리턴값이다.

다시 말해 greetNicolas는 sayHello의 실행된 결과값이다.

하지만 sayHello 함수는 아무것도 반환하지 않았다.

greetNicolas에 반환값을 주고 싶으면 아래와 같이 sayHello 함수에 return , 반환값을 부여하면 된다.

return 값을 주어 나만의 function 만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const calculator = {
    plus: function (a, b) {
        return a + b;
    },
    minus: function (a, b) {
        return a - b;
    },
    multi: function (a, b) {
        return a * b;
    },
    divide: function (a, b) {
        return a / b;
    },
    square: function (a, b) {
        return a ** b; 
    }
};
 
const square = calculator.square(2, 3);
console.log(square);
 

cs

생활코딩 - WEB1

3jun — Sun, 24 May 2020 19:12:31 +0900

HTML

WEB은 Internet 상에서 구현되는 일종의 서비스로 WEB 외에도 FTP, email 등의 다양한 서비스들이 존재한다.

서로 다른 두 컴퓨터가 있다.

한 컴퓨터에는 Web Browser가 설치되어 있고, 다른 한 컴퓨터에는 Web Server 가 설치되어있다.

생활코딩 WEB1

WebServer가 설치된 컴퓨터는 info.cern.ch라는 주소를 가지고 있고, 이 컴퓨터에는 하드디스크도 있다. 하드디스크의 어느 디렉토리 안에 index.html이라는 파일이 저장되어 있다.

Web Browser 가 설치된 컴퓨터에서 info.cern.ch/index.html 라는 주소를 호출하면 Internet을 통해 전기적 신호를 info/cern.ch 에 해당되는 컴퓨터에 보낸다. 그러면 Web Server라는 프로그램이 index.html 이라는 정보(코드)를 보내준다.

이러한 과정은 내 컴퓨터에 Web Server를 설치하여 직접 수행할 수 도 있고, 업체를 통해 Web Hosting 서비스를 이용할 수 도 있다.

WEB SERVER

웹서버 설치방법

웹서버 제품군에는 Apache, IIS, Nginx 등이 있다.

웹서버를 직접 컴퓨터에 설치하는 것을 어려운 일이다. 따라서 이를 보조해주는 다양한 프로그램이 존재한다.

아파치 공식홈페이지에는 ApacheHaus, Apache Lounge, Bitnami WAMP Stack 등이 있다.

Bitnami에서 내 운영체제에 맞는 최신파일을 다운로드 한다.

설치시에 설치 위치를 잘 기억해두자. ( 나중에 중요한 정보가 될 수 있다. )

Bitnami를 설치한 후에는 Go to Application을 클릭하면 정상 설치 되었는지 확인할 수 있다.

여기까지 완료했다면 Bitnami라는 프로그램을 사용하여 Aapache라는 웹서버를 컴퓨터에 설치한 것이다.

Bitnami를 통해 Aapache 웹서버를 Manage할 수 있다.

웹서버가 정상 작동한다면

http://127.0.0.1/index.html 주소를 입력해도 Go to Application 을 클릭했을 때와 동일한 창이 떠야한다.

그렇다면 index.html은 어디에 저장되어있을까?

Bitnami 설치위치를 확인해보면 apache 하위폴더에 htdocs (hyper text documents의 약자) 폴더가 있다.

htdocs 폴더에 보면 index.html 파일이 존재함을 확인할 수 있다. 이 파일을 편집해보면 과연 해당 파일이 index.html 파일과 동등한지 확인할 수 있다.

127.0.0.1 은 웹브라우저가 설치되어 있는 컴퓨터를 가리키는 특수한 주소이다.

(127.0.0.1 은 전세계에서 모든 컴퓨터가 자기자신을 가리키는거로 암묵적으로 규약되어있다.)

따라서 두 대의 컴퓨터라면 동일한 공유기에 접속하거나 하나의 컴퓨터 속에서 이루어져야한다.

Bitnami가 설치된 폴더의 htdocs 폴더에 그동안 작업했던 파일들을 옮기고 reload를 해보면 비트나미를 사용하여 설치된 웹서버에 작업한 파일을 배포할 수 있게 된다.

내 웹사이트에 기능을 추가하는 툴

1. 댓글기능 Disqus

2. 채팅기능 tawk

3. 웹사이트 방문자 분석기 google analytics

[eclipse] 이클립스 실행안될때

3jun — Tue, 5 Feb 2019 11:39:45 +0900

이클립스를 실행할 때 로고만 뜨고 workspace 화면이 실행되지 않고 이클립스가 종료 된다면,

최종 화면 상태를 저장하지 못했을 때 발생하는 문제이다.

이때 해결 방법은 workspace의 설정 파일을 삭제해줘야 한다.

..\workspace\.metadata\.plugins\org.eclipse.e4.workbench

위 파일을 삭제한 후 이클립스를 재실행하면 정상적으로 실행된다.

데이터 분석하기

3jun — Thu, 4 Oct 2018 16:17:10 +0900

나의 코드

또 다른 코드

배열 안에 있는 각 문자열을 모두 체크하기 위해, 배열의 length만큼 for문을 반복한다.

출생년도를 받아오기 위해 arr[i].sbustr ( 0, 4 ) 를 통해 앞 4글자를 가져온다. 이 값은 문자열이기 때문에 숫자 1998과 비교하기 위해 Number로 감싸주고, 비교한 결과가 1998보다 클 경우 로그를 찍어줌으로써 코드를 완성한다.

for (var i = 0; i < arr.length; i++){     if(Number(arr[i].substr(0, 4)) > 1998){         console.log(arr[i]);     } }

아이디 비밀번호 체크 ( 로그인 버튼 활성화,비활성화)

3jun — Thu, 4 Oct 2018 16:10:43 +0900

해설

우선 oninput으로 input 태그 안에 무언가 입력되면 checkInput 함수가 실행되도록 jquery를 작성해준다.

그리고 checkInput 함수 내부에는 변수 email, password 를 선언하고 그 값으로는 #email-input 태그와 #password-input 태그의 값을 넣어주도록 한다.

문자 개수 세기

3jun — Wed, 3 Oct 2018 23:12:57 +0900

나의 풀이

또 다른 풀이

// 주어진 단어(word)에 특정 알파벳(ch)이 몇 번 들어가는지 세어주는 함수 function countCharacter(word, ch) {     var count = 0;      for (var i = 0; i < word.length; i++) {         if (word[i].toUpperCase() === ch.toUpperCase()) {             count++;         }     }     return count; }

// 주어진 단어(word)에 특정 알파벳(ch)이 몇 번 들어가는지 세어주는 함수 function countCharacter(word, ch) {     var count = 0;      for (var i = 0; i < word.length; i++) {         if (word[i].toUpperCase() === ch.toUpperCase()) {             count++;         }     }     return count; }  // 단어 word에 알파벳 'A'가 몇 번 나오는지 세어주는 함수 function countA(word) {     return countCharacter(word, 'A'); }  // 테스트 코드 console.log(countCharacter('AbaCedEA', 'E')); console.log(countCharacter('AbaCedEA', 'X')); console.log(countA('AbaCedEA'));

Javascript Event - Codeit(Javascript로 배우는 '인터랙티브 웹')

3jun — Tue, 2 Oct 2018 16:00:14 +0900

Event (이벤트)

HTML 요소들에게 일어날 수 있는 일들

사용자가 요소를 클릭한다

마우스가 요소 위로 올라온다.

마우스가 요소 밖으로 나간다.

페이지 로딩이 끝난다.

사용자가 키보드를 누른다.

이런 이벤트가 일어났을 때 어떤 동작들이 일어나도록 할 수 있는데, 이런 동작을 가능하게 하는 것이 Event Handling 이다.

사용예시1

사용예시2

HTML 부분에는 Javascript 코드를 최대한 적게 넣어야 코드가 깔끔해보인다.

사용예시의 코드들을 아래처럼 작성하면 좀 더 깔끔해보인다.

jQuery vs 순수 자바스크립트

이벤트를 등록하는 jQuery 코드의 예시는 아래와 같다.

$('#home').on('click', clickHome);
$('#seoul').on('click', clickSeoul);
$('#tokyo').on('click', clickTokyo);
$('#paris').on('click', clickParis);

만약 위 코드를 순수 자바스크립트 (Vanilla Javascript)로 작성하면 아래와 같이 나타낼 수도 있다.

document.getElementById('home').addEventListener('click', clickHome);
document.getElementById('seoul').addEventListener('click', clickSeoul);
document.getElementById('tokyo').addEventListener('click', clickTokyo);
document.getElementById('paris').addEventListener('click', clickParis);

키보드 이벤트

jquery의 파라미터가 document 이면 페이지 전체를 의미한다.

즉, 위 코드는 해당 페이지에서 키보드를 누르면 processKeyEvent 함수를 실행한다.

key에는 어떤 키를 눌렀는지에 대한 정보가 들어가는데, 이를 활용하여 어떤 키를 누르냐에 따라 각기 다른 함수를 호출할 수 있다.

배열 만들기2 ( 2중배열 하나로 통합하기+내부배열 순서바꾸기 )

3jun — Tue, 2 Oct 2018 15:22:40 +0900

나의 풀이

배열만들기

3jun — Tue, 2 Oct 2018 14:21:46 +0900

나의 풀이

또 다른 풀이

먼저 두 가지로 나눠서 생각해보자.

start 보다 end가 클 경우, 그리고 start 보다 end가 작을경우

먼저, start보다 end가 클 경우, 즉 값이 점점 증가할 경우에는

var idx = 0; for (var i = start; i < end; i += step) {     arr[idx] = i;     idx++; }

이렇게 작성할 수 있고,

반대로 start보다 end가 작을 경우, 즉 값이 점점 감소할 경우에는

var idx = 0; for (var i = start; i > end; i += step) {     arr[idx] = i;     idx++; }

이렇게 작성하면 된다.

이 코드를 if문으로 합쳐서 완성하면 아래와 같다.

function range(start, end, step) {     var arr = [];     var idx = 0;      if (start < end) {         for (var i = start; i < end; i += step) {             arr[idx] = i;             idx++;         }     } else {         for (var i = start; i > end; i += step) {             arr[idx] = i;             idx++;         }     }     return arr; }  // 테스트 코드 console.log(range(1, 10, 1)); console.log(range(-1, 10, 3)); console.log(range(10, -10, -4));

[1, 2, 3, 4, 5, 6, 7, 8, 9] [-1, 2, 5, 8] [10, 6, 2, -2, -6]

팩토리얼

3jun — Mon, 1 Oct 2018 19:47:46 +0900

우선 결과값을 0!의 값인 1로 초기화해준다.

var result = 1;

n이 1 이상인 경우에는 반복문을 사용해서 팩토리얼 계산을 해준다.

if (n > 1) {     for (var i = 1; i <= n; i++) {         result = result * i;     } }

결과값

function factorial(n) {     var result = 1;      if (n > 1) {         for (var i = 1; i <= n; i++) {             result = result * i;         }     }     return result; }  // 테스트 코드 console.log(factorial(10)); console.log(factorial(5)); console.log(factorial(3)); console.log(factorial(0));

3628800 120 6 1

사실 if문이 없더라도 n이 0인 경우에는 for 문의 조건에 따라서 for 문 내부가 실행되지 않기 때문에 아래와 같이 더욱 간단하게 고칠 수도 있다.

function factorial(n) {     var result = 1;      for (var i = 1; i <= n; i++) {         result = result * i;     }     return result; }  // 테스트 코드 console.log(factorial(10)); console.log(factorial(5)); console.log(factorial(3)); console.log(factorial(0));

for 문/ while 문 의 차이 - Codeit(Javascript로 배우는 '인터랙티브 웹')

3jun — Mon, 1 Oct 2018 19:23:33 +0900

일반적으로 반복 횟수가 예측 가능할 때는 for 문을 사용하는 것이 가독성이 더 좋고, 반복 횟수를 예측할 수 없으면 while 문을 사용하는 것이 더 적합한 경우가 많다.

로그인 모듈

사용자에게 아이디와 비밀번호를 입력받아서 '로그인' 시키는 모듈을 아래 두 가지 방법으로 만들어보자.

1. 다섯 번의 기회만 주는 모듈

2. 성공할 때까지 기회를 무제한으로 주는 모듈

횟수제한 ( for문 )

// 로그인 성공 여부를 보관하는 변수
var login = false;

// 최대 다섯 번의 기회를 준다
for (var i = 0; i < 5; i++) {
  // 아이디와 비밀번호를 입력 받는다
  var id = window.prompt("아이디를 입력하세요");
  var password = window.prompt("비밀번호를 입력하세요");

  if (id === 'codeit' && password === '4321') {
    console.log('환영합니다. ' + id + '님.');
    login = true;
    break;
  } else {
    console.log('아이디와 비밀번호가 일치하지 않습니다.');
  }

무제한 ( while 문 )

// 로그인 성공 여부를 보관하는 변수
var login = false;

// 로그인에 성공할 때까지 반복
while (!login) {
  // 아이디와 비밀번호를 입력 받는다
  var id = window.prompt("아이디를 입력하세요");
  var password = window.prompt("비밀번호를 입력하세요");

  if (id === 'codeit' && password === '4321') {
    console.log('환영합니다. ' + id + '님.');
    login = true;
  } else {
    console.log('아이디와 비밀번호가 일치하지 않습니다.');
  }
}

이렇게 되면 login의 값이 false 인 동안, 즉 로그인이 완료되지 않은 동안 while 문은 계속 반복한다. 로그인이 성공할 때까지 계속 반복문에 머물러 있게되는 것이다.

break문 / continue문 - Codeit(Javascript로 배우는 '인터랙티브 웹')

3jun — Mon, 1 Oct 2018 19:19:02 +0900

break 문

만약 while 문의 조건부분과 상관없이 반복문에서 나오고 싶으면 break문을 쓰면 된다.

var i = 100;

while (true) {
    // i가 23의 배수면 반복문을 끝냄
    if (i % 23 == 0) {
        break;
    }
    i = i + 1;
}

console.log(i);

continue 문

만약 현재 진행되고 있는 수행부분을 중단시키고 바로 조건부분을 다시 확인하고 싶으면 continue 문을 쓰면 된다.

var i = 0;

while (i < 15) {
    i = i + 1;

    // i가 홀수면 console.log(i) 안하고 바로 조건부분으로 돌아감
    if (i % 2 == 1) {
        continue;
    }
    console.log(i);
}

2등 찾기 (두번째 큰값)

3jun — Mon, 1 Oct 2018 14:06:27 +0900

첫 번째 풀이

우선 1등과 2등에 해당하는 변수를 만들어 준다. 그리고 arr의 가장 첫번째 값을 초기값으로 지정해준다.

var first = arr[0]; var second = arr[0];

arr의 두 번째 숫자부터 마지막 숫자까지 반복을 해주되,

그 안에서 1등과 2등을 매번 업데이트한다.

arr[i]가 1등보다 크거나 같을 경우, 1등과 2등을 함께 업데이트 한다.

arr[i]가 1등보다는 작지만 2등보다 클 경우에는 2등만 업데이트 해준다.

for (var i = 1; i < arr.length; i++) {     if (arr[i] >= first) {         second = first;         first = arr[i];     } else if (arr[i] > second) {         second = arr[i];     } }

그리고 마지막에 2등 값을 리턴하면 코드가 완성된다.

function getSecondBiggestNumber(arr) {     var first = arr[0];     var second = arr[0];     for (var i = 1; i < arr.length; i++) {         if (arr[i] >= first) {             second = first;             first = arr[i];         } else if (arr[i] > second) {             second = arr[i];         }     }     return second; }  // 테스트 코드 console.log(getSecondBiggestNumber([4, 7, 2, 1, 9, 3, 6, 5])); console.log(getSecondBiggestNumber([80, 2, 44, 21, 92, 3, 51])); console.log(getSecondBiggestNumber([4, 7, 6, 5]));

두 번째 풀이

배열에서 가장 큰 값을 찾은 후에, 배열에서 해당값의 인덱스 값을 찾는다.

그리고 해당 인덱스의 값을 0으로 초기화 해준 뒤에 다시 배열의 최대값을 찾아 리턴한다.

삼각형 그리기 (별찍기)

3jun — Mon, 1 Oct 2018 13:58:29 +0900

우선 * 을 한 줄에 하나씩 출력한다.

function printTriangle(height) {     for (var i = 0; i < height; i = i + 1) {         console.log('*');     } }  // 테스트 코드 console.log('높이: 5'); printTriangle(5);  console.log('높이: 3'); printTriangle(3);  console.log('높이: 1'); printTriangle(1);

높이: 5 * * * * * 높이: 3 * * * 높이: 1 *

여기에서 *의 개수가 점점 많아지면 된다. 즉, for문이 반복될 때마다 text라는 변수에 *을 하나씩 추가하고 그 text를 출력하면 된다.

function printTriangle(height) {     text = '';     for (var i = 0; i < height; i = i + 1) {         text = text + '*';         console.log(text);     } }  // 테스트 코드 console.log('높이: 5'); printTriangle(5);  console.log('높이: 3'); printTriangle(3);  console.log('높이: 1'); printTriangle(1);

높이: 5 * ** *** **** ***** 높이: 3 * ** *** 높이: 1 *

Array / Date - Codeit

3jun — Sun, 30 Sep 2018 13:46:14 +0900

Array

배열의 길이

length 속성은 배열의 길이를 담고 있다.

var brands = ['Apple', 'Coca-Cola', 'Starbucks'];
console.log(brands.length);

배열에서 특정 값 찾기

문자열에서 썻던 indexOf가 배열에서도 똑같이 동작한다. array.indexOf(item) 을 하면 array 배열에 item이 포함되어 있는지 확인 할 수 있다.

만약 포함되어 있다면 item이 있는 인덱스가 리턴된다.

포함되어 있지 않다면 -1이 리턴된다.

여러번 포함되어 있으면 처음 발견된 인덱스가 리턴된다.

var brands = ['Apple', 'Coca-Cola', 'Starbucks'];
console.log(brands.indexOf('Starbucks'));
console.log(brands.indexOf('Kakao'));

2
-1

배열에 값 추가

array.push(item1) 을 하면 item1이 array 배열의 끝에 추가된다.

array.push(item1, item2, item3) 을 하면 item1, item2, item3이 array 배열의 끝에 순서대로 추가된다.

var brands = ['Apple', 'Coca-Cola', 'Starbucks'];

brands.push('Kakao');
console.log(brands);

brands.push('Samsung', 'LG', 'Facebook');
console.log(brands);

['Apple', 'Coca-Cola', 'Starbucks', 'Kakao']
['Apple', 'Coca-Cola', 'Starbucks', 'Kakao', 'Samsung', 'LG', 'Facebook']

배열에서 값 빼기

array.pop() 을 하면 배열 array에서 마지막 요소가 배열에서 빠지고, 그 마지막 요소가 리턴된다.

var brands = ['Apple', 'Coca-Cola', 'Starbucks'];

var lastBrand = brands.pop();

console.log(lastBrand);
console.log(brands);

Starbucks
['Apple', 'Coca-Cola']

배열을 문자열로 바꾸기

array.join() 을 하면 array 배열을 하나의 문자열로 변환한다.

var brands = ['Apple', 'Coca-Cola', 'Starbucks'];
console.log(brands.join());

Apple,Coca-Cola,Starbucks

만약 값들 사이에 들어가는 쉼표가 마음에 들지 않으면, 파라미터로 쉼표를 대체할 문자열을 넣어주면 된다.

var brands = ['Apple', 'Coca-Cola', 'Starbucks'];
console.log(brands.join('###'));

Apple###Coca-Cola###Starbucks

Date

날짜와 관련된 프로그램을 짜고 싶으면 Date 객체를 활용하면 된다.

객체 만들기

우선 객체를 만들어야 활용을 할 수 있는데, 객체를 만드는 데에는 2가지 방법이 있다.

1. 현재 날짜로 설정

파라미터 없이 new Date() 를 하면 현재 날짜로 설정되어 있는 Date 객체가 생성되어 리턴된다.

var date = new Date();

2. 원하는 날짜로 설정

파라미터를 써주면 원하는 날짜로 설정할 수 있다. 만약 날짜만 쓸 경우, 0시 0분 0초로 지정된다.

// 1988년 6월 11일 5시 25분 30초
var date1 = new Date('June 11, 1988 05:25:30');
var date2 = new Date('1988-06-11T05:25:30');

// 1999년 12월 15일 (날짜만)
var date3 = new Date('1999-12-15');
var date4 = new Date('12/15/1999');
var date5 = new Date('December 15 1999');
var date6 = new Date('Dec 15 1999');

날짜 정보 받아오기

이제 Date 객체의 메소드들을 활용하면 된다.

var date = new Date('June 11, 1988 05:25:30');

console.log(date.getFullYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMilliseconds());
console.log(date.toString());
console.log(date.toLocaleString());
console.log(date.toLocaleDateString());
console.log(date.toLocaleTimeString());

1988
5
11
6
5
25
30
0
Sat Jun 11 1988 05:25:30 GMT+1000 (KDT)
6/11/1988, 5:25:30 AM
6/11/1988
5:25:30 AM

getTime() 메서드는 1970년 1월 1일 자정으로부터 몇 ms가 지났는지 알려준다.

var date = new Date('June 11, 1988 05:25:30');
console.log(date.getTime());

581973930000

이 ms 값에 나눗셈을 적절히 사용하면 초, 분, 시, 일 등의 단위로 변환할 수 있다.

var date = new Date('June 11, 1988 05:25:30');
console.log(date.getTime() + 'ms');
console.log(date.getTime()/1000 + '초');
console.log(date.getTime()/1000/60 + '분');
console.log(date.getTime()/1000/60/60 + '시간');

581973930000ms
581973930초
9699565.5분
161659.425시간

주의사항

getMonth() 의 경우 0부터 시작하기 때문에 2는 3월을 의미한다.

또 getDay()는 날짜가 아니라 요일을 리턴해주고 일요일인 0부터 시작해서 3은 수요일을 의미한다.

Math / String - Codeit

3jun — Sun, 30 Sep 2018 13:28:24 +0900

Math

절대값 (Absolute Number)

console.log(Math.abs(-10));
console.log(Math.abs(10));

10
10

최댓값 (Maximum)

console.log(Math.max(2, -1, 4, 5, 0));

최솟값 (Minimum)

console.log(Math.min(2, -1, 4, 5, 0));

-1

거듭제곱 (Exponentiation)

console.log(Math.pow(2, 3));
console.log(Math.pow(5, 2));

8
25

제곱근 (Square Root)

console.log(Math.sqrt(25));
console.log(Math.sqrt(49));

5
7

반올림 (Round)

console.log(Math.round(2.3));
console.log(Math.round(2.4));
console.log(Math.round(2.49));
console.log(Math.round(2.5));
console.log(Math.round(2.6));

버림과 올림 (Floor and Ceil)

console.log(Math.floor(2.4));
console.log(Math.floor(2.49));
console.log(Math.floor(2.8));
console.log('-');
console.log(Math.ceil(2.4));
console.log(Math.ceil(2.49));
console.log(Math.ceil(2.8));

난수 (Random)

console.log(Math.random());
console.log(Math.random());
console.log(Math.random());
console.log(Math.random());

0.21458369059793236
0.6622040803059857
0.785172717569619
0.9056556038884926

String

문자열의 길이

length 속성은 문자열의 길이를 담고 있다.

var str = 'Codeit';
console.log(str.length);

특정 인덱스의 문자 받아오기

str.charAt(index) 를 하면 문자열 str의 index 에 있는 문자를 받아올 수 있다. str[index]와 유사하다.

var str = 'Codeit';
console.log(str.charAt(2));

문자열 안에서 다른 문자열 검색

str.indexOf(searchValue)를 하면 문자열 str 내에 문자열 searchValue가 포함되어 있는지 확인할 수 있다.

만약 문자열 내에 찾는 문자열이 포함되어 있으면 해당 문자열이 시작되는 인덱스가 리턴된다.

찾는 문자열이 포함되어 있지 않다면 -1 이 리턴된다.

여러 번 포함되어 있으면 처음 발견된 인덱스가 리턴된다.

var str = 'Hello World!';

console.log(str.indexOf('e'));
console.log(str.indexOf('z'));
console.log(str.indexOf('ello'));
console.log(str.indexOf('o'));

반대쪽에서 찾기

lastIndexOf 는 indexOf와 동일하지만, 검색을 문자열 끝에서부터 반대 방향으로 진행한다.

대소문자변환

대문자로 바꾸기

str.toUpperCase() 를 하면 str의 모든 글자가 대문자로 바뀌어 리턴된다.

var str = 'Codeit';
console.log(str.toUpperCase());

CODEIT

소문자로 바꾸기

str.toLowerCase() 를 하면 str의 모든 글자가 소문자로 바뀌어 리턴된다.

var str = 'Codeit';
console.log(str.toLowerCase());

codeit

문자열 자르기

시작 지점과 끝 지점으로 자르기

str.substring(indexStart, indexEnd) 를 하면 indexStart 부터 indexEnd 까지의 문자열을 잘라서 만든 새로운 문자열이 리턴된다. 만약 indexEnd 를 쓰지 않으면 indexStart 부터 끝까지의 문자열이 잘린다.

var str = 'Hello World!';

console.log(str.substring(2, 5));
console.log(str.substring(2));

llo
llo World!

시작 지점과 길이로 자르기

str.substr(start,length) 를 하면 start 부터 length 만큼의 문자열이 잘려서 리턴된다.

var str = 'Hello World!';

console.log(str.substr(2, 5));

llo W

앞뒤 공백 없애기

str.trim() 을 하면 문자열 str 앞뒤로 있는 공백을 모두 지운 문자열이 리턴된다.

var str = '        Hello World!      ';

console.log(str.trim());

Hello World!

자바스크립트 DOM / Event - Udemy(부트스트랩4와 함께하는~)

3jun — Sat, 22 Sep 2018 13:50:20 +0900

DOM (Document Object Model) : 자바스크립트로 웹 페이지를 제어하도록 해준다.

document.getElementsByTagName() : 태그 이름으로 요소 찾기

document.querySelector() : 선택자 이름으로 요소 찾기

document.getElementsByClassName() : 클래스 이름으로 요소 찾기

document.getElementsById() : ID 이름으로 요소 찾기

→ h1 태그를 가진 모든 요소들을 배열형태로 담은 다음 0번째 인덱스의 요소를 temp 변수에 넣는다.

Event

이벤트는 웹페이지에서 사용자가 행한 행위에 반응하는 것을 의미한다.

일반적으로 빠르게 이벤트를 적용할 때는 인라인(inline) 방식을 사용한다.

체계적으로 이벤트 처리를 구현하려면 addEventListener() 방식을 사용한다.

addEventListener() 방식

객체 지향 프로그래밍 기법에 특화된 체계적인 이벤트 처리 방식

jQuery

자바스크립트 기술을 쉽게 활용할 수 있도록 해주는 자바스크립트 라이브러리이다.

CDN을 사용해 jQuery를 즉시 웹 페이지로 불러올 수 있다.

CDN 생성 웹사이트 : https://code.jquery.com

jQuery 기본문법

$(선택자).행위()

ex)

$(this).hide() : 현재 선택된 요소를 숨긴다.

$("p").hide() : 모든 <p>태그 요소를 숨긴다.

$(".test").hide() : 모든 test 클래스 요소를 숨긴다.

$("#test").hide() : 모든 test ID 요소를 숨긴다.

웹문서 준비 이벤트 처리

$(document).ready() 함수를 이용해 웹문서가 준비됨과 동시에 특정 함수를 정의한다.

웹사이트에 접속한 사용자가 하는 모든 행위를 이벤트라고 한다.

click() 이벤트 처리 함수

특정한 요소를 한번 클릭했을 때의 이벤트 처리한다.

기본적으로 jquery에서 함수를 정의할 때는 document.ready 함수에 정의한다.

mouserenter() 이벤트 처리 함수

특정한 요소에 마우스 커서가 접근 했을 때의 이벤트를 처리한다.

mouserleave() 이벤트 처리 함수

특정한 요소에서 마우스 커서가 나갔을 때의 이벤트를 처리한다.

keypress() 이벤트 처리 함수

특정한 요소에서 키보드가 눌렸을 때의 이벤트를 처리한다.

일반적으로 비밀번호 입력을 체크할 때 사용한다.

jQouery 이펙트

자바스크립트를 이용해 만들어진 jQuery의 다양한 기술들을 의미한다.

hide/show : 특정 요소를 숨기거나 보여준다.

fade : 특정한 행위를 서서히 수행한다.

slide : 미끄러지는 듯한 효과를 수행한다.

animation : 애니메이션 효과를 수행한다.

callback : 특정 효과가 완전히 끝난 이후에 효과를 수행한다.

chaining : 연계 효과를 수행한다.

hide/show 를 자동으로 입히고 싶으면 toggle을 사용한다.

fade 이펙트

jquery slim 버전에는 포함되지 않는다.

밀리세컨드 단위로 서서히 toggle이 이루어질 수 있도록 시간을 설정할 수 있다.

fadeTo 함수

시간과 정도를 명시할 수 있는 구체적인 함수이다.

slide 이펙트

animation 이펙트

stop 이펙트

expand 버튼을 클릭하면 5초가 소요되는 이펙트를 실행하고 expand를 실행하는 도중에 stop 함수를 클릭하면 이펙트를 꺼버린다.

callback

특정한 효과가 끝난 이후에 새로운 효과를 수행한다.

hide라는 특정함수에 매개변수로써 또 다른 함수를 넣어주면 해당 함수가 끝난 이후에 추가된 함수가 실행된다.

chaining

한 번에 직관적으로 연속적인 이벤트를 수행하는 방법이다. callback보다 더 직관적인 방법이다.

아래 예시에서는 총 3개의 함수가 연속적으로 실행된다.

jQuery HTML

jQuery는 HTML 요소에 접근할 수 있는 다양한 기술을 제공한다.

→ 버튼을 클릭하면 p태그의 속성 중 style에 font-weight: bold; 값을 주겠다.

만약 alert($("p").attr("style")); 이라면 p태그의 style 속성의 값을 가져온다.

매개변수가 있고 없고의 차이는 데이터를 가져오느냐 쓰냐의 차이이다.

jQuery로 HTML 데이터 추가

jQuery에서 HTML 데이터 추가 함수는 다음과 같다.

append() : 특정한 요소 안에서 끝 부분에 내용을 삽입한다.

prepend() : 특정한 요소 안에서 앞부분에 내용을 삽입한다.

after() : 특정한 요소 이후에 내용을 삽입한다.

before() : 특정한 요소 이전에 내용을 삽입한다.

jQuery로 CSS 다루기

addClass는 사전에 만들어진 class를 어떠한 태그 아래에 적용하고자 할 때 사용한다.

이런식으로 직접적으로 css 속성을 줄 수 도 있다.

부트스트랩 Basics - Codeit (웹퍼블리싱)

3jun — Wed, 19 Sep 2018 19:17:00 +0900

부트스트랩 그리드 시스템

구성

컨테이너 (container)

행 (row)

열 (column)

기본규칙

행(<div class="row">)은 꼭 컨테이너(<div class="container">) 안에 넣어주세요.
열(<div class="col">)은 꼭 행(<div class="row">) 안에 넣어주세요. 오직 행만 열의 직속 자식이 될 수 있습니다.
콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭 열(<div class="col">) 안에 넣어주세요.

이 규칙들만 지켜도 예상치 못한 레이아웃이 나오지는 않을 것입니다!

기본사용법

부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각하시면 됩니다. 예를 들어서 한 줄을 정확히 3등분하고 싶으면 네 칸을 차지하는 열 세 개를 쓰면 되는 거죠. 네 칸을 사용하는 열은 <div class="col-4">입니다.

아래의 코드에서는 다양한 방식으로 12칸을 나누어 보았다.

<head>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head>  <body>   <div class="container">     <div class="row">       <!-- 정확히 3등분 -->       <div class="col-4 first">first</div>       <div class="col-4 second">second</div>       <div class="col-4 third">third</div>     </div>      <div class="row">       <!-- 정확히 2등분 -->       <div class="col-6 first">first</div>       <div class="col-6 second">second</div>     </div>      <div class="row">       <!-- 1대 5 비율 -->       <div class="col-2 first">first</div>       <div class="col-10 second">second</div>     </div>      <div class="row">       <!-- 1대 2대 1 비율 -->       <div class="col-3 first">first</div>       <div class="col-6 second">second</div>       <div class="col-3 third">third</div>     </div>   </div> </body>

12칸을 넘어가면?

만약 한 행에 12칸이 넘는 열이 들어간다면, 새로운 줄로 넘어가게 됩니다.

Why 12?

부트스트랩을 만든 분들은 왜 하필 12라는 숫자로 정했을까요?

12는 상당히 많은 숫자들(1, 2, 3, 4, 6, 12)로 나누어지기 때문에 굉장히 유연합니다!

예를 들어서 8칸으로 나누고 싶더라도 12라는 숫자의 유연함 덕분에 쉽게 할 수 있습니다. col-6를 두 개 쓰면 2등분 할 수 있고, 그 안에서 또 col-3로 4등분을 하면 8칸이 생기겠죠?

이런식으로 열을 또 여러 열로 나누는 것을 '중첩(nesting)'한다고 부릅니다. 중첩을 하기 위해서는 우선 열(<div class="col-6">) 안에 새로운 행(<div class="row">)을 쓰셔야 합니다. 예제를 통해 살펴보세요:

<head>   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> </head>  <body>   <div class="container">     <div class="row">       <div class="col-6">         <div class="row"> <!-- 중첩을 위한 새로운 행 -->           <div class="col-3 first">1</div>           <div class="col-3 second">2</div>           <div class="col-3 third">3</div>           <div class="col-3 fourth">4</div>         </div>       </div>        <div class="col-6">         <div class="row"> <!-- 중첩을 위한 새로운 행 -->           <div class="col-3 first">5</div>           <div class="col-3 second">6</div>           <div class="col-3 third">7</div>           <div class="col-3 fourth">8</div>         </div>       </div>     </div>   </div> </body>

부트스트랩에서 정해둔 반응형 웹디자인의 구간

Extra Small (< 576px): 모바일
Small (≥ 576px): 모바일
Medium (≥ 768px): 타블릿
Large (≥ 992px): 데스크탑
Extra Large (≥ 1200px): 와이드 데스크탑

Container

기본적으로 컨테이너는 가운데 정렬이 되어 있고, 그리드의 행들을 감싸주는 역할을 한다. (행들은 열들을 감싸주고 있다.)

컨테이너에는 2가지 종류가 있다.

<div class="container">: 구간별로 그리드에 고정된 width를 설정해줍니다.
<div class="container-fluid">: 그리드는 항상 width: 100%;입니다.

<div class="container">

만약 구간별로 그리드에 고정된 가로값을 설정해주고 싶으면 "container" 클래스를 사용하세요.

구간별로 그리드가 고정되어 있으면 레이아웃을 예상하기 용이하다.

<div class="container-fluid">

상황에 따라 그리드가 항상 100%의 가로 길이를 갖는 것이 좋을 때가 있습니다. 그럴 때는 "container-fluid" 클래스를 사용하면 됩니다.

열 (column)

반응형 구간별로 (총 12칸 중) 열이 차지하는 칸의 개수도 다르게 할 수 있습니다.

예시를 몇 가지 봅시다.

예시 1 (구간별로 모두 설정되어 있는 경우)

<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">

Extra Small (< 576px): 12칸을 모두 차지
Small (≥ 576px): 6칸 차지
Medium (≥ 768px): 4칸 차지
Large (≥ 992px): 3칸 차지
Extra Large (≥ 1200px): 2칸 차지

예시 2 (특정 구간만 설정되어 있는 경우)

아래와 같이 특정 구간에만 열 수가 설정되어 있는 경우도 있습니다. 그렇다면 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지합니다.

<div class="col-12 col-lg-3">

Extra Small (< 576px): 12칸을 모두 차지
Small (≥ 576px): 12칸을 모두 차지
Medium (≥ 768px): 12칸을 모두 차지
Large (≥ 992px): 3칸 차지
Extra Large (≥ 1200px): 3칸 차지

<div class="col-6">

Extra Small (< 576px): 6칸 차지
Small (≥ 576px): 6칸 차지
Medium (≥ 768px): 6칸 차지
Large (≥ 992px): 6칸 차지
Extra Large (≥ 1200px): 6칸 차지

주의사항

3jun — Tue, 11 Sep 2018 19:22:37 +0900

인라인 요소를(블록 요소로 바꾸지 않고) 가로 가운데 정렬 시키기 위해서는 부모 요소에게 text-align: center

vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용된다.

부모요소에 inline-block 속성에 세로 길이가 100%인 요소를 만들고 해당 요소를 vertical-align: middle을 하면 더 완전하게 세로 정렬을 가운데로 할 수 있다.

주의사항

어떤 요소에 height: 100%;를 설정하기 위해서는 부모의 height가 설정되어 있어야 합니다. 위 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능했던 것이다.

.info를 인라인 블록으로 설정해주면, line-height 속성을 활용해볼 수도 있습니다. 부모인 .container에 height와 동일한 line-height를 줘보세요.

line-height 속성은 자식들에게 상속되기 때문에 .info에는 line-height: normal;을 꼭 써주셔야 합니다!

display 속성의 값이 부모태그가 table이고, 자식 태그가 table-cell 이면 표와 같이 일렬로 적용된다.

화면이 클 때는 table, 작을 때는 block으로 반응형 처리를 수행할 수 있도록 할 수 있다.

CSS - Font

3jun — Tue, 11 Sep 2018 15:48:41 +0900

1. 기본적인 Font종류

Font는 크게 5종류로 나뉘며, 빨간색 글씨는 font의 종류 아래의 글씨들을 해당 font 종류에 해당하는 대표 font의 이름이다.

2. Font 설정

font 설정은 위 예시처럼 하면 된다. font-family: 키워드 뒤에 사용하고자 하는 font의 이름을 넣고, 해당 font가 정상적으로 적용되지 않을 때 적용할 2번째 font를 적고, 2번째 폰트마저 적용이 되지 않으면 사용할 font의 종류를 적어주면 된다.

font를 한가지만 적거나 font 종류만 적어도 해당 폰트가 정상적으로 적용가능한 환경이라면 폰트가 적용된다.

3. Font 파일 사용하기

fonts 폴더에 원하는 font파일을 다운로드 받은 후에

css 파일에서 @font-face 를 사용하여 다운로드 받은 font 파일을 import 해줘야한다.

css파일에서 두단계 올라간 후 fonts 파일의 otf 파일에 접근해야 하므로 url은 ../fonts/BMJUA_otf.otf 가 된다.

그리고 font-family: 를 사용하여 해당 font의 이름을 정하고, 위 예제에서 아래 p태그에 적용한 것처럼 정해준 font 이름을 font-family와 함께 사용하여 적용하면 된다.

CSS - Parcel

3jun — Mon, 3 Sep 2018 17:12:25 +0900

Parcel

Install Parcel

advanced 한 CSS 코드들을 old CSS 로 complie하기 위한 module

Ctrl+` 단축키를 이용하여 console 창을 띄운 후에

npm init -y

명령어를 입력하면 package.json 파일이 생성된다. 그럼 다시 console 창에

clear

명령어를 입력한다.

package.json 파일의 scripts 코드를 지우고 parcel를 설치하기 위해

npm install -g parcel -bundler

명령어를 입력한다.

parcel 설치가 완료되면 html 파일을 생성하고, 해당 html 파일에 css 파일을 연결시킨 후에,

package.json 파일에서 "main" ~ 코드부분을 제거하고, 아래 빨간 박스 내부의 코드를 입력한다.

그리고 npm run start 명령어를 입력한다. ( npm run + scripts 코드 내부의 주황색글씨 )

명령어가 실행되고 나면

Server running at http://localhost:1234

위와 같은 결과를 확인 할 수 있는데 이 주소로 들어가면 정상 작동하는 것을 확인할 수 있다.

그리고 추가적으로 파란색 박스의 폴더에 있는 불필요한 코드들의 실행을 막기 위해

.gitignore 파일에 아래와 같이 .cache 와 dist를 추가해주면 된다.

PostCSS

PostCSS는 다양한 플러그인을 제공해주어 우리의 CSS를 더 modern하게 만들어준다.

postcss-preset-env 플러그인을 사용하기 위해 빨간색 박스로 표시된 부분을 복사한 뒤, 새로운 terminal에서 console 창을 열고 해당 명령어를 입력한다.

명령어가 제대로 동작하고 나면 package-lock.json 파일이 생성되고 package.json 파일에 dependencies 가 추가되었음을 확인할 수 있다.

dependencies 아래에 postcss 라는 item을 추가하고 plugins 라는 property 에 원하는 플러그인들을 입력하면 된다. (여기서는 postcss-preset-env)

그리고 property가 지원할 stage를 설정해야한다. (stage는 3부터 0까지 있는데, 이 중 어떤 stage를 사용할지, 3는 이미 지원되고 0은 아직 support 되지 않기 때문에 아마 2나 1을 입력할 것이다. )

Stage 확인

제대로 적용되었는지 확인하기 위해서는

https://preset-env.cssdb.org/

에서 try it now 항목으로 접속한 후, 해당 stage의 css파일을 복사해서 우리의 css 파일에 붙여넣고 localhost로 html 파일에 접속한 다음 개발자모드를 들어간 후에 아래 open in web 을 클릭하면 css 파일을 적용되었는지 확인할 수 있다.

CSS - Position / box-sizing / background-repeat

3jun — Wed, 29 Aug 2018 11:14:41 +0900

position

position: static;

차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.

position: relative;

태그의 위치를 변경하고 싶을 때 사용하며 top, right, bottom, left 속성을 사용해 위치 조절이 가능하다.

각각의 태그가 기존 static 였을 때 위치를 기준으로 해당 속성 방향으로

주어진 픽셀만큼 이동한다.

position: absolute;

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면,

absoulte는 postition: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다.

만약 부모 중 position이 relative, absolute, fixed 인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.

position: fixed;

스크롤을 이동시켜도 항상 특정 위치에 고정되어 있다.

box-sizing

content-box

default 값.

CSS표준에 의해 정의된 기본 스타일이다. width와 height 속성은 오로지 콘텐츠만을 포함하여 측정되며, padding, border, margin을 포함하지 않는다.

padding-box

width와 height 속성은 padding 크기를 포함하지만, border과 margin은 포함하지 않는다.

border-box

width와 height 속성이 padding과 border를 포함하며 margin을 포함하지 않는다.

background-repeat

/* 반복하지 않음 */ background-repeat: no-repeat;  /* 가로 방향으로만 반복 */ background-repeat: repeat-x;  /* 세로 방향으로만 반복 */ background-repeat: repeat-y;  /* 가로와 세로 모두 반복 */ background-repeat: repeat;  /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space;  /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해 배분 */ background-repeat: round;

background-position

/* 단어로 지정해주기 (가로: left, center, right, 세로: top, center, bottom) */ /* 아래와 같은 총 9개의 조합이 가능 */ background-position: left top; background-position: left center; background-position: left bottom; background-position: right top; background-position: right center; background-position: right bottom; background-position: center top; background-position: center center; background-position: center bottom;  /* 퍼센트로 지정해주기 (가로: 전체 width의 25% 지점, 세로: 전체 height의 75% 지점 ) */ background-position: 25% 75%;  /* 픽셀로 지정하기 (가로: 가장 왼쪽 가장자리에서부터 오른쪽으로 100px 이동한 지점, 세로: 가장 상단 가장자리에서 아래로 200px 이동한 지점) */ background-position: 100px 200px;

JavaScript: 삼항연산자란?

3jun — Thu, 23 Aug 2018 12:17:16 +0900

JavaScript: What is the ternary operator

출처 : codeburst.io, Brandon Morelli

해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.

삼항연사자와 함께 쓰인 if문을 간결하게 하는 방법과 4가지 예시를 함께 배울 것이다.

전형적인 IF 문

우리가 사람들의 나이를 가지고 있고, 만약 그들이 운전을 할 수 있는 나이라면 true 값을 할당하고 그렇지 않으면 false를 할당하고자 한다. 그리고 운전을 하기 위해서는 16세 이상이어야 한다고 가정해보자. 이 시나리오에서 IF문은 아래와 같을 것이다.

let age = 20;
let driver;

if (age >= 16) {
  driver = true;
} else {
  driver = false;
}

그러나 위 코드와 완벽한 코드를 단 두줄로 작성할 수 있다면? IF문을 단 한줄로 작성할 수 있다면 어떨까?

let age = 20;
let driver = age >= 16 ? true : false;

driver = true; 의 같은 결과로 코드를 간결하게 만들었다. 이것이 정상적으로 작동할까?

삼항연산자

삼항연산자의 문법은 꽤나 간단한다.

// ternary operator
condition ? value if true : value if false

// typical if statement
if ( condition ) {
  value if true;
} else {
  value if false;
}

우리의 조건은 우리가 테스트하고자 하는 것을 의미한다. 여기에 ===, <=, >= 와 같은 조건문들이 들어간다.
?는 조건문과 true value를 나눈다. ?와 : 사이의 값은 조건문의 evaluate된 값이 true일 때 실행될 값을 의미한다.
마지막으로 : 은 콜론으로 조건문의 evaluate된 값이 false일 때 실행될 값을 의미한다.

다른 예제도 확인해보자.

이 예제에서 우리는 학생들을 위한 티켓할인이 있는 영화관을 위해 코드를 작성했다. 만약 학생이라면 티켓 값을 $8, 아니라면 $10이다.

let isStudent = true;
let price = isStudent ? '$8.00' : '$10.00'

console.log(price);
// '$8.00'

만약 영화관이 학생과 노인에게 할인을 제공한다면 어떻게 될까? 두가지 조건을 테스트하기 위해 삼항연산자를 중복하여 사용할 수 있다.

이 시나리오에서 기본적인 티켓의 가격은 $10이다. 학생가격은 $8이고, 노인 가격은 $6이 된다.

let isStudent = false;
let isSenior = true;

let price = isStudent ? '$8.00' : isSenior ? '$6.00' : '$10.00'

console.log(price);
// '$6.00'

위 예제코드에서는 물음표와 콜론이 많이 포함되어 있다. 이것들을 분석해보자.

먼저 우리는 isStudent를 테스트했다. ― 이 값이 false이기 때문에, : 다음의 코드가 실행된다 . : 다음에 우리는 새로운 조건문을 가지고 있다.
우리의 두번째 조건문 isSenior을 테스트한다. ― 이것인 true이기 때문에 ? 뒤, : 앞의 코드가 실행된다.
price에는 '$6.00'이 할당되고 화면에 출력되게 된다.

삼상연산자와 다중의 작업들

뿐만 아니라 콤마와 함께 연산자들을 나눈다는 가정하에 삼항연산자에 여러가지 작업들을 중복해서 실행할 수도 있다.

let isStudent = false;
let price = '$10.00';

isStudent ? (
  price = '$8.00',
  alert('Please check for student ID')
) : (
  alert('Enjoy the movie')
);

위 예시에서 영화의 price는 이미 $10로 할당되었다. 만약 isStudent가 true라면 우리는 가격을 $8로 낮출 것이다. 그리고나서 student ID를 체크하기 위한 alert 창을 띄울 것이다. 만약 isStudent가 false라면 우리는 'Enjoy the movie'를 alert할 것이다.

JavaScript: 숏서킷 평가가 뭐야?

3jun — Mon, 20 Aug 2018 15:44:03 +0900

JavaScript: What is short-circuit evaluation?

출처 : codeburst.io, Brandon Morelli

variable들을 쉽게 할당하기 위해 논리적인 OR( || )을 어떻게 사용할지 배우기.

3가지 논리적인 연산자들

자바스크립트에는 3가지 논리연산자들이 있다.

AND &&
OR ||
NOT !

오늘 우리는 OR || 에 대해 배워볼 것이다. 자바스크립트에서 OR 연산자는 모든 피연산자함수가 true일 때, true를 return한다.

true || true;
// true

true || false;
// true

false || false;
// false

자바스크립트에서 논리 연산자에는 두가지 중요한 특성들이 있는데 그 중 하나는 왼쪽에서부터 오른쪽 방향으로 evaluate 하는 것이다. 그것을 short-circuit 숏서킷 이라고 한다.

자바스크립트에서 OR 표현식을 평가한다는 것이 무엇을 의미할까? 만약 첫번째 피연산자 함수가 true이면 자바스크립트와 숏서킷은 두번째 피연산자 함수를 확인조차 하지 않는다. 아래 예제 코드에서 asterisks(****)는 어떤 value도 의미하지 않는다. ― 자바스크립트의 OR 연산자는 이것을 확인조차 하지 않을 것이기 때문에 전혀 문제되지 않는다.

true || ****
// true

그렇다면 이것이 왜 중요한 것인가?

아래 예제코드를 보면 우리는 person object를 가지고 있고, 객체 내부에 name과 age가 있다. 우리가 person 객체가 가지고 있는 job 을 console.log 하고자 할 때, 문제는 우리는 person 객체에 job 이라는 key 값이 존재하는지 여부를 알 지 못한다는 것이다. 이때 우리는 || 와 숏서킷 평가를 사용하여 이 문제를 해결할 수 있다.

var person = {
  name: 'Jack',
  age: 34
}

console.log(person.job || 'unemployed');
// 'unemployed'

우리가 console.log 한 것은 person.job의 value OR 'unemployed' 기본 문자열이다. person.job이 존재하지 않으면 우리는 undefined 를 return 받을 것이다. undefined는 거짓 값이다. 자바스크립트에서는 || 의 다른 부분에 있는 value 값이 무엇이든 그곳에 있는 값을 return 받을 것이다.

예시를 좀더 확실히 하기 위해 우리는 person 객체에 job이라는 key 값을 있을 때는 어떻게 동작하는지 확인해 볼 것이다.

var person = {
  name: 'Jack',
  age: 34,
  job: 'teacher'
}

이번에는 person.job이 존재한다. 그러므로 방정식 숏서킷과 person.job의 value ('teacher')이 console에 찍힐 것이다.

또 다른 예제

여기 stack overflow에서 유명한 코드가 있다.

var a;
var b = null;
var c = undefined;
var d = 4;
var e = 'five';

var f = a || b || c || d || e;

console.log(f);

위 코드 예제를 보고 무엇인 console에 출력될 지 생각해보자. 그리고 아래 답변을 확인해보자.

답안

정답은 4다.

var a; // undefined (falsy value)
var b = null; // null (falsy value)
var c = undefined; undefined (falsy value)
var d = 4; // number (NOT falsy)
var e = 'five'; // assigment short circuits before reaching here

var f = a || b || c || d || e;

a,b,c 는 모두 거짓인 값들이 할당되었다. OR 논리식에서 거짓값을 만나면 이것은 계속해서 평가를 계속한다. 그리고 d 변수에 다다르면 4라는 값을 출력하고 숏서킷 등식에 의해 4는 variable f에 저장된다.

Javascript & spread 연산자

3jun — Tue, 14 Aug 2018 23:53:31 +0900

Javascript & The spread operator

출처 : codeburst.io, Brandon Morelli

이게 무엇처럼 보이나? 점 세개 : . . .

이것은 무엇일까? spread 연산자는 여러개의 elements / variables / arguments가 예상되는 곳에서 표현식을 확장시켜준다.

몇가지 예시를 통해 spread 연산자가 정확히 무엇인지 알아보자.

middle 이라는 배열을 만든다.
middle 배열을 포함하는 두번째 배열을 만든다.
결과값을 기록한다.

var middle = [3, 4];
var arr = [1, 2, middle, 5, 6];

console.log(arr);
// [1, 2, [3, 4], 5, 6]

위 예시에서 우리는 spread 연산자를 사용하지 않았다. 이렇게 함으로써 arr 배열이 만들어질 때 middle 배열은 배열의 내부 배열로 arr 배열에 삽입되었다.

그러나 만약 우리가 하나의 배열만을 만들고자 한다면 어떨까?

이때, spread 연산자를 사용할 수 있다. spread 연산자는 배열의 elements들이 확장될 수 있도록 한다. 아래 코드를 보자. spread 연산자를 사용했다는 것을 제외하면 위 예제코드와 동일한 코드이다.

var middle = [3, 4];
var arr = [1, 2, ...middle, 5, 6];

console.log(arr);
// [1, 2, 3, 4, 5, 6]

여기서 우리는 arr 배열을 만들고 여기에 그냥 middle 배열을 넣지않고 spread 연산자를 사용하여 middle 배열을 expands 했다. middle 배열의 각 요소들은 arr 배열에 들어가게 되었다. 이것은 배열을 중첩시키는 대신 1부터 6까지의 숫자를 단순히 배열의 요소로 만들었음을 의미한다.

Slice

자바스크립트에서 slice()는 배열들을 복사할 수 있도록 한다. spread 연산자를 사용하여 배열을 복사하는 것과 비슷한 효과가 있다.

var arr = ['a', 'b', 'c'];
var arr2 = [...arr];

console.log(arr2);
// ['a', 'b', 'c']

우리는 배열을 복사했다. arr 배열의 value들은 개별 문자들로 expanded 된 다음 arr2에 할당 되었다. 우리는 이제 arr 배열에 영향을 주지 않고 arr2 배열을 변경할 수 있다 .

이것이 가능한 이유는 arr의 value가 arr2 배열을 정의하는 괄호를 채우도록 expand 되었기 때문이다. 그러므로 우리는 arr2를 arr 배열 그 자체가 아닌 arr의 value들과 같게 만들었다.

spread 연산자를 사용하지 않으면 어떻게 동작하는지 확인하면 이것을 이해하는데 도움이 될 것이다.

아래 코드는 만약 우리가 단순히 배열을 만들고 다들 배열을 새로 만든 배열과 같게 만들었을 때이다.

var arr = ['a', 'b', 'c'];
var arr2 = arr;

console.log(arr2);
// ['a', 'b', 'c']

이 예제를 보면 아마 이전에 위에서 봤던 예제코드와 동일하다고 말할 수 있을 것이다.

위 예제들은 똑같아 보이지만 그 내부를 살펴보면 아주 다르다는 것을 알 수 있다.

arr2.push('d');

console.log(arr2);
// ['a', 'b', 'c', 'd']

console.log(arr);
// ['a', 'b', 'c', 'd']

여기서는 우리가 arr2에 어떤 작업을 실행하면 arr 배열에도 동일하게 적용되는 것을 알 수 있다.

즉, arr2 배열이 본래의 arr 배열에도 영향을 미친다는 것을 의미한다.

우리는 본래의 arr 배열에 어떤 값도 추가하지 않았지만 새로운 value d가 arr 배열의 끝에 추가되었음을 알 수 있다.

Concat

배열들을 결합시키기 위해 concat()을 사용하는 대신 우리는 spread 연산자를 사용할 수 있다. 우선 concat()을 사용하면 어떤 일이 일어나는지 확인해보자.

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr1 = arr.concat(arr2);
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

이제 spread 연산자를 사용해보자.

var arr = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

arr = [...arr, ...arr2];
console.log(arr);
// ['a', 'b', 'c', 'd', 'e', 'f']

완전히 똑같은 결과값이 나오게 된다. 각 배열은 새로운 arr 배열에 배열 값들을 주기 위해 expand 되었다.

Mitch Faatz 는 이것이 가장 좋은 예시는 아니라고 지적했다. 그는 test를 통해 spread 연산자를 사용하면 concat을 사용할 때보다 작업속도가 3배만큼 느려지는 것을 확인했다. 큰 규모의 data set에서는 spread 연산자를 사용하는 것이 좋지 않다.

Math

우리는 math 함수 또한 spread 연산자와 함께 사용할 수 있다. 예시에서 우리는 Math.max()를 사용할 것이다.

Math.max()는 0과 다른 숫자들 가운데 가장 큰 값을 출력해준다.

Math.max();
// -Infinity

Math.max(1, 2, 3);
// 3

Math.max(100, 3, 4);
// 100

spread 연산자 없이 math.max()를 사용하는 가장 쉬운 방법은 배열에서 .apply()를 사용하는 것이다.

var arr = [2, 4, 8, 6, 0];

function max(arr) {
  return Math.max.apply(null, arr);
}

console.log(max(arr));
// 8

그럼 이제 spread 연산자를 함께 사용하여 동일한 기능을 하는 코드를 작성해보자. Math.max()의 값을 출력하기 위해 함수를 만들고 apply method를 활용하는 대신 우리는 우직 두 줄의 코드를 사용할 것이다.

var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);

console.log(max);
// 8

String to Array

보너스 예제 : spread 연산자를 사용하여 string을 배열의 character로 손쉽게 변환하기

var str = "hello";
var chars = [...str];

console.log(chars); 
// ['h', 'e',' l',' l', 'o']

Spread 연산자는 str string의 각 character들을 새로운 chars 배열에 할당한다.

Javascript: 초보자를 위한 템플릿 리터럴 & 태그 기능

3jun — Thu, 9 Aug 2018 13:02:16 +0900

JavaScript: Template Literals & Tag Functions for Beginners

출처 : codeburst.io, Brandon Morelli

대부분의 사람들이 그러는 것처럼 나는 click-bait title들을 싫어한다. 하지만 진지하게 "당신 코드의 가독성을 즉시 높여줄 간단한 한가지 트릭"이라는 제목을 사용하겠다.

Back-tick은 당신의 친구입니다.

템플릿 리터럴은 작은 따옴표( ' )나 따옴표( " ) 대신 back-tick( ` )을 사용한다.

console.log(`Hello World`);
// "Hello World"

이것은 좋지 못한 예제이다. 이제 변수에 $ { } 를 추가해보자.

var name = 'World';
console.log(`Hello ${name}`);

// "Hello World"

좀 더 나아졌다.

"Template Literal"이 정확이 무엇인가? template은 "preset format" 즉, 미리 만들어진 형식이다. 그리고 literal은 "value written exactly as it's meant to be interpreted" 즉, 번역된 것이라고 여겨지는 value이다. 자바스크립트 형식에서 템플릿 리터럴은 내장된 표현들을 사용하도록 하거나 가독성을 증가시킬 때 string들은 연결시키는 방법 중 하나이다.

가독성 & 깨끗한 코드

우리가 어떤 사람의 이름이나 별명을 출력하기를 원한다고 가정해보자. 템플릿 리터럴을 사용하는 것은 좀 더 적은 코드뿐 아니라 더 높은 가독성을 의미한다.

var p = {
  name: 'Jackson',
  nn: 'Jak',
};

// STRING CONCATENATION
console.log('Hi, I\'m ' + p.name + '! Call me "' + p.nn + '".');

// TEMPLATE LITERALS
console.log(`Hi, I'm ${p.name}! Call me "${p.nn}".`);

// "Hi, I'm Jackson! Call me 'Jak'."

이 예제에는 눈에띄는 2가지 연속되는 string들이 있다. apostrophe 대신 back-slash를 사용하고, string끝에 따옴표나 쌍따옴표가 어떤 역할을 하는지 알아보자. 이것들은 template literal로 축약할 수 있고 우리는 더 깔끔한 코드를 짤 수 있다.

줄바꿈은 template literal와 다른 위치에 넣는다.

// STRING CONCATENATION
console.log("Dear Mom,\n" + 
"Hope you are well.\n" + 
"\tLove, your son")

// TEMPLATE LITERALS
console.log(`Dear Mom,
Hope you are well.
    Love, your son`);

// Dear Mom,
// Hope you are well.
//     Love, your son

template literal을 사용하면 새로운 줄의 문자나, tabs, spaces 등은 string의 일부가 된다. 이것은 어떤 면에서는 축복이 될 수도 저주가 될 수도 있지만 가독성 측면에서는 분명이 플러스 요인이다.

가독성의 예시를 한가지 더 보자. sting에 표현식을 추가해보자.

// STRING CONCATENATION
console.log('Three plus six is ' + (3 + 6) + '.');

// TEMPLATE LITERALS
console.log(`Three plus six is ${3 + 6}.`);

// "Three plus six is 9."

Tagged Templates

tagged template는 template literal의 또 다른 사용 예시이다. tagged template는 arguments를 가져오는 template literal을 사용하는 함수호출이다.

// TYPICAL FUNCTION
function greet(){};

// TAG FUNCTION
greet`I'm ${name}. I'm ${age} years old.`

위에서 볼 수 있듯이 태그 함수는 단순히 template literal이 뒤에 오는 함수명이다.

그러나 태그 함수는 완전한 syntactic sugar ( 기능적으로나 표현적으로는 차이가 없지만 사용자가 읽고 쓰기 편한 형태)이다.

위 태그 함수는 아래와 같다.

// TAG FUNCTION
greet`I'm ${name}. I'm ${age} years old.`

// EQUIVALENT FUNCTION
greet(["I'm ", ". I'm ", " years old."], name, age)

위 예시에서 볼 수 있듯이 태그 함수는 template literal을 함수의 argument로 만드는 가장 쉬운 방법이다. 태그함수는 template literal을 argument의 배열로 나눈다. 첫번째 argument는 string value의 배열이 될 것이다. 추가적인 arguments들은 그들이 사용되는 순서에 따라 차례로 변수가 될 것이다.

아래 코드는 이것에 대한 아주 좋은 예시이다.

var name = 'Brandon';
var age = 26;
 
function greet(){
  console.log(arguments[0]);
  // ["I'm ", ". I'm ", " years old."]
 
  console.log(arguments[1]);
  // Brandon
 
  console.log(arguments[2]);
  // 26
}

greet`I'm ${name}. I'm ${age} years old.`;

위에서 태그 함수는 template literal을 사용하고 나누었다. 그러나 위 예제는 가장 유용한 예제는 아니다. 아래 예제를 확인해보자.

var name = 'Brandon';
var age = 26;

function greet(arr, nameArg, ageArg) {
  console.log(arr[0] + nameArg + arr[1] + ageArg + arr[2]);
}

greet`Woah, ${name} is ${age}?`;
// "Woah, Brandon is 26?"

우리가 great 함수를 호출 했을 때 우리는 template literal을 유일한 argument로 만들었고, 태그함수는 template literal을 세개의 arguments로 나누었다. 첫번째 argument는 plain text의 배열이다. 남은 argument들은 그것들이 나타난 순서대로 template literal 표현식들이다. 그리고 우리는 원하는 thread를 만들기 위해 모든 argument들에 접근하고 나열할 수 있게 된다. 이 예제에서 우리는 배열의 중간에 arguments들을 끼워 넣고 우리가 원할때 text들을 호출할 수 있다.

Javascript: 초보자를 위한 정규식(Regular Expressions) 배우기

3jun — Tue, 7 Aug 2018 16:24:59 +0900

JavaScript: Learn Regular Expressions for Beginners

출처 : codeburst.io, Brandon Morelli

자바스크립트에서 정규표현식은 문자열에서 문자조합과 대응시키기 위해 사용되는 객체이다.

첫번째 정규표현식 만들기

정규표현식을 만드는 방법에는 2가지가 있다.

하나는 정규표현식 리터럴 방식이고 하나는 정규표현식 생성자 함수를 사용하는 것이다.

// Regular Expression Literal - Uses slashes ( / ) to enclose
var option1 = /cat/;

// Regular Expression Constructor
var option2 = new RegExp("cat");

일반적으로 추후에 정규표현식을 수정하지 않는다면 regex literal 방식을 사용하는 것이 좋고, 정규표현식을 추후에 수정하려고 하거나, 다른 변수와 함께 사용하려면 생성자 method를 사용하는 것이 낫다.

RegExp.prototype.test()

위에서 이미 정규표현식이 객체라고 언급을 했다. 이것은 우리가 사용할 수 있는 method들이 존재함을 뜻한다.

가장 기본적인 method는 test이다. 이것은 Boolean을 return한다.

True : 문자열이 regex 패턴에 포함된다.

False : 일치하는 부분이 없다.

console.log(/cat/.test(“the cat says meow”));
// true

console.log(/cat/.test(“the dog says bark”));
// false

기본적인 Regex들

정규표현식은 이해하는데 가장 좋은 방법은 일반적인 명령어들과 기호들을 기억하는 것이다.

Symbols

. 임의의 글자 한개를 의미한다. line break는 제외한다.

* 앞의 표현이 0개 이상이다.

+ 앞의 표현이 1개 이상이다.

? 앞에 온 표현이 선택적이다.( 있을수도 없을수도 있다. )

^ 시작하는 글자와 일치한다.

$ 마지막 글자와 일치한다.

Character groups

\d 숫자와 같다.

\w 모든 문자와 같다. (밑줄문자를 포함한 알파벳로마자)

[XYZ] 문자셋으로 괄호안의 어떤 문자와도 대응된다. [A-Z]처럼 범위를 지정해줄 수도 있다.

[XYZ]+ 세트안에 있는 하나 혹은 그 이상의 어떤 글자와도 대응된다.

[^A-Z] 하나의 문자세트 안에서 ^는 부정의 의미이다. 여기서는 어떤 대문자와도 대응되지 않는다.

Flag

다섯개의 선택가능한 flag들이 있다. 그것들은 개별적으로 사용될수도 함께 사용될 수도 있고 closing slash 뒤에 위치할 수도 있다.

예시 : / [A-Z] / g

g ― Global search

i ― case insensitive search

Advanced

(x) ― Capturing Parenthesis (포획괄호), x에 대응되고 기억되어 나중에 사용될 수 있게 한다.

(?:x) ― Non-capturing Parenthesis (비포획 괄호), x에 대응하지만 기억하지는 않는다.

x(?=y) ― Lookahead, y가 뒤따라오는 x에만 대응된다.

Test()-ing our Learning

어떤 숫자를 위한 문자열을 테스트해보자. 우리는 \d 를 사용하여 이것을 실행할 수 있다.

console.log(/\d/.test('12-34'));
// true

String 안에 적어도 하나의 숫자가 있다면 위 코드의 return 값은 true이다.

만약 우리가 형식에 맞추고자 한다면 어떨까? 우리는 \d를 중복해서 사용하여 형식을 정할 수 있다.

console.log(/\d\d-\d\d/.test('12-34'));
// true

console.log(/\d\d-\d\d/.test('1234'));
// false

만약 '-'의 앞이나 뒤에 숫자들이 몇개나 오던지 상관없다면 어떨까? (단, 적어도 하나는 있어야한다.) 우리는 +를 사용하여 \d를 한개의 숫자 혹은 그 이상과 대응할 수 있다.

console.log(/\d+-\d+/.test('12-34'));
// true

console.log(/\d+-\d+/.test('1-234'));
// true

console.log(/\d+-\d+/.test('-34'));
// false

좀 더 단순하게는 괄호를 사용하여 그룹화를 할 수 도 있다.

console.log(/me+(ow)+w/.test('meeeeowowoww'));
// true

위 코드가 어떻게 동작되었는지 좀 더 자세히 살펴보면 아래와 같다.

/me+(ow)+w/

m     => matching a single letter 'm'
e+    => matching the letter 'e' one or more times
(ow)+ => matching the letters 'ow' one or more times
w     => matching the letter 'w' once

'm' + 'eeee' +'owowow' + 'w'

여기서 볼 수 있듯이 괄호 바로 뒤에 +와 같은 연산자들을 사용할 수 있다. 그것들은 괄호 안의 요소 전체에 영향을 준다.

다음으로 넘어가기에 앞서 ? 연산자도 한번 살펴 보자. 이것은 이전의 글자를 선택적으로 만든다. 아래 예제코드에서 볼 수 있듯이 두 test case에서 's'는 선택적인 요소로 간주되었기 때문에 모두 true를 return한다.

console.log(/cats? says?/i.test('the Cat says meow'));
// true

console.log(/cats? says?/i.test('the Cats say meow'));
// true

또한 /i flag도 추가해주었기 때문에 'cats'와 'Cats'가 대응될 수 있게 되었다.

Considerations & Tips

정규표현식은 /로 감싸져있기 때문에 slash를 찾고자 한다면 backslash를 사용해야한다. 또한 ?와 같이 특별한 의미를 가진 기호들도 마찬가지 이다.

var slashSearch = /\//;
var questionSearch = /\?/;

\d 는 [0-9]와 같다. : 각각 숫자와 대응한다.

\w 는 [A-Za-z0-9_]와 같다. : 각각 알파벳,로마자와 밑줄에 대응하낟.

Project: CamelCase에 띄어쓰기 추가하기

이 예시에서는 camelCase에 대해 좀 더 이해하고 단어 사이에 띄어쓰기를 추가하는 방법을 배울 것이다.

removeCc('camelCase') // => should return 'camel Case'

정규표현식을 사용하면 매우 간단하게 해결할 수 있다. 우선 우리는 모든 대문자를 찾아야한다.

우리는 문자셋 찾기와 전역적인 변환을 통해 손쉽게 이것을 실행할 수 있다.

This will match the C in 'camelCase'
/[A-Z]/g

그럼 이제 C앞에 어떻게 띄어쓰기를 추가할 수 있을까?

우리는 Capturing Parenthesis를 사용해야한다. Capturing Parenthesis는 값에 대응하고 이것을 기억할 수 있게 하여 나중에 이것을 사용할 수 있게 해준다.

Use capturing parenthesis to remember our matched capital letter
/([A-Z])/

Access the captured value later with
$1

위에서 captured value에 접근하기 위해 $1을 사용한 것을 확인할 수 있다. 만약 우리가 두개의 capturing parenthesis를 가지고 있다면 우리는 capture value를 참조하기 위해 $1과 $2를 사용해야한다. 즉, capturing parenthesis 만큼 사용해야한다.

만약 괄호를 사용해야하지만 value를 capture하지 않으려면 반드시 non-capturing parenthesis를 사용해야한다. : (?:x) , 이것은 즉 x와 대응되지만 기억하지 않는다는 것이다.

다시 본론으로 돌아가서 우리는 capturing parenthesis를 어떻게 실행할 수 있을까? .replace() 문자열 method를 사용한다. 두번째로 언급했듯이 $1을 추가하고 여기에 따옴표를 사용하는 것이 중요하다.

function removeCc(str){
  return str.replace(/([A-Z])/g, '$1');  
}

위 코드가 정상적으로 동작할가? 아래 코드를 다시 한번 보도록 하자. 우리는 대문자를 capturing 한 다음 이것을 단순히 capture된 동일한 문자로 바꿔주었다. 아직 띄어쓰기를 추가해줄 필요가 있다. 따옴표 안에 $1 변수 바로 앞에 띄어쓰기를 삽입하면 결과값은 모든 대문자 앞에 띄어쓰기를 추가하여 나타날 것이다.

function removeCc(str){
  return str.replace(/([A-Z])/g, ' $1');  
}

removeCc('camelCase') // 'camel Case'
removeCc('helloWorldItIsMe') // 'hello World It Is Me

Project: Remove Capital Letters 대문자 지우기

이것 또한 띄어쓰기를 추가하는 것과 매우 비슷하지만 조금 더 복잡하다.

먼저, 우리는 모든 대문자들을 선택해야한다. 이것은 위 project와 유사하다. global modifier로 문자셋을 찾는다.

/[A-Z]/g

그리고 replace method를 또 사용할 것이다. 그러나 이번에는 어떻게 문자를 소문자로 만들까?

function lowerCase(str){
  return str.replace(/[A-Z]/g, ???);  
}

힌트 : replace()를 사용하여 두번째 parameter로 함수를 명시할 수 있다.

우리는 대응된 값을 소문자로 바꾸기 위해 화살표 함수를 이용할 것이다.

함수에 replace()를 사용할 경우 함수는 대응이 된 후에 실행될 것이다. 그리고 함수의 결과는 string 을 바꾸는데 사용될 것이다. 만약 대응이 전체에서 다중으로 이뤄진다면 함수는 각 대응이 이뤄진 후에 호출될 것이다.

function lowerCase(str){
  return str.replace(/[A-Z]/g, (u) => u.toLowerCase());
}

lowerCase('camel Case') // 'camel case'
lowerCase('hello World It Is Me') // 'hello world it is me'

Project: 첫번째 글자 대문자로 바꾸기

본문을 읽기전 아래 예제 코드정보를 보고 직접 해결해보자.

capitalize('camel case') // => should return 'Camel case'

우리는 replace () method에 다시한번 화살표 함수를 사용할 것이다. 그러나 이번에 우리는 string에서 첫번째 글자만을 찾을 것이다. 첫번째 글자를 기억하기 위해 ^를 사용한다.

^에 대해 좀더 깊이있게 살펴보도록 하자. 먼저 아래 예제를 recall 하자.

console.log(/cat/.test('the cat says meow'));
// true

우리가 함수에 ^를 추가하면 더이상 true가 return되지 않는다. cat은 string이 시작되는 글자가 아니기 때문이다.

console.log(/^cat/.test('the cat says meow'));
// false

우리는 ^가 string이 시작되는 첫번째 소문자에 대응하길 원한다. 때문에 우리는 [a-z]를 우리의 문자셋 바로 앞에 추가한다.

이것은 첫번째 글자가 소문자일 때만 target으로 잡을 것이다.

/^[a-z]/

우리는 오직 하나의 대응만을 원하기 때문에 더이상 global modifier를 사용하지 않는다.

이제 우리는 정규표현식을 replace method 내부로 연결할 수 있고 화살표 함수의 두번째 argument로 추가할 수 있다.

function capitalize(str){
  return str.replace(/^[a-z]/, (u) => u.toUpperCase());
}

capitalize('camel case') // 'Camel case'
capitalize('hello world it is me') // 'Hello world it is me'

Project: 계속해서 배우기

이전의 3가지 함수들을 하나의 함수 안에 통합하고, 그 함수로 하여금 camelCase string을 정규표현식으로 변환시키게 할 수 있나?
string의 끝에 .(period)를 추가할 수 있나?
모든것을 뒤집어라. stiring을 camelCase Hashtag로 변화시킬 수 있나?

[합정 곱창 맛집]- 구공탄곱창 합정2호점

3jun — Fri, 3 Aug 2018 19:10:26 +0900

안녕하세요! 오늘 제가 소개할 곳은 합정에서 맛있는 곱창을 먹고 싶을 때 가는 곳입니다. 1호점, 2호점 있으니까 가까운 곳으로 가세요~!!

위치: 서울 마포구 성지길 18

번호: 02-379-9092

기타: 매일 17:00-02:00

합정역 7번출구에서 도보 5분정도에 위치해 있습니다. 웨이팅이 항상 있는 곳이라, 시간을 잘 맞춰 가야해요! 구공탄곱창은 석쇠판, 치즈판을 고를 수가 있어요! 저는 당연 석쇠판 ^^! 치즈판으로 드시려면 5,000원 추가하면 됩니다.

기본 반찬으로는 양파, 무쌈, 야채쌈, 얼큰한 콩나물국입니다. 그리고 인원 수당 하나씩 계란후라이를 먹을 수가 있어요! 짱짱~ 더 먹고 싶으면 500원을 내고 추가로 먹을 수 있습니당~!

양념막창을 주문하였어요~ 매운 걸 잘 먹는 편은 아니지만 이정도 매운 맛은 먹기 편한 맛이에요. 옆에 마요네즈나 떡, 콩가루를 찍어 먹으면 더더욱 맛있습니다 :) 생 부추도 올라가서 같이 먹으면 꾸르맛입니다. 달달한 양념막창과 잘어울려요. 떡도 완전 쫀득쫀득~ 말랑말랑거려용!! 1인분에 11,000원 정도합니다.

곱창인데, 꽤 좋은 가격대인 것 같네요.

막창뿐 아니라, 곱창 연탄갈매기 연탄꼼장어 오돌갈비가 있어요. 곱창은 양념만 가능하구요~ 막창과 연탄꼼장어는 소금, 양념이 가능하고! 연탄갈매기, 오돌깔비는 간장, 양념이 가능합니다~~! 최초 주문은 2인분 이상 가능하구요, 음식은 완전히 조리되어 나옵니다 (약 15-20분)

기다리는 동안 계란후라이 해 먹으면 딱 인 것 같네요 ^_^

초보자를 위한 Javascript: 'new' 예약어

3jun — Thu, 2 Aug 2018 08:01:59 +0900

JavaScript For Beginners: the 'new' operator

출처 : codeburst.io, Brandon Morelli

4가지 법칙

new 예악어가 무엇인지 이해하는 것은 new 예악어를 이해하는 가장 간단한 방법이다.

new 예악어를 사용할 때, 4가지의 일들이 발생한다.

새로운 빈 객체를 만들어낸다.
this를 새로 만들어진 객체에 bind한다.
새로 만들어진 객체에 "__proto__"라 불리는 property를 더한다. 이것은 constructor 함수의 prototype 객체를 의미한다.
return this를 함수의 끝에 추가한다. 때문에 객체는 함수로부터 return되어 만들어진 것이다.

student라는 이름의 생성자 함수를 만들었다. 이 함수는 name, age라는 두개의 parameter를 가진다. 이 인자들은 this의 value에 property들을 만든다.

function Student(name, age) {
  this.name = name;
  this.age = age;
}

이제 new 예악어로 생성자 함수를 호출해보자. 우리는 'John'과 26이라는 두개의 argument들을 넣을 것이다.

var first = new Student('John', 26);

이 코드를 실행한다면 어떤 일이 일어날 것인가?

새로운 객체를 만들어낸다 ― first 객체
this는 first 객체에 bound된다. 때문에 this에 대한 참조는 first를 향할 것이다.
__proto__가 추가된다. first.__proto__는 이제 student.prototype을 가리킨다.
모든 것이 완료된 후에 새로운 first 객체는 새로운 first 변수에 return된다.

이제 우리는 console.log 선언문을 실행함으로써 이것이 제대로 동작하는지 확인할 것이다.

console.log(first.name);
// John

console.log(first.age);
// 26

이제 new keyword의 __proto__ 부분에 대해 더 깊이 알아보도록 하자.

Prototypes

모든 자바스크립트 객체들은 prototype을 가지고 있다. 자바스크립트의 모든 객체들은 자신의 prototype으로 부터 method들과 property들을 상속받는다.

이를 확인하기 위해 크롬 개발자를 열고 이 글의 앞에 있는 Student 함수를 type해보자.

function Student(name, age) {
  this.name = name;
  this.age = age;
}

모든 객체들의 prototype을 가지고 있음을 증명하기 위해 이제 아래 코드를 입력해보자.

Student.prototype;
// Object {...}

그러면 이제 객체가 return된다. 이제 새로운 student를 만들어보자.

var second = new Student('Jeff', 50);

우리는 Jeff라는 이름의 두번째 학생을 만들기 위해 Student 생성자 함수를 사용했다. 그리고 new예악어를 사용했기 때문에 __proto__ property는 second 객체에 추가되었다. 이것은 부모 생성자를 가리킨다. 아래 코드를 실행해봄으로써 이것을 확인할 수 있다.

second.__proto__ === Student.prototype;
// true

Student.prototype.constructor은 Student 생성자 함수를 의미한다.

Student.prototype.constructor;

//  function Student(name, age) {
//    this.name = name;
//    this.age = age;
//  }

위 그림에서 보이듯이 Student 생성자 함수는 .prototype이라는 property를 가지고 있다. 이 prototype은 생성자함수를 다시 가리키는 .constructor이라는 객체를 가지고 있다.

이것은 loop이다. 그러므로 우리가 new 예악어를 사용하여 새로운 객체를 생성할 때, 각 객체는 Student.prototype로 되돌아가는 새로운 객체와 연결된 .__proto__ property를 가지고 있다.

상속의 개념을 가지고 있는 이것은 매우 중요하다. prototype 객체는 생성자 함수로 만들어진 모든 객체들 사이에서 사용된다. 이것은 우리가 사용하는 모든 객체들의 prototype에 함수와 property들을 추가할 수 있다는 것을 의미한다.

위 예시들에서 우리는 오직 두개의 Student 객체들을 만들었다.

In our above examples, we only created two Student objects, but what if instead of two students, we have 20,000? All of a sudden, we’re saving a ton of processing power by putting shared functions on the prototype instead of in each of the student objects.

좀더 깊이 살펴보기 위해 다른 예제를 살펴보자. 콘솔에 다음 코드를 입력해보자.

Student.prototype.sayInfo = function(){
  console.log(this.name + ' is ' + this.age + ' years old');
}

우리는 다시 한번 Student prototype에 함수를 추가했다. 우리가 새로 추가하거나 이미 추가된 student는 이제 세번째 .sayInfo 함수에 접근이 가능해졌다. 아래 코드를 통해 테스트해보자.

second.sayInfo();
// Jeff is 50 years old

새로운 student를 추가하고 한번 더 테스트 해보자.

var third = new Student('Tracy', 15);

// Now if we log third out, we see the object only has two
// properties, age and name. Yet, we still have access to the 
// sayInfo function:

third;
// Student {name: "Tracy", age: 15}

third.sayInfo();
// Tracy is 15 years old

상속이 잘 되었기 때문에 코드는 정상적으로 동작한다. 자바스크립트의 객체에 객체 내부에 우리가 호출하는 property가 있다면 객체는 이 property를 호출한다. 하지만 객체 내부에 호출된 property가 존재하지 않는다면 prototype으로 한단계 올라가서 property를 찾는다. 이런 패턴은 우리가 호출하는 property를 찾거나 전역객체에 이를때가지 반복된다.

상속은 과거에 .toString() 같은 함수를 쓸수 있게된것과 같은 이유이다. 생각해보면 당신은 toString() method를 만들어낸 적이 없었음에도 사용할 수 있었다. 그것은 객체 prototype에 이미 만들어져 있는 JS method들 중 하나이기 때문이다. 우리가 만든 모든 객체들은 궁극적으로 객체 prototype에 상속된다. 그리고 우리는 다음과 같이 이런 method들을 덮어쓸 수 도 있다.

var name = {
  toString: function(){
    console.log('Not a good idea');
  }
};

name.toString();
// Not a good idea

객체들은 prototype으로 이동하기 전에 method를 가지고 있는지 확인한다. 우리가 method를 가지고 있기 때문에 위 코드는 상속이 없이도 동작하는 것이다. 그러나 이것은 좋은 코딩은 아니다. 전역 method들과 함수 이름은 겹치지 않게 해야한다.

결론

신입 개발자에게 이것은 이해하기 어려운 개념이지만, 한번 이해하면 좀 더 코드를 명확하고 잘 짤 수 있을 것이다. prototype들로 인해 우리는 특정 코드들을 수백군데에서 사용할 수 있고 수천개의 객체에서도 빠르고 효과적으로 사용할 수 있기 때문이다.

[인천 송도 수제버거 맛집]- 버거룸181

3jun — Tue, 31 Jul 2018 19:41:44 +0900

안녕하세요. 오늘 제가 소개해드릴 맛집은 송도에서 맥주와 수제버거가 맛있는 곳이자, 외국인들이 즐겨 찾는 곳인 버거룸181입니다. 송도 센트럴파크푸르지오 A동 2층에 위치해있습니다!

위치: 인천 연수구 센트럴로 160 송도 센트럴파크푸르지오 A동 2층 228호

번호: 032-279-0016

기타: 주말 11:30=23:30 / 평일 11:30-23:30 / 브레이크타임 15:00-17:00 / 월요일 휴무

송도 수제버거집을 찾고자 하면 가장 먼저 나오는 곳이 바로 버거룸181이 아닐까 생각해요. 그만큼 송도에서 수제버거로 엄청 유명한 곳입니다! 버거와 더불어 맥주까지 완벽하게 맛있는 곳입니다! 여기는 가게 안에 테이블 옆에 손을 닦는 곳도 마련되어 있어요.

굳이 화장실에 가지 않아도 세면대가 있어서 너무 편리하더라구요! 수제맥주도 한가득 있어서 골라먹는 재미가 있었습니다.

버거는 보통 9,000원~12,000원 정도 하구요. 맥주는 블랑 할인이어서 5,000원이 안 되는 가격에 먹었습니다. 병맥뿐 아니라 에일맥주 종류도 많으니 가서 확인해보세용~ 그리고 치즈칠리프라이가 되게 맛있습니다. 칠리와 치즈 소스가 진짜 많이 뿌려있어서 가득 찍어 먹었어요! 그리고 버거와 맥주를 즐겨 먹는 외국인 손님들이 진짜 많아서.. 여기가 한국인가 싶을 정도였어요 ㅋㅋㅋ 버거 사이즈는 두 가지여서 원하는 크기로 주문하면 됩니다. 브레이크 타임이 있기 때문에 꼭 확인해주시구요~~ 맛있게 드세용!^^

[여의도 맛집]- 세상의 모든 아침(세모아)

3jun — Sun, 29 Jul 2018 15:48:54 +0900

안녕하세요. 오늘 제가 소개해드릴 맛집은 여의도에서 엄청 유명한 곳이에요!! 다들 들어보셨을 만한 곳이라고 생각되는데요~ 바로 전경련회관 50층에 위치한 세상의 모든 아침입니다! 고층에서 여의도 전망을 바라보며 식사하는 모습은 누구나 꿈꿨을 텐데요~ 이 곳이 바로 그 곳입니다!

위치: 서울 영등포구 여의대로 24 전경련회관 50F

번호: 02-2055-4442

기타: 매일 09:00-23:00 / 브레이크타임 15:00-17:00

경치가 너무나 좋은 곳입니다! 창가 쪽에 앉으면 더 근사한 경치를 볼 수 있지만, 예약을 하고 오지 않아서 중간 테이블에 앉았습니다. 창가 쪽을 원하신다면, 예약을 꼭 하세요! 웨이팅이 긴 곳이라 걱정을 했지만 다행히 바로 들어올 수 있었어요~ 브런치 맛집답게 다양한 종류들이 있었습니다. </![endif]-->

제가 주문한 메뉴는 카프레제버거앤프라이즈, 봉골레링귀니, 바게트토스트입니다. 카프레제버거앤프라이즈는 정말 강력 추천하는 메뉴입니당!! 베스트라길래 주문했는데 역시나 베스트다운 음식이었어요. 수제버거라서 먹는데 굉장히 신선하고 패스트 푸드답지 않게 건강한 맛이 느껴졌네요 ㅋㅋ 저 감자튀김은 왜이리 맛있던지.. 케찹에 마구 찍어 먹었습니다.

봉골레링귀니는 제가 생각하는 봉골레파스타랑은 약간 다른 맛이었어요.. 위에 올려진 것도 제 스타일이 아니었고.. 약간 실망하는 메뉴였습니다... 하지만 개인적인 주관이니 다른 후기도 참고해주세요~

바게트토스트는 그냥 사진만 봐도 맛있어 보이지않나요?ㅋㅋ 저 크림이랑 함께 찍어먹으면 세상 부러울 것 없는 디저트가 됩니다!! 블루베리도 매우 커서 나이프로 쪼개서 빵이랑 크림이랑 같이 먹었어용~~ 이 메뉴도 베스트 메뉴라서!! 부담없이 모두들 만족하며 드실 수 있는 음식입니다.

뷰가 너무 좋은 곳이고 낮에 가면 햇살이 전 테이블에 사르르 들어오기 때문에 광합성하기에도 딱 좋구요 ㅋㅋ 통유리로 되어있어서 뭔가 가슴 트이는 느낌을 받으실 수 있을 겁니다!! 매우 만족하는 음식점이었으니, 꼭 방문해보세용~!

Javascript : 도대체 IIFE가 뭐야?

3jun — Thu, 26 Jul 2018 15:48:42 +0900

JavaScript: What the heck is an Immediately-Invoked Function Expression?

출처 : codeburst.io, Brandon Morelli

Function Declaration vs. Function Expression

함수 선언식 vs 함수 표현식

IIFE가 얼마나 유용한지 배우기에 앞서 우리는 함수 선언식과 표현식이 어떤 것들인지 이해해야한다.

우선 전형적인 함수 선언식에 대해 배워볼 것이다.

**FUNCTION DECLARATION**

function doSomething(){
  // ...do something...
};

위 예제코드는 꽤나 기본적인 구조를 취하고 있다. function keyword 뒤에는 함수명인 doSomething이 있고 ( ) 와 { } 가 차례대로 위치한다.

함수를 만드는 또 다른 방법인 함수 표현식은 아래 예제와 같은 형태를 가지고 있다.

**FUNCTION EXPRESSION**

var doSomething = function(){
  // ...do something...
};

시각적으로 봤을 때 선언식과 표현식의 차이는 매우 근소하다. 그리고 사실 우리는 아직까지 이 함수들을 동일한 방법으로 호출할 것이다. ─ 그리고 함수의 이름 뒤에 괄호를 사용하여 호출할 것이다. 여기서는 doSomthing( ); .

여기서 요점은 무척 복잡하다. 자바스크립트를 파싱하면 function keyword는 우리가 명확하게 그렇지 않다고 말해주지 않는 이상은 보통 선언식을 이용해서 쓰여졌다고 간주된다.

이 특징은 IIFE의 문법을 이해하는데 매우 중요하다.

Immediately-Invoked Function Expression Syntax

아래 예제코드는 IIFE함수이다. 보시다시피 괄호에 감싸져있고, 끝에 두번째 괄호가 있다는 것을 제외하면 기본적인 함수 선언식과 매우 유사함을 알 수 있다.

(function(){
  // ...do something...
})();

한번에 IIFE의 두 가지 특성에 대해 알아볼 것이다. 우선 우리는 enclosing 괄호에 대해 알아볼 것이다. ( 아래코드에서 파랑색으로 보이는 부분)

앞서서 우리는 자바스크립트는 함수 keyword를 만나면 보통 그 함수가 선언식으로 만들어졌다고 인식한다고 학습했다. 앞에서 언급했다시피 이 특징은 매우 중요하다. 만약 우리가 enclosing 괄호 없이 IIFE 함수를 만들려고 한다면 자바스크립트는 우리가 함수 선언식을 실행시키려하지만 실수로 함수의 이름을 생략했다고 받아들일 것이고 아래와 같은 문법 에러를 출력한다.

function(){ /*...do Something...*/ }();

// SyntaxError: Unexpected token (

위에서 언급했듯이 자바스크립트는 너가 함수 선언식을 만들고자 했다고 생각할 것이다.

// Did you mean to type this?

function doSomething(){ /*...do Something...*/ }();

그러나 그것은 우리가 원하는 것이 아니다. 다행스럽게도 함수 표현식을 정상적으로 기능하게 할 수 있다.

우리의 함수를 괄호로 감쌈으로서 우리는 파서에게 함수 표현식으로 파싱하라고 명령할 수 있다. (함수 선언식이 아니라)

이로써 우리의 코드는 오류 없이 compile 되게 된다.

이제 우리는 IIFE에서 첫번째 괄호가 어떤 역할을 하는지 알게되었다. 그렇다면 IIFE에서 두번째 괄호는 무엇일까? (아래 예제 코드의 빨간색 괄호)

괄호는 함수들을 호출하는데 사용된다. 그래서 아래의 예제 코드를 보면 함수 선언식 바로 뒤에 있는 한쌍의 괄호는 함수를 즉시 호출할 것이다.

그럼 무슨일이 일어날까? 크롬 개발자 도구를 열고 아래의 함수 선언식 예제코드를 콘솔창에 실행시켜보자.

function speak(){
    console.log('hello');
};

이제 speak () 를 콘솔창에 입력하기만 하면 함수를 호출할 수 있게 되었다. 그럼 hello라는 결과값을 return받게 될 것이다.

그러나 speak에서 괄호를 생략하게 된다면 어떻게 될까?

speak();
// 'hello'

speak;
//  function speak(){
//    console.log('hello');
//  }

괄호를 생략하게 되면 함수는 결코 호출되지 않는다. 그리고 함수 정의가 대신 return된다.

이로써 함수 표현식 끝에 괄호를 포함함으로써 IIFE 함수가 즉시 호출될 것이라는게 명확해졌다.

The Why.

이제 우리는 IIFE가 어떤 기능을 하고 코드가 어떻게 동작하는지에 대해 학습했다. : 함수표현식을 만들고 그 함수를 즉시 실행한다. 이제 우리는 가장 중요한 질문인 Why? 에 대해 답할 수 있다.

왜 우리는 함수를 만들고 그 다음에 바로 함수를 호출하는 방법 대신 IIFE 함수를 사용하는가?

Privacy. 보안때문이다.

자바스크립트에서 변수들은 그들을 포함하고 있는 함수에 의해 scope로 묶인다. 이것은 함수 외부에 접근할 수 없음을 의미한다. 아래에 간단한 예제가 있다.

(function(){
  var superSecret = 195;
})()

console.log(superSecret);
//  Uncaught ReferenceError: superSecret is not defined

우리는 IIFE 함수 외부에서 superSecret 변수에 접근할 수 없다. IIFE함수 내부의 모든 코드들은 해당 함수의 private scope에 묶이게 된다.

그러나 어떤 함수명으로 함수를 만들고 호출한다면 어떻게 될까? 같은 결과를 만들어낼 수 있을까?

그렇다. 하지만 함수명을 가진 함수를 만든다면 전역 name 스코프를 오염시킨다. 이것은 함수명을 가진 함수가 전역스코프에 접근할 수 있음을 의미한다. 이러한 이유로 이 함수들은 불필요한 상황에서 출력될 수 있다.

IIFE함수는 함수명이 없기 때문에 이후에 실수로 호출될 일이 없기 때문에 잠재적인 보안 이슈를 피할 수 있다.

[익선동 카레 맛집] -익선동121

3jun — Wed, 25 Jul 2018 23:01:42 +0900

안녕하세요. 오늘 제가 소개해드릴 맛집은 서울에서 일본식 카레를 먹고 싶다거나, 분위기 좋은 맛있는 익선동 카레집을 가고 싶으신 분들에게 추천드리는 ‘익선동121’입니다!

위치: 서울 종로구 돈화문로11나길 30

번호: 02-765-0121

기타: 주말,공휴일 11:00-21:00 / 브레이크타임 3-4시 / 평일 11:00-21:00 (브레이크타임 없음)

익선동121은 출판사 대표이신 사장님께서 차린 맛있는 익선동 카레집입니다. 한옥마을을 리모델링 한 곳이라서 천장이 한옥으로 되어있구요. 천장을 뚫어 빛이 제대로 들어옵니다~ 이 집에 사용되는 된장은 한의사가 직접 담근 된장으로 음식을 만든다고 해요! 매우 건강한 식단을 대접하려는 사장님의 마음이 보입니다~!

제가 주문한 메뉴는 소고기버섯카레, 병아리콩샐러드에 빵을 추가했습니다:) 소고기버섯카레는 매콤한 걸 좋아하는 사람에게 딱 일 것 같았어요! 새싹채소와 함께 먹으며 건강을 생각하는 사장님의 정성을 알 수 있었습니다. 조미료는 넣지 않고 최대한 몸에 좋은 것들만 넣으신다고 합니당!!

병아리콩샐러드는 정말 고소해요! 숟가락으로 퍼먹는 샐러드인데, 추가한 빵이랑 같이 먹으니까 더더욱 맛있었어요! 병아리콩을 처음 먹어봤는데, 콩을 그다지 좋아하지 않는 저도 엄청 맛있게 먹었어요~ 고소합니다!!

익선동에서 한끼를 건강하고 웰빙스러운 식사를 하고 싶다~~ 하시는 분들은 익선동121을 방문하면 너무나 만족한 식사를 할 것 같네요! 한옥스러운 인테리어도 너무나 익선동과 잘 어울리는 곳이었습니다 :) 한번 방문해보세용~~

[청담동 맛집]-미엘

3jun — Mon, 23 Jul 2018 17:05:14 +0900

안녕하세요! 오늘은 청담동에 있는 맛있는 카페인 미엘을 소개하고자 합니다. 워낙 청담에서 조용하고 멋진 인테리어로 유명한 곳이기도 하고~ 맛있는 김치볶음밥으로도 유명한 곳입니다!

위치: 서울 강남구 도산대로67길 13-12

번호: 02-512-2395

기타: 매일 11:30-24:00 / 연중무휴 / 발렛가능

이 곳은 예전부터 지금까지 항상 핫한 곳으로 유명해서 연예인들의 맛집으로도 유명한 곳이라고 해요! 저도 한번 방문해 봤습니다. 미엘은 커피음료와 food를 모두 하기 때문에 식사와 커피, 디저트를 한 자리에서 해결할 수 있다는 장점이 있어요!

저는 봉골레파스타(18,700) 김치볶음밥(17,600)과 맥주 밀러를 주문했어요~ 여기 메뉴에 디저트, 리조또, 라이스, 샐러드, 브런치, 파스타, 스테이크 다 있어서 진짜 골라먹는 재미가 있구요! 웬만한 후기들을 보면 다 맛있다고 해서 뭐 먹을지 정말 고민을 많이 했습니다. 미엘의 가장 시그니쳐 메뉴라고 할 수 있는 김치 볶음밥은 당연 1순위이구요~ 파스타는 가장 좋아하는 봉골레로 주문했어요!

봉골레 파스타에 빵 나오는거 신기했어요~ ㅎㅎ 김치볶음밥은 진짜 왜 이렇게 맛있죠? 제가 먹어본 김치볶음밥 중에 제일 맛있는 거 같아요… 왜 여기가 김볶이 유명한지 알 것 같네요… 비싼 값어치를 한다고 생각했어요 ^^! 여러분도 한번 방문하셔서 드셔보세요! 꾸르맛입니다~

Javascript : 초보자를 위한 화살표 함수

3jun — Sat, 21 Jul 2018 12:56:19 +0900

JavaScript: Arrow Functions for Beginners

출처 : codeburst.io, Brandon Morelli

Benefit #1 : Shorter Syntax

화살표 함수의 첫번째 이점은 문법을 간결하게 할 수 있다.

우선 일반인 함수를 한번 보자.

function funcName(params) {
   return params + 2;
 }

funcName(2);
// 4

위 코드는 화살표 함수를 만들어야 하는 2가지 이유 중 한 가지에 대해 잘 보여준다. : 문법을 짧게 할 수 있다.

화살표 함수를 사용하면 위 코드를 한 줄로 만들 수 있다.

var funcName = (params) => params + 2

funcName(2);
// 4

위 예제는 극단적으로 간소화 되었지만, 요점을 잘 보여주고 있다.

화삼표 함수의 문법에 대해 좀 더 깊게 살펴보도록 하자.

(parameters) => { statements }

만약 우리가 어떠한 parameters도 가지고 있지 않다면 우리는 화살표 함수를 아래와 같이 표현할 수 있다.

() => { statements }

만약 하나의 parameter만을 가지고 있다면 괄호는 생략이 가능하다.

parameters => { statements }

마지막으로 만약 표현식을 return한다면 중괄호 또한 생략할 수 있다.

parameters => expression

// is equivalent to:

function (parameters){
  return expression;
}

이제 기본적인 문법에 대해 공부를 했으니 예제를 통해 실습을 해볼 것이다.

크롬 개발자 콘솔을 열고 아래 코드들을 따라 작성해보자.

var double = num => num * 2

우리는 변수 double에 화살표 함수를 할당했다. 화살표 함수에는 num이라는 한개의 parameter만 있다. parameter가 한개 뿐이므로 우리는 parameter 주위의 괄호를 생략했다.

또한 우리는 num * 2 의 value를 return하고자 하므로 표현식 외부의 중괄호 또한 생략했다.

이제 아래 예제 함수들을 호출해보고 결과값을 확인해보자.

double(2);
// 4

double(3);
// 6

Benefit #2 No binding of this

2번째 이점 this를 binding하지 않는다.

이 부분을 공부하기 에 앞서 우리는 this에 대해 어느정도 이해하고 있어야 한다.

일반적인 함수와 달리 화살표 함수는 this를 bind하지 않는다. 대신 this는 사전적으로 bound된다. ( 예를 들어 this는 original context로부터의 의미를 계속 유지한다. )

실습예제를 통해 좀 더 자세히 살펴보자. 콘솔에서 생성자 함수를 만든 후에 인스턴스를 만들어보자.

function Counter() {
  this.num = 0;
}

var a = new Counter();

지난 번에 공부했듯이 생성자함수와 this의 value는 새로 만들어진 객체에 bound 된다. 위 예시에서는 a 객체이다.

이 때문에 console.log a.num 의 결과값이 0이 된다.

console.log(a.num);
// 0

만약 우리가 a.num의 값을 매초마다 증가시키고 싶다면? 우리는 setInterval() 함수를 사용할 수 있다. setInterval()은 설정된 밀리세컨드 후에 또 다른 함수를 호출하는 함수이다. 위 Counter 함수에 setInterval 함수를 추가해보자.

function Counter() {
  this.num = 0;

  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }, 1000);
}

추가한 this.timer 변수와 setInterval 함수를 제외하면 이전의 코드와 동일한 코드이다. 매 1000 밀리세컨드(1초)마다 코드는 실행된다. this.num은 1씩 증가하여 콘솔로그에 출력될 것이다.

콘솔에서 Counter의 인스턴스를 다시 생성할 것이다.

var b = new Counter();
// NaN
// NaN
// NaN
// ...

이 코드를 콘솔에서 실행하면 화면에 매초마다 함수가 log됨을 확인할 수 있다. 그러나 그 결과값은 우리가 기대했던 값이 아니라 NaN (Not a Number) 가 log된다. 무엇이 잘못되었을까?

중요한 것은 아래 코드를 실행함으로써 interval을 중단시켜야한다.

clearInterval(b.timer);

setInterval 함수는 선언된 객체에서 사용될 수 없다. 뿐만 아니라 new keyword와 함께 호출될 수 없다. (오직 counter() 함수에서 사용된다.) 그리고 call, bind, apply 함수도 사용할 수 없다.

setInterval은 단지 보통함수일 뿐이다. 사실 setInterval에서 this의 value는 글로벌 객체에 bound된다.

this의 value를 logging 함으로써 이 이론을 테스트해보자.

function Counter() {
  this.num = 0;

this.timer = setInterval(function add() {
    console.log(this);
  }, 1000);
}

var b = new Counter();

여기서 볼 수 있듯이 window 객체는 매초마다 log된다. 아래 코드를 통해 interval을 초기화하도록 한다.

clearInterval(b.timer);

다시 원래의 함수로 돌아와서, 원래의 함수는 this.num이 window 객체의 num property가 되기 때문에 NaN이 logging된다.

(window.num은 존재하지 않는다.) 그리고 this.num은 우리가 만든 b 객체 (b.num)이 아니다.

우리는 화살표 함수를 이용해서 이것을 fix할 수 있다. 우리는 this를 bind하지 않는 함수가 필요하다.

화살표 함수를 이용하면 this는 스코프에서 원래의 binding을 지속적으로 유지한다. 원래의 Counter 함수의 setInterval을 화살표 함수로 바꿔보자.

function Counter() {
  this.num = 0;

  this.timer = setInterval(() => {
    this.num++;
    console.log(this.num);
  }, 1000);
}

var b = new Counter();
// 1
// 2
// 3
// ...

이제 콘솔이 증가된 숫자들을 logging하기 시작하면서 정상적으로 기능함을 확인할 수 있다. Counter 생성자 함수에 의해 binding되며 만들어진 원래의 this가 유지되었다.

setInterval 함수 내부에서 this는 새롭게 만들어진 b 객체에 bound되어 있다.

다시 아래의 코드로 interval을 초기화 하고,

clearInterval(b.timer);

개념을 좀 더 확실히 이해하기 위해 우리는 다시 화살표 함수 내부의 this를 logging해보자. 우리는 Counter함수 내부에 that 이라는 변수를 만들고, setInterval 함수에서의 this의 value가 부모함수인 Counter에서의 this의 value와 같다면 true값을 출력할 것이다.

function Counter() {
  var that = this;

this.timer = setInterval(() => {
    console.log(this === that);
  }, 1000);
}

var b = new Counter();
// true
// true
// ...

기대했던 대로 true가 매 시간마다 출력됨을 확인했고, 이제 다시 interval을 초기화 함으로써 작업을 종료하면 된다.

clearInterval(b.timer);

Conclusion 결론

이 글을 통해 화살표 함수의 2가지 이점에 대해 이해했으면 한다.

Shorter Syntax 문법을 간소화 한다.
No binding of this this가 binding 되지 않는다.

이 글에서 설명한 특징들 외에도 화살표 함수에 대한 더 많은 정보가 있지만, 이 글을 이해하면 앞으로 학습을 하는데 분명 도움이 될 것이다.

Atom 기본세팅 ( Node.js / Chrome )

3jun — Thu, 19 Jul 2018 17:30:09 +0900

Atm

UI Theme : seti

Syntax Theme : Atom-marerial-syntax-dark

Atom Plugin Pakage

atom-beautify : indenting을 비롯하여 코드를 보기 편하게 정리해준다.
autoclose-html : 닫는태그가 필요한 태그를 작성하면 자동으로 닫는태그를 생성해준다.
highlight-selected : 코드에서 선택된 코드에 대해 동일한 텍스트 값을 하이라이트 해주는 기능이다.
color-picker : 원하는 색을 직접 선택할 수 있다.
javascript-snippets : 많이 사용하는 패턴에 대해 자동완성 기능을 제공한다. (단축키를 사용하여 코딩)
language-vue : vue의 기본적인 코드를 자동으로 작성해준다. ( "tem" + tap키 )
platformio-ide-terminal : atom 내부에서 터미널을 띄울 수 있다. ( 여러가지 command 명령어를 바로 실행할 수 있다.)

Node를 설치할 때 LTS 버전을 설치하면 node와 함께 npm도 install된다.

크롬에 Vue.js.devtools 플러그인을 설치하여 Vue 사이트에 접속했을 때 Vue의 component를 비롯한 기타 속성들을 확인할 수 있는 Plugin이다.

source : 빠르고 쉽게 멋진 웹프론트엔드 개발을 도와주는 Vue.JS 프레임워크

유튜브/올리버쌤 - Will은 '~할 것이다'라는 뜻일까?

3jun — Wed, 18 Jul 2018 21:53:52 +0900

Will은 '~할 것이다'라는 뜻일까?

will은 주로 논문, 업무적인 문서 등을 작성할 때 사용하는데, 대화할 때 사용하면 상황에 따라 표현이 어색해질 수 있다.

ex)

I will go to the bathroom : 나는 반드시 화장실에 가고 말겠다. 그 누구도 날 막을 수 없다.

대화할 때 will을 사용하면 아주 강한 의지를 나타낸다.

I will succeed. / I will survive. 처럼

I will call you tomorrow. → I'll call you tomorrow.

I will be there in a minute. → I'll be there in a minute.

We will watch movie tonight. → We'll watch movie tonight.

'준비한다' 영어로 혹시 이렇게 말하세요?

prepare은 테러준비, 전쟁준비, 결혼식 준비 처럼 큰 행사들을 준비할 때 사용한다.

때문에 나갈 준비, 잘 준비 한다고 할 때 prepare를 사용하면 틀리진 않았지만 다소 어색할 수 있다.

I'm getting ready to go out.

I'm getting ready for bed.

I'm getting ready to work out.

I'm getting to meet you.

변태주의 | 힘들다 'I'm hard' 말하지마세요

많은 분들이 스트레스 받거나 힘들 때 I'm hard라고 하더라고요. I'm hard라고 말하면 크게 오해 받을 수 있으니까 꼭 알아두세요. 나는 딱딱합니다. 라는 의미이기 때문이다.

I'm having a hard time at school.

I'm having a hard time because of all the homework.

I'm having a hard time because my project.

I'm having a hard time because of my boss.

'그냥요' 대답할 때 Just 말해도 될까?

just 그냥이라는 의미를 가지고 있지만 대답할 때는 아무런 의미가 없다.

Just because 가 올바른 표현이다.

'개고기 좋아한다’ 오해하게 만드는 표현

동물을 지칭할 때 s를 빼고 말하면 그 동물의 고기를 의미한다.

즉, I like cat. I like dog. 은 고양이 고기를 좋아해, 개고기를 좋아해라고 받아들여질 수 도 있다.

때문에 반드시 동물을 지칭할 때는 뒤에 s를 붙여줘야 한다.

I like cats.

I like dogs.

I like horses.

'너 재수없다' 영어로도 말해보자!!

You're so full of yourself.

Do you ever think of anyone else? You're so full of yourself.

That guy is always talking about how great he is. He's so full of himself.

Stop being so full of yourself.

‘더치페이'라고 하면 이해 못해요

더치페이는 콩글리쉬이다.

Let's go Dutch.

Let's split the bill.

How about splitting the bill?

I'll pay for mine.

'쫙 빼입었다' 영어로 이렇게 칭찬해보세요!

You're dressed to kill ( dressed to kill 죽여주게 입었다. )

You're all dressed up. ( 남녀구분 없이 사용할 수 있다. )

You look like a million bucks. ( 부티나게 차려입었을 때 )

You look really sharp in that suit. ( 수트빨 받았네, 남자에게만 사용가능 한 표현 )

You're looking fly today son/girl. ( 오늘 아주 근사하네. )

'나 못생겼어' Ugly보다 새로운 표현

I look awful. 끔찍한

I look hideous today. 흉측한

I look like crap today, Don't I 똥

I look terrible today.

I don't look my best today.

interesting 재밌다는 뜻일까요?

영어에는 fun과 interesting의 개념이 뚜렷하게 구분된다.

interesting은 내 호기심을 자극하네, 깊게 생각하게 만드네.. 재미있네.. 흥미롭네 처럼

배우고 싶고 알고 싶은 것에 사용된다.

그냥 가볍게 재미있는 상황에서는 fun이 적절한 표현이다.

The picnic was fun.

Last weekend was fun.

The rollercoaster was fun.

Javascript : 초보자를 위한 'This'

3jun — Tue, 17 Jul 2018 22:12:55 +0900

The Keyword ‘This’ for Beginners

출처 : codeburst.io, Brandon Morelli

This 는 다소 복잡한 개념이지만, 이제부터 설명할 5가지 일반적인 법칙을 이해한다면 this 를 어떻게 사용할지, 언제 사용할 지 결정하는데 도움이 될 것이다.

물론 이 법칙들이 모든 경우를 설명할 수 있는 것은 아니지만 특수한 경우를 제외하면 대부분의 상황에서 도움이될 것이다.

#Global Object

크롬 개발자 콘솔을 열고 Console.log(this); 를 입력하면 // Window {...} 가 출력된다.

전역스코프에서 this는 global object를 의미하기 때문에 window 객체가 출력되는 것이다.

브라우저에서 global object는 window object이다.

this가 왜 window object를 나타내는지 좀더 자세히 이해하기 위해 좀 더 깊게 들어가보자.

콘솔에서 새로운 변수를 만들고 변수에 이름을 할당한다.

var myName = 'Jun';

우리는 변수 호출을 통해 이 새로운 변수를 가져올 수 있다.

myName

// returns -> 'Jun'

전역스코프에서 선언한 모든 변수는 window object가 된다.

window.myName

// returns -> 'Jun'

window.myName ===myName

// returns -> true

앞서 global context에서 consloe.log(this) 를 실행함으로써 우리는 this가 global object에서 호출됨을 알았다.

console.log(this)

// returns -> window {...}

이제 함수 내부에 this를 넣어보고자 한다. this의 value는 함수가 어떻게 호출되냐에 따라 결정된다.

그러면 함수 내부에 this가 있는 함수는 어떻게 return될 것인가 알아보기 위해 아래 코드를 브라우저 콘솔에 입력해보자.

function test () {

return this;

}

test()

다시 한번 this는 global(window) object를 return한다.

여기서 this는 선언된 객체의 내부에 있지 않기 때문에 기본적으로 global(window) object이다.

만약 strict mode에서 위 함수를 실행하면 this는 undefined가 될 것이다.

#2 Declared Object

만약 this가 선언된 객체의 내부에서 사용되면 this의 value는 호출된 method의 closet parent object이다.

아래 코드에서 object 객체를 선언하고 full method 내부에서 this를 사용했다.

var person = {
  first: 'John',
  last: 'Smith',  
  full: function() {
    console.log(this.first + ' ' + this.last);
  }
};

person.full();
// logs => 'John Smith'

this에 대해 좀 더 깊게 알아보기 위해 console.log(this)를 대신 사용하였다. 아래 코드를 복사하여 브라우저 콘솔에서 실행시켜 return값을 확인해보자.

var person = {
  first: 'John',
  last: 'Smith',  
  full: function() {
    console.log(this);
  }
};

person.full();
// logs => Object {first: "John", last: "Smith", full: function}

콘솔에서 person object가 return되고 this가 person의 value로 사용되었음을 확인할 수 있을 것이다.

만약 중첩된 objects을 가지고 있다면 어떤 값을 기대할 수 있을까? 아래 예제 코드를 통해 확인해보자.

우리는 위 코드와 마찬가지로 first, last, full 로 동일한 key값을 가진 person 객체를 가지고 있다. 그리고 중첩된 personTwo object를 가지고 있다. personTwo 역시 동일한 세가지 key값을 가지고 있다.

var person = {
  first: 'John',
  last: 'Smith',
  full: function() {
    console.log(this.first + ' ' + this.last);
  },
  personTwo: {
    first: 'Allison',
    last: 'Jones',
    full: function() {
      console.log(this.first + ' ' + this.last);
    }
  }
};

만약 full method들을 호출한다면 어떤 결과값이 호출될까?

person.full();
// logs => 'John Smith'

person.personTwo.full();
// logs => 'Allison Jones'

this의 value는 호출된 method의 closest parent object가 된다.

person.full() 이 호출되면 내부 함수의 this person object에 bound된다. 반면에, person.personTwo.full()로 내부의 full 함수를 호출하면 this는 personTwo object에 바운드 된다.

#3 The New Keyword

new가 생성자 함수로 사용된다면 this는 새로 만들어진 object에 bound된다.

function Car(make, model) {
  this.make = make;
  this.model = model;
};

위 예제 코드에서 this가 global object에 bound 되었다. ( new keyword를 사용하기 전까지는.. )

new를 사용하면 this의 value는 빈 객체가 된다. 아래 예제에서는 myCar가 된다.

var myCar = new Car('Ford', 'Escape');

console.log(myCar);
// logs => Car {make: "Ford", model: "Escape"}

이것을 이해하기 위해서는 new keyword에 대해 정확히 이해할 필요가 있다.

new keyword를 확인하면 this는 새로 만들어진 빈 객체임을 기억해라.

#4 Call, Bind, Apply

call, bind, apply를 사용하여 this의 value 값을 좀 더 명확하게 할 수 있다.

이 세가지는 유사하지만 사소한 차이를 이해하는 것이 중요하다.

call 과 apply는 즉시 호출한다. Call은 parameter의 숫자를 this 로 한다.

apply는 오직 2가지의 parameter만 가지는데 this와 더해지는 argument들의 배열이 그것들이다.

아래 예제코드를 통해 좀 더 확실히 이해해보도록 하자. 우리는 숫자들을 add할 것이다.

아래 코드를 복사하여 브라우저콘솔에 실행하고 함수를 호출해보자.

function add(c, d) {
  console.log(this.a + this.b + c + d);
}

add(3,4);
// logs => NaN

add 함수는 NaN을 기록한다. 이는 this.a와 this.b가 undefined이기 때문이다. 이 두 변수들은 존재하지 않는다. 그리고 undefined인 변수에 숫자를 add할 수 없다.

우리는 객체와 함수를 호출하기 위해 call(0과 apply() 를 사용할 수 있다.

function add(c, d) {
  console.log(this.a + this.b + c + d);
}

var ten = {a: 1, b: 2};

add.call(ten, 3, 4);
// logs => 10

add.apply(ten, [3,4]);
// logs => 10

우리가 add.call()을 사용할 때 첫번째 인자는 this로 bound 된다.

그 다음 parameter들은 우리가 호출하는 함수 내부로 들어가게 된다.

따라서, add() 에서 this.a는 ten.a가 되고, this.b는 ten.b가 된다. 그리고 우리는 1+2+3+4 또는 10을 return값으로 받는다.

add.apply() 도 유사하다. 첫번째 parameter는 this에 bound된다.

그리고 그 다음 parameter는 argument들의 배열로 함수에서 사용된다.

Bind는 어떻게 될까? bind() 의 parameter들은 call() 과 동일하지만 bind()는 즉시 호출되지 않는다. 대신 bind() 는 이미 bound 된 this의 context와 함께 함수를 return한다. 이런 점 때문에 bind()는 우리가 모든 argument들을 알지 못할 때 유용하게 사용된다.

이해를 돕기위해 다시 다음 예제를 확인해보자.

var small = {
  a: 1,
  go: function(b,c,d){
    console.log(this.a+b+c+d);
  }
}

var large = {
  a: 100
}

콘솔에 위 코드를 입력한 후, 아래 코드를 호출해보자.

small.go(2,3,4);
// logs 1+2+3+4 => 10

그러나 만약 우리가 large.a의 value를 대신 사용하고 싶다면? call/apply를 사용하면 된다.

small.go.call(large,2,3,4);
// logs 100+2+3+4 => 109

만약 우리가 3 argument들을 모두 알지 못한다면? bind를 사용하면 된다.

var bindTest = small.go.bind(large,2);

console.log를 통해 위의 변수 bindTest를 호출하면 우리는 아래와 같은 결과값을 확인할 수 있다.

console.log(bindTest);
// logs => function (b,c,d){console.log(this.a+b+c+d);}

bind는 this가 bound 된 함수를 return한다는 것을 기억해라.

this 는 large object에 성공적으로 bound 된다. 그리고 두번째 argument로는 이미 숫자 2가 할당되어 있다.

이후 나머지 argument들을 알게되면 우리는 그것들을 추가적으로 할당할 수 있다.

bindTest(3,4);
// logs 100+2+3+4 => 109

위에서의 설명들을 다시 한번 확인하기 위해 위에서 배운 코드들을 모두 사용하여 하나의 block 내부에 작성하였다. 콘솔에 확인해봄으로써 결과값을 확인해보자.

var small = {
  a: 1,
  go: function(b,c,d){
    console.log(this.a+b+c+d);
  }
}

var large = {
  a: 100
}

small.go(2,3,4);
// logs 1+2+3+4 => 10

var bindTest = small.go.bind(large,2);

console.log(bindTest);
// logs => function (b,c,d){console.log(this.a+b+c+d);}

bindTest(3,4);
// logs 100+2+3+4 => 109

#5 Arrow Function

화살표 함수에 대해서는 추후에 따로 공부할 것이다.

Conclusion

이제 대부분의 상황에서 this에 무엇이 들어가게 되는지 추론할 수 있을 것이다.

넘어가기 전에 다음 몇가지를 반드시 기억해라.

this의 value는 대부분 함수의 실행 컨텍스트에 의해 결정된다.
global 스코프에서 this는 global object이다. ( window 객체)
생성자 함수 new가 사용되면 this에 새로 만들어진 객체가 bound된다.
우리는 call(), bind(), apply()를 통해 this의 value를 설정할 수 있다.
화살표 함수는 this를 bind하지 않는다. 대신 this는 사전적으로 bound 된다. ( 원래 context에 기반하여 )

유튜브/올리버쌤 - 이것도 번역이 될까?

3jun — Mon, 16 Jul 2018 14:19:13 +0900

하려고 했어

I was about to

I was about to call you.

I was about to text you.

I was about to move my car.

I was about to do my homework.

~치고

You speak Korean pretty well for an American!

You handle spicy food really well for an American.

You're really good at 사구 for a first-timer.

그런게 어딨어요

황당한 상황에서 '그런게 어딨어요!' 하시죠?!

That's absurd. 어이가 없네.

That's ridiculous. 웃기는 소리 하네.

That's ludicrous! 터무니 없네.

What in the world? 세상에 그런게 어디있어요?

What the heck? 그게 뭐야.

~하는 김에

While you're at it.

While you're at it, would you get me a melona?

While you're at it, would you get me some bread?

While you're at it, would you take out the trash?

While you're at it, would you mind picking up the pizza?

혹시

질문이나 요청을 부드럽게 만들어주는 표현 영어로는 어떻게 할까요?

Do you happen to know Where the subway station is?

Would you happen to know which bus goes to Seoul station?

Do you by any chance speak Korean?

유튜브/올리버쌤 - IF 이럴 때 말하지 마세요

3jun — Mon, 16 Jul 2018 13:57:03 +0900

IF 이럴 때 말하지 마세요

If i get home, I'll text you.

If i arrive, I'll call you.

한국말로 '~하면'이라고 번역되서 많은 분들이 확실한 상황에서도 많이 사용하시더라구요. 그런데 If에는 그렇게 되지 않을 가능성이 들어있어요. 그래서 잘못 사용하면 상대방이 이해 하기 힘들 수 있답니다!

If 에는 '못 할 수도 있다.' 라는 의미가 있다.

때문에 확실한 상황에서 If는 어색하다. If 대신 when을 사용하는 것이 좋다.

I'll call you when i get home.

Call me in the morning when you wake up.

I'll get you a present when you have a birthday.

I came! (저 왔어요!) 말하면 변태되는 이유!!

Hey I'm here.

Uncle John's here.

Jake's here.

Are you here? 너 도착했어?

'내가 니 시다바리가' 영어로 받아치면?!

I'm not your servant.

You're not my boss.

Stop bossing me around.

Don't tell me what to do.

Do it yourself.

개드립에는 영어로 이렇게 반응해보자!

That's so corny. 대박 촌스러워.

That's cheesy. 겁나 유치해.

That's so lame. 겁나 썰렁하다.

Am i supposed to laugh?

I'm sorry. Was that a joke?

소오름!! 닭살돋아!! 영어로 하면?!

That ghost scene gave me goosebumps. goosebumps 닭살

That house gives me the chills. give chills 소름돋게 하다.

That sound makes my hair stand on end.

Kim Yeona's performance sent shivers down my spine. shivers 추위, 흥분 등으로 살짝 떨다.

마동석 패러디 | '터져볼래' 영어로 하면?!

How about a knuckle sandwich?

come get some.

You wanna piece of me?

I'm takin you down.

I'mma mess you up.

'어쩌라고' 영어로도 할 수 있다!!

귀찮을 때 상대방을 무시하는 말! 영어로는 어떻게 할까요?

So what?

Who gives? 누가 관심있대?

do you think I care?

Who cares?

And your point is?

'에라 모르겠다' 영어로 Fu*k it?

맞는 표현이긴 하지만 비속어이다.

Eh, whatever.

Meh. Whatevs. whatever과 유사한 의미이지만 귀찮음이 더 녹아있는 말투이다.

Ah! Screw it. 아 모르겠다. (시험 망했을 때 자주 씀)

Ain't nobody got time for that. 그런거 신경 쓸 시간 없어.

유튜브/올리버쌤 - 틀렸다 'You're wrong' 이라고 하세요? feat. 마음의 상처

3jun — Fri, 13 Jul 2018 23:10:53 +0900

You're wrong은 생각보다 훨씬 단호박 대답입니다. 공격적이고 차가운 표현이기 때문에 좀 더 부드러운 표현을 사용하는 것이 좋다.

ex)Really? I heard that is was Canberra.Are you sure? I thought that it was Canberra.I think you might be mistaken. The capital of Australia is Canberra.

Bad = 나쁘다는 뜻이 아니다?!

기본적으로는 나쁘다는 의미이지만 미국인이 표현을 강조하기 위한 은어로 많이 쓰는 bad!

ex)

I need you so bad.

I miss you so bad.

I need your help so bad.

I want to but that motorcycle so bad.

회사 다닌다' 혹시 영어로 이렇게 말하세요?

한국말로는 '회사 다닌다' '직장 다녀' 라고 표현해도 어색하지 않지만 영어로는 살짝 어색할 수 있답니다.

보통은 회사 이름 혹은 분야까지 말한다.

ex)

I work for Google.

I work for Samsung.

미국에도 변태가 많아요 | 변태를 영어로 말하면!?

ex)

You are such a pervert.

What a perv.

Your mind is in the gutter.

Get your mind out of gutter.

You have a dirty mind.

취준생이에요 : Job seeker라고 하면 어색한 이유?!

Job seeker은 다른 사람에 대해서 말하거나 신문 기사 같은데서 많이 사용하는 표현이다.

자신의 상태를 표현할 때는 좀 어색할 수 있다.

ex)

I'm looking for work.

I'm job hunting.

I putting together my portfolio.

I'm unemployed.

I'm between jobs.

I'm sorry = 꼭 미안하다는 뜻이 아니다?!

I'm sorry 에는 '안됐네', '저런..' 이라는 의미도 있다.

I'm sorry to hear that. 과 비슷한 의미를 가진 표현이다.

ex)

I sorry about what happened to you.

I know how you feel.

안 좋아해 'I don't like it' 라고 하세요? feat. 마음의 상처

취향을 말할 때 'I don't like it' 혹은 'I don't like that' 하시죠?

그 표현보다 더 부드럽게 말하는 방법이 많답니다.

I'm not into that. (be into~ 를 좋아하다.)

I'm not a big fan of that.

It's just not for me.

I'm not crazy about it.

A: Do you want to get dinner with me?

B: yeah, but can we go get some pizza?

A: I don't like that.

B: Ah.. you don't like pizza. How about chicken? You love chicken! Right?

A: I don't like that either.

B: Gezz! Why are you so picky? You know what? I'm just gonna go by myself.

Nice to meet you 반갑다는 뜻이 아니다?!

Nice to meet you는 처음 만난 상황에서만 쓸 수 있다.

'반가워요' 보다 '처음 뵙겠습니다.'라는 의미가 더 적절하다.

It's nice to meet you again.

It was nice to see you again.

Good to see you again.

It was good seeing you.

뉴페이스 만나고 싶어요 : 영어로 이렇게 말하면 큰일나?!

I want to a new face 라고 말하면 성형수술을 하고 싶다는 의미로 받아들여질 수 있다.

식스팩 갖고 싶다. = I want a sixpack.

코수술 하고 싶어. = I want a nose job.

I want to meet someone new.

I want to meet new people.

I want to meet a new woman/man.

It looks like we have some new faces today. 오늘 새로운 사람들이 좀 생긴 것 같네.

We don't get a lot of new faces around here. 이 동네엔 새로운 사람 거의 안와.