될때까지

🎯 알아둬야하는 개념 Runtime : 프로그램이 실행되는 환경, 서버단에서의 자바스크립트 런타임은 노드 Interpreter : 코드를 한 줄씩 읽어가면서 바로 기계어로 번역해 실행하는 방식 Python, Javascript Compile : 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정 C -> Assembly Java -> Bytecode Transpile : 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것 Compile의 Subset Typescript -> Javascript 🎯 Javascript VS Typescript 자바스크립트 타입스크립트 동적타입 런타임에서 타입이 결정됨 정적타입 인터프리터 컴파일러 독립적 사용 가능 자바스크립트에 의존 유연함 일..

타입스크립트를 사용하는 이유 자바스크립트는 동적 타입 언어로 런타임 때 타입이 결정되지만, 타입스크립트는 자바스크립트에 타입을 얹은 정적 타입 언어다. 타입스크립트는 컴파일 작업을 할 때 데이터 타입으로 인한 문제를 미리 알려주고 이로 인해 사전의 버그를 방지할 수 있다. Type // string, number, boolean let age:number = 30; let isAdult:boolean = true; // array let a1:number[] = [1,2,3]; let a2:Array = [1,2,3]; let week1:string[] = ['mon', 'tue', 'wed']; let week2:Array = ['mon', 'tue', 'wed']; // tuple let b1:[st..

🎯 실행 컨텍스트 유튜브 보고 정리한 포스팅 >>참고

🎯 동기와 비동기 동기(Synchronous) 현재 실행중인 코드가 끝나야 다음 코드를 실행한다. 현재 실행중인 작업이 끝날 때 까지 모두 동작 그만!! 다음 task는 대기한다. 장점 : 동기 처리는 코드를 순서대로 실행하기 때문에 실행 순서가 보장된다. 단점 : 현재 실행중인 task가 끝날 때 까지 다음 task는 실행을 못하며, task가 blocking되는 문제가 생긴다. 비동기(Asynchronous) 현재 실행중인 코드가 끝나지 않아도 다음 코드를 실행한다. 비동기 task는 실행하도록 브라우저에게 맡기고 다음 task로 넘어간다. 장점 : 블로킹이 발생하지 않기 때문에 여러개의 일을 처리할 수 있다. 단점 : 코드들의 실행 순서가 보장되지 않는다. 자바스크립트 엔진은 한번에 하나의 task..

자바스크립트 스터디 2번째 주제는 '실행 컨텍스트'다. 해당 개념은 파이썬을 공부할때도 접해본 적이 없었던 것 같은데.. 더욱 생소하게 다가왔다. 코어 자바스크립트 책을 읽기 전에, 생활코딩과 같은 여러개의 유튜브 영상을 시청하며 감을 잡고 있었는데 우아한 테크코스 테코톡에서 실행 컨텍스트 개념을 아주 잘 설명해줘서 해당 내용을 블로그에 정리해보려고 한다. => 하루의 실행 컨텍스트 🔥 자바스크립트엔진이 코드를 실행하는 방법 1. 자바스크립트 코드를 실행시키면 자바스크립트 엔진은 '콜 스택'이라는 통에 전역 실행컨텍스트를 담는다. 2. 실행 컨텍스트니까 Record와 Outer가 담겨있다. 3. 전역에서 함수 A를 호출하면 함수 A의 실행 컨텍스트를 생성하고 콜 스택에 담는다. 4. 함수 A에서 함수 B..

데이터타입 if({}=={}){ console.log(1) }; 자바스크립트 엔진은 memory heap과 call stack으로 구성되어있다. 자바스크립트의 데이터 타입에는 2가지가 있다. 기본형 : boolean, null, undefined, number, bigint, string, symbol 참조형 : object, array, function, 정규표현식 등 기본형은 불변값, 참조형은 가변값이다. 여기서 불변과 가변의 기준은 "메모리 영역"과 관련이 있는데 해당 키워드에 대해선 추후 정리하도록 하자. 위의 코드에서 object는 가변형이라고 했다. -> 따라서 비교중인 두 object는 각각 다른 값을 가르키기 때문에 if안의 조건이 false가 되어 콘솔에 1이 찍히지 않는다. truthy..

Split() string객체를 지정한 구분자를 이용하여 여러개의 문자열로 나눈다. const str = 'hello-node-world' const result = str.split('-') console.log(result) // [ 'hello', 'node', 'world' ]

map() 배열내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다. const a = [1,2,3,4] const b = a.map((result) => { return result + 1 }) console.log(b) result에는 1,2,3,4가 순서대로 담기고 해당 값에 +1을 해서 수정된 값이 반환되서 a에 담긴다 console.log(b)의 결과는 [2,3,4,5]가 된다.

본 포스팅은 생활코딩 HTML 영상을 보고 개인적으로 정리한 내용입니다. ✍️정리하기 #4 HyperText Markup Language은 쉽고 (많이 쓰이니까)중요하다. 웹을 만든 팀 버너스리는 저작권이 자유로운 public domain으로 선언했다. #5 웹의 확장자는 ‘.html’ 파일 선택하는 창 단축키 W:ctrl + 알파벳 ‘O’ / M:command + 알파벳 ‘O’ #6 강조(두껍게 표시) : 강조할 문구 밑줄(underline) : 밑줄칠 문구 tag : 옷의 태그는 옷에 대한 정보를 담고 있듯이 html에서의 tag도 똑같다. 그리고 열린태그, (슬래시가 붙은)닫힌태그 1쌍으로 이루어져있다. #7 제목(heading) : 제목 - 숫자가 작을수록 글씨가 크다. 두껍게와 줄바꿈 처리가 들..

자바스크립트에서 함수를 만들 때 사용하는 함수 선언식과 함수 표현식. 함수의 호출도 똑같은 방식으로, 함수의 이름을 호출하거나 변수이름을 호출하면 일어난다. 그렇다면 이 두가지는 어떤 점이 다른 걸까?! 당연한 사실이지만 문법 작성법과, 호출할 수 있는 타이밍이 다르다. 자바스크립트는 코드가 위에서부터 아래로 순차적으로 실행되고, 즉시 결과를 반환하는 "인터프리터 언어"다. 하지만 함수 선언문은 함수 생성 전이여도 함수를 호출하여 실행할 수가 있다는데, 어떻게 가능한걸까? 이번 포스팅에서는 함수 선언문과 함수 표현식, 그리고 추가로 화살표 함수에 대해 알아보고 호출 위치에 상관없이 함수가 실행될 수 있는 원리인 호이스팅까지 정리를 해보도록 하자. 1. 함수 선언식 - function 키워드를 이용해서 함..