study

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

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

2022. 3. 22. 01:26

study

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

차트 라이브러리 만들어보기 - 하위 호환성 유지하기 소프트웨어를 만들고 버전을 관리 할때, 하위 호환성이란 것은 1.1.0이라는 버전이 나오고 해당 소프트웨어가 1.1.2로 올라갔을 때 올라간 버전의 소프트웨어가 하위 버전의 소프트웨어를 동작 시킬 수 있는가를 볼 수 있어야 한다. 물론 좋은 소프트웨어는 상위 버전이 하위 버전의 소프트웨어를 동작시킬 수 있어야 한다. 사용자 측에서 아무런 변경 없이 동작 시킬 수 있는것이 좋은 소프트웨어이지만 사실 이것은 매번 그럴 순 없다. 안되는 경우는 호환성을 깨야한다. 하지만 이 작업에서도 최대한 호환성을 깨지 않고 유지하려는 노력과 마인드가 필요하다. 이것은 라이브러리 뿐만 아니라 코드 자체에서도 적용된다. 어떤 코드를 만들던간에 이런 부분에 있는 사고와 고려는..

2022. 3. 14. 14:31

study

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

차트 라이브러리 만들어보기 - 배포 및 버전 전략 이번 파트에서는 만들어 놓은 라이브러리를 배포하고 그에 관한 버전 등을 관리하는 방법에 대해 다룬다. 배포를 하는 방식으로는 이전엔 웹 사이트에 배포하려고 하는 라이브러리 등을 업로드하고 사용자들이 다운로드 하는 방식을 많이 사용하는 등 링크 자체를 통하는 방식이다. 예전의 방식이긴 하지만 아직도 이런 방식으로 배포와 사용을 하는 사이트들이 존재한다. 하지만 현재는 그런 다른 방식을 사용한다. 우리가 자바스크립트(js)를 사용하기 때문에 npm을 사용할 것이다. npm(node package manager)은 만들어놓은 라이브러리나 패키지를 등록하고 사용할 수 있으며 버전도 존재한다. 이런 npm을 사용하기 위해선 2가지의 고려해야할 사항이있다. 첫번째로..

2022. 3. 13. 20:02

study

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

차트 라이브러리 만들어보기 - 차트 라이브러리 구현 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 *..

2022. 3. 12. 13:14

study

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

차트 라이브러리 만들어보기 - 차트 라이브러리 구현 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); 코드 진행은 기존의 구조와 비슷하다. in..

2022. 3. 11. 18:01

study

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

차트 라이브러리 만들어보기 - 라이브러리 설계 원칙 코드를 생산하게 되면 코드를 사용하는 사람이 있기 마련이다. 그게 본인일 수도 있고 다른 사람이 될 수도 있다. 여기서 중요한 2가지의 관점이 있는데 첫번째로 인터페이스의 일관성이다. 여기서 인터페이스의 일관성이란 클래스나 함수부터 네이밍 처리하는 부분까지도 인터페이스의 영역이라 할 수 있다. 어느정도의 일관성이 있다면 사용하는 입장에서 꼭 매뉴얼을 보지 않고도 유추할 수 있다. 매뉴얼을 꼭 봐야하는 경우도 있겠지만 가능한 비슷한 기능이나 비슷한 처리를 하는 부분이라면 일관성있게 만드는 것은 중요하다. 두번 째는 오류처리의 일관성이다. 작동하는 도중에 에러가 발생 했을 시 해당하는 문제에 대해 예외를 던지거나 null 처리를 하는 등에 있어서 어떤 기준..

2022. 3. 10. 14:49