코딩고블린 개발블로그 코딩고블린 개발블로그

서버사이드 랜더링, SSR Server-side rendering 서버사이드 랜더링 클라이언트사이드 랜더링 장점 서버로 부터 완성된 웹 페이지를 전달 받기 때문에 검색엔진에 수집, 노출되는데 유리하다. 접속시, 빈 페이지를 먼저 읽어들이기 때문에, 검색엔진에 컨텐츠가 노출되기 어렵다 단점 서버리소스, 스펙이 중요하다. (서버의 요청-응답 속도 등) 필요하지 않은 나머지 페이지(컴포넌트) 코드까지 한꺼번에 읽어들여야 하기 때문에 경우에 따라 초기 로딩속도에서 SSR보다 불리할 수 있다. *적절한 코드 스플리팅으로 해결 가능 리액트에서 서버사이드 랜더링을 하는 방법 1) 직접 세팅 Webpack 커스텀으로 빌드 경로 등을 커스텀 Node express 으로 페이지 라우터 제작 코드 스플리팅 2) Next.j..

규칙기반 머신러닝 Rule-Based Machine Learning 주어진 예제(example)에 대해서 가설(hypothesis)을 만들고 결과(concept)을 도출하는 방법이다. (귀납적 사고방식) 가설을 최대한 일반화 하기위해, Find-S 알고리즘, Version Space / Candidate 알고리즘 등을 차용한다. 1) Find-S 알고리즘 Positive 예제(Instance)에서 추출한 가장 구체적인 가설로부터 시작하여, 점점 General한 가설을 찾는 방법이다. positive tranning example 만 선별하여 적용한다. 특정 예제로부터 도출된 결과를 그 다음 예제에 적용을 반복하여 변경된 부분만 don't care condition으로 변경하고, 최종적 가설 h 를 만들어..

THIS Javascript에서 This란, 어떤 공간에서 정의, 호출되느냐에 따라 다르게 추론한다. 컨텍스트가 생성 될 때, 그 환경에 따라 그 값이 다르게 정의된다. 전역 공간 window, global 함수 내부 window, global 호출된 메소드 메소드를 호출한 객체, 함수 Callback 함수 전역 객체 (제어권을 가진 함수를 통해 명시적으로 this 를 바인딩 할 수 있음 ex. call / apply / bind) 생성자 함수 인스턴스 Call / Apply / Bind 자바스크립트에서 함수가 가진 기본 메소드로, 현재 함수 실행환경의 this를 외부 함수의 this로 대체해 사용할 수 있도록 하는 프로퍼티다. 보통의 함수가 호출형태에 따라 this가 달라지는 반면, call,apply..

실행 컨텍스트 (Context) 실행 컨텍스트란, 코드의 흐름(문맥)이나 함수 동작에 필요한 환경 정보가 담긴 객체를 지칭한다. 자바스크립트에서는 다음과 같이 분류할 수 있다. 전역 컨텍스트 : 프로그램의 모든 코드, 동작 환경을 포함하는 전역 환경이다. 프로그램 (혹은 페이지)가 종료 될 때 까지 유지된다. 함수 컨텍스트 : 함수를 호출 할 때 지정되는 함수 동작 내부 환경 컨텍스트의 실행 과정 (생성 -> 실행) 전역 컨텍스트의 생성 과정 1. 전역 코드에 진입 및 전역 객체 생성 2. 전역 스코프체인 생성(초기화) 3. 변수 객체화 4. this value 지정됨 (초기값: 전역객체 혹은 window) 함수 컨텍스트의 생성 과정 1. 함수 선언 시 함수 스코프 체인 생성 2. 변수, 인자(argum..

Hooks 란? 함수형 컴포넌트에서도 상태(State)를 다룰 수 있도록 제공되는 API 리액트 16.8버전 업데이트 1) useState() 함수형 컴포넌트에서 state를 가질 수 있도록 하는 API 상태의 기본값을 인자로 넣어주며 상태값 – 상태를 설정하는 함수를 쌍(배열) 로 반환한다. 상태가 변경 될 때 마다, 컴포넌트가 다시 랜더링 된다. const [value, setValue] = useEffect(‘initialValue’); 2) useEffect() 컴포넌트가 랜더링 될 때 마다, 원하는 작업을 수행 할 수 있도록 하는 함수 함수의 두번 째 파라미터로 특정 state를 넣는다면, 해당 상태가 업데이트 될 때 마다 함수가 실행된다. 만약 빈 배열을 넣을 경우 첫 랜더링 시에만 실행된다...

Immutability 객체가 생성된 이후 그 상태를 변경하지않는, Immutable(이뮤터블) 하게 다루는 디자인 패턴이다. 리액트에서는 시간적 비용이 어느정도 들더라도, 객체를 불변객체로 만들어 프로퍼티의 직접적인변경을 방지하고, 객체의 변경이 필요한 경우에는 새로운 객체로 복사하여 그 값을 다루도록 한다. 특히 리액트에서는 상태(객체)를 참조 형태로 전달하고 전달받기 때문에, 참조를 통해 전달된 객체들이 예기치 않게 변경되었을때, 프로그램 전반적으로 큰 오류를 야기하는 가능성이 있다. 변경이 이루어진 해당 객체를 구독하고있는 모든 컴포넌트와 로직에 영향을 끼친다. 객체, 상태의 불변성을 유지하며 객체를 합성하는 방법들 1) 스프레드 연산자 활용 handleClick(){ this.setState(s..

이터러블 - 이터레이터 (Iterable - Iterator) 프로토콜이란 ? 반복 가능한 객체를, 이터레이터로 순회할 수 있도록 하는 규약이다. 이터러블 (Iterable)객체 란 반복 가능한 객체, 이터레이터를 가지고있는 객체이다. 자바스크립트에서는 array, typedArray, string, map, set 등이 대표적인 이터러블 객체이며, Object property 로 하나의 Symbol.interator()를 가지고 있다. For of 문, 전개 연산자등을 통해 순서대로 순회 할 수 있다. 이터레이터? next() 매서드를 통해 배열을 순회할 수 있는 객체이다. next()는 {done: boolean, value: any} 라는 값을 반환하며, done 이 true를 반환 할 때까지 객체..

프로미스(Promise) 란? 프로미스는 비동기 함수의 처리 결과, 그 자체 를 나타내는 자바스크립트의 내장객체이다. 비동기 메서드의 동기 매서드처럼 처럼 반환 하여 사용 할 수있다. 비동기 작업이 완료되었을때 호출하는 .then 이라는 API를 사용하여 콜백함수들을 체이닝하여 순차적으로 다룰 수 있다. 프로미스의 상태 pending : 처리가 완료되지 않은 상태 fulfill : 처리가 완료되어 프로미스가 결과값을 반환한 상태 .then() 를 통해 처리된 값을 순차적으로 다룰 수 있다. reject : 처리가 실패하거나 오류가 발생 콜백과 프로미스 차이 Callback 패턴 다른 함수에 콜백 함수의 제어권을 단순히 위임 후에 다른 task를 수행한다. 수행 소요 시간이 얼마나 걸릴 지 모르는 네트워크..