Persistence

render render: 컴포넌트를 html로 바꾸어 브라우저에 나타나게 하는 것 리액트의 컴포넌트는 클래스 기반, 함수형으로 나눌 수 있는데 클래스 기반 컴포넌트에서는 render함수를 반드시 호출해야 한다. import React, { Component } from 'react'; // destructing class SearchBar extends Component { // render 함수 호출 render() { return } } export default SearchBar; render함수는 위처럼 사용 한다. render() {} 컬리브라켓 안에 리턴이 있으며, 이때 반드시 JSX를 리턴해야만 브라우저에 보여진다. 상속받은 Component 는 destructing 한 것으..

Design Patterns Intro (in JS) Singleton Pattern 개념 싱글톤 패턴은 싱글 오브젝트에 대해 클래스 인스턴스를 제한하는 것이다. 생성자가 여러번 호출되더라도 처음 생성된 first 인스턴스가 반환된다. 예시 버튼 클래스가 있고, 버튼이 눌릴 때마다 횟수를 카운트 하고 싶다. 버튼은 여러 개이며 각각 눌리는 횟수도 다를 것이다. 이 때에 각 버튼을 별개의 인스턴스로 만든다면 컴포넌트 간 관계나 교류가 복잡해진다. 이 때문에 카운트 state가 부정확해질 가능성도 있으며, 어떤 버튼 인스턴스의 state를 보여줘야 할지도 분명하지 않다. 그러나 버튼은 여러개이지만 한 개의 인스턴스만을 공유한다면, counter state는 한 곳에서 업데이트되며 따라서 간결하고 정확하게 s..

Node File System Module readFile, readFileSync const fs = require('fs'); // file system fs.readFile('./hello.txt', (err, data) => { if(err) { console.log('errrrrrorr'); } console.log('1', data.toString('utf8')); // print second }) const file = fs.readFileSync('./hello.txt'); console.log('2', file.toString()); // print first readFile이 더 윗줄에 있지만 readFileSync보다 늦게 로그된다. 왜냐하면 readFile은 asyncronous이고..

Express.js const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send("getting root"); }) app.get('/profile', (req, res) => { res.send("getting profile"); }) app.post('/profile', (req, res) => { const user = { name: "Sally", hobby: "soccer" } res.send(user) }) app.listen(3000); // port express는 한줄 한줄 읽어서 시행한다. 첫 번째 요청의 경우 get method를 사용하여 그 url을 요청할 경우 {} 안의..

ES9 features Object spread operator const animals = { tiger: 23, lion: 5, monkey: 2 } const {tiger, ...rest} = animals; tiger // prints 23 rest // prints {lion: 5, monkey: 2} Finally const urls = [ 'https://jsonplaceholder.typicode.com/users', 'https://jsonplaceholder.typicode.com/posts', 'https://jsonplaceholder.typicode.com/albums' ] Promise.all(urls.map(url => { return fetch(url).then(resp =>..

Modules Inline Script의 문제점 Lack of code reusability 또다른 html파일을 만들 때에 복사 붙여넣기를 해야한다. Pollution of global namespace 전역변수를 선언함으로써 변수명이 겹치는 문제. html파일 내에 js를 작성할 때의 문제 Script tags 여전히 다른 html 파일을 만들려고 할 때 copy & paste를 해야 한다. Dependency Resolution 만약 1.js가 2.js에 있는 함수에 접근하려고 한다면 2.js파일은 아직 로드되지 않았기 때문에 에러가 난다. 스크립트 태그를 정렬할 때 순서를 잘 정하는 것이 중요하다. Pollution of global namespace 여전히 전역 네임스페이스의 오염 문제를 해결하..

How Javascript works 자바스크립트 엔진(ex. 크롬의 V8)은 Memory Heap과 Call Stack을 가지고 있다. Memory Heap Memory allocation이 이루어지는 곳. 예를 들어 전역변수를 선언하면 Memory Heap 안의 메모리에 할당된다. 그러나 저장되는 데에 한계가 있어서, 사용되지 않는 메모리가 늘어날 수록 memory leak이 생긴다. Global Variable이 바람직하지 않은 이유다. Call Stack console.log('4') // two함수 위에 위치 two() // one함수 위에 위치 one() // 스택 가장 아래에 위치 위에서부터 아래로 하나씩 실행되며 없어진다. (console.log -> one 함수 순. first in, l..

Return a Sorted Array without changing the Original Array var globalArray = [5, 6, 3, 2, 9]; function nonMutatingSort(arr) { return [].concat(arr).sort((a,b) => a-b); } nonMutatingSort(globalArray); A side effect of the sortmethod is that it changes the order of the elements in the original array. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that..

Prototype 자바스크립트에는 Prototype Link와 Prototype Object가 존재한다. 이를 통들어 Prototype이라고 한다. Prototype Object function Dog() {}; // 함수 var dogObj = new Dog(); // 함수로 객체를 생성 var obj = {}; // var obj = new Object(); 객체는 언제나 함수로 생성된다. 함수가 정의되면 Constructor 자격이 생긴다 Constructor 자격이 있어야만 new operator를 통해 객체를 만들어낼 수 있다. new는 함수만 쓸 수 있다. (즉 함수 -> Constructor -> new를 통해 객체 생성 가능) 함수가 정의되면 Prototype Object도 같이 생긴다.생..

Refactor Global Variables Out of Function1) Don't alter a variable or object - create new variables and objects and return them if need be from a function. 2) Declare function arguments - any computation inside a function depends only on the arguments, and not on any global object or variable. So far, we have seen two distinct principles for functional programming: Use the map Method to Extract ..

Functional Programming TerminologyThe functions that take a function as an argument, or return a function as a return value are called higher orderfunctions. When the functions are passed in to another function or returned from another function, then those functions which gets passed in or returned can be called a lambda. Functions that can be assigned to a variable, passed into another function..

A more efficient way is to set the prototypeto a new objectAdd the property numLegsand the two methods eat()and describe()to the prototypeof Dogby setting the prototypeto a new object.There is one crucial side effect of manually setting the prototypeto a new object. It erased the constructorproperty! To fix this, whenever a prototype is manually set to a new object, remember to define the constr..

ES7 'Helloooo'.includes('o'); // true const pets = ['cat', 'dog']; pets.includes('cat'); // true const sqaure = (x) => x**2 square(2); // 4 square(5); // 25 const cube = (x) => x**3 cube(3); // 27 ES8 .padStart() .padEnd() 'Turtle'.padStart(10); // " Turtle" 합쳐서 total 10 스페이스 'Turtle'.padEnd(10); // "Turtle " 합쳐서 total 10 스페이스 const fun = (a,b,c,d,) => { console.log(a); } fun(1,2,3,4,); // print..

let arr = [1, 2, 3, 4, 5]; let copyArr = [].concat(arr); arr[0] = 0; console.log(copyArr[0]) // 1(바뀌지 않음) primitive type이 immutable한 것은, 복사해오기 때문이다. 따라서 복사본을 수정해도 원본은 그대로 남아있게 된다. 반면 object, array는 단순히 복사하는 것이 아니라 주소를 참조하기 때문에 원본도 바뀌게 된다. 바뀌지 않게 하려면 primitve type이 하듯이 복사하는 방법을 사용한다. Shallow Copy let obj = {a: 1, b: 2, c: 3}; let clone = Object.assign({}, obj); let clone2 = {...obj}; obj.c = 5; c..

Currying - 하나의 패러미터만 받게끔 만드는 것 Compose - 뭐라 설명해야 할지.. // Avoding Side Effects, functional purity var a = 1;function b() { a = 2;} 함수는 작은 우주라고 생각하면 된다. 위 코드를 보면 함수 b가 함수 바깥에 영향을 끼치고 있는데 그것을 side effect라고 하고, 이것을 줄임으로써 functional purity를 획득할 수 있다. 이렇게 함으로써 'Deterministic'될 수 있는데 어떤 인풋을 넣더라도, 몇번을 시행하든, 리턴밸류가 항상 같다는 것이다. (console.log도 alert도 없고, undefined 되지도 않고, 항상 같은 밸류를 리턴) -> avoiding bug에 좋은 방법.