관련 글 VanillaJS로 SPA 환경 구축하기 - Step1: Prepare VanillaJS로 SPA 환경 구축하기 - Step2: TypeScript VanillaJS로 SPA 환경 구축하기 - Step3: Webpack…
Javascript
관련 글 VanillaJS로 SPA 환경 구축하기 - Step1: Prepare VanillaJS로 SPA 환경 구축하기 - Step2: TypeScript…
관련 글 VanillaJS로 SPA 환경 구축하기 - Step1: Prepare VanillaJS로 SPA 환경 구축하기 - Step3: Webpack5 typescript를 이용하여 개발하기 위한 환경을 구성하는 과정이다. Installation…
관련 글 VanillaJS로 SPA 환경 구축하기 - Step2: TypeScript VanillaJS로 SPA 환경 구축하기 - Step3: Webpack5 React, VueJs…
해당 글은 개인적으로 기록을 위해 작성한 부분이므로 잘못되거나 부족한 부분이 있을 수 있습니다. 이전 글 에서 기본적인 프로젝트 셋팅을 마무리하였고, 이번에는 realword API 문서에서 Frontend Specs > Routing…
해당 글은 개인적으로 기록을 위해 작성한 부분이므로 잘못되거나 부족한 부분이 있을 수 있습니다. realworld 와 다음과 같은 기술 스텍을 이용해 react app을 만들고, 해당 서비스를 배포해가는 과정을 기록하기 위한 글이다. yarn…
Configuration Jenkins 사용자가 설정한 사용자로 로그인을 하고 나면 이제 젠킨스 CI…
CI/CD
회사에서 개발 환경에 대한 CI 환경 구성을 하며 정리했던 기록이다. 구성한 환경은 아래와 같다. Server: CentOS 7.9 8cpu 32ram 100G SSD Docker v20.10.7 Docker Compose v1.28.6 Jenkins…
개발 산출물에 대하여 하나의 서비스 포트에서 개발 브랜치에 따라 라우팅 처리를 하여 접속이 가능하도록 구성을 할 필요가 있어서 nginx의 reverse proxy 를 활용하여 설정한 기능록 nginx.conf StackOverflow…
Infra
매번 프로젝트 구성 시마다 이전에 사용하던 eslint 규칙을 복사해서 다시 붙여넣고, 프로젝트에서 필요한 규칙들은 더 추가하거나 재정의 후에 사용을 하게 되는데, 이러한 반복 작업들에 대한 방법으로 git 레파지토리 생성 시의 template…
TOC {:toc} realworld 를 참고해서 Nuxt…
TOC {:toc} Passport.js 는 Node.js를 위한 사용자 인증을 위한 모듈 미들웨어로써, 사용자 로그인 기능을 쉽게 만들 수 있게 도와준다. 로컬 로그인, OAuth 등을 위한 기능들을 제공한다. 일단, passport…
TOC {:toc} ECMAScript 정리하기 ECMAScript 2015 (ES6) Object Destructuring 변수의 선언과 분리하여 할당해야 하는 경우 key에 해당하는 값이 없는 경우에 대한 default value…
TOC {:toc} 이번에 진행할 프로젝트에서 차트를 이용한 데이타 시각화가 필요해서 관련한 라이브러리를 조사하고 테스트해보게 되었다. 조사를 하면서 기록을 남기기 위한 글... chart 라이브러리 종류 9 Best JavaScript…
TOC {:toc…
TOC {:toc} 자바스크립트에서는 현재 아래의 6개의 primitive 타입을 제공하며, primitive는 원시 데이터 타입 을 의미한다. undefined null boolean number string symbol (ECMAScript…
TOC {:toc} Javascript Transpiler ES6, ES7 으로 작성된 자바스크립트 코드를 브라우저(특히 구형 브라우저)가 인식할 수 있는 ES5로 변환시켜주는 역할을 수행한다. Babel 설치하기 .babelrc…
TOC {:toc} ESLint = ES + Lint ESLint는 자바스크립트 문법 중에 에러가 있는 곳에 표시를 해주기 위한 도구이다. 자바스크립트 코드와 코딩스타일 점검을 위한 도구가 ESLint 외에도 JSHint, JSLint…
TOC {:toc} 테스트 코드 작성을 위한 라이브러리 다양한 테스트 관련 라이브러리들 중에 어떠한 것이 적합한지에 대해 고려하여 판단을 해야하는 데.. 일반적으로 다음과 같은 기능을 제공해야한다. 구조적인 테스트를 제공한다(Mocha, Jasmine…
TOC {:toc} 간단 개념 정리 Bean 스프링에서 관리되는 객체를 Bean 이라고 한다. Container 컨테이너는 Bean을 정의하고, 생성하고, 저장하고, 반환한다. DI (Dependency Injection…
Java
TOC {:toc} JVM (Java Vitual Machine) Java Byte Code를 OS에 맞게 해석해주는 역할을 수행한다. ByteCode가 수행됨에 있어서 JVM 위에서 OS에 종속적이지 않다. JVM은 크게 Class Loader…
TOC 정확히는 TypeScript를 사용하지 않고 Type을 정의하기라고 해야하나.... 암튼 관련된 참고글들... Reference Type Vue without TypeScript Type Vuex without TypeScript
지도 라이브러리를 이용하여 웹 화면에 지도를 출력해보기 많이 사용하는 라이브러리로는 Leaflet 과 OpenLayers 가 있는 듯. 두 라이브러리의 특징을 간단히 정리하면... Leaflet 코드의 크기가 작고(38K…
Object에 속성 값이 존재하는 지 여부를 체크하기 위한 방법들과 차이점(?) 정리 아래와 같이 obj…
TOC {:toc} 함수형 프로그래밍에 대해 내가 이해한 것을 정리하면... *공통화, 모듈화* 하기 위한 개발 스타일(?) 중의 하나로, side effect…
TOC {:toc} 이해하기가 어렵다.ㅡㅠ Javascript…
TOC {:toc} 콜백함수 싱글 쓰레드 기반인 자바스크립트에서 비동기 처리를 위해서 콜백함수를 사용한다. 예를 들어 대표적인 콜백함수는 setTimeout(callback, milliseconds…
TOC {:toc} 여기에 정리하지 않은 그 외의 ES6 문법들은 ES6 문법 정리 를 참고 변수 선언 (let, const) 기존 var 키워드 를 이용한 변수 선언의 단점을 보완하기 위해 let 과 const…
TOC {:toc} javascript에서는 this 의 동작에 대해 이해를 하려면 Execution Context 와 Lexical Environment 를 이해해야한다. Execution Context…
TOC {:toc} SASS Theming Web Apps with SASS How to Use Sass to Build One Project With Multiple Themes A successful Sass theme structure…
Styles
TOC {:toc} CSS에서 효과와 애니메이션을 만들때 괜찮은 CodePen 데모 10가지 CSS에서 효과와 애니메이션을 만들때 괜찮은 CodePen 데모 10가지 Hover Hover.css Shake CSShake Transition Easing…
TOC {:toc} A Complete Guide to Flexbox A Complete Guide to Flexbox flexbox로 만들 수 있는 10가지 레이아웃 flexbox로 만들 수 있는 10가지 레이아웃 Responsive Grid…
자바스크립트에서 프로그래밍적으로 화면을 제어하기 위해서는 브라우저의 모든 요소에 대한 처리가 끝나야 한다. 해당 시점을 알려주기 위한 이벤트가 load , DOMContentLoaded 이다. load load…
클로저 클로저는 외부에서 내부 변수에 접근할 수 있도록 하는 함수를 말한다. 쉽게 말하면, 함수 내에서 함수를 정의하고 리턴하는 것을 의미한다. 위의 함수는 다음과 같이 동작한다. 전역변수 globalVar에 closure…
Date 객체 이용 console 객체 이용 console.time() 과 console.timeEnd() 를 이용하여 시간을 측정하는 방법이다. 해당 함수는 Chrome2, FireFox10, Safari4, IE11에서 사용이 가능하다.
TOC {:toc} 스코프 변수의 유효 범위를 의미하며, 전역과 지역 스코프로 나뉜다. 같은 이름으로 가진 경우, 함수 내부에서는 지역 스코프가 전역보다 우선시된다. var…
TOC {:toc} 아주 기본적일 수도 있으나, 코드를 어떻게 작성하느냐에 따라 자바스크립트 실행 성능을 약간은 높일 수 있다. 객체의 생성 및 접근 객체를 생성할 때에 new 보다는 리터럴 형식을 사용해 객체를 생성한다. Object…
TOC Configuration vue-cli 3.x.x Installation Quasar plugin 설치 Reference https://quasar-framework.org/guide/index.html#Vue-CLI-3-plugin
Example1 Reference Dependency Management Dynamic Loading
TOC Vue + TypeScript 를 적용해보니, 어찌 어찌 프로젝트도 생성하고, 프로그램도 돌아가지만... Lint…
TOC {:toc} TypeScript JavaScript의 슈퍼셋이다. 프로그래밍 언어이다. Javascript는 Interpreted 언어 (컴파일 필요없음)이나, TypeScript는 Compiled…
TOC {:toc} Vue CLI 3 Installation 이전 버전 삭제 이전 버전(1.x or 2.x)이 설치되어 있는 경우 npm 또는 yarn을 이용하여 삭제를 한다 Installation Project 생성 vue create…
…
Algorithm
문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 1, 5, 2, 6, 3, 7, 4 , i = 2, j = 5, k = 3이라면 array의 2번째부터…
TOC 아래의 알고리즘은 잘 이해가 가지 않는다..ㅠㅠ merge sort…
문제 설명 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 22…
문제 설명 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion…
Form 디자인 관련 참고 글 Design Better Forms : 폼 디자인 관련 Do/Don't가 이해하기 쉽게 잘 정리되어있는 글 UI https://flatuicolors.com/
vuex 참고 자료 정리 Vuex Tutorial vuex의 개념에 대해 이해하기 쉽게 잘 설명해둔 동영상 Vuex: Intro Tutorial Vuex Start 아래의 블로그 글이 정리가 잘 되어있어서 참고하기가 좋았음 Vuex 시작하기…
Vue prototype으로 정의 main.js 파일에 사용하고자 하는 라이브러리를 Vue의 pprototype으로 선언한다. vue의 prototype으로 선언된 객체들을 보면 $store, $route ... 와 같이 '\$'로 prefix…
VueJS는 기본적으로 IE8 이하는 지원하지 않는다. 그 이후의 IE에 대해 정상적으로 동작하도록 적용하기 위해서는 polyfill을 적용해야한다. 의존 라이브러리 설치 적용 main.js 의 최상단에 import 해준다 axios…
TOC {:toc} vue-i18n 설치하기 Installation plugins/i18n.js locales/ko.json locales 파일을 정의한다. 각 언어에 대하여 하나의 스크립트에 정의하는 것이 좋다. nuxt.config.js nuxt…
TOC {:toc} Nuxt.js를 이용하여 기존에 SPA로 구현한 코드를 SSR로 리팩토링을 하고 있다. static page로 generate 해주는 기능도 있어 공부삼아 리팩토링 중~~ 구현 환경 Vue.js 2 Nuxt v2.3.…
base64로 인코딩된 이미지 파일을 file object로 변환하기 위해서는 먼저 blob으로 변환 후에 formData에 담아서 파일로 변환 예제
TOC {:toc} Backend 프레임워크을 Spring Boot로 사용하고, Frontend 프레임워크를 Vue.js로 사용하는 경우에 thymeleaf를 이용하여 연동하는 방법이다. Spring Boot 설정 thymeleaf 설정 Gradle…
이미지 파일의 width, height 구하기 예제
이미지 파일을 input text에 url을 입력하거나 drag&drop으로 입력하기 html javascript css 실행 결과
해상도에 따라 이미지 사이즈가 변경되게 하려면, resize 이벤트를 이용하여 해상도의 크기를 구하고 그에 따라 다시 출력하고자 하는 이미지의 크기를 설정해준다. html javascript css 실행 결과 Reference Getting width…
html css 실행 결과
javascript에서 이미지나 텍스트 파일을 압축하고자 하는 경우에 jsZip 라이브러리를 활용한다. Inatall 아래는 이미지 파일을 zip…
TOC {:toc} 특정 조건을 만족할 때까지 반복하기 setTimeout을 promise 패턴으로 구현 Promise.race(iterable) iterable 안에 있는 Promise 중에 가장 먼저 resolve 또는 reject…
TOC {:toc} Storybook 은 컴포넌트 단위의 개발 환경을 지원하는 개발도구이다 독립적인 컴포넌트 개발이 가능하도록 지원해주어 각각의 컴포넌트 개발에 집중할 수 있다. 또한 AddOn…
image file을 base64로 인코딩 input tag를 통하여 입력받은 이미지 파일을 base64로 인코딩 예제 image url을 이용하여 base64로 인코딩 image url을 읽어서 base6…
TOC {:toc} VueJS로 프로젝트를 진행하면서 다큐먼트에서 제공하는 스타일 가이드 에 맞춰서 작성을 하기로 하면서 정리한 내용들 컴포넌트 구조 poblohpsilva 가 작성한 vuejs-component-style-guide…
TOC {:toc} 호출되는 router에 따라 동적으로 title이나 메시지가 변경되도록 하는 방법 header tag 내부의 title 변경하기 header tag 내부의 favicon 변경하기 파라미터 전달 User 컴포넌트에서는 props…
main.js 에서 axios 대신에 default 설정을 정의한 스크립트 파일을 import하여 사용한다. main.js http.js Polyfill 적용 axios는 IE에서 공식적으로 지원하지 않으므로 Polyfill을 적용해주어야함 IE…
TOC {:toc} Vue.js 프로젝트에 adminLTE 템플릿 적용하기 플러그인 설치 의존 라이브러리를 설치한다. 라이브러리 import 빌드 설정 font 파일 빌드를 위해 url-loader…
TOC {:toc} UI Library for VueJS Vuetify element UI Library 적용하기 Bootstrap 라이브러리 설치하기 main.js 에 해당 스타일 파일 import Vuetify vuetify…
TOC {:toc} 다른 파일에 정의된 속성을 extend 하기 다음과 같이 두 개의 파일이 있을 때에 다른 파일의 내용을 extend하여 사용하는 방법
TOC {:toc} Vue.js MVVM 패턴의 ViewModel 레이어에 해당하는 자바스크립트 라이브러리 이다. MVVM 패턴에 대입하여 Vue.js 살펴보기 View 사용자에게 보여지는 부분이다. ViewModel View…
아이콘 Flaticon 아이콘 컬러/크기/파일형식(png, svg, eps, psd) 등 선택하여 다운받을 수 있다 Iconfinder flaticon과 유사하지만 좀 작은 아이콘 자료들 찾기에 유용 html/css 아이콘 Font Awesome…
TOC {:toc} Arrays.prototype.sort 숫자 정렬 문자 정렬
htmml css 적용 결과
MongoDB에 jdbc driver 를 이용하여 연동하는 방법에 대한 예제 gradle 예제 코드
TOC {:toc} Sum values in array 숫자 배열이 있을 때에 java8에서 각 숫자의 합을 구하는 방법 apache commons 유틸을 사용하는 경우
피보나치는 수학에서 점화식으로 정의되는 수열. 0과 1로 시작하고, 다음에 오는 피보나치 수는 바로 앞에 오는 두 수의 합이 된다. 즉, 아래와 같은 수이다.. 이것을 재귀함수나 반복문으로 표현하면 아래와 같다. 재귀함수 반복문 Reference…
TOC {:toc} python 문법 정리 리스트 리스트 복사 “=“으로 대입을 하게 되면 별도의 리스트 변수로 생성되지 않고 동일한 리스트를 참조하게 된다. 서로 다른 리스트를 참조하도록 하려면 아래와 같이 복사를 해야한다. 조건문 및 반복문 for…
Python
JavaDoc 미리 정의된 포맷으로 코드 내에 작성된 내용을 html 형태의 문서로 생성하는 도구 {@code} Javadoc에 예제 코드를 작성할 때 html, annotation 등을 사용하는 경우에 사용한다. Reference Java…
TOC {:toc} java8 부터 지원하는 날짜 객체. 문자열로 입력된 날짜를 변환하기 날짜 변환하기 : to "java.util.Date" 날짜 비교하기 남은 시간 계산 ChronoUnit…
java에서 사용가능한 열거 타입. 기본 사용 방법 다음과 같이 정의를 하면 배열 형태로 저장된다. 실행 결과 각 상수에 값을 정의
자바의 정석 pdf를 인터넷에서 구하게 되어서 기초를 다시 정리할겸 읽으면서 개인적으로 잘 기억이 되지 않거나 헷갈리는 부분을 정리... 변수의 타입 Primitive Type과 Reference Type이 있음. Primitive Type…
Lombok ? Bean객체 생성 시, annotation을 통하여 getter/setter 등을 별도로 생성하지 않아도 기능을 제공하도록 해주어, 코드를 좀 더 간결하게 해줌. Usage Gradle 버전이 2.12 이상인 경우에는 build…
테스트 케이스에서 로깅을 남기기 위해 System.out.println 을 사용하지 말고 logback을 이용하여 로깅을 남겨보자 !! 라이브러리 정의 classic만 추가하면, 아래와 같이 logback-classic…
What is Typesafe …? java properties, json, json superset(예를 들어 hocon )과 같은 설정 파일을 읽기 위한 configuration library이다. 관련한 자세한 내용은 github…
LRM-00109: could not open parameter file 원인 환경변수의 ORACLE_SID와 최초 설치 시 지정한 SID가 일치하지 않아서 발생. 해결방법 오라클 설치 시 등록된 SID 확인 여기서는 설치 시, ora11g…
Database
DB 접속 또는 DB 생성 또는 또는 DB 삭제 사용자 추가 또는 확인 DB 확인 (생성되어있는 DB 확인) 패스워드 변경 function 생성 및 삭제하기 function 생성. 삭제
postgresql이나 greenplum을 설치 후에 아래와 같은 에러가 발견 햇을 때의 조치 했던 방법 psql: FATAL: Peer authentication failed for user host…
세션 상태 조회하기 파라미터 조회 invalid obect 확인
설치 참고 링크 http://v_lovepooh_v.blog.me/20179692966 http://ngee.tistory.com/82 ubuntu에 설치시 참고 링크 : http://wonzopein.com/45 postgreSQL…
설치 System 환경 내가 설치해본 시스템 환경 2.6.9-11 이상의 커널이 필요 오라클 설치 전 "추가 패키지 설치" yum…
설치 System 환경 내가 설치해본 시스템 환경 오라클 설치 전 "추가 패키지 설치" yum을 통하여 설치 openmotif21은 yum을 이용하여 설치가 불가능하므로 다음 링크에서 다운로드 받아서 설치 ( 해당 파일 첨부) 링크 : ftp…
HashMap/ArraryList 값 꺼내기 서블릿에서 hashmap이나 arrarylist에 저장해서 넘겨준 값을 jsp 단에서 꺼내는 방법 arraylist 특정 인덱스의 변수 값을 가져오기 forEach 문으로 반복해서 가져오기 hashmap…
네이버 스마트 에디터 붙이고....필수 입력값에 대해 검증하고...서블릿 호출해서..결과 값 받아서 alert 창..뿌리기.. jsp 소스 서블릿 소스
ajax 써서 페이지 이동안하고 호출해보고 싶어 몇일 삽질하다가 드디어 성공..눈물 난다..ㅠㅠ 사용한 json 라이브러리 : json-lib-2.4-jdk15.zip ajax.jsp test.java ajax.jsp…