본문 바로가기

전체 글

 (262)
Js - 어휘적 환경(Lexical Environment)과 클로저(Closure) 목차 1. 어휘적 환경(Lexical Environment)란? 2. 실행 컨텍스트와 어휘적 환경 3. 어휘적 환경의 작동 방식 4. 클로저란? 5. 클로저 예시 1. 어휘적 환경(Lexical Environment)란? 코드 Block, Function, Script를 실행하기 앞서 생성되는 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 저장하는 객체이다. 코드를 실행하면서 참조가 필요한 변수의 값을 어휘적 환경 객체에서 식별자 이름을 키로 찾는다. 렉시컬 환경은 환경 레코드(Environment Record)와 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조로 구성되어있다. 환경 레코드 모든 지역 변수를 프로퍼티로 저장하고 있는 객체이다. this 값과 같은 기타..
Js - 스코프(Scope) 목차 1. 스코프란 2. 전역 스코프, 지역 스코프, 블록 레벨 스코프, 함수 레벨 스코프 3. 스코프 예시 4. 스코프 체인(Scope Chain) 5. 함수의 상위 스코프 결정 6. 함수의 실행 1. 스코프란 자신이 선언된 위치에 따라 본인의 유효범위가 결정된다. 변수 이름, 함수 이름, 클래스 이름과 같은 식별자가 자신이 선언된 위치에 따라 다른 코드에서 자신이 참조될 수 있을지 없을지 결정되는 것이다. 2. 전역 스코프, 지역 스코프, 블록 레벨 스코프, 함수 레벨 스코프 자바스크립에서는 전역, 지역 스코프가 존재한다. 전역 스코프 전역에 선언되어 있어 어느 곳에서든지 해당 변수에 접근할 수 있다. 지역 스코프 해당 지역 스코프에서만 접근할 수 있으며, 지역을 벗어난 곳에서는 접근할 수 없다. 블..
Web - 쿠키, 세션 스토리지, 로컬 스토리지 Htttp 프로토콜의 한계를 보안하기 위해 쿠키 또는 웹 스토리지를 이용한다. 비연결성지향(connectionless) Http는 클라이언트가 서버로 요청을 보내면, 서버는 클라이언트에게 그에 맞는 응답을 보내고 Tcp/Ip 연결을 끊는 특성이다. 무상태(stateless) 연결을 끊는 순간 클라이언트와 서버의 통신이 끝나며 상태 정보를 유지하지 않는 특성이다. 1. 쿠키(Cookie) 브라우저에 저장되는 키-벨류 형식으로 정보를 저장한다. 4KB의 용량 제한을 가지고 있다. 보안에 취약하기 때문에 중요한 정보를 노출해서는 안된다. 브라우저에 300개까지 쿠키를 저장할 수 있으며, 한 도메인당 20개의 쿠키를 가질 수 있다. Request Header에 자동으로 실려 서버에 전송된다. 쿠키의 종류 영구 ..
Js - 호이스팅 간단히 이해하기 호이스팅이란 코드를 실행하기 전에 변수와 함수의 선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니다. 코드를 실행하기 전에 변수와 함수의 선언을 해상 스코프의 최상단으로 올린 것처럼 보이는 현상이다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, let, const, function, class)을 스코프에 등록한다. 코드 실행 전 이미 메모리에 선언된 변수나 함수가 저장되어 있기 때문에 선언문보다 참조/호출이 먼저 나와도 오류 없이 동작한다. => var키워드와 함수 선언문만 오류 없이 동작하며(undefined), let, const 변수는 참조 오류가 발생한다. 선언이 코드 실행보다 먼저 메모리에 저장되는 과정으로 인한 현상이다. 변수의 호이스팅 모든 ..
Web - 브라우저 랜더링 과정 브라우저 랜더링 과정 1. 사용자의 접근 사용자가 브라우저를 통해 웹 사이트에 접속하면, Dns에 연결된 서버로부터 HTML, CSS, font, image 등 웹 사이트에 필요한 리소스를 다운로드 받습니다. 2. Html 파일과 Css 파일 파싱 (Parsing) Html과 Css 파일일을 파싱 하여 DOM(Document Object Model) Tree와 CSSOM(Css Object Model) Tree를 만든다. * 파싱 중 Js Script Tag를 만나면 브라우저는 파싱 작업을 일시 중지하고 Js 엔진에 제어권을 넘긴다. Js 코드를 로드, 파싱, 실행한다고 한다. 왜냐하면 DOM을 변경하는 행위가 있을 수 있기 때문이다. 이것이 HTML 파서가 HTML 문서를 다시 파싱 하기 전에 자바스크..
vue - 카카오내비 연동 웹뷰를 이용하여 프로젝트를 진행 중 네비게이션이 필요해서 카카오내비 api를 프로젝트에 반영하였다. 반영에 어려움은 없었으나 내용을 기록하고자 한다. *카카오내비를 이용하기 위해선 사용자가 카카오내비 앱을 설치하여야 한다. 1. index.html 파일에 kakao javascript sdk 추가하기 2. main.ts(main.js)에서 window객체에 kakao js key init ts를 이용한다면 main.ts 아니라면 main.js에 kakao js key를 init 한다. key는 보안 때문이라도 문자열 값을 그대로 넣는 것이 아닌 환경변수에 등록하여 사용하는 것이 좋다. // 카카오디벨로퍼에서 발급받은 js key window.Kakao.init(process.env.VUE_APP_KAKA..
Js - JSDoc 진행하던 프로젝트를 어느정도 마무리 지어 놓고나니 주석이 부족함을 느끼게 되었다. 효율적인 주석을 달기위해 구글링 결과 JSDoc에 대하여 알게 되었고 현재 프로젝트는 vue.js로 구현되어 있으며, Type Script를 사용하지 않아 타입 추론에 불편함이 존재하였다. JSDoc은 VsCode와 같은 에디터에서도 기능을 지원해준다고 하며 JSDoc을 이용하면 타입 추론도 가능해서 프로젝트에 반영 중 너무 편리한 기능인것 같아 기록하려 한다. JSDoc이란 JavaScript 소스 코드에 대한 설명을 하기 위해 사용하는 마크업 언어라고 한다. JSDoc의 주목적은 JavaScript 앱 또는 라이브러리 API를 문서화하는 것이며 모듈, 네임스페이스, 클래스, 메서드, 파라미터 등과 같은 항목을 문서화할때..
vue - watch로 object 감시(모니터링) 프로젝트 진행중 object안에 있는 값을 변경되는것을 감시해야할 일이 생겼다. 기존에 watch를 사용하던데로 작업을 진행하였으나, object를 감시하지 못하였고 이를 해결한 방법을 기술하고자 한다. - 기존에 watch를 사용하던 방법은 아래와 같다. 아래와 같은 방법으로 watch를 사용하였으나 object안에 있는 a, b 값이 변경되어도 watch는 동작하지 않았다. - 해결한 방법 구글링을 통하여 간단히 해결방법을 찾았다. 객체 속의 객체의 값에 대한 변경을 감시하기 위해서는 watch의 옵션인 deep: true를 설정하고, 변경에 관련한 데이터 처리는 handler에 기술한다고 하여 구현을 해보니 정상적으로 동작하였다. 이번 경험을 기반으로 앞으로는 잊지않고 잘 사용할 것 같다!

티스토리툴바