Mo's Develog

자바스크립트에서 문자를 다룰 때 어려웠던 점을 해결하기 위해 나온 문법입니다. 따옴표 대신 backquote, backtick 이라는 `요런` 기호를 사용해서 문자를 만드시면 되는데 (키보드 물결기호 밑에 있습니다) 장점이 뭔지 알아보도록 합시다. 1. 문자 중간 엔터키 입력이 가능합니다. 자바스크립트 문자열은 문자 중간에 엔터키치시면 안됩니다. 하지만 백틱으로 문자를 만드시면 엔터키가 자유롭게 가능합니다. 2. 문자 중간에 변수를 집어넣을 때 편리합니다. 자바스크립트 문자열은 문자 중간에 변수를 넣고 싶은 경우 문자를 쪼개서 + 기호로 넣어야합니다. 하지만 백틱으로 문자를 만드시면 문자 중간에 ${변수명} 이렇게 쉽게 넣을 수 있습니다. 그래서 자바스크립트 문자로 HTML을 작성하실 때도 유용합니다. ..

1~4. 다음 코드의 콘솔창 출력결과는 무엇일까요? (문제1) 답은 함수는 잘 실행됩니다. 하지만 함수내부 코드가 이상합니다. let 변수는 특이하게도 Hoisting이 되긴 하지만 undefined라는 값이 할당되지 않습니다. 그래서 출력시 에러를 뿜습니다. let 변수는 hoisting 되지만 var 변수처럼 지동으로 undefined 라는 값을 할당(일명 initialization) 해주지 않습니다. 선언과 할당 사이에 시간차가 있기 때문에 그런 현상이 일어나는 것이고 let 변수는 그래서 쓸 수 없습니다 그래서 그냥 let const 변수는 그래서 엄격하게 쓸 수 있는 변수구나 외우시면 되겠습니다. (문제2) 답은 이번에도 답은 에러입니다. 정확히 말하면 함수가 아닌데요? 라는 에러입니다. 지금 ..

ES6 문법 이후부터는 자바스크립트에서 함수를 만들 수 있는 문법이 새롭게 하나 등장했습니다. arrow function 이라는 문법인데 이걸 이용하시면 함수를 만들 수 있습니다. 그냥 기존 function () {} 이게 있는데 왜 새로 추가했냐고요? 지금부터 알아보도록 합시다. Arrow function 문법 자바스크립트에선 함수를 이런식으로 만들어서 사용합니다. 함수는 (1) 또는 (2)처럼 만들고 함수(); 이렇게 사용합니다. 근데 ES6 신문법을 사용하면 함수를 이렇게 만들 수도 있습니다. function이라는 길고 복잡한 키워드 대신에 => 이런 예쁜 화살표를 사용해서 함수를 만들어내는 신문법입니다. 그냥 그런게 있구나 하고 외워가시면 되겠습니다 . 근데 외우기 전에 이 문법의 용도를 아는게 ..

개발하면서 은근 자주 찾아볼 수 있는 this 키워드는 뜻이 매우 다양합니다. 사용하는 환경에 따라서 4개 이상의 각각 다른 뜻을 가지고 있는데 이번 기회에 총정리해봅시다. 1-1. 그냥 쓰거나 함수 안에서 쓰면 this 는 window를 뜻합니다. 그냥 HTML 파일 아무거나 하나 만들고 중간에 태그를 열어서 일단 this라는 키워드를 콘솔창에 출력해보도록 합시다. 그러면 this 키워드는 그냥 window 어쩌구 이런 값이 나옵니다. 비슷하게 일반 함수 내에서 this라는 값을 불러보면 똑같이 this라는 값은 window 라고 출력됩니다. 이것이 this의 첫째 뜻입니다. 그냥 window입니다. Q. window가 뭔가요? A. window는 모든 전역변수, 함수, DOM을 보관하고 관리하는 전역..

let 키워드 15.2.3 변수 호이스팅 var 키워드로 선언한 변수와 달리 let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다. 다음 예제를 보자. 이처럼 let 키워드로 선언한 변수를 변수 선언문 이전에 참조하면 참조에러(ReferenceError)가 발생한다. var 키워드로 선언한 변수는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 "선언 단계"와 "초기화단계"가 한번에 진행된다. 즉, 선언단계에서 스코프(실행 컨텍스트의 렉시컬환경(Lexical Environment))에 변수 식별자를 등록해 자바스크립트 엔진에 변수의 존재를 알린다. 그리고 즉시 초기화 단계에서 undefined로 변수를 초기화한다. 따라서 변수 선언문 이전에 변수에 접근해도 스코프에 변수가 존재하..

지역은 함수 몸체 내부를 말하고 지역은 지역 스코프를 만든다고 했다. 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미이다. C나 Java 등을 비롯한 대부분의 프로그래밍 언어는 함수 몸체만이 아니라 모든 코드블록(if, for, while, try/catch 등)이 지역 스코프를 만든다. 이러한 특성을 블록 레벨 스코프(block level scope)라 한다. 하지만 var 키워드로 선언된 변수는 오로지 함수의 코드블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프(function level scope)라 한다. 다음 예제를 보자. 전역 변수 x가 선언되었고 if 문의 코드 블록 내에도 x변수가 선언되었다. 이때 if문의 코드 블록내에서 선언된 x 변수는..

자바스크립트가 제공하는 7가지 데이터 타입(숫자, 문자열, boolean, null, undefined, symbol, 객체 타입)은 크게 원시타입(primitive type)과 객체타입(object/reference type)으로 구분할 수 있다. 데이터 타입을 원시 타입과 객체 타입으로 구분하는 이유는 무엇일까? 원시 타입과 객체 타입은 근본적으로 다르다는 의미일 것이다. 원시 타입과 객체 타입은 크게 세 가지 측면에서 다르다. 원시 타입의 값, 즉 원시 값은 변경 불가능한 값(immutable value)이다. 이에 비해 객체(참조) 타입의 값, 즉 개체는 변경 가능한 값(mutable value)이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를..

보호되어 있는 글입니다.

상세페이지를 어떻게 만들어야할까요? 일반 쇼핑몰들처럼 만들면 됩니다. 누군가 /detail/3 으로 접속하면 3번 게시물 데이터를 보여주면 되고 누군가 /detail/4 로 접속하면 4번 게시물 데이터를 보여주면 됩니다. 그럼... 이렇게 코드 짜면 되겠네여? app.get() 어쩌구를 상품 갯수만큼 만들면 되겠군요? 상품이 100개면 100개 만드시면 되겠습니다. 싫다면 파라미터라는 문법을 이용하시면 되겠습니다. 파라미터는 쉽게 말하면 URL 뒤에 무작위의 문자를 붙일 수 있게 만들어주는 URL 작명 방식입니다. 제가 한번 만들어보겠습니다. 저렇게 콜론 (:) 기호를 붙여주면 누군가 /detail/ 뒤에 아무 문자열이나 입력하면~ 이라는 소리입니다. 이제 사용자가 /detail/ 뒤에 어떤 숫자나 문자..

고객 요청에 응답하는 방법은 여러가지가 있습니다 send는 간단한 문자나 HTML을 보낼 수 있습니다. status는 응답코드를 보낼 수 있습니다. sendFile은 static 파일들을 보낼 수 있습니다. render는 ejs등의 템플릿이 적용된 페이지들을 렌더링해줄 수 있습니다. json은 제이슨 데이터를 담아보낼 수 있습니다. AJAX 요청 성공 또는 실패시 특정 코드 실행하기 당연히 데이터가 오거나 200 코드가 오면 성공이고, 데이터가 안오거나 400, 500 코드가 오면 실패라고 봅니다. 성공이나 실패시 각각 기능을 실행하려면 done 혹은 fail 함수를 이용하시면 되겠습니다. AJAX 성공시 done 함수 내부의 코드를 실행하고 실패시 fail 함수 내부의 코드를 실행할 것입니다. (fun..