JavaScript
-
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 -
5. 설치한 express 모듈을 사용하여 웹서버 구동 package.json 과 npm 명령어를 사용하여 다양한 모듈이 설치된 폴더 node_modules 가 존재하는 곳에 server.js를 생성한다. - server.js 소스코드 var express = require('express'); //웹서버를 구동할 모듈인 express 모듈을 가져온다. var path = require('path'); //경로에 사용될 path 모듈 var app = express(); // express 모듈 구동 app.use('/', express.static(path.join(__dirname, '/app'))); : / 인 루트경로로 들어올 경우 정적인 파일들이 존재하는 절대경로를 설정한다(해당경로/ap..
nodejs(express 모듈)를 활용한 angularjs 구축 - 25. 설치한 express 모듈을 사용하여 웹서버 구동 package.json 과 npm 명령어를 사용하여 다양한 모듈이 설치된 폴더 node_modules 가 존재하는 곳에 server.js를 생성한다. - server.js 소스코드 var express = require('express'); //웹서버를 구동할 모듈인 express 모듈을 가져온다. var path = require('path'); //경로에 사용될 path 모듈 var app = express(); // express 모듈 구동 app.use('/', express.static(path.join(__dirname, '/app'))); : / 인 루트경로로 들어올 경우 정적인 파일들이 존재하는 절대경로를 설정한다(해당경로/ap..
2021.10.03