자바스크립트

자바스크립트 Object.defineProperty()

Object.defineProperty() Object.defineProperty(obj, prop, descriptor) - 객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정하고 수정된 객체를 리턴 obj - 속성을 정의할 객체. prop - 새로 정의하거나 수정하려는 속성의 이름 또는 [Symbol] descriptor - 새로 정의하거나 수정하려는 속성을 기술하는 객체. 속성 서술자(descriptor)는 데이터 서술자(data descriptors)와 접근자 서술자(accessor descriptors) 두 가지 형식을 취할 수 있습니다. 데이터 서술자는 값을 가지는 속성을 기술할 때 사용합니다. configurable속성의 값을 변경할 수 있고, 객체에서 삭제할 수도 있으면 tru..

리액트 프레임워크 Next.js! Gatsby!

Next.js, Gatsby 알아보자 리액트 프레임워크 중 대표적인 것들을 비교해보자 https://nextjs.org/ https://www.gatsbyjs.com/ 공통점으로 리액트로 프로그램을 만들면 디폴트로 클라이언트 사이드 렌더링이 된다. 즉 유저가 웹 사이트로 이동한 후에 js를 다운 받고 리액트가 UI를 빌드하게 된다. -> 인터넷 문제가 있거나 js파일에 문제가 있거나 하면 유저는 빈 화면만 보게 된다. -> 리액트만 사용해 해결해도 되지만 이 프레임워크들을 서버사이드 렌더링을 통해 문제를 해결할 수 있다. CSR의 문제점 중 하나인 SEO에 대한 문제를 프레임워크를 쓴다면 사용자에게 보여질 콘텐츠를 포함하고 있는 HTML 문서를 응답으로 전달하므로 해결할 수 있다. 👍 Next.js N..

[자바스크립트] 자바스크립트로 웹 크롤링 하기

자바스크립트로 크롤링 하기 1. 크롤링 크롤링은 웹페이지 내용을 그대로 읽어와서 원하는 내용을 추출하는 작업. 2. 필요한 라이브러리 axios - http 호출을 더 편리하게 해주는 http 클라이언트 라이브러리. cheerio - 로드된 HTML을 파싱하여 DOM을 생성하는 라이브러리. 웹브라우저에서 제공하는 DOM인터페이스와는 사용 방법이 다르지만 구현된 기능 자체는 대부분 비슷해 CSS 셀렉터 문법을 사용한 검색이 가능 3. 코드 작성 네이버에서 오늘 읽을만한 글을 크롤링하고 싶다고 가정하자. const axios = require('axios'); const cheerio = require('cheerio'); async function main(){ // html ..

[자바스크립트] this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능하며 this가 가리키는 값은 호출 방식에 의해 동적으로 결정된다. // this는 어디서든지 참조 가능 // 전역에서 this는 전역 객체 window를 가리킨다 console.log(this); // window function square(number){ // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. console.log(this); // window return number * number; } square(2); const person = { name : 'lee', getName(){ // 메서드 내부..

[자바스크립트] 프로토타입 쉽게 이해하기

JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미입니다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지입니다. 이를 프로토타입 체인(prototype chain)이라 부르며 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Prototype은 클래스, 객체의 내용 복사 없..

자바스크립트 동작 원리

자바스크립트는 동기적이고 단일 스레드 언어다. 즉 한번에 하나의 작업만 진행할 수 있다. 하지만 자바스크립트의 구동 환경의 특성으로 인해 자바스크립트에서도 비동기가 일어난다. Memory Heap - 변수와 객체의 메모리 할당을 담당하는 곳 Call Stack - 함수가 호출이 되면 쌓이는 곳. 함수가 쌓이는 순서와는 반대로 실행 Web APIs - 브라우저에서 제공하는 APIs. 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 window나 element에 대한 간단한 작업에서부터 WebGL이나 Web Audio와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능 Event Loop - call stack이 비어있을 경우 callback queue에서 함수..

[자바스크립트] 옵셔널 체이닝

✅ 옵셔널 체이닝 연산자(?.) - ES11에 도입되었으며 좌항의 연산자가 null 또는 undefined인 경우 undefined를 반환하고, 아닌 경우 우항의 프로퍼티를 참조! - 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 유용 let ob = null; let cob = ob?.name; // 좌항의 연산자가 null 이기 때문에 undefined를 반환 console.log(cob) ob = {age:12}; cob = ob?.name; // 좌항의 연산자가 undefined 또는 null이 아니지만 객체 안에 name 프토퍼티가 없기 때문에 undefined 반환 console.log(cob) // undefined cob=ob?.a..

[자바스크립트] Promise

Promise Promise 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있는 Object로 콜백함수의 단점을 보완(fetch 함수는 Promise 객체를 리턴) Promise 생성자를 보면 executor라는 콜백 함수를 전달하는데 이 콜백함수는 또 다른 두가지의 콜백함수(기능을 정상적으로 수행해서 마지막에 데이터를 전달하는 resolve, 기능에 문제가 생기면 호출하는 reject)를 받는다. //promise를 만드는 순간 전달한 executor가 바로 실행(네트워크 통신을 작성한다면 바로 실행된다(원하지 않아도)) const promise = new Promise((resolve, reject) => { console.log('promise'); }); const promi..

[자바스크립트] this

this 1. this 키워드 객체 - 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조 가능하며, 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. this가 가리키는 값, 즉 this 바인딩(식별자와 값을 연결하는 과정)은 함수 호출 방식에 의해 동적으로 결정된다. // 객체 리터럴의 메서드 내부에서는의 th..