React

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는 필수가 아니라 지정..

koa-router 사용 Koa를 사용할 때에도 라우트 작업을 해줘야 하는데, Koa에는 라우터 기능이 내장되어 있지 않기에 koa-router 모듈을 설치해야 한다. npm i koa-router 1. 기본 사용법 index.js에서 라우터를 불러와 적용하는 방법이다. const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); // 라우터 설정 router.get('/', ctx => { ctx.body = '홈'; }); router.get('/about', ctx => { ctx.body = '소개'; }); // app 인스턴스에 라우터 적용 ap..

nodemon이란? 코드를 변경할 때마다 서버를 자동으로 재시작해주는 도구이다. 우선 설치부터 해보자면 npm i --dev nodemon 개발용 의존 모듈로 설치해주고 package.json 에 script를 다음과 같이 입력한다. { "name": "blog-backend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node src", "start:dev": "nodemon --watch src/ src/index.js" }, "keywords": [], "author": "", "license": ..