Svelte 란?
Svelte 란? 이번에 Hebees라는 회사에 합류를 하게 되어 Svelte를 사용하게 되었습니다. 바로 업무에 들어가기 전에 Svelte에 대해 정리를 하는 것이 좋다고 판단하였습니다. Svelte 정의 우선, Svelte는 사용자 인터페이스 구축에 대한 근본적이고 새로운 접근 방식이며 대부분의 작업을 앱을 빌드할 때 발생하는 컴파일 단계로 이동하여 사용한다고 되어있습니다. 또한, 공식 문서를 보면 Svelte를 대표적으로 3가지를 정의 하고 있습니다. Write less code 이미 알고 있는 언어(HTML, CSS, JavaScript)를 사용하여 상용구가 없는 구성 요소를 구축합니다. No virtual DOM 코드를 작고 프레임워크가 없는 vanilla JavaScript로 컴파일합니다. 앱..
Layout을 짜는 이유? 서비스 팀이 사용가능한 간단한 도수 변환 프로그램을 개발한 후 이에 관해서 발표를 진행 할때 Layout란? Layout을 왜 짜는 것인가? 라는 질문을 받게 되었습니다. 단순히 구조를 잘 파악하기 위해서 짜는 줄 알고 명확한 답을 내릴 수 없었습니다. 그래서 다시 찾아보게 되었습니다. Layout? 정의를 살펴보면 Layout is the process of calculating the position of objects in space subject to various constrains. 레이아웃은 다양한 제약 조건에 따라 공간에서 객체의 위치를 계산하는 프로세스입니다. 라고 Wiki에 정의되어 있습니다. 여러 의미를 본 결과 Layout은 여러 요소(덩어리들)를 배열하는..
day.jsgithub정의: 주로 Moment.js와 호환되는 API를 사용하여 최신 브라우저의 날짜와 시간을 구문 분석, 유효성 검사, 조작 및 표시하는 최소한의 javaScript 라이브러리무게: 2kb특징:Immutable(불변): Day.js 개체를 변경하는 모든 API 작업은 새 인스턴스를 대신 반환합니다.=> 이것은 긴 디버깅과 버그를 방지합니다.I18n 지원: 국제화를 지원하지만 사용하지 않으면 어느 것도 빌드에 포함되지 않습니다.설치npm install dayjs --savedayjs() .startOf('month') .add(1, 'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss'); See the Pen Untitled by..
JavaScript 반복JavaScript에서 객체나 배열등을 반복할 때 for문을 사용하게 됩니다. 또한, JavaScript에서 for ... in, for ... of, .forEach 등을 만들어서 보다 편리하게 Object, Array등을 반복할 수 있게 됩니다.for ... in- 객체의 열거가능한 key(속성)들을 반복하는데 사용한다. (Nonenumerable(비열거형)인 value에는 접근할 수 없습니다.)- Object의 key or index를 반복 - 반복할 때마다 인스턴스 or 프로토타입 체인을 검색하므로 느린 속도를 가집니다.- index에 할당되는 값들은 String 타입으로 변환됩니다.let obj = { a: 1, b: 2};for (let key in obj) ..
객체 배열 JavaScript는 객체와 배열로 이루어져있는데 정확히 그들의 관계와 의미에 대해 이해가 부족하여 작성하게 되었습니다. 우선, 비교에 앞서 배열과 객체의 기본적인 내용부터 설명하도록 하겠습니다. 객체 다양한 키 컬렉션과 복잡한 엔터티를 저장하는 데 사용되는 것 (첨부: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) 배열 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖는 것 (첨부: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array) 배열은 객체인가 ? 정답부터 말하..
React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X) CRA(Create-React-App)을 사용하여 쉽게 개발을 진행하였지만 생각보다 사용하지 않고 알지도 못하는 library 등이 너무 많아 Boilerplate로 만들게 되었습니다. Github Repository https://github.com/GeonWooPaeng/React-TypeScript-Boilerplate What is inside? Webpack Babel React TypeScript ESLint & Prettier 📍 React & TypeScript 설정 1. package.json 생성 npm init -y 2. React 설치 node-modules..
TypeScript에서 Type을 어떻게 쉽게 파악할까? TypeScript를 통해 프로젝트를 진행했었지만 단순히 VSCode에서 TypeScript의 type을 알려주는 기능을 통해 끼워 맞추고 있었습니다. 그래서 다른 분들의 코드를 이해하기에도 어려움이 따랐고 추 후 큰 프로젝트를 파악하기 위해서는 자세히 공부를 할 필요가 있다고 생각하게 되었습니다. TypeScript를 다시 공부하면서 기본적인 TypeScript의 문법보다는 TypeScript를 다시 재정비하면서 TypeScript의 이 부분을 알게 되어 저한테 매우 도움이 되었다 및 개인 노하우? 를 토대로 작성 해보려고 합니다. 너무 깊게 들어가지 않으니 더 찾아보면 좋습니다. :) (개인마다 차이가 있으니 재미로 읽어주시고 좋은 방법이 있으..
어떻게 Model과 api(데이터)를 효과적으로 연결할까? (MVVM 패턴) 기술 과제(React + TypeScript)에서 MVVM 패턴을 적용해야했습니다. MVVM 패턴을 처음 적용하다 보니 크게 감이 잡히지 않아 여러 문서를 보고 따라하는 식으로 처음 진행을 했는데 MVVM패턴을 적용해 나갔습니다. 그러나 Directory구조 잡기, 데이터 분리, Model과 데이터를 연결등 많은 문제들 중 Model과 데이터를 어떻게 효과적으로 연결하지? 라는 부분을 나누려고 합니다. 우선 내용에 들어가기 앞서 MVVM패턴에 대해 간략하게 알아보도록 합시다. 👣 설명 MVVM(Model - View - ViewModel) 패턴 View: 사용자가 화면에서 보는 것들에 대한 구조, 배치, 그리고 외관 ViewMo..