잘 정리해보자

Babel : cross browsing 문제를 해결하기 위해 만들어졌으며, ECMAScript2015+ (ES6) 이후 코드들은 모든 브라우저에서 동작하도록 호환성을 지켜준다. Typescript, react 등 다른 스크립트들에 대해서도 동작하게 한다. 바벨 3단계 빌드 Parsing (파싱) : 코드를 각 토큰별로 분해 Transforming (변환) : ES6을 ES5로 변환 Printing (출력) 1. 설치 터미널 npm install @babel/core @babel/cli > @babel/cli : babel의 터미널 도구 app.js const alert = msg => window.alert(msg); //ES6 기준으로 작성된 코드 2. 바벨 실행 터미널 터미널에서 npx로 실행 (주..

loader (로더) : javascript, css, style, image 등 파일들을 모듈로 로드할 수 있게 도와준다. webpack-loader.js : 패키지 최상단 webpack.config.js 파일과 동일한 경로에 생성 module.exports = function myWebpackLoader(contents) { console.log('test~!!'); return contents; } webpack.config.js module : { rules :[ { test : /\.js$/, //.js로 끝나는 모든 파일들은 use키값의 로더로 실행된다. (loader가 처리해야할 파일의 패턴 (정규식)을 입력) use : [ path.resolve('./webpack-loader.js') ]..

Webpack : 여러개의 js 파일이 의존관계 (서로 부르고 부르는 관계) 경우 하나로 모아주는 역할을 한다. 하나로 모아진 것을 bundle 이라고 한다. (webpack = bundler) webpack-cli : webpack을 터미널 명령어로 실행할 수 있는 패키지 설치 : npm install -D webpack webpack-cli > webpack과 webpack-cli 설치 > -D 옵션은 개발용 패키지로 설치되며, devDependencies 안에 설치된다. > -D 옵션이 없는 경우, dependencies 안에 설치됨. webpack 옵션 --mode : 개발/운영 선택해서 배포할 수 있다. ("development" / "production" / "none") (필수) --entr..

javascript 에서 여러 js에서 선언한 전역함수를 사용하면, 전역함수가 오염될 수 있다. ex) sum()함수를 전역으로 선언 후, sum = 1 을 선언해버리면 함수 사용이 불가능해진다. IIFE (Immediately Invoked Function Expression) 즉시 실행 함수 : 정의되자마자 즉시 실행되는 javascript 함수를 말한다. (function(){ statements; })(); > IIFE 함수를 통해서만 접근하도록 해서, 전역함수 오염이 안된다. ex) var math = math || {}; (function(){ function sum(a,b){ return a + b; } math.sum = sum; })() > math.sum 객체로 접근 가능. AMD - ..

Zuul (API Gateway) : web에서 백엔드 서비스 호출 시 거치는 gateway 역할의 어플리케이션. MSA의 동적 라우팅, 모니터링, 보안 등 담당 - 동적 라우팅 : 호출하는 시점에 따라 백엔드의 핸들러를 호출 - 모니터링 : 어떤 서비스 호출되는지 모니터링 - 인증과 보안 : MSA에서 인증 구현으로, 모든 서비스에 보안 구성 Eureka : Cloud 환경에서 서비스의 로드밸런싱, 실패처리 등 유연한 처리를 위해 각 서비스들의 정보(IP, Port, InstanceID) 을 포함한 REST 기반 미들웨어 서버 MSA 기반 아키텍처로, Client-Server 방식 -> Eureka client 가 server로 instance 정보들을 Eureka 서버로 등록 후, Eureka 의 정..

- maven/gradle 세팅 (빠른 시작을 위한 스타터 옵션들) 1. spring-boot-starter-web : 스프링 RESTful 서비스 개발 2. spring-boot-starter-test : junit, Hamcrest 등 스프링 테스트 3. spring-boot-starter-actuator : 어플리케이션 모니터링 및 관리 (민감한 정보 포함 - 운영의 경우 보안 필요) 4. spring-boot-starter-log4j2 : Log4j2 를 사용한 로깅 - Annotation 1. @SpringBootApplication : @EnableAutoConfiguration + @ComponentScan + @Configuation 를 합친 기능 스프링부트를 기동하는 main 메소드 역할..

vue.js file 구조 - dev.env.js : npm start 시 적용되는 설정파일 - prod.env.js : npm run build 로 배포버전에 적용되는 설정파일 - node_modules : npm으로 설치되는 서드파트 라이브러리 디렉토리 - build : webpack 빌드 설정 디렉토리 - src > components : vue 컴포넌트 모인 파일 > app.vue : 가장 최상위 컴포넌트 > main.js : 가장 먼저 실행되는 스크립트 파일 (vue 인스턴스 생성) Vue 구성 1. Vuex : Virtual DOM 을 관리하는 매니저 역할 개별 요소들의 정보 반영을 체크하고 해당 값들을 업데이트 한다. (기존 Browser Workflow : 화면을 다시 그릴 때 발생되는 스..

deque : list와 같은 비슷하며, 앞 뒤로 데이터를 처리 할 수 있다. append() : deque의 오른쪽 데이터 삽입 appendleft() : deque의 왼쪽 데이터 삽입 extend() : deque 의 오른쪽 데이터 확장 삽입 extendleft() : deque의 왼쪽 데이터 확장 삽입 pop() : deque의 맨 오른쪽 데이터 삭제 popleft() : deque의 맨 왼쪽 데이터 삭제 rotate(n) : n이 음수면 왼쪽, 양수이면 오른쪽 extend() 예제 : import collections deq = collections.deque([a,b,c,d,e]) deq.extend('ef') print(deq) > deque(['a', 'b', 'c', 'd', 'e', 'e..