본문 바로가기

Computer Programming/Javascript

Deep Dive 18-21 [함수와 일급 객체 | 프로토타입 | strict mode | 빌트인 객체]
Computer Programming/Javascript 2023. 10. 9. Deep Dive 18-21 [함수와 일급 객체 | 프로토타입 | strict mode | 빌트인 객체] 18장. 함수와 일급 객체 일급객체의 조건 - '무명'의 리터럴로 생성 가능(런타임에 생성), 변수나 자료구조에 저장 가능, 매개변수에 전달 가능, 반환값으로 사용 - 함수는 위의 조건을 만족시킴 * 런타임(할당 단계)에 함수 리터럴이 평가되고, 함수 객체가 생성되어 변수에 할당되는 과정이 가능!! function example() { return function() { //... return num; } } - 즉 함수를 객체와 동일하게 사용할 수 있음 (어디서든지 리터럴로 정의할 수 있고, 런타임에 함수 객체로 평가됨) - 그러나 일반 객체와는 차이가 있음 -> 함수 객체는 호출할 수 있고, 함수 고유의 프로퍼티를 소유함 - 프로퍼티는 Object.prototype 객체의 프로퍼티를 상속받은 것 (즉..
Deep Dive 12-17 [함수 | 스코프 | 전역 변수의 문제점 | let, const | 프로퍼티 어트리뷰트 | 생성자 함수에 의한 객체 생성]
Computer Programming/Javascript 2023. 10. 1. Deep Dive 12-17 [함수 | 스코프 | 전역 변수의 문제점 | let, const | 프로퍼티 어트리뷰트 | 생성자 함수에 의한 객체 생성] 12장. 함수 - 함수 : 일련의 과정을 문statement으로 구현하고, 코드블록으로 감싸서 하나의 실행단위로 정의한 것 - 함수 사용을 통해 유지보수의 편의성을 높이고 코드의 신뢰성을 높임 (+재사용성, 가독성 향상) - 자바스크립트에서 함수는 객체 타입의 '값'이다. 즉 함수 리터럴로 생성할 수 있으며 변수에 할당할 수도 있음 함수 정의 방식 1) 함수 선언문 (표현식 x, 문) function add(x,y){ return x + y } - 이름 생략 불가 - 표현식이 아닌 문statement이라서 원래는 변수에 할당할 수 없지만, 함수는 함수 리터럴 표현식이 될 수 있으므로 '문'임에도 변수에 할당할 수 있음 - 즉 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석되고, 피연산자로 사용하면 ..
Deep Dive 10-11 [객체 리터럴 | 원시값과 객체의 비교]
Computer Programming/Javascript 2023. 10. 1. Deep Dive 10-11 [객체 리터럴 | 원시값과 객체의 비교] 10장. 객체 - 객체: 원시 값을 제외한 나머지 값 , 변경 가능한 값 - 상태(프로퍼티)와 동작(메소드)을 하나의 단위로 구조화 함 - 생성 방법 : 객체 리터럴 사용하기 ({} 중괄호 안에 0개 이상의 프로퍼티 정의) 변수에 할당되는 시점에 자바스크립트 엔진이 객체 리터럴을 해석해 객체를 생성함 - 프로퍼티 키 동적 생성 : obj[key] = "value" - 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어씀 - 자바스크립트에서 함수 = 일급객체. 즉, 값으로 취급할 수 있기 때문에, 프로퍼티 값으로 사용할 수 있음 프로퍼티 접근 1) 마침표 표기법 person.name 2) 대괄호 표기법 person['name'] (키 네임을 따옴표로 감싸야 함 ..
Deep Dive 6-9 [데이터타입 | 연산자 | 제어문 | 타입변환과 단축 평가]
Computer Programming/Javascript 2023. 9. 30. Deep Dive 6-9 [데이터타입 | 연산자 | 제어문 | 타입변환과 단축 평가] 6장. 데이터타입 1) 원시타입 a) 숫자 타입 - 숫자 타입 값은 모든 수를 실수로 처리 (정수만 표현하는 타입 x) - 2진수, 8진수, 16진수로 표현해도 참조할 때는 10진수로 해석됨 - Infinity, -Infinity, NaN b) 문자열 타입 - 자바스크립트에서 문자열은 원시 타입이며, 변경 불가능한 값(immutable value)임 c) 템플릿 리터럴 - 런타임에서 일반 문자열로 변환되서 처리됨 2) 객체타입 ----------------- * 데이터 타입 필요성? 1. 메모리 공간 확보 -> 낭비, 손실 줄임 (데이터 타입에 따라 공간의 크기 결정) - 식별자를 통해 값이 저장되니 메모리 주소의 선두 메모리 셀 주소를 찾아감 -> 데이터 타입에 따라 선두~ 해당하는 셀 크기 만큼 읽어..
json-server 사용해보기
Computer Programming/Javascript 2023. 6. 30. json-server 사용해보기 json-server는 fake server의 대표적인 예시로, 간단한 DB와 API 서버를 생성해주는 패키지이다. BE에서 먼저 API server 가 구축되어야 FE에서 실제 데이터로 작업할 수 있기 때문에 만약 그 시간을 기다린다면 낭비가 될 것이다. 그래서 mock data를 이 json-server를 통해 생성하고 미리 작업하고 있을 수 있다. (배포까지 가능) npm install -g json-server 패키지 설치하고 최상위 폴더에 db.json 파일을 생성하고 아래의 json 방식의 코드를 입력한다. { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body"..
타입스크립트(TypeScript)의 특징
Computer Programming/Javascript 2023. 6. 27. 타입스크립트(TypeScript)의 특징 타입스크립트는 2012년 마이크로소프트가 발표한 자바스크립트를 기반으로 '정적 타입 문법'을 추가한 프로그래밍 언어이다. 타입스크립트는 매우 흔하게 사용되고 있어 최근 프론트엔드 개발자를 구인할 때 우대가 아닌 필수요소가 되었다고 한다. 대형 기업들은 타입 스크립트를 활발히 사용하고 있으며 그렇지 않은 기업들도 타입스크립트 사용을 고려하고 도입하고 있다. 1. 타입스크립트의 특징 1) 컴파일 언어, 정적 타입 언어 자바스크립트는 인터프리터 언어 (동적 타입)로, 런타임 시 오류를 발견할 수 있다. 그러나 타입스크립트는 정적 타입의 컴파일언어이며 런타임이 아닌 그 전에 타입스크립트 컴파일로 또는 바벨을 통해 자바스크립트 코드로 변환된다. 즉 명시적으로 변수, 함수, 객체등의 타입을 선언해야하고 타입 오류를..
자바스크립트의 Scope 스코프 (렉시컬 환경, 호이스팅, var, let과 const)
Computer Programming/Javascript 2023. 6. 19. 자바스크립트의 Scope 스코프 (렉시컬 환경, 호이스팅, var, let과 const) 목차 1. 스코프란? 1-1. 렉시컬 환경 2. 스코프의 종류 2-1. 스코프 체인 2-2. 함수 레벨 스코프 3. 전역 변수 3-1. 문제점 3-2. 해결방법 4. let과 const 4-1. 호이스팅 4-2. 무엇을 사용해야 할까? 1. 스코프란? ES6의 주요한 변화로 let과 const 키워드로 변수를 선언할 수 있게 되었습니다. 이는 var 키워드의 변수와도 차이점이 있으며, 이러한 스코프는 자바스크립트를 포함한 모든 프로그래밍 언어에서 사용되는 중요한 개념입니다. 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)은 자신이 선언된 위치에 의해 다른 코드가 식별자인 자기 자신을 참조할 수 있는 유효 범위가 결정되며 이를 스코프라고 합니다. 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙..
WIL - JS ECMAScript(ES)란? ES5와 ES6의 주요 발전
Computer Programming/Javascript 2023. 6. 18. WIL - JS ECMAScript(ES)란? ES5와 ES6의 주요 발전 오늘은 JS ECMAScript의 정의와 발전 과정, 특히 주요한 발전이었던 ES5와 ES6에 대해 공부했다. JavaScript가 웹 개발을 위해 가장 일반적으로 사용되는 '언어'라면 ES는 이 JavaScript의 기능과 문법, 객체 모델을 정의하고 있는 규격, 표준이라고 할 수 있다. ES5는 2009년에 출시된 ECMAScript 5의 줄임말로, JavaScript에 많은 개선을 가져온 주요한 규격이다. 1. ES5 - strict mode (엄격 모드)의 도입 : 코드 자성의 실수나 잠재적인 오류를 방지하기 위한 규칙 도입 - 배열 메소드 추가: forEach, map, filter, reduce 메소드 - JSON객체 - bind 메소드 등 ES6는 2015년에 출시된 ECMAScript 20..
Browser - 브라우저의 구조와 렌더링 과정
Computer Programming/Javascript 2023. 6. 15. Browser - 브라우저의 구조와 렌더링 과정 1. 브라우저의 구조 웹브라우저의 기능이 다양화되면서 많은 역할을 수행하고 있습니다. 그러나 웹브라우저의 근본적인 역할은 웹페이지를 다운받아 렌더링하여 화면에 보여주는 것입니다. - User Interface : 요청한 페이지를 보여주는 창 이외에 사용자가 컨트롤 할 수 있는 부분이다. (주소표시줄, 이전/다음, 새로고침 ...) - Browser Engine: 주소표시줄에 URI를 요청하는 등의 사용자 인터페이스를 렌더링 엔진에 전달해주고 동작을 제어한다. 또는 Data Persistence(자료저장소)에서 필요한 정보를 가져온다. - Rendering Engine : 요청한 URI를 브라우저엔진에게 받아서 server에 요청한다. 이후 데이터를 받아 파싱한 후 렌더링한다. (렌더링 과정은 2장에!) ..

티스토리툴바