첫 서비스 개발을 어떻게 잘 할 수 있을까? 개발자로써 서비스의 한 부분을 맡아 개발을 진행하게 되는데 새로운 서비스를 처음 맡게 되었을 때 어떻게 '잘' 개발 할 수 있지? 에 대한 고민이 있었습니다. 보통 온보딩과 가볍게 회사 간단한 서비스를 개발하면서 스며들긴 하지만 좀 더 빠르게 스며들고 싶다는 저의 욕심을 막을 수 없었습니다. 또한 저희 회사는 정형화된 온보딩 과정이 부족하였고 이런 문제를 겪고 저와 같은 고민을 하시는 분들과 의견을 나누고 싶어 블로그를 켰고 처음 개발 업무를 진행하면서 집중적으로 보면 좋을 것들을 저의 경험을 위주로 글을 작성했습니다. 우선, 저는 JQuary로 되어 있는 관리자 페이지를 Svelte로 전환하는 업무를 맡았습니다. 기존에 JQuary로 되어 있는 페이지는 MP..
ES2023있으니 어서 배웁시다. 원문: https://javascript.plainenglish.io/es2023-is-here-hurry-up-to-learn-2de85c61f0ae 서문 ES6는 2015년도에 제안되었으며, 이 논리에 따르면 ES2023은 ES14로 불려야 되지만 혼동을 피하기 위해 이름에 연도를 사용합니다. ES 표준에 집중했던 때를 돌이켜보면, 여전히 ES6에 머물러 있습니까? ES 표준이 되풀이 되는 것을 위해 최근에 어떤 새로운 특징이 추가되었는지 보겠습니다. ES2023 2023년도에 완료될 제안들 Array가 수정되면 수정본을 반환 Array, TypedArray에는 다음과 같이 Array 자체를 변경하는 다양한 방법들(sort/splice, etc)이 있습니다.: con..
IntelliJ(WebStorm)를 어떻게 가볍게 사용할까? 이번에 처음 사용하게 된 IntelliJ(WebStorm)를 어떻게 하면 가볍게 사용 가능한지 알아보고 있었는데 IntelliJ(WebStorm)와 관련된 것들에 대해 깊게 찾아보고 있다. 그 중 IntelliJ(WebStorm)와 VSCode의 차이점은 무엇인가? 라는 의문을 가지게 되었다. 간단하게 내린 결론은 IntelliJ(WebStorm)는 Java JVM에서 통해 동작하고 VSCode는 V8기반의 Electron에서 동작하고 있다는 점 이다. 그래서 IntelliJ(WebStorm)을 어떻게 가볍게 사용하기 위한 옵션 끄기, 메모리 관리등에 대한 설명에 앞서 JVM, V8기반 Electron에 대해 간단하게 설명하고자 합니다. (JV..
어떻게 하면 메뉴를 쉽게 짤 수 있을까? (데이터 구조 관련) 이번에 Style Guide Menu를 수정하는 부분을 맡았습니다. 처음에는 CSS 만 수정하면 되는 줄 알았으나 값들의 데이터 구조를 잘 조합하여 데이터가 많아질 경우를 대처하고 한 눈에 보이고 간략한 코드를 짜는 것이 주된 목적입니다. 사용 기술 HTML, CSS, JavaScript, Svelte 변경 전 Data 형태 간단하게 말하면 [{}]와 같은 형태로 되어 있습니다. let url = [ { MENU_NAME: "1", MENU_URL: "/dev" }, { MENU_NAME: "2", MENU_URL: "/dev" }, ]; 그래서 Svelte에서 다음과 같이 뿌려주면 됩니다. {#each url as menu} //routin..
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.js github 정의: 주로 Moment.js와 호환되는 API를 사용하여 최신 브라우저의 날짜와 시간을 구문 분석, 유효성 검사, 조작 및 표시하는 최소한의 javaScript 라이브러리 무게: 2kb 특징: Immutable(불변) : Day.js 개체를 변경하는 모든 API 작업은 새 인스턴스를 대신 반환합니다. => 이것은 긴 디버깅과 버그를 방지합니다. I18n 지원 : 국제화를 지원하지만 사용하지 않으면 어느 것도 빌드에 포함되지 않습니다. 설치 npm install dayjs --save dayjs() .startOf('month') .add(1, 'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss'); See the Pen Untitl..
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..