Dev Diary 💻

13.1 스코프란?모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유 범위가 결정되비다. 이를 스코프라고 합니다. 즉 스코프는 식별자가 유효한 범위를 말합니다. var x = 'global' function foo() { var x = 'local' console.log(x) //local } foo() console.log(x) //global 13.2 스코프의 종류코드는 전역과 지역으로 구분할 수 있습니다 13.2.1 전역과 지역 스코프전역이란 코드의 가장 바깥 영역을 말합니다. 전역은 전역 스코프를 만듭니다. 전역 변수는 어디서든 참조할 수 있습니다. 13.2.2 지역과 지역 스코프지역이란 함수 몸체 내부를 말합니다. 지..

12.1 함수란? 프로그래밍 언어의 함수는 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다. 함수 내부로 입력을 전달받는 변수를 (parameter), 입력을 (argument), 출력을 반환값return value)라고 합니다. 12.2 함수를 사용하는 이유 코드의 재사용 측면, 유지보수와 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있습니다. 12.3 함수 리터럴 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호로 사용해 값을 생성하는 표기 방식을 말합니다. 즉 리터럴은 값을 생성하기 위한 표기법입니다. 따라서 함수 리터럴도 평가되어 값을 생성하며, 이 값은 객체입니다. 즉 함수는 객체입니다. 12.4 함수 정의 1. 함수 선언문 fu..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 6.1 숫자 타입 자바스크립트는 C/Java와 달리 하나의 숫자 타입만 존재합니다. 6.2 문자열 타입 문자열 타입은 텍스트 데이터를 나타내는 데 사용합니다. 6.3 템플릿 리터럴 ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었습니다. 백틱을 사용합니다. 6.4 불리언 타입 불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐입니다. 6.5 undefined 타입 undefined 타입의 값은 undefined가 유일합니다. undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값입니다. 변수에 값이 없다는 것을 명시하고 싶을 때는 ..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 5.1 값 값(value)는 식이 평가되어 생성된 결과를 말합니다. 5.2 리터럴 리터럴(literal)은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말합니다. 3 3은 아라비아 숫자가 아닌 숫자 리터럴이다. js엔진은 이를 평가해 숫자 값 3을 생성하는 것! 숫자 외에도 다양한 종류의 값을 생성할 수 있다. (정수 리터럴, 부동소수점 리터럴, 2진수 리터럴 ... 문자열 리터럴, 불리언 리터럴, null 리터럴, undefined리터럴, 객체 리터럴, 배열 리터럴, 함수 리터럴, 정규 표현식 리터럴 등) 5.3 표현식 표현식은 값으로 평가될 수 있는 문이다. 표현식이 평가되면 새로운 값을 생성하..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 4.1 변수란 무엇인가? 왜 필요한가? 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말합니다. 4.2 식별자 변수 이름을 식별자라고도 합니다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말합니다. 식별자는 값이 아니라 메모리 주소를 기억하고 있습니다. 즉 메로이 주소에 붙인 이름이라고 할 수 있습니다. 따라서 변수, 함수, 틀래스 등의 이름은 모두 식별자입니다. 4.3 변수 선언 변수를 사용하려면 반드시 선언이 필요합니다. 선언 시에는 var, let, c..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 3.1 자바스크립트 실행 환경 자바스크립트를 브라우저 환경에서 실행하는 방법과 Node.js 환경, 그리고 VSCode를 활용해 브라우저나 Node.js 에서 실행하는 방법을 살펴봅시다. 3.2 웹 브라우저 여기서는 크롬 브라우저를 사용하도록 합니다. 3.2.1. 개발자 도구 개발자 도구는 웹 개발에 유용한 다양한 기능을 제공한다. - Elements : 로딩된 웹페이지의 DOM과 CSS를 편집해서 렌더링된 뷰를 확인해 볼 수 있음 - Console : 로딩된 웹 페이지의 에러를 확인하거나 console.log 메서드의 실행 결과 등을 확인할 수 있음 - Sources : 로딩된 웹 페이지의 js 코드를 디버깅 할 수 있음 - Ne..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 2.1 자바스크립트의 탄생 자바스크립트는 1996년 3월 넷스케이프 웹 브라우저에 탑재되었고, 이름이 바뀌어 최종적으로 자바스크립트가 되었습니다. 2.2 자바스크립트의 표준화 경쟁으로 인해 브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작하면서, 웹패이지를 개발하기 매우 어려워졌습니다. 따라서 표준화된 자바스크립트의 필요성이 대두되고 표준화된 자바스크립트로 선택되었습니다. 2.3 자바스크립트 상징의 역사 렌더링이란? HTML, CSS, JS로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말합니다. 서버에서 데이터를 HTML로 변환해서 브라우저에게 전달하는 과정 (SSR: Ser..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 1.1 프로그래밍이란? - 프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션입니다. - 요구사항을 명확히 이해하는 것이 우선되어야 하며 복잡함을 단순하게 분해하고 자료를 정리하고 구분해야 합니다. - 컴퓨팅 사고가 중요합니다. - 수치화 해서 정의하는 능력이 필요합니다. 1.2 프로그래밍 언어 프로그래밍은 프로그래밍 언어를 사용해 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 프로그래밍 언어는 구문과 의미의 조합으로 표현됩니다. 1.3 구문과 의미 문법(Syntax)에 맞는 문장을 구성하는 것은 물론 의미(semantics)를 가지고 있어야 언어의 역할을 충실히 수행할 수 있습니다.

Intro 안녕하세요. 이번 시간에는 Moment.js 에서 오전/오후 표기의 위치를 조절하는 방법에 대해 알아보겠습니다. 제 경우 DB에서 받아온 datetime 시간을 23.03.15 오후 10:30 의 형태로 표현하고 싶었습니다. 하지만 momentjs 에는 다음의 예시가 없었습니다. 따라서 format을 커스텀하여 만들어 주기로 결정했습니다. How to solve the problem 저는 해당 표기법을 전역으로 적용해야 했기 때문에 공통 함수를 만들어줬습니다. datetime 시간과, format 의 2가지 파라미터를 받는 함수를 만들고, moment를 활용하여 format을 적용시켜줬습니다. 제 경우 DB의 datetime 타입이 string이고, YY.MM.DD hh:mm 형태였습니다. 이..

Intro 안녕하세요. 이번 시간에는 자바스크립트로 특정 문자열 수까지 표시하는 방법에 대해 알아보도록 하겠습니다. How to solve the problem 긴 문자열을 자르는 방법은 다양한데요, 보통 생략 (...)처리를 사용하여 줄바꿈을 방지하곤 합니다. 저의 케이스의 경우 특정 문자열 수까지만 표시하고 싶었기 때문에 다른 방법을 이용했습니다. 다음과 같이 긴 문자열이 있다고 합시다. let str = 'Some very long string'; 특정 문자열 수보다 클 경우 substring을 이용하여 해당 문자열 수까지 문자열을 잘라줍니다. if(str.length > 10) str = str.substring(0,10); https://stackoverflow.com/questions/3414..