FrontEnd 공부 (11) 썸네일형 리스트형 You don't konw JS - 5장 문법 5. 문법 & 자바스크립트 동작 환경 5.1. 문과 표현식 : 모든 문은 완료값을 가짐 var 문 자체의 완료 값은 undefined var a = 42 //undefined 블록{} : 내부의 가장 마지막 문/ 표현식의 완료값 var b; //undefined if(true){ b = 4+31; } // 35 → 완료 값을 포착하기 위해서는 ⁉️ do 표현식 이용 : 블록 실행 후 블록 내 마지막 문의 완료 값을 do 표현식 전체의 완료값으로 반환 - do 사용 이전 var a,b; a =if(true){ b = 1+23; } console.log(a); - do 사용 var a,b; a = do { if(true){ b = 1+23; } } console.log(a); 1)부수효과 유발 연산자 (1).. You don't konw JS- 4장 강제변환 4.1 값 변환 : 어떤 값을 다른 타입의 값으로 바꾸는 과정 → 명시적 : 타입캐스팅 - 코드만 봐도 의도적으로 타입변환을 일으킨다는 사실이 명확(명백한) → 암시적 : 강제변환 - 다른 작업 도중 불분명한 부수효과로부터 발생하는 타입변환() 강제변환시 문자열, 숫자, 불리언 같은 원시값 중 하나가 됨! 객체, 함수 같은 합성 값 타입을 변환될 일 ❌ → ‘박싱'은 값을 감싸는 것, 강제변환 ❌ var a = 123; var b = a + ""; //암시적 강제변환 var c = String(a); // 명시적 강제변환 4.2 추상연산 : 값이 특정 타입으로 변환되는 기본규칙 ToString ToNumber ToBoolean ToPrimitive 1) ToString : ‘문자열이 아닌 값'→’문자열'.. You don't konw JS- 3장 네이티브 네이티브 : 특정 환경(브라우저 등의 클라이언트 프로그램)에 종속되지 않은 ECAMScript 명세의 내장 객체 흔하게 쓰이는 네이티브 String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 1. 내부 Class : typeof 가 object 인 값 (array 등)에 존재하는 내부 프로퍼티 직접 접근 ❌ Object.prototype.toString()에 값을 넣어 호출 대부분은 해당 값과 관련된 내장 네이티브 생성자를 가리킴 var a = Object.prototype.toString.call([1,2,3]); console.log(a); //[object Array] 그렇다면 원시 값에도 내부 .. [Webstrom] 웹스톰에서 ESlint, Prettier 설정하기(Typescript 기준) 항상 프로젝트를 시작하면 하는 셋팅이지만, 약간씩 설정이 헷갈리고 대부분 VScode를 기준으로 적어놓은 글이 많기에 정리하고자 한다. 이글은 Webstorm에서 TypeScript를 기준으로 ESLint 와 Prettier를 설정하는 방법이다. 1. eslint + prettier 설치(typescript 기준) 우선 eslint와 prettier를 설치해주자. 아래 명령어를 프로젝트 터미널에 입력해주면 된다. 이는 TypeScript 기준이다. npm install --save-dev eslint prettier typescript 2. eslint에서 typescrtipt를 사용하기 위한 플러그인 설치 eslint에서 typescrtipt 사용을 위한 플러그인을 설치해주자. npm install -.. 브라우저에 google.com을 입력한다면? 브라우저에 google.com을 입력하면 어떻게 될까? 당연히 google 사이트로 이동할 것이다. 그렇다면 브라우저는 어떤 과정을 통해서 google사이트를 보여주는 것일까? 1. 도메인 주소 변환 : 도메인 주소 → IP 주소로 변환 우선 입력창에 google.com을 입력하면, 컴퓨터는 도메인 주소를 IP주소로 바꾸려 할 것이다. 이때, 이용하는 것이 바로 DNS 레코드이다. DNS는 일종의 전화번호부 라고 생각하면 된다. 컴퓨터는 각각 고유의 IP 주소를 가지고 있다. 우리가 흔히 다른사람의 전화번호를 다 외우고 다니지 않는 것처럼, 일일히 IP 주소를 기억할 수도 없기에, 도메인 네임별 IP를 저장해 놓은 것이 DNS라고 생각하면 될 것이다. DNS 레코드를 찾기 위해서는 이전에 방문한 기록이 .. 싱글스레드인 JS에서 비동기 처리는 어떻게 할까?(3) 저번 아티클에서 JS가 지원하는 비동기 방식인 콜백 함수와 Promise에 대해 알아보았다. 이번에는 나머지 asinc/await에 대해 알아보고자 한다. 지난시간에 알아 보았던 프라미스를 async와 await라는 특별한 문법을 사용해 좀 더 편하게 사용할 수 있다. async 함수 async는 function 앞에 위치한다. async function f() { return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 값을 감싸 이행된 프라미스가 반환되도록 한다. 아래 예시의 함수를 호출하면 result가 1인 이행 프라미스가 반환된다. async function f(.. You don't konw JS- 2장 값 1. 배열 : 1개의 변수에 여러개의 값을 순차적으로 저장할 때 사용 타입 : 객체(Object) Array 생성자로 생성된 Array타입의 객체 (1 )배열 생성 배열 리터럴 (➕ 리터럴 : 프로그램의 코드상에 데이터의 값을 표현하는 방식) 0개 이상의 data를 []로 묶음 첫번째 값은 인덱스 ‘0’으로 접근 빈슬롯 주의! → 존재하지 않는 요소에 접근하면 undefined 반환 var a = ['red','yellow','orange','green','blue','purple']; console.log(a.length); //6 console.log(a[7]); //undefined 대부분의 언어는 같은 타입만 가능 → JS : 여러 데이터 타입의 조합 가능 배열도 하나의 객체 : 키/ 프로퍼티 추.. 싱글스레드인 JS에서 비동기 처리는 어떻게 할까?(2) 저번 아티클에서 JS에서 어떻게 비동기 처리는 하는지 알아보았다. 이번 시간에는 JS가 지원하는 비동기 방식에 대해 알아보고자 한다. JS가 지원하는 비동기 처리 방식에는 대표적으로 콜백 함수, Promise, async/await 가 존재하는데, 이중 콜백 함수와 Promise에 대해 알아보자. 콜백 함수를 통한 비동기 처리 비동기(Asynchronous) 함수란 쉽게 설명하면 호출부에서 실행 결과를 가다리지 않아도 되는 함수이다. 반대로 동기 함수(Synchronous) 함수는 호출부에서 실행 결과가 리턴될 때 까지 기다려야 하는 함수다. 비동기 함수의 이러한 Non-blocking 이점 때문에, 자바스크립트처럼 싱글 쓰레드 환경에서 실행되는 언어에서 광범위하게 사용된다. 예를 들어, 브라우져에서 어.. 이전 1 2 다음
