omaeng

Javascript에서 for문을 순회하는 방법에 대해서 알아보자! 가장 기본이 되는 for문! var data = [1,2,undefined,NaN,null,""]; for(var i=0; i

const를 기본으로 사용하되, 변경이 될 수 있는 변수나 의도적으로 변경하고자하는 변수는 let을 사용한다. var는 가급적으로 사용하지 않는다. let은 for문이나 블럭문 안에 사용하는것을 기본으로 하지만 때에 따라 스크립트 전역에서 사용할 수 있는 변수로도 사용이 가능하다. function home() { const homename = 'myhouse'; homename='yourhouse'; console.log(homename); } home(); 위와 같은 코드의 경우 home();을 마지막 줄에서 호출하게 되고, 호출된 함수에서는 const 타입의 homename을 선언했다. 하지만 함수내 2번 째 줄에서는 선언된 변수의 내용을 바꾸려고한다. 하지만 const는 바뀔수가 없는 변수로, 처음..

이번 포스팅에서는 애플리케이션을 구축하고 유용한 서비스를 이용하여 프로젝트를 관리하는 방법에 대해서 알아보도록 하겠습니다. Spring Initializr http://start.spring.io 불러오는 중입니다... Spring Initializr로 접속을 해주시고, 다음과 같이 Artifact와 의존성을 작성해주세요! Generate를 받아주시고, 프로젝트의 압축을 풀어주세요. 간단한 웹 애플리케이션 만들기 이제 간단한 웹 애플리케이션을 만들어 보도록 하겠습니다. src\main\java\com\example\springboot\HelloController.java 파일을 만들어주시고 아래와 같이 내용을 작성해 주세요. package com.example.springboot; import org.s..

이번 포스팅에서는 요청에 Cross-Origin-Resource Sharing(CORS) 헤더를 포함하여 응답하는 웹서비스를 배워 보겠습니다! CORS란? https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. developer.mozilla.org 교차 출처 리소..

Vue의 인스턴스와 속성 그리고 메서드에 대해서 포스팅해 보겠습니다! Vue 인스턴스 만들기 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작합니다. var app = new Vue({ //옵션 }) MVVM 패턴과 유사하지만 완벽하게 일치하지는 않습니다. 변수명은 app or vm(ViewModel)을 주로 사용합니다. Vue 인스턴스를 인스턴스화 할때는 데이터, 템플릿, 마운트할 엘리먼트, 메소드, 라이프사이클 콜백 등의 옵션을 포함할 수 있는 option 객체를 전달해야 합니다. 전체 옵션 목록은 API reference에서 찾을 수 있습니다. Vue 생성자는 미리 정의 된 옵션으로 재 사용 가능한 컴포넌트 생성자를 생성하도록 확장할 수 있습니다. Vue앱은 new Vue 를..

이번 포스팅은 스프링 시큐리티의 보호를 받는 웹 어플리케이션 구축에 대해서 말씀드리겠습니다. 앞으로 우리가 구축하게될 웹 어플리케이션은 Spring MVC인데, 회원 목록에 있는 사용자만 선별하여 로그인 시키도록 하겠습니다. 준비사항 약 15분의 시간 선호하는 애디터나 IDE JDK 1.8 이상 gradle 4이상이나 maven 3.2이상 Spring Initializr https://start.spring.io/ 불러오는 중입니다... 스프링 이니셜라이저로 접속해 프로젝트를 생성 하겠습니다. 프로젝트는 Maven이나 gradle 상광없으니 편하신 것으로 선택 해주세요. Java와 Boot 버전 2.2.6을 선택해주시고(default를 선택해주시면 됩니다. Spring측에서 주장하는 가장 안정적인 버전 ..

웹을 사용하는 사용자가 상호작용할 수 있게 하기 위해 우리는 v-on 디렉티브를 사용하여 Vue 인스턴스에서 메소드를 호출하는 이벤트 리스너를 추가할 수 있습니다. 이제 JS Bin을 실행하시고 코드를 직접 작성해 봅시다. https://jsbin.com/?html,js,console,output JS Bin Sample of the bin: jsbin.com 먼저 바인딩할 메세지를 p태그로 명시해줍니다. html {{message}} 메세지 뒤집기 버튼 Javascript var app = new Vue({ el : "#app", data:{ message:"123456789" }, methods:{ reversemessage: function(){ this.message = this.message.s..

엘리먼트를 사용자에게 보여줄지 결정하여 웹에 표현하는것은 어렵지 않아요. 이제부터 우리가 Vue.js를 통해 개발하면서 주도적으로 사용하게 되는 디렉티브를 사용하면 됩니다. 여기서 잠깐, 디렉티브란? v- 로 시작하는 모든 속성을 의미 합니다. JSTL의 foreach나 if문 처럼 화면 요소를 더 쉽게 조작하기 위해 사용합니다. v-if: if문과 같다. True, False 값에 따라 화면에 표시될지를 결정한다. v-for: 지정한 뷰 데이터의 개수만큼 반복하여 출력한다. v-show: css의 display:none으로 속성을 준다. If문의 경우 태그를 완전 삭제한다, v-bind: Vue 데이터 속성과 html태그 기본속성을 연결해준다. v-on: 화면요소의 이벤트를 감지하요 처리할 때 사용함 ..

Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다. 그전에 앞서 전 포스팅에서 Vue.js의 스크립트가 JSBin에서 작동하지 않아, 해결법을 찾아보던 중 https://unpkg.com/vue/dist/vue.js 주소로 적어야 동작했습니다. 원인은 잘 모르겠으나 JS Bin에서 작동하는 버전이 따로 있는듯 합니다. 먼저 탬플릿을 작성해 보겠습니다. {{ message }} 그리고 불러올 메세지를 스크립트에 작성해 보겠습니다. var app = new Vue({ el: '#app', data: { message: '안녕하세요 Vue!' } }) 작성을 올바르게 하셨다면 다음과 같은 Output을 보실 수 있습니다. 지금 만드신 앱이 ..

에약 시스템 토이 프로젝트가 끝나고 Vue.js를 공부하려고 합니다. 사실상 기록을 남기면서 학습하는 것이 귀찮기는 하지만, 나중에 구글링을 하는것 보다 빠를거 같아서 기록을 남겨보고자 합니다. 시작하기 저는 Vue.js를 처음 공부하는 것이기 때문에 빌드부터 다루기 쉽지 않습니다. 그렇기 때문에 웹 브라우저에서 코딩하고 실행해 볼수 있는 https://jsbin.com JS Bin Sample of the bin: jsbin.com JS Bin을 사용하려고 합니다. 링크를 클리해보시게 되면 다음과 같은 화면을 보실수가 있습니다. 차례대로 html, JavaScript 작성란이 보이고 Output 출력란이 보입니다. 작성이 되는 순간마다 실행이 되는것으로 보이고, 자동 실행을 이용하지 않을수도 있습니다(..