Javascript9 [JS] 자바스크립트 typeof 연산자 오렐리 자바스크립트 책을 읽다가 전에 궁금했었던 typeof 연산자 리턴 값에 대해 다시 알게 되어서 정리해두려 한다. 일단, typeof 연산자를 사용할 때 리턴값은 아래와 같다. x typeof x undefined undefined null object true or false boolean 숫자 or NaN number BigInt bigint 문자열 전체 string 심벌 전체 symbol 함수 전체 function 함수가 아닌 객체 전체 object 예상외 반환값을 가진건 null이었음. -> 왜 그런지는 책에도 명확하게 나와있지 않아서 잘 모르겠는데, mdn을 보면 .즉, 변수가 아무런 객체를 가리키지 않음을 표현합니다. API에서는 null을 종종 관련된 객체가 존재하지 않을 때 그 객체 .. 2022. 9. 23. [JS] 객체 접근방식 & ES6 객체 리터럴 신문법 [ 객체 접근방식 ] 1. 초기화 표현식 - 객체 초기화 표현식 let obj = { x:1, y:1 } - 배열 초기화 표현식: let arr = [1,2,3] 2. 객체 접근 방식 : 객체에 접근하는 방식은 2가지가 있음. 1) obj.x 2) obj[x] 두 가지의 차이점은? : 프로퍼티 이름에 스페이스, 구두점이 있거나, 고정값이 아닐 때 반드시 대괄호로 접근해야 함. 2-1. 조건부 프로퍼티 접근 : JS에서 프로퍼티 값으로 가질 수 없는 2가지 값 => null, undefined 해당 값으로 프로퍼티 값이 평가될 때 타입 에러 발생. 타입에러 발생하지 않게 접근하는 방식이 조건부 프로퍼티 방식 1) obj?.x 2) obj?.[x] ?를 옵션 체인이라고 한다. 어떤 원리로 동작하는 건지? l.. 2022. 9. 15. [JS] Fetch API(1) 🐳 요즘 리액트 쿼리 공식문서를 조금씩 읽어보고 있는데 fetch 라는 단어가 나올 때마다 약간 모호하게 이해되어서 mdn사이트에서 의미를 찾아보게 되었다. 이해한 내용을 바탕으로 정리해두려고 글을 남긴다. ---- 최신 웹에서 전체 페이지 로드 없이 웹 페이지 섹션을 업뎃하는 것이 일반적이다. 이걸 가능케하는 건 fetch api 때문임. 웹에서 페이지를 로드하는데(브라우저가 페이지를 화면에 나타내는데) 는 필요한 파일에 대해 서버에 하나 이상의 http 요청을 하고 서버가 요청된 파일로 응답하게 된다. 사용자가 다른 페이지를 방문하면 브라우저는 새 파일을 요청하고 서버는 이에 대해 응답한다. 위 그림의 의미는 => 데이터 요청을 하면, 모든 데이터를 응답한다는 뜻인거 같음 이건 많은 사이트에서 완벽하.. 2022. 6. 16. [Web] Critical Rendering Path 🔷 DOM + CSSOM 브라우저가 페이지를 렌더링 하려면 DOM과 CSSOM 트리를 생성해야 한다. 성능이 좋은 웹페이지를 만들기 위해서 최대한 빨리 HTML, CSS를 브라우저에 제공해줘야 한다. 작성한 코드는 브라우저에서 작동할 수 있게 변환되는데, HTML -> DOM // CSS -> CSSOM으로 변환된다. HTML로 마크업된 코드가 DOM으로 변환되기 까지 아래와 같은 과정을 거친다. Hello web performance students! 1. Bytes 브라우저가 HTML의 원시 바이트를 읽어와서 해당 파일에 대해 지정된 인코딩에 따라 개별 문자로 변환한다. 2. 토큰화 브라우저가 문자열을 웹 표준에 지정된 고유 토큰으로 변환한다. 3. 렉싱 토큰은 해당 속성 및 규칙을 정의하는 객체로 .. 2021. 12. 14. [JS] 동기(Synchronous), 비동기(Asynchronous) 프로그래밍(+Promise) 동기, 비동기 프로그래밍은 코드가 실행되는 순서의 차이가 있다. 이 두가지 개념을 기차에 비유해 보자면, 아래 그림과 같다. 동기 프로그래밍은 앞 기차가 가기 전까지 뒤 기차들은 순서를 기다려야 하는 것과 같다. 비동기 프로그래밍은 앞 기차가 가길 기다리지 않아도 되고 다른 경로로 이동해서 최적의 선로를 찾아 운행되는 것과 같다. 즉 동기는 하나의 코드가 실행되기 끝나기를 기다려야 다음 코드가 실행될 수 있는 것이라면, 비동기는 한 코드의 실행시간이 길어질 때 다음 코드들도 동시에 실행 되는 것이다. console.log('1번기차 출발') setTimeout(() => { console.log('2번기차 출발')}, 3000) console.log('3번기차 출발') 2번기차가 출발하는 것을 기다리지 .. 2021. 12. 3. [JS] 자바스크립트 동작원리 자바스크립트는 Single thread방식으로 한번에 한줄의 코드가 실행된다. console.log('1') console.log('2') console.log('3') 코드를 실행하면, 당연히 아래와 같은 결과로 출력될 것이다. 만약, 바로 실행할 수 없는 setTimeout함수를 사용하면 위 코드처럼 순서대로 실행될까? 아니다. 자바스크립트는 setTimeout과 같이 바로실행 할 수 없는 Ajax, eventListener함수를 만나면 제외하고 바로 실행가능한 코드를 먼저 실행한다. console.log('hello') setTimeout(() => { console.log('timeout')},2000) console.log('bye') 코드를 작성한 순서대로 실행되지 않는 것을 확인할 수 있다... 2021. 12. 2. 이전 1 2 다음
