기억보다 기록을

패스트캠퍼스 챌린지 최종후기

- 강의를 듣게 된 이유

이번에 패스트캠퍼스에서 김민태의 프론트엔드 아카데미: 제 1강 JavaScript & TypeScriptEssential 강의를 들어봤다. 처음 TypeScript에 관심이 생긴건 JavaScript를 자바처럼 클래스 객체지향 형식으로 사용하는 것을보고 관심이 생겼다. ES6에도 class를 사용할 수 있지만 이것보다 TypeScript는 JavaScript에 타입도 지정하기 때문에 좀 더 기존에 알고있었던 자바와 가까운 느낌(?)이 들었기 때문에 관심있게 보다가 수강하게 되었다. 듣다보니 점점 TypeScript보다 JavaScript에 관심이 더 생겼다. TypeScript도 JavaScript의 슈퍼셋이기 때문에 결국엔 JavaScript를 잘 알아야 TypeScript도 잘 알수 있는것이다. 처음 강의를 보기 전과 후의 마음은 다르지만 결국엔 JavaScript나 TypeScript나 두가지 다 관심이 있기때문에 시작했다.

물론 지금까지도 전부 다 이해했다고 할 수는 없지만 강의를 들어보니 단순히 처음 시작할 때 알고 있었던 것보다 더 많은 것들을 알게되었다. (알면 알수록 더 어려운 듯한 느낌도 같이 오는...) 처음엔 JavaScript를 어느정도 사용할 줄 안다고 생각했고 (그냥 어느정도 자주 사용하는 DOM이나 웹 변경하는 기능만 아는 수준이었다) 거기에 추가하여 TypeScript를 좀 더 배우고 알게되면 좋겠다고 생각을 했는데 TypeScript 뿐만 아니라 JavaScript를 포함해서 여러가지를 더 알게 되었던거 같다.

- 강의를 듣고 알게된 점

강의 처음 소개할 때 우리는 웹앱을 만든다고 했다. 웹이면 웹이고 앱이면 앱인데 웹앱은 뭐지 ? 라는 생각을 했는데 웹을 모바일 앱처럼 (예를 들면 인스타그램 등) 화면의 동작이 부드러운 웹, 마치 동작이 앱처럼 동작하는 웹을 웹앱이라고 하는것같다. 그리고 이렇게 동작하는데 있어서 SPA를 구현해야 한다는데 내가 기존에 알고있었던 SPA는 React, Vue, Angular 등 JavaScript 라이브러리나 프레임워크를 사용해서 구현하는 것, 다시 말해서 위와같은 프레임워크를 사용하는 것이 SPA 그 자체인줄 알았다. 하지만 이런 라이브러리나 프레임워크도 JavaScript로 만들어진 것이기 때문에 그러한 기능을 사용하는데 좀 더 편하게 만들어 놓은것이고 그냥 바닐라 JavaScript를 사용해도 SPA를 구현할 수 있다는 것이다. 본 강의에서 구현하는것들은 SPA 방식으로 구현한다. 

이런 부분에 대해서 강의에 대해 좀 더 흥미가 생긴것 같다. 지금까지 내가 개발해 본 것들은 SSR 방식으로 페이지 하나당 하나의 html, 하나의 jsp를 생성해야했고 화면의 전환이나 어떤 기능의 동작이 발생했을 때, 화면을 새로 불러와야 했다. (물론 ajax를 사용해서 데이터를 받아오고 화면을 변경한 경우도 있기 때문에 꼭 그런 것만은 아니다) SSR 방식이던 CSR 방식이던 간에 어플리케이션에 맞고 어울리는 방식이 있을 것이다. 하지만 이 강의를 들으면서 CSR 방식을 가지고 SPA를 구현해 보는 것은 충분히 좋은 경험이 되었다.

또한 화면을 구현할 때, ES6의 class를 통해서 클래스를 통해 인스턴스를 만들어서 사용했다. JavaScript로 만들어 놓은 구조를 TypeScript로 후에 변경한다. 이 말은 처음 프로그래밍을 자바로 시작했던 나한테 관심을 생기게 만든 큰 이유이기도 했다. 클래스 객체지향 방식, 클래스 안에 필드와 메서드를 만들어서 여러개의 인스턴스를 통해 상태와 동작을 관리한다. 어플리케이션의 로직은 이러한 방식으로 관리하고 화면, UI 부분은 jsp의 <script> 태그 안에 제이쿼리의 ready 함수나 DOMContentLoaded 등을 사용해서 그 안에 각각 화면에 사용하는 부분만 만들어서 사용하는 경우가 허다했지만 JavaScript를 가지고 객체지향 형식으로 구조를 만들 수 있는 것은 앞서 말한대로 SPA를 구현할 수 있고 화면을 페이지 하나마다 재사용성 없는 복사 붙여넣기에서 좀 더 자유로워질 수 있다는 것에 큰 관심이 생긴것 같다.

- 강의를 듣고 난 후

그리고 강의에서 나온 내용들을 보면서 추가적으로 다른 것들에 대해 더 관심이 생기게 되었다. 예를 들어 아까 위에서 언급했듯이 React는 SPA를 구현하는 JavaScript 라이브러리이다. 강좌에서는 class를 통해서 SPA를 구현했고 React의 마찬가지로 class를 사용해서 개별적은 컴포넌트를 만들었다. 최근 버전의 React는 class 없이 function을 통해서 컴포넌트를 생성한다. 그 이유는 JavaScript의 class는 자바나 C++ 등과 같은 클래스 기반 객체지향언어와는 약간의 차이가 있기 때문이다. JavaScript는 함수형 프로그래밍이 가능하다. 이 말은, 강좌에서는 SPA를 class를 사용하여 객체지향으로 구현했지만 함수형으로 구현도 가능하다. 강좌를 보면서 기존에 알고있었던 객체지향 프로그래밍 말고도 함수형 프로그래밍에도 관심이 생겼다.

또한 3~5강엔 웹앱을 만들고 라이브러리를 만들어보면서 어떤 식으로 프로그래밍하며 그에 대한 구조와 동작들에 대해 들었다면 6강엔 JavaScript에 관한 참조 사전 형식의 강의였다. 기본적인것부터 다소 생각이 필요한 부분도 있으며 npm이나 번들러, REPL 등의 개념적인 부분과 개발하는 것에 있어서 필요한 도구 등을 소개해주는 강의도 있다. 누구에게나 그렇지만 해당 강의를 보면서 기본이 중요하다는 생각을 또 하게되었다. 본 강의에서 코드에대한 내용과 다른 여러가지 참조할 만한 강의가 있지만 동작을 완벽하게 이해하고 새로운 기능을 추가하려면 어느정도의 언어에 대한 특성이나 기본적인 지식은 필요하다고 생각되었다.

강사님도 강의에서 말씀하시는게 쉽게 변하는 기술은 배움에대한 비용은 상대적으로 적고 쉽게 변하지 않는 기술을 익히는데 배움에대한 비용이 크다고 한다. 쉽게 변하지 않는 기술은 단기간에 알 수 없기 때문에 꾸준한 학습이 필요하다. 그래서 이번엔 표지에 도마뱀이 그려져 있는 900페이지가 넘는 책도 샀다... 무엇보다도 강의를 들으면서 자바스크립트에 관한 기본적인 지식이 중요하다고 생각했다. cs적인 지식이나 어떤 언어에 대해서 공부를 할 때, 아무것도 모르는 상태에서 공부를 하는것과 어느정도 아는 상태에서 공부를 하는것과는 큰 차이가 있다고 생각한다. 아무것도 모를 때보다 어느정도 알게됐을 때 잘 기억되고 그것이 앞으로 다른 프로그램 등을 개발 할때 사용할 수 있는 나의 지식이 된다. 이 강의는 전부 다 알려준다고 할 수는 없지만 앞으로의 다른 지식들을 배우는데 있어서 도움이 될것 같다.

- 만들어본 결과물

개인적으로 처음으로 ES6 class와 TypeScript를 사용해서 만들어봤다. 물론 동작은 SPA로 동작한다. 강의를 처음 들으려고했던 이유처럼 리액트가 SPA인건 알겠는데 세세한 동작이라던지 어떤 식으로 구조를 가지고 있는지에 대해 좀 더 자세하게 알게되면서 라이브러리나 프레임워크 등은 사용하지 않고 순수 JavaScript & TypeScript로 만들었다. 또한 강의에서 언급되었던 webpack이나 node.js 등을 번들러나 서버로서 동작할 런타임 환경으로 사용했고 강의에는 없었지만 추가적인 기능으로 데이터관리를 위한 데이터베이스 연동이나 서버와 클라이언트의 중계기 역할을 하는 proxy 등을 사용했다.

첫 번째 사진은 강의에서 했던 방식대로 class를 만들고 공통적인 부분은 extends로 상속하면서 template을 따로 만들고 만들어지는 데이터에 따라 변경되는 부분만 렌더링해주는 방식으로 SPA를 구현한다. 폴더 구조도 그렇듯이 기능을 담당하는 파일 따로 html, css를 갖는 template따로 구분한다. 강의랑 한가지 다른 점은 여기선 css 파일도 각 해당하는 기능의 파일에 따라 독립적으로 작용한다. 동일한 css 이름이 사용되더라도 다른 컴포넌트의 css에 영향을 주지 않는다. css module 방식을 사용했다.

두 번째 사진은 서버를 node.js를 사용해서 구현했다. 강의를 진행하면서 JavaScript로 UI적인 부분 뿐만아니라 서버, 더 나아가서 추후에 앱이나 머신러닝도 할수 있기 때문에 해당하는 서버를 JavaScript 런타임인 node.js로 구현했다. express.js를 사용했고 데이터베이스와 연동하는 것, 로그인 처리, 데이터 API 받아오기 등의 기능을 구현한다. 현재는 데이터베이스로 mysql에 연동했고 화면의 전환에따라 데이터 API를 받아오는 정도의 기능이 구현되어 있다.

세 번째 사진은 webpack 번들러를 사용한 것이다. 강의에서는 parcel을 통해서 번들링을 한다. 강의의 특성상 parcel을 사용하게되면 webpack보다 설정하는 부분에 있어서 빠르게 설정할 수 있는 이점이 있다. 하지만 webpack 필수적이라고 할 정도로 많은 어플리케이션에 사용되며 더 상세한 설정을 직접 할 수 있기 때문에 결과물에서는 webpack을 사용했다. html, css, JavaScript, TypeScript 등의 설정 등을 여기서 할 수 있다. 번들링 한 파일의 위치나 이름, css모듈화 네이밍 형식, 파일 크기, 프록시 설정 등을 할 수 있다. 

네 번째 사진은 작업하던 결과물이다. SPA형식으로 작업했으며 하얀색 텍스트로 나열 되어있는 데이터는 공공데이터 포털에서 가져온 데이터이다. 아직 진행중이지만 강의에서 듣고 알게된 내용들을 적용해야 할 부분이 많다. 지금은 3-4강의 기본적인 구조에 맞춰서 화면의 라우팅과 렌더링 등을 통한 SPA의 기능 구현 정도이다.

- 결론

결론적으로 나에게 있어 여러모로 변화를 준 강의라고 생각한다. 회사에서도 개발을 꾸준히 해왔지만 일정 수준이나 시기에 도달했을 때, 비슷하고 반복적인 결과물이나 비슷한 코드들이 대부분이었다. 어찌됐건 내가 찾아보지 않으면 알수 없었던 부분이었다. 다른 곳으로 면접을 보러 다닐 때 SPA에 관해서 질문을 받은 적이 있다. 그때는 그냥 SPA라는 말 그대로 Single Page Application이라고 대답은 했지만 그것이 어떻게 동작하고 어떤 구조를 가지고 있는지는 몰랐다. 막연히 Multi Page Application 이랑 반대겠거니 생각만 했다가 그것에 대해 관심을 가지게 됐고 강의도 듣게 되었다. 처음 강의를 듣게 된 이유는 이것이 아니지만 결국엔 내가 궁금하고 관심있었던 부분까지 알게된 강의였다. 이것 뿐만 아니라 자바스크립트에 관심이 있거나 구조 등에 관해 궁금하다면 많은 도움이 될것같다. 나는 이 강의를 듣고 알게 된것도 많지만 앞으로 무엇을 공부해야 할지 어느정도 방향도 잡을 수 있다고 생각한다. 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

차트 라이브러리 만들어보기 - 하위 호환성 유지하기

소프트웨어를 만들고 버전을 관리 할때, 하위 호환성이란 것은 1.1.0이라는 버전이 나오고 해당 소프트웨어가 1.1.2로 올라갔을 때 올라간 버전의 소프트웨어가 하위 버전의 소프트웨어를 동작 시킬 수 있는가를 볼 수 있어야 한다. 물론 좋은 소프트웨어는 상위 버전이 하위 버전의 소프트웨어를 동작시킬 수 있어야 한다. 사용자 측에서 아무런 변경 없이 동작 시킬 수 있는것이 좋은 소프트웨어이지만 사실 이것은 매번 그럴 순 없다.

안되는 경우는 호환성을 깨야한다. 하지만 이 작업에서도 최대한 호환성을 깨지 않고 유지하려는 노력과 마인드가 필요하다. 이것은 라이브러리 뿐만 아니라 코드 자체에서도 적용된다. 어떤 코드를 만들던간에 이런 부분에 있는 사고와 고려는 필요하다.

호환성을 깬 부분에서 개발자는 새로운 인터페이스를 만들어야 할 것이고 사용자들에게 새롭게 만들어진 인터페이스를 사용하는 것으로 권장할 것이다. 하지만 새로운 인터페이스를 만들었다고해서 지금까지 기존의 사용자가 사용하는 이전 버전의 소프트웨어도 마찬가지로 계속 사용할 것이다. 그렇다면, 만약 이전 버전의 소프트웨어를 사용하는 사용자와 새로운 버전을 사용하는 사용자가 동시에 생길수 밖에 없다. 마이너한 부분을 수정했다면 이전 버전을 사용하는 사용자에게 메세지나 경고 표시를 통해 해당하는 기능을 사용하기 위해서 버전을 옮기는 것을 권고하는 것도 좋은 방법이다. 그리고 메이저 버전의 변경이 필요하다면  그에 따른 상세한 마이그레이션 가이드를 제공해야 한다. 관련하여 버전을 옮겨주는 소프트웨어까지 있다면 좋겠지만 그럴 수 없다면 가이드 내용을 상세히 할 필요가 있다. 

이러한 정보들을 통해서 꼭 소프트웨어나 라이브러리를 개발하지 않고 사용하는 입장이라 하더라도 사용자로서 이 소프트웨어나 라이브러리가 나에게 얼마나 적합하고 오랫동안 유지하면서 사용할 수 있는지에 대한 평가에 도움이 될 수 있다. 사용하려는 소프트웨어의 방향성이나 잘 관리되고 있는가에 대한 관점으로 보고 판단할 수 있을 것이다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

차트 라이브러리 만들어보기 - 배포 및 버전 전략

이번 파트에서는 만들어 놓은 라이브러리를 배포하고 그에 관한 버전 등을 관리하는 방법에 대해 다룬다. 배포를 하는 방식으로는 이전엔 웹 사이트에 배포하려고 하는 라이브러리 등을 업로드하고 사용자들이 다운로드 하는 방식을 많이 사용하는 등 링크 자체를 통하는 방식이다. 예전의 방식이긴 하지만 아직도 이런 방식으로 배포와 사용을 하는 사이트들이 존재한다.

하지만 현재는 그런 다른 방식을 사용한다. 우리가 자바스크립트(js)를 사용하기 때문에 npm을 사용할 것이다. npm(node package manager)은 만들어놓은 라이브러리나 패키지를 등록하고 사용할 수 있으며 버전도 존재한다.

이런 npm을 사용하기 위해선 2가지의 고려해야할 사항이있다. 첫번째로는 공개의 여부이다. 내가 올리려고 하는 라이브러리가 외부적으로 공개해도 되는 내용인지 외부에 노출하지 않고 내부적으로만 사용해야 하는 것인지의 검토할 필요가 있다. 두번째는 라이센스의 문제이다. 어떤 라이센스의 원칙에 따라 배포할 것인지도 정해야한다. 라이센스로는 BSD나 MIT 등이 있는데 어떤 라이센스를 사용할 것인지도 검토해야한다. 대부분 공개적으로 오픈소스로 사용한다거나 특별한 제약을 두지 않는다면 MIT를 라이센스로 정한다. 

npm 사이트에 들어가면 관련하여 npm을 등록하거나 다운받는 것에 자세한 상세가 나와있다.

https://docs.npmjs.com/organizations/creating-and-managing-organizations

npm을 통해서 라이브러리를 올려놓고 관리하면서 git이랑 연동하는 것도 가능하다. 하지만 이 경우에는 버전관리가 힘들 수 있다. npm은 버전관리를 지원하지만 git 저장소를 직접 연결하는 경우엔 npm 패키지명, git 저장소 명의 형식으로 되어있기 때문에 버전관리가 어렵다. 하지만 소스 코드 자체를 공유하고 git을 사용한다면 git서브모듈을 통해서 필요하면 언제든지 다운받는 형식으로 사용할 수 있다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

차트 라이브러리 만들어보기 - 차트 라이브러리 구현

index.js 파일에서 인스턴스로 만들어서 사용하는 chart.js 부분

import template from './chart.template';

const defaultOptions = {
  percent: 0,
  duration: 1000,
  frame: 30,
}

/**
 * Chart 클래스
 */
class Chart {
  #template = template;
  #el;
  #percent;
  #duration;
  #label;
  #frame;
  #handle;

  /**
   * 
   * @param {string} container - 마운트될 DOM 컨테이너 셀렉터
   * @param {string} data - 옵션 데이타 duration, frame
   * @example
   * new Chart('#root', {
   *   duration: 2000,
   *   frame: 20,
   * });
   */
  constructor(container, data = {}) {
    const { duration, frame, percent } = {...defaultOptions, data};

    this.#duration = duration;
    this.#frame = frame;
    this.#percent = percent;

    this.#el = document.querySelector(container);
  }

  /**
   * 퍼센트를 설정합니다.
   */
  set percent(per) {
    this.#percent = per;
  }

  /**
   * 애니메이션 시간을 ms 단위로 설정합니다.
   */
  set duration(dur) {
    this.#duration = dur;
  }

  /**
   * 에니메이션이 실행 될 때 초당 프레임을 설정합니다.
   */
  set frame(fr) {
    this.#frame = fr;
  }

  set label(text) {
    this.#label = text;
  }
  /**
   * 소스 데이타를 설정합니다.
   * @param {Array} source - 2차원 배열로 제공합니다.
   */
  setDataSource(source) {

  }
  /**
   * UI 업데이트를 수행합니다.
   */
  render() {
    this.#el.innerHTML = this.#template({
      percent: this.#percent * 10,
      duration: `${this.#duration / 1000}s`,
      label: this.#label,
    });

    const maxLoop = Math.floor(this.#duration / (1000/this.#frame));
    let loopCount = 0;

    this.#handle = setInterval(() => {
      loopCount++;

      this.#el.querySelector('#progress').innerHTML 
        = loopCount > maxLoop ? `${this.#percent}%` : `${Math.floor(this.#percent / maxLoop) * loopCount}%`;

      if (loopCount > maxLoop) {
        clearInterval(this.#handle);
      }
    }, 1000/this.#frame);
  }
}
 
export default Chart;

화면은 기존 방식과 동일하게 chart.template.js를 템플릿으로 가지고 import해서 사용한다. defaultOprtion 값은 아무것도 설정하지 않았을 때 가질 값을 정의한다.

Chart 클래스를 보면 #이 포함된 변수는 private 형태로 외부의 접근을 제한하고 클래스 내부에서만 사용할 수 있다. 차트 라이브러리에서 설정 되는 값으로는 duration, frame, percent 등으로 차트의 각각의 속성 값들을 정의한다. 각각의 프로퍼티에 접근제한을 걸어두었기 때문에 setter와 getter를 통해 값을 반환하고 수정한다. 그리고 여느 다른 클래스 구조와 같이 render 메소드를 통해서 화면을 렌더링한다. render 메소드 안에 el(Element를 지정)태그를 통해서 템플릿을 만들고 차트가 동적으로 생성될 것이므로 지정해 놓은 duration와 frame을 기반해서 setInterval() 기능을 사용한다. setInterval()은 몇 초마다 실행되는 기능이므로 clearInterval() 함수로 꼭 끝나는 지점에 사용해야 한다. 그렇지 않으면 메모리의 낭비가 발생한다. 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

차트 라이브러리 만들어보기 - 차트 라이브러리 구현

import template from './index.template';
import Chart from './lib/chart';

function main() {
  const conatiner = document.querySelector('#root');
  conatiner.innerHTML = template();

  const chart = new Chart('#chart');

  chart.percent = 75;
  chart.duration = 1000;
  chart.label = '충전중'

  chart.render();
}

document.addEventListener('DOMContentLoaded', main);

코드 진행은 기존의 구조와 비슷하다. index.js는 파일과 index.template.js라는 파일로 구성된다. 다른 웹앱과 마찬가지로 index.js 파일은 인스턴스를 생성하고 렌더링을 하는 등의 기능과 index.template.js는 html 태그들로 이루어진 template 파일이다. 템플릿 엔진은 handlebars를 사용한다.

const template = `
    <div class="min-h-screen bg-gray-100 py-6 flex flex-col justify-center sm:py-12">
    <!-- Container -->
    <div class="container mx-auto">
      <div class="flex justify-center px-6 my-12 ">
        <!-- Row -->
        <div class="w-full xl:w-3/4 lg:w-11/12 shadow-xl flex">
          <!-- Col -->
          <div
            class="w-full h-auto bg-gray-400 hidden lg:block lg:w-1/2 bg-cover rounded-l-lg"
            style="background-image: url('https://images.unsplash.com/photo-1602918386084-58983c3bafac?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1900&q=80')"            
          ></div>
          <!-- Col -->
          <div class="w-full lg:w-1/2 bg-white p-5 rounded-lg lg:rounded-l-none p-16">

            <h3 class="pt-4 text-2xl text-center mb-20">Javascript & Typescript Essential Chapter 5 - Chart</h3>

            <div id="chart"></div>
          </div>
        </div>
      </div>
    </div>
</div>
`;

export default Handlebars.compile(template);

main이라는 함수를 가지고 DOM 로드 이벤트를 통해 해당 페이지가 전부 로딩 됐을 때 main 함수를 실행한다. main 함수의 내용은 컨테이너의 템플릿을 지정하고 Chart라는 클래스에서 chart 인스턴스를 만들고 chart의 속성들을 지정해준 뒤 렌더링하는 과정을 거친다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

차트 라이브러리 만들어보기 - 라이브러리 설계 원칙

코드를 생산하게 되면 코드를 사용하는 사람이 있기 마련이다. 그게 본인일 수도 있고 다른 사람이 될 수도 있다. 여기서 중요한 2가지의 관점이 있는데

첫번째로 인터페이스의 일관성이다. 여기서 인터페이스의 일관성이란 클래스나 함수부터 네이밍 처리하는 부분까지도 인터페이스의 영역이라 할 수 있다. 어느정도의 일관성이 있다면 사용하는 입장에서 꼭 매뉴얼을 보지 않고도 유추할 수 있다. 매뉴얼을 꼭 봐야하는 경우도 있겠지만 가능한 비슷한 기능이나 비슷한 처리를 하는 부분이라면 일관성있게 만드는 것은 중요하다.

두번 째는 오류처리의 일관성이다. 작동하는 도중에 에러가 발생 했을 시 해당하는 문제에 대해 예외를 던지거나 null 처리를 하는 등에 있어서 어떤 기준을 둘 것인지에 대한 일관성이 있어야 한다. 만약 같은 에러가 발생 하더라도 에러 처리하는 부분이 제각각이라면 사용자에게 불편함과 소프트웨어에 대한 거부감을 줄 수도 있다.

이러한 관점들 말고도 다른 부분도 있다. 프로그램을 개발하다보면 버전이라는 것이 생기게된다. 소프트웨어의 버그가 발생했거나 아니면 더 나은 방향으로의 소프트웨어를 개발하는데 있어서 버전은 꼭 필요할 것이다. 하지만 이 버전이 서로 정반대의 원칙을 가지고 있다면 이것은 또 다른 문제를 낳을 것이기 때문에 버전 관리에 대한 중요성도 필요하다. 

이에 관련해서 npm에서 관리하는 semantic versioning이라는 기법이 있다. 

https://docs.npmjs.com/about-semantic-versioning

여기서는 버전에 대한 어느정도의 규칙을 명명한다. 예를들어 1.1.2 등의 버전이 있다고하면 여기서 각각의 숫자들은 의미를 갖고있는데 첫번 째 숫자는 메이저 버전을 의미하고 가운데 숫자는 마이너 버전을 의미하고 마지막 숫자는 패치 버전을 의미한다. 패치 버전은 버그의 수정 등으로 기존의 사용자는 코드를 수정하지 않아도 사용할 수 있다. 마이너 버전은 라이브러리에 새로운 기능이 추가되거나 버그를 고쳤을 때다. 기존의 사용자 코드가 수정될 필요가 없을 수도 있고 있을 수도 있다. 메이저 버전은 새로운 기능이 추가 될 수도 있고 구조 자체가 변화 될 수도 있다는 의미이다.

따라서 이런 규칙을 보고 버전을 어떻게 관리할 것인지에 관해 정하고 소통하고 판단할 수 있어야 한다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

차트 라이브러리 만들어보기 - 소프트웨어를 위한 소프트웨어

소프트웨어는 사용자들이 웹에 접속해서 여러가지 구현된 기능들을 사용하고 로그인이나 회원가입 등을 하는 일련의 과정 등의 서비스를 제공하는 것들이 될 수도 있고, 앱을 다운로드하여 그 앱에 구현된 기능들을 사용하고 그에 관련된 서비스를 제공 받는 앱이라고 할 수도 있다.

하지만 사용자의 관점에서 뿐만 아니라 개발자의 관점에서도 소프트웨어는 존재한다. 어떤 소프트웨어를 개발한다고 했을 때, A부터 Z까지 모든 기능을 개발하지는 않는다. 여러가지 소프트웨어들을 결합시키고 조합해서 더 나은 구조나 또 다른 소프트웨어를 만든다.

프로젝트 범위 내에서 사용하는 소프트웨어(해당하는 장에서 만드는 chart 등)나 프로젝트 범위만이 아닌 전체적으로 사용될 수 있다. 기능을 가져다 쓸 수 있는 소프트웨어는 라이브러리나 프레임워크가 될 것이다. 우리가 코딩해서 만드는 모든 것들이 소프트웨어다. 그렇기때문에 항상 어떤 생각으로 소프트웨어를 만들 것인가에 대한 마인드를 가지고 있는 것은 중요하다. 최소한으로 나만 쓸 기능이라고 하더라도 어떻게 하면 더 잘 쓸 수 있는 구조인가에 대해 생각해 볼 필요가 있다.

src
  |- lib
    |- out
      |- fonts
        ...
      |- scripts
        ...
      |- styles
        ...
      ...
      chart.js
      chart.min.js
      chart.template.js
  - index.js
  - index.template.js
- index.html
- readme.md

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential

차트 라이브러리 만들어보기 - 그래픽 시스템 Overview

이번 장에서는 그래픽 시스템에 관하여, 개발자를 위한 소프트웨어에 관해 설명한다. 간단한 차트 라이브러리를 만들기위해서 그래픽 시스템을 이용할 것인데 대체적으로 canvas, SVG, WebGL 등이 있다. 각각의 그래픽 시스템들은 차이가 있다.

canvas 같은 경우는 2D 그래픽 시스템으로 점과 선으로 이루어져 있다. canvas 태그를 이용한 다양한 API를 사용할 수 있다. 자바스크립트의 함수로 점 찍고 선 그리는 등의 작업을 한다. 점과 선이라고 하면 되게 아무것도 없는 것처럼 보이겠지만 사실 그래픽의 모든 것들은 점과 선으로 이루어져 있기때문에 모든걸 다 가진 것이다.

SVG는 벡터 그래픽 시스템으로 캔버스처럼 2D 그래픽 시스템을 다루지만 저 수준의 자바스크립트 api를 가지고 그래픽을 구사하는 것이 아니라 html 태그를 이용하여 구사할 수 있는 스펙이다. 상대적으로 다루기가 쉽다는 장점이 있다. 또한 여러가지의 스펙이 제공되기 때문에 로고나 아이콘, 차트 등의 여러가지를 만들 수 있으며 알고있다면 운영 범위가 넓기 때문에 상용하기도 좋다.

WebGL 같은 경우는 3D 그래픽 시스템을 다룬다. 작업을 하다보면 2D 그래픽 시스템으로 할 수 없는 부분이 있다. 2D 그래픽은 대량의 데이터를 그래픽으로 변경 시 성능이 너무 떨어지는 경우나 심하면 제대로된 작동이 안될 수 있다. 그럴 때는 WebGL 같은 3D 그래픽 시스템을 이용하여 GPU를 사용하여 2D 그래픽 시스템으로 할 수 없는 부분을 동작하게 할 수도 있을 것이다.

이번 장에서는 SVG를 사용하여 그래픽 시스템을 구사한다.

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential