Youngble_개발스토리

웹페이지가 로드될때, 브라우저는 그 페이지의 DOM(Document Object Model)을 생성한다. HTML DOM 모델은 객체들의 트리구조로 구성되어있다. HTML DOM이 있다면, 자바스크립트는 HTML document의 모든 요소들(elements)에 접근할수있고 바꿀수있다. 객체모델이 있다면, 자바스크립트는 동적인 HTML을 생성할때 필요한 모든 권한을 가진다: JavaScript can change all the HTML elements in the page (모든 요소 변경가능) JavaScript can change all the HTML attributes in the page (모든 속성 변경가능) JavaScript can change all the CSS styles in the..

호이스팅에 관하여 알아야하는 정보중에 알면 좋은 정보는 함수선언문과 함수표현식 이다. 함수선언문 function a(){ ... 실행 코드 } a(); 함수선언문은 function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미한다. 호이스팅시 함수선언문은 함수명, a 가 곧 변수명으로 생각하고 실행된다고 생각하면된다. 함수표현식 정의한 function을 별도의 변수에 할당하는 것을 말한다. 함수선언문은 함수명이 반드시 정의되야 하는 반면, 함수표현식은 정의를 해도 되고 안해도된다. 이때 함수표현식은 기명 함수표현식, 익명 함수표현식으로 두가지로 나뉜다. 만약 함수명을 정의했다면 기명, 하지않았다면 익명 함수표현식이라고 정의하였다. 익명 함수표현식 var b = function(){ // 익명 함수..

실행컨텍스트 실행컨텍스트(execution context)에는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체인데 어떤 실행 컨텍스트가 활성화되는 시점에서 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행하는데 이로인해 다른언어에서는 발견할수없는 특이한 현상들이 발생한다. 이때 실행컨텍스트의 실행할 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택, call stack에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다. 실행 컨테스트의 콜 스택 실행 순서 예시 코드 //-----(1) var a = 1; function outer(){ fu..

객체를 복사할때 객체안에 직접적인 프로퍼티에 해당한다면 (1차복사, 얕은복사)값만 복사하여 복사한 객체의 프로퍼티값을 바꾸거나 원본객체의 프로퍼티값을 바꿔도 서로 같은것을 참조하지않기 때문에 서로 다른값의 프로퍼티가 된다. 하지만 객체 안의 프로퍼티가 또다른 객체를 가지고 있다면(2차 복사, 깊은복사) 이는 깊은 복사가 필요하다. 만약 깊은복사를 하지않는다면 원본객체에서 값을 바꾸면 복사된 객체에서도 값이 바뀌게 된다. 즉 불변객체를 만들어줘야한다. 이때 깊은 복사하는 방법은 몇가지 있다. 1. 재귀함수 var copyObject = function(target){ var result ={}; if(typeof target==='object'&& target!==null){ for(var prop in ..

“strict” 이 옵션을 true 로 하면 아래 사진처럼 strict 아래 다른 옵션들을 하나하나 true로 한설정과 같은 결과이다. 아래를 일일이 설정하는경우는 분명히 false를 설정할때가 있기때문이다. 그러면 이 옵션은 무엇을 설정 하는것인가? “noImplicitAny” noImplicitAny는 더나은 코드를 작성하는데 도움을 주는 흥미로운 옵션이다. 다음과 같이 data를 인자로 받고 콘솔로그로 출력하는 함수를 만들었고 ‘The data’ 라는 string 문자열을 인수로 넘겨주었다. 하지만 다음과 같이 any type으로 에러가 뜨는걸 알수있는데 이게 noImplicitAny 옵션이다. 매개변수로 넘겨주는 값이 어떤 타입인지 명확히 알리지 않았기 때문에 타입스크립트가 어떤 정보인지 알수없어..

“allowJs” allowJs는 checkJs와 함께 타입스크립트가 자바스크립트 파일을 컴파일할수 있도록 해준다. 파일이 ts로 끝나지 않더래도 타입스크립트는 컴파일할수있다. “checkJs” checkJs는 타입스크립트가 컴파일을 수행하지 않더래도 구문을 검사하고 잠재적인 에러를 보고해준다. ts파일을 비롯된 js파일에 대해 컴파일을 두번 중복해서 수행할 필요가 없도록 한다. 그런데 만약 프로젝트가 타입스크립트를 전혀 사용하지않거나 바닐라자바스크립트 파일과 타입스크립트파일 병행해서 함께 검사하고 싶은 경우 사용하면 된다. “declaration” .d.ts 파일은 프로젝트를 라이브러리로 배포할때 중요한 고급 개념이다. 프로젝트의 모든 타입을 설명하는 manifest 파일이 필요한데 이것이 d.ts 파..

매번 해당 ts 파일을 tsc ~~.ts 한다면 큰 프로젝트일 경우 여러 업데이트된 ts 파일을 일일이 하기 번거롭다 따라서 편의성을 위한 컴파일 기능을 설명하고자한다. npm start 을 통해 자동으로 변경된 사항을 로컬3000에 불러온다지만 여전히 tsc 로 커맨드를 입력해야한다. 이럴때 사용하는것이 관찰(watch)모드이다. 관찰모드(Watch) 타입스크립트가 파일을 관찰하고 파일에 변경된 사항이 있을때마다 다시 컴파일하게 된다. 처음 커맨드 입력 방법은 tsc ~~.ts --watch 또는 tsc ~~.ts -w 입력하여 해당 ts파일을 관찰모드로 진입한다. 이때 끄는 방법은 기존과 똑같이 control+C 를 눌르면된다. 하지만 이러한 관찰모드역시 파일을 직접적으로 지정해야 한다는것이다. 따라..

타입스크립트는 컴파일 과정에서 에러를 잡아내기 때문에, 기존에 런타임에서 발생하던 에러를 개발단계에서 핸들링 할 수 있게 된다. (자바스크립트 사용시에는 런타임 환경에서 실행전까지는 에러 확인할 수 없는데..) 또한 생각해보면 새로운 개발자가 합류하거나 기존의 팀에서 코드수정을 하기위해서 코드를 볼때 타입이 결정되어있어서 코드리뷰를 할때 좀더 직관적으로 어떤 변수,함수 인지 정확히 알수있다는것이다. 만약 다른사람이 잘못쓰더래도 바로 컴파일에러로 보여주기때문에 코드 수정이나 fix 하기가 자바스크립트보다 훨씬 좋다는것이다. 사용자정의 타입 사용자가 임의로 타입을 변수에 담아 만들어놀수있다. type Combinable = number | string; type num = number; type str = ..

자바스크립트 cs관련 설명이 머무 좋아서 일부내용을 퍼왔다 출처: [JavaScript] 런타임 작동 방식, 비동기와 이벤트 루프 - 하나몬 ⚡️ [JavaScript] 런타임 작동 방식, 비동기와 이벤트 루프 ❗️알아볼 키워드 자바스크립트란? 자바스크립트 V8 엔진이란? 자바스크립트 런타임이란? 자바스크립트 싱글 스레드 기반 프로그래밍 hanamon.kr 자바스크립트와 싱글 스레드 자바스크립트는 싱글 스레드 프로그래밍 언어이다. 👉 스레드란? (single thread = 한 가닥) 스레드의 사전적 의미는 한 가닥의 실이라는 뜻이다. 한 가지 작업을 실행하기 위해 순차적으로 실행한 코드를 실처럼 이어 놓았다고 해서 유래된 이름이다. 싱글 스레드란 하나의 프로그램에서 동시에 하나의 코드만 실행할 수 있다..

void -> return 이 없기때문에 void, printResult 함수호출로 콘솔로그 찍히는건 별개로 console.log(printResult(5,12)) 식으로 쓰면 undefined 출력 return이 없기때문 -> return; 을 넣어줘도 에러없이 잘됨 number string -> Undefined 도 타입중 하나로 위 처럼 someValue 변수를 명시적 타입을 정하면 영원히 undefined 타입이다. 만약 위의 반환 return이 없어 void 로 정해진것이 출력해보면 undefined 라고해서 : undefined 라고하면 undefined도 타입이기때문에 return 이 있다고 타입스크립트는 해석하게된다.