Java Script
-
자바스크립트와 이벤트 루프Java Script/기본 개념 정리 2021. 1. 14. 01:49
자바스크립트와 이벤트 루프 위키에 따르면, 이벤트 루프에 대해 아래와 같이 설명하고 있다. 컴퓨터 과학에서 이벤트 루프는 프로그램의 이벤트나 메시지를 대기하다가 디스패치(효율적으로 처리)하는 프로그래밍 구조체 일반적으로 이벤트가 도착할 때까지 요청을 차단하는 일부 내부 또는 외부의 이벤트 제공자에게 요청한 다음 관련 이벤트 핸들러를 호출(이 때 이벤트를 디스패치) 이벤트 제공자가 선택 또는 polling되는(유닉스 시스템 호출에서 실제로 폴링되지는 않음) 파일 인터페이스를 따르는 경우 이벤트 루프는 반응자와 결합해서 사용할 수 있다. 이벤트 루프는 거의 무조건 메시지 제공자와 비동기식으로 동작 반응자 동시에 들어오는 서비스 처리 요청을 관리하는 이벤트 처리 패턴 이벤트 루프에 대해 어느정도 감이 잡혔으니..
-
React) styled-componentJava Script/React 2020. 11. 4. 00:27
styled-components props 값으로 전달 값을 스타일에 입힐 수 있음 import React from 'react'; import styled, { css } from 'styled-components'; const Box = styled.div` /* props로 넣어준 값을 직접 전달해줄 수 있음 */ background: ${props => props.color || "blue"}; padding: 1rem; display: flex; `; const Button = styled.button` background: white; color: black; border-radius: 4px; padding: 0.5rem; display: flex; align-i..
-
React) useMemo & useCallbackJava Script/React 2020. 11. 4. 00:23
useMemo 함수형 컴포넌트 내부에서 발생하는 연산 최적화에 사용 useMemo를 이용해서 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하도록 설정 의존성이 변경되었을 때만(배열로 전달한 값이 변경되었을 때만) 메모이제이션된 값만 다시 계산해준다. (반환한다) const colorMemo = useMemo(() => getColor(color), [color]); const movieGenreMemo = useMemo(() => getMovieGenre(movie), [movie]) ; 이 경우는, color값이 변경되면 getColor 함수만, movie값이 변경되면 getMovie함수만 호출된다. useCallback 렌더링 성능을 최적화 해야하는 상황에서 사용 ~> 이벤트 핸들러 함수를..
-
React Hooks 알아보기Java Script/React 2020. 11. 4. 00:20
Hooks React v16.8에 새로 도입된 기능 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도움 리액트 매뉴얼에 따르면, 기존의 클래스형 컴포넌트는 앞으로도 계속해서 지원될 예정 하지만, 함수형 컴포넌트와 Hooks 사용 권장 ~> 첫번째 옵션으로 염두하기(미션 요구사항과 부합) 종류 useState, useEffect, useReducer, useMemo, useCallback, useRef, customHook useState : 컴포넌트에서 가변적인 상태를 핸들링하도록 돕는 Hook useReducer : 다양한 컴포넌트 상황에 따라 다양한 상..
-
React 컴포넌트 알아보기Java Script/React 2020. 11. 4. 00:05
컴포넌트 컴포넌트의 기능은 단순한 템플릿 이상 함수형 컴포넌트, 클래스형 컴포넌트 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 장점 state 기능 및 라이프사이클 기능을 사용할 수 있음 임의 메서드를 정의할 수 있음 함수형 컴포넌트 const MyComponent = () => { const name = 'zin0'; return ( {/* 주석 맞지? */} 반갑다 {name} ); } export default MyComponent; 장점 컴포넌트 선언이 훨씬 편함 메모리..
-
JSX란 무엇인가Java Script/React 2020. 11. 3. 23:58
JSX 프로젝트에서 컴포넌트를 렌더링하면, 함수에서 반환하는 내용을 나타냄. 함수 반환 값을 보면, HTML을 작성한 것 같지만, HTML도 아니고 문자열 템플릿도 아닌 JSX라고 부름 자바스크립트의 확장 문법, XML과 유사하게 생김 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태로 변환됨 가독성이 좋고 작성하기 쉽다는 장점이 있음 또한, component를 다른 component 안에 작성할 수 있음.(customize 가능) 주의사항 Component를 개발할 때는, DOM 트리 구조를 생각해야하기 때문에, 반드시 부모 태그(div, container, section 등)로 감싸서 return해야한다. 의미없는 div 대신 Fragment로 감싸서 이용할 수 있다. JS 문법을 이용할 수..
-
Async & Await , PromiseJava Script/기본 개념 정리 2020. 8. 17. 11:46
비동기란 ? 요청한 내용을 응답해 줄 것을 약속한다는 의미 즉, 요청과 응답이 바로 일어날 수도, 다른 시간대에 일어날 수도 있음 콜백함수란 ? 콜백이란 이름이 있는 것이 아니라, 함수의 사용 용도가 call / back인 함수를 의미한다. 클릭 이벤트가 발생할 때 출력되는 콜백 함수와 같은 말을 들어본 적이 있을 것이다. Promise란 ? promise로 구현된 비동기 처리 함수는 콜백을 예측 가능한 패턴으로 사용하도록 도와준다. 콜백 함수 안에서 생성된 프로미스 객체를 활용해 콜백함수가 성공,실패,오류 경우에 따라 후속 처리를 할 수 있다. 순차적이지 않은 비동기 함수의 실행 순서를 제어할 수 있게 도와준다. 콜백 패턴에 비해 코드 가독성이 좋고 반환된 결과물을 사용하기 편하다. Promise 작동..
-
함수형 프로그래밍Java Script/기본 개념 정리 2020. 8. 8. 17:20
함수형 프로그래밍 순수 함수를 작성하는 것 숨겨진 입력이나 출력을 최대한 제거하여 코드의 대부분이 입력과 출력의 관계를 기술 f(g(x))식의 수학적 표현을 컴퓨터 언어화 했다고 생각하면 편함 함수 중심 프로그래밍이라고 이해하면 편함 파이프 함수를 여러개 이용할 때, 가독성이 좋게끔 도와주는 기법 f(g(h(x)))와 같은 표현식을 pipe(f,g,h)와 같이 바꿔줌 순수 함수 파라미터를 주었을 때 데이터의 변화없이 항상 같은 값을 내보내는 함수 동일한 입력에 대해 항상 동일한 출력 범위 밖의 변수에 의존 X 함수가 참조 투명성을 지키고, (숨은 입력과 출력)부작용을 줄인다.(없다.) 불변성 (Immutable) 값이 변경되지 않는 것을 의미함. JS의 원시 타입이 이 불변성을 가지고 있음. Boolea..