study

패스트캠퍼스 챌린지 44일차

차트 라이브러리 만들어보기 - 그래픽 시스템 Overview 이번 장에서는 그래픽 시스템에 관하여, 개발자를 위한 소프트웨어에 관해 설명한다. 간단한 차트 라이브러리를 만들기위해서 그래픽 시스템을 이용할 것인데 대체적으로 canvas, SVG, WebGL 등이 있다. 각각의 그래픽 시스템들은 차이가 있다. canvas 같은 경우는 2D 그래픽 시스템으로 점과 선으로 이루어져 있다. canvas 태그를 이용한 다양한 API를 사용할 수 있다. 자바스크립트의 함수로 점 찍고 선 그리는 등의 작업을 한다. 점과 선이라고 하면 되게 아무것도 없는 것처럼 보이겠지만 사실 그래픽의 모든 것들은 점과 선으로 이루어져 있기때문에 모든걸 다 가진 것이다. SVG는 벡터 그래픽 시스템으로 캔버스처럼 2D 그래픽 시스템을 ..

2022. 3. 8. 19:58
study

패스트캠퍼스 챌린지 43일차

로그인 병렬 - 예외 처리 흐름 설계 로그인을 처리하는 부분에서 오류가 났을 때의 처리에 대해 추가적으로 생각해봐야 할 부분이 있다. 먼저 현재 #onSubmit 메소드 부분의 코드를 확인해 보면 import template from './login.template'; import TextField from '../views/text-field'; import axios from 'axios'; export default class Login { #template = template; #data; #container; #loginFail = false; #fields = []; constructor(container, data) { ... } #initialize = () => { ... } #onSub..

2022. 3. 7. 22:53
study

패스트캠퍼스 챌린지 42일차

로그인 병렬 - 연속적 비동기 API 처리의 이해 로그인 처리를 하는 서버와의 통신에는 비동기 처리가 필요하다. 단순히 화면이 바뀌는 동작만이 아니라면 서버와의 통신간에 연결이 끊어질 수도 있고 다른 에러가 발생할 경우가 있기 때문에 비동기 처리를 이용한다. 하지만 이번 로그인 처리에선 2가지의 API를 병렬적으로 처리한다. 그렇게 데이터를 받기 위해서 axios 라이브러리를 사용한다. axios에서 지원하는 메소드중에 all 메소드를 통해 2가지의 API 데이터를 받아서 두가지의 서버 비동기 처리를 한 후에 완료 후에 데이터를 반환 받아서 사용한다. import template from './login.template'; import TextField from '../views/text-field'; ..

2022. 3. 6. 22:45
study

패스트캠퍼스 챌린지 41일차

로그인 앱 설계 로그인을 하기위해 서버에서는 로그인 할 당시에 권한처리나, 토큰 유지, API를 통해서 프로필 데이터를 JSON 형식으로 받아오는 등의 데이터 처리나 라우팅에 관한 작업들을 진행했다. 이번에는 클라이언트에서 서버에서 가져오는 데이터에 맞게 또는 라우팅이 변함에 따라 화면 부분을 변경하는 작업을 할 것이다. import Store from './store'; import Login from './page/login'; import Profile from './page/profile'; import PageNotFound from './page/page-not-found'; const store = new Store(); function router() { const path = locati..

2022. 3. 5. 20:24
study

패스트캠퍼스 챌린지 40일차

로그인 앱 설계 server를 다루는 index.js 파일엔 인증처리를 하는 부분 말고 로그인한 유저의 프로필을 반환하는 API가 있다. 해당 API는 GET 방식을 사용하고 불러온 유저 아이디의 값을 통해 그에 맞는 데이터를 반환 해주는 역할을 한다. const path = require('path'); const express = require('express'); const morgan = require('morgan'); const { urlencoded, json } = require('body-parser'); const { v4 } = require('uuid'); const axios = require('axios'); const app = express(); app.use(express...

2022. 3. 4. 10:13
study

패스트캠퍼스 챌린지 39일차

로그인 앱 설계 지난번까지 로그인 앱에 대한 폴더 구조를 알아봤다. 지금까지 했던 작업들과 다르게 로그인 앱 설계 부분에서는 node.js를 통한 서버 환경을 구현했다. server 폴더 하위에 index.js 파일에 서버를 구현하는 로직이 있다. const path = require('path'); const express = require('express'); const morgan = require('morgan'); const { urlencoded, json } = require('body-parser'); const { v4 } = require('uuid'); const axios = require('axios'); const app = express(); app.use(express.sta..

2022. 3. 3. 10:10