본문 바로가기
반응형

전체보기83

[React] Immutable.js 활용한 onClick event onClick = id => () => { this.data = this.data.update('items', items => items.update( items.indexOf(items.find(i=> i.get('id') === id)), item => item.update('done',d=>!d) ) ) }; 2020. 7. 10.
[Javascript] Array.prototype.map 1. let arr = [1,2,3,4]; arr.map(i=>i+2); //[3,4,5,6] map은 리턴된 값들의 배열을 반환함. 2020. 7. 10.
접근자 프로퍼티(access property) 1. 자바스크립트는 '객체'기반의 스크립트 언어이다. '객체'는 영어로 'Object'이고, 이는 자바스크립트 타입의 거의 대부분을 구성한다. (원시타입 제외) 이러한 자바스크립트의 객체는 키(key)와 값(value)로 구성된 프로퍼티(Property)들의 집합이다. (https://poiemaweb.com/js-object) 프로퍼티의 키(key)에는 빈 문자열을 포함하는 모든 문자열 또는 symbol 값을 사용할 수 있고, 프로퍼티의 값(value)에는 배열, 함수 등 자바스크립트의 모든 값을 사용할 수 있다. 프로퍼티의 값이 함수인 경우는, '메서드'라는 명칭을 사용한다. 이러한 프로퍼티는 두가지로 나뉜다. 첫번째는 데이터 프로퍼티(data property) 이고, 두번째는 접근자 프로퍼티(acc.. 2020. 7. 5.
순수 객체 / 순수 함수 (Writing) 2020. 7. 5.
Immutable.js (Writing) 2020. 7. 5.
전역객체의 property javascript는 전역객체 window 가 존재한다. 전역 스코프 아래에서 객체를 선언할 때, let과 var은 차이를 보인다. let word1 = "apple"; var word2 = "banana"; 위의 코드를 작성하고 아래의 코드를 실행히켜보자. console.log(window.word1); console.log(window.word2); 이와 같은 결과가 나타난다. 이는 window 객체의 프로퍼티로 word1은 존재하지 않고, word2만 정상적으로 존재하는 것을 의미한다. 결론적으로 let은 전역객체의 프로퍼티로 추가되지 않지만, var은 전역객체의 프로퍼티로 추가된다. 2020. 7. 4.
Class의 this binding 우선 코드를 보자. var word = "good morning"; class helloWorld { word = "good evening"; greetings(){ console.log(this.word); }; } 이렇게 예시코드를 작성한 뒤, helloWorld 클래스를 생성자로 하는 새로운 객체를 생성해보자. let obj = new helloWorld(); 여기서 obj.greetings() 이렇게 메서드를 실행하면, this는 메서드를 호출한 객체인 obj에 binding 되기 때문에 "good evening" 이 출력된다. chrome 의 developer tool - console 에서 실행한 화면이다. 그렇다면 이제는 새로운 객체에 greetings 메서드를 할당하면 어떻게 될까? 아래와.. 2020. 7. 3.
[Javascript] Sync, Async 그리고 event loop Javascript를 사용하다보면, 동기와 비동기의 문제에 부딫힐 때가 많다. 또한 처리 시간이 필요한 함수, Crypto와 같은 암호화 함수나 Ajax 함수들은 Sync와 Async 가 나뉘어져 있어서, 정확히 이런 함수들이 나뉘어지는 원리에 대해서는 잘 알지 못한다. 이는 아마도 동기와 비동기의 개념에 대해서는 대충 알고 있지만, 정확히 작동하는 방식에 대해서는 잘 모르기 때문일 것이다. 그러므로, 자바스크립트의 작동 원리에 대한 이해가 필요하다. 먼저, 자바스크립트는 '단일 쓰레드' 상에서 동작한다. 이 말은, '자바스크립트' 자체는 한번에 한가지 작업 밖에 처리하지 못한다는 뜻이다. 그렇기 때문에, 이러한 '단일 쓰레드' 상에서 동기적으로, 즉 한번에 한 라인씩 코드를 처리한다면 어떻게 될까? 이.. 2020. 4. 10.
[Cheerio],[Axios] 모듈을 사용한 웹 크롤링 - 3 이전 포스팅에서는, Thebook 서비스의 책 내용에 해당하는 html을 크롤링하여 저장하는 함수까지 완성하였다. 현재로서는 프로젝트 루트에 ./fetching.js 만이 존재할 것이다. 마지막으로, fetching.js 로 크롤링한 Thebook의 책 내용을 읽기 편한 형태로 다시 렌더링하여 html response를 전송하는 express 서버를 제작해보려 한다. 일단. 프로젝트 루트에 ./app.js 파일을 하나 생성한다. 그리고 아래의 코드를 작성한다. ./app.js const express = require('express'); const loading = require('./fetching.js'); const app = express(); app.get('/book', (req, res, .. 2020. 4. 3.
[Cheerio],[Axios] 모듈을 사용한 웹 크롤링 - 2 이전 포스팅에서 책의 목차를 크롤링하여, 배열에 URL을 저장하는 작업까지 완료하였다. 현재까지의 코드는 아래와 같다. /fetching.js const axios = require('axios'); const cheerio = require('cheerio'); let $href = []; axios.get(`https://thebook.io/080212`) .then(dataa => { const $ = cheerio.load(dataa.data); $('section.book-toc>ul>li>a').each((index, item)=>{$href.push(item.attribs.href)}); console.log($href); }); $href 배열에는 아래와 같이 URL이 담겨 있다. 이 UR.. 2020. 4. 1.
반응형

티스토리툴바