대가는 결과를 만든다

server side에서 swagger ui로 간단히 api 목록 페이지를 구성하려고 하는데, 기본 swagger ui 프리셋에 적용되어 있는 default url을 바꾸는 방법을 찾을 수 가 없다. (기본으로 petstore의 api목록이 뜸) 같은 이슈에 대한 답변을 찾아 기록한다. const fs = require("fs") const express = require("express") const pathToSwaggerUi = require("swagger-ui-dist").absolutePath() const indexContent = fs.readFileSync(`${pathToSwaggerUi}/index.html`).toString() .replace("https://petstore.swa..

웹페이지에서 스크롤을 내리다가 맨 위쪽으로 한번에 이동하는 go top scroll button을 구현하는데, 대부분의 구현 방식이 jQuery를 이용하고 있다. CSR 박식 프로젝트를 진행하면서 무거운 라이브러리에 속하는 jQuery를 이용하지 않는 추세라 jQuery가 아닌 순수 자바스크립트로 구현하는 방법을 찾다가 기록 용으로 남겨 놓는다. 물론 스크롤 애니메이션 관련 라이브러리들도 많다. * code내에서 document.body => document.documentElement 로 수정 필요 document.getElementsByTagName('button')[0].onclick = function () { scrollTo(document.documentElement, 0, 1250); } f..

최근 frontend 개발 패키지 중 Babel은 필수라고해도 과언이 아니다. 이 Babel에 대한 개념을 정확히 정리하고자 한다. Babel이란? 최신 버전의 자바스크립트 코드를(ECMA 2015+/ES6 코드를) ES5 환경에서 동작하도록 컴파일하는 자바스크립트 컴파일러이다. (트랜스파일러라고 칭하기도 함.) 여기서 말하는 ES5 환경이란 즉 현재나 이전 브라우저 환경을 의미한다. * ECMA자바스크립트 버전에 대한 내용 정리는 다른 글에서 하겠다. babel의 주요 역할을 열거하자면, 문법의 변형 타겟 환경에서 누락되어있는 부분을 보충하는 Polyfill 기능 (런타임에서 보충) 소스코드의 변형 (codemods) 기타 등등(여기서 비디오로 확인하라고 함 : https://babeljs.io/vid..

vue로 개발 중 code splitting을 하면서 가장 기본적으로 하는 것이 router에서 혹은 component내에서 component의 dynamic import를 활용하는 것이다. import aDialog from 'Views/dialogs/aDialog';//기본 import const aDialog = import('Views/dialogs/aDialog');//동적 import 하지만 위의 동적 import 코드를 적용해도 사실 기본 prefetch 설정 때문에 실제 chunk들이 layz로드 되지 않고, 초기 로딩 시 모두 http 요청이 되고 있었다. chunk들을 가시적으로 관찰할 수 있게 다음과 같이 주석으로 chunk name을 부여할 수 있다. const aDialog = i..

초기 AWS 서비스 사용 진입시 대부분은 서비스 자체에만 집중해서 개발을 시작하게 된다 (특히 소규모의 팀인 경우 더욱 그렇다). 하지만 여러 구성원들이, 여러 AWS 서비스들을 사용하게 되고, 유기적으로 연결된 구조로 사용하게 되면서 보안적으로 갖춰야할 관리 시스템과 권장 사항들이 있다는 것을 정리하고자 한다. IAM이란? (Identity and Access Management) AWS 리소스 액세스를 관리/제어하기 위한 서비스로 인증 또는 권한부여 대상을 관리한다. 초기 AWS 계정 생성 시 해당 계정의 모든 AWS 서비스 및 리소스에 완전한 액세스 권한이 있는 하나의 ID, 즉 AWS 계정 루트 사용자로 시작한다. 일상적인 작업, 관리 작업조차도 이 루트 사용자를 사용하지 않는 것을 권장하고 있고..

INTRO 프론트엔드 개발 및 예제들 테스트를 하는 중 CRA(create-react-app)이나 vue-cli를 사용하면서 종종 npx를 사용하는 예시들을 보게됬다. npm 이후 yarn, 또다른 npx라는 패키지 매니저가 나온 것인가 싶었으나 댓츠 노노! npx에 대해 개념정리 해보겠다. npx란? npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 추가된 툴이다. (새로운 패키지 매니저 개념이 아니다! ) 패키지를 설치하지 않고, npm 패키지를 1회성으로 즉석 실행해볼 수 있는 도구이다. 배경 npm으로 모듈을 설치 시 두가지 방안이 있다. 1) 전역으로 설치하여 의존성 라이브러리들이 PC에 남게 하는 것 2) 현재 프로젝트에만 개발 의존성 모듈로 설치하는 것 최근 npm으로 설치..

web을 다뤄봤고, 최근 모던 웹 개발을 해보면 CSS 뿐 아니라 Sass, scss를 다뤄보고 들어봤을 것이다. 이에 대한 배경과 개념에 대해 정리를 하겠다. CSS란? (Cascading Style Sheets) 문서의 스타일을 구현하는 스타일 시트 언어이다. 배경 W3C에서 1996년 도입한 것으로, 이전에는 HTML언어 하나로 문서와 디자인을 모두 구현했었다. 예상되듯이 수정 및 유지보수를 해야하는 경우 스타일, 문서 중 하나를 수정 하더라도 모두 수정해야하는 단점이 있었고, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기가 CSS의 탄생 배경이다. css에 대한 건 이미 다 잘알테니 이 정도로 하고 패스! 그럼 Sass는 뭐여? (Synt..

INTRO EC2에서 운영하고 있는 서버에 https를 적용하기 위해서는 두 가지 방법이 있다. 1) EC2 내부에 SSL인증서를 설치하고 서비스하는 방법 (일반적인 기존 방식) 2) AWS에서 제공하는 인증서 관리 서비스인 ACM(AWS Certificate Manager)을 ACM 통합서비스와 연동하여 적용하는 방법 (참고 : ACM이란? https://docs.aws.amazon.com/ko_kr/acm/latest/userguide/acm-overview.html) 1) 의 방법은 기존 개발방식에서 적용했던 일반적인 방식이다. 유료 인증서나, Let's Encrypt같은 무료 인증서를 적용해서 운영가능하다. 인증서의 경우 까다로운 것이 인증서 유효기간마다 갱신해주야 한다는 것이다. (Let's E..