JavaScript
-
Javascript Prototype 자바스크립트는 프로토타입 기반 언어라고 불린다. 객체지향언어 즉, Java에서 사용하는 Class라는 개념과 비슷하지만 자바스크립트에서는 Class라는게 없습니다. 그래서 사용하는게 프로토타입입니다. 클래스가 없으니 상속기능도 없지만 프로토타입을 사용하여 상속이라는걸 흉내내도록 구현해 사용한다. Person 함수를 생성하게 되면 Person 함수의 프로토타입 객체가 생성된다. Person 함수는 내부적으로 prototype 이라는 멤버를 갖게 되는데 해당 prototype 멤버는 Person 함수의 프로토타입 객체를 참조한다. Person 함수의 프로토타입 객체는 constructor 라는 멤버를 갖는데 Person 함수를 참조한다. Person 함수의 prototy..
javascript prototypeJavascript Prototype 자바스크립트는 프로토타입 기반 언어라고 불린다. 객체지향언어 즉, Java에서 사용하는 Class라는 개념과 비슷하지만 자바스크립트에서는 Class라는게 없습니다. 그래서 사용하는게 프로토타입입니다. 클래스가 없으니 상속기능도 없지만 프로토타입을 사용하여 상속이라는걸 흉내내도록 구현해 사용한다. Person 함수를 생성하게 되면 Person 함수의 프로토타입 객체가 생성된다. Person 함수는 내부적으로 prototype 이라는 멤버를 갖게 되는데 해당 prototype 멤버는 Person 함수의 프로토타입 객체를 참조한다. Person 함수의 프로토타입 객체는 constructor 라는 멤버를 갖는데 Person 함수를 참조한다. Person 함수의 prototy..
2021.10.27 -
Vuex : vue는 컴포넌트 기반 프레임워크 : 컴포넌트간의 통신이나 데이터 전달을 유기적으로 관리하기 위해 vuex라는 저장소를 사용한다. : state, mutations, actions, getters : Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. : 어플리케이션의 모든 컴포넌트의 중앙 집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능 : Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅샷 내보내기/가져오기와 같은 고급 기능을 제공한다. * 상태 관리(State Managerment)는 왜 필요한가 : 컴포넌트 기반 프레임워크(Vue)에서는 작은 단위로 쪼개진 여러개의 컴포넌트 화면을 구성합니다. 이에따..
Vue Store(Vuex) - StateVuex : vue는 컴포넌트 기반 프레임워크 : 컴포넌트간의 통신이나 데이터 전달을 유기적으로 관리하기 위해 vuex라는 저장소를 사용한다. : state, mutations, actions, getters : Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. : 어플리케이션의 모든 컴포넌트의 중앙 집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능 : Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅샷 내보내기/가져오기와 같은 고급 기능을 제공한다. * 상태 관리(State Managerment)는 왜 필요한가 : 컴포넌트 기반 프레임워크(Vue)에서는 작은 단위로 쪼개진 여러개의 컴포넌트 화면을 구성합니다. 이에따..
2021.10.25 -
v-if : 지정한 뷰 데이터 값의 참, 거짓여부에 따라 html 태그를 처리, 화면에 보여줄것인가 아닌가 ex) v-for : vue에서 html 태그 반복문 : 지정한 뷰 데이터 개수만큼 html 태그 반복 ex) 사용예시 : v-for="(변수명, index명) in 배열" :key="index명" v-show : v-if 와 비슷하게 참, 거짓 여부에 따라 html을 보여줄것인지 안보여줄것인지 판단 * v-if와 차이점 : v-show는 태그 자체를 숨김처리(display-)지만, v-if는 태그자체를 삭제한다. v-bind : html 태그에 설정된 기본속성 및 데이터와 vue 데이터 속성과 연결 : 줄임말 ":" 가능 ex) :for v-on : 이벤트 감지 처리 : 줄임..
v-if, v-for, v-show, v-bind, v-on, v-modelv-if : 지정한 뷰 데이터 값의 참, 거짓여부에 따라 html 태그를 처리, 화면에 보여줄것인가 아닌가 ex) v-for : vue에서 html 태그 반복문 : 지정한 뷰 데이터 개수만큼 html 태그 반복 ex) 사용예시 : v-for="(변수명, index명) in 배열" :key="index명" v-show : v-if 와 비슷하게 참, 거짓 여부에 따라 html을 보여줄것인지 안보여줄것인지 판단 * v-if와 차이점 : v-show는 태그 자체를 숨김처리(display-)지만, v-if는 태그자체를 삭제한다. v-bind : html 태그에 설정된 기본속성 및 데이터와 vue 데이터 속성과 연결 : 줄임말 ":" 가능 ex) :for v-on : 이벤트 감지 처리 : 줄임..
2021.10.25 -
Vue js 에서 사용하는 vue-cli를 사용하여 프로젝트 생성 1. vue-cli 설치 : npm install -g @vue-cli * vue-cli란 vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli가 기본적인 프로젝트 설정을 해주기 때문에 폴더 구조에 대한 고민, build, 라이브러리 구성, 배포를 위한 webpack 등 고민할 필요가 없다. 설치됐는지 확인하기 : vue 해당 화면이 뜰경우 설치가 완료된거다. -g(global) 명령어를 사용했기때문에 환경변수가 적용되어 명령어 사용이 가능한거다. 2. Vue 프로젝트 생성 * vue init webpack 프로젝트명 : vue init webpack my-obo ********* * vue ini..
Vue 프로젝트 생성하기Vue js 에서 사용하는 vue-cli를 사용하여 프로젝트 생성 1. vue-cli 설치 : npm install -g @vue-cli * vue-cli란 vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli가 기본적인 프로젝트 설정을 해주기 때문에 폴더 구조에 대한 고민, build, 라이브러리 구성, 배포를 위한 webpack 등 고민할 필요가 없다. 설치됐는지 확인하기 : vue 해당 화면이 뜰경우 설치가 완료된거다. -g(global) 명령어를 사용했기때문에 환경변수가 적용되어 명령어 사용이 가능한거다. 2. Vue 프로젝트 생성 * vue init webpack 프로젝트명 : vue init webpack my-obo ********* * vue ini..
2021.10.25 -
Angularjs 1. login.js 및 login.html 생성 * run method를 이용하여 로그인 인증정보를 확인한다. * angular의 run 메소드는 java의 main 함수 역할 * run 메소드(java에서 main 함수 역할) app/views/components/login/login.js angular.module('AuthCheck', []) .run(['$rootScope', '$window', '$http', function($rootScope, $window, $http){ if($window.sessionStorage.getItem('currentUser')){ $http.defaults.headers.common.Authorization = 'Bearer'+$window..
Spring Boot와 Angulrjs(run 메소드를 이용한 로그인 설정Angularjs 1. login.js 및 login.html 생성 * run method를 이용하여 로그인 인증정보를 확인한다. * angular의 run 메소드는 java의 main 함수 역할 * run 메소드(java에서 main 함수 역할) app/views/components/login/login.js angular.module('AuthCheck', []) .run(['$rootScope', '$window', '$http', function($rootScope, $window, $http){ if($window.sessionStorage.getItem('currentUser')){ $http.defaults.headers.common.Authorization = 'Bearer'+$window..
2021.10.03 -
1. http-proxy 모듈 설치 시작프로그램에서 Node.js command prompt 창을 실행한다. package.json이 존재하는곳으로 경로 이동 : npm install http-proxy --save 명령어 입력 -- save 명령어로 인해 package.json의 dependencies에 버전관리가 된다. 2. server.js 에 http-proxy 모듈 설정 - 소스코드 var express = require('express'); var path = require('path'); var httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer(); var app = express(); app.us..
http-proxy 모듈을 이용한 get, post 요청 proxy 설정1. http-proxy 모듈 설치 시작프로그램에서 Node.js command prompt 창을 실행한다. package.json이 존재하는곳으로 경로 이동 : npm install http-proxy --save 명령어 입력 -- save 명령어로 인해 package.json의 dependencies에 버전관리가 된다. 2. server.js 에 http-proxy 모듈 설정 - 소스코드 var express = require('express'); var path = require('path'); var httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer(); var app = express(); app.us..
2021.10.03