React

Diffing 알고리즘을 알려면 먼저 이 글을 읽고 VDOM에 대해 알고 와보자 React) Virtual DOM 가상 돔1. 문서 객체 모델 DOM 1.1 DOM DOM은 Document Object Model 의 약어이며, 메모리에 객체로 웹 페이지 문서 구조를 표현하는 방법이다. XML이나 HTML로 작성한다. DOM은 프로그래밍 언어가 트리 형태인 DOM 구조58cjdcns99.tistory.com 1. Diffing 알고리즘이란?리액트 공식문서(레거시)의 한 부분을 가져와 봤다.하나의 트리를 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있습니다. 하지만 이러한 최첨단의 알고리즘도 n개의 엘리먼트가 있는 트리에 대..

1. 문서 객체 모델 DOM 1.1 DOM DOM은 Document Object Model 의 약어이며, 메모리에 객체로 웹 페이지 문서 구조를 표현하는 방법이다. XML이나 HTML로 작성한다. DOM은 프로그래밍 언어가 트리 형태인 DOM 구조에 접근할 수 있는 방법을 제공해 특정 노드(문서, 구조, 스타일 등)를 찾거나 수정, 제거, 원하는 곳에 삽입할 수 있다. 웹 브라우저는 DOM을 활용해 객체에 Javascript와 CSS를 적용한다. API (web or XML page) = DOM + JS (scripting language) DOM과 접근 방법에 대해 추가로 알아보기 위해 아래의 링크를 참고하자 DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문..

React는 오직 V(View)만 신경 쓰는 라이브러이다. 1. 컴포넌트 React 프로젝트에서 특정 부분의 생김새와 재사용 가능한 기능들을 내장하며, 컴포넌트의 생김새와 작동 방식을 정의한 선언체이다. 2. 렌더링 사용자 화면에 뷰를 보여주는 것을 렌더링이라 한다. React는 가상DOM을 사용해 렌더링을 이루지만, 변경된 부분만 실제DOM에 적용된다. 2.1 초기 렌더링 사용자에게 맨처음 어떻게 보일지를 정하는 작업 위의 작업은 render() 함수가 한다. render() 함수는 뷰의 모습과 동작방식이 담긴 정보 객체를 반환한다. 최상위 컴포넌트가 render() 하면 자식 컴포넌트도 재귀적으로 렌더링 한다. render() 함수가 실행되고, 해당 컴포넌트의 가상 DOM이 생성되며, 변경사항이 실제..

쿼리 스트링이란? URL의 한 부분으로써, URL에 부가정보(어떤 키워드를 검색하거나 페이지에 필요한 옵션)을 포함할 때 사용한다. 쿼리스트링을 사용하면 다양한 상황에서 조건에 맞는 정렬된 형태의 정보를 요청하고 받을 수 있다. 쿼리 스트링의 필요성? 검색을 예를 들자. 공구를 검색하는데 세상 모든 공구를 검색하는 것이 아니기에 검색할 키워드와 보여질 갯수, 옵션별 노출(상위 10개, 최신 10개 등) 과 같이 상황별 구체적으로 정보를 요청하고 받기 위해 쿼리 스트링을 사용한다. 쿼리 스트링의 모습과 라우팅 문자열의 모습을 하고 key=value 와 같이 작성된다. URL의 일부분으로 ? 를 기점으로 시작되며 각 key의 구분은 & 로 작성된다. // 한개만 있는 경우 http://www.example...

이전에 로그인 API를 구현하고 이제는 컴포넌트들을 생성하여 API와 연결해줘 완성을 했다. 만드는 동안 발생했던 에러들과 내가 새로 알게된 것들과 함께 정리하는 시간을 갖아보려한다. 내가 공부한 로그인 방법의 API를 정리한 글에서 나와있듯이 데이터 입력 > 데이터 검토 > 유효성 검사(토큰확인) > 결과 와 같은 순서로 구성되어있으며, 위의 기능들을 하기 위한 장치들은 API에서 모두 만들어 놨으므로 이제는 이용하는 일만 남았다. 모듈에서는 액션, 액션생성함수, 리듀서, 초기State를 담아주고, 최상위 index에서는 store와 sagaMiddleware, localstorage를 관리해준다. 그리고 컨테이너에서 dispatch로 액션을 전달하여 State에 정보를 전달해준다. 데이터의 흐름은 페..

로그인을 구현하려는 목적? 우리가 네이버나 구글의 메일 서비스나 다른 서비스를 이용할 때, 거의 필수적으로 거치는 과정이 있다. 바로 로그인이다. 그만큼 대부분의 웹에 들어가는 기능인 로그인을 구현해보는 시간을 갖도록 하자. 이 계획은 여러 단계로 나누어 글을 작성할 것이다. 오늘은 기본적인 api 구성까지 해보도록 하자. 사용하는 주요 기술 Express : express를 이용해서 서버를 구현할 예정이다. (koa로 하려 했지만 아직은 express가 부족하다 생각하기에 이번에는 express를 이용해 공부를 더 할 예정이다.) Joi : 스키마 언어를 검토해주고, node용 validator보다 관계에 따른 정의가 가능하다. (ex. 옵션 설정에서 a는 필수 요소로 지정하고 b는 필수가 아니라 지정..