공부 정리/NodeJs (16) 썸네일형 리스트형 node express 모듈 사용하기 * 개요 이전시간에는 node의 기본 모듈 사용법을 알아보았습니다. 이번에는 본격적으로 node express 모듈을 사용합니다. 초기 설정부터 라우팅 ,html 랜더링, 동적 웹 페이지(ejs), 간단한 쿠키, 세션, 파라미터 사용법을 배웁니다. express의 핵심 요소를 간단히 구현해보면서 빠르게 개념을 익힐 수 있습니다. * 외부 모듈 사용하기 nodejs에서 제공하는 기본 모듈만 개발하기에 충분하지 않다 noejs 오픈소스 플랫폼으로 소스가 공개되어 있다. 모듈은 http://www.npmjs.com 에서 검색한다. npm install ex) npm install arraylist node_modules 파일이 생성되고 arraylist 관련 기능을 사용할 수 있다. npm init npm의 .. node js 기본 모듈 *개요 node js 기본 모듈을 공부합니다. 모듈들은 npm의 express를 기반으로 package.json에 dependencies에 모듈들을 등록합니다.(하지만 기본 모듈이므로 따른 설정은 필요없습니다.) 원하는 파일에서 require() 를 통해 호출하면 해당 기능을 사용할 수 있습니다. 강의에서는 많은 부분을 소개하였지만, 필요시에 추후 보기로하고 중요하거나 흥미롭다고 생각되는 부분들을 뽑았습니다. 1. assert deepEqual : 타입 무시하고 값이 같은지 검사한다. notDeepEqual : 타입무시하고 다른지 검사한다. deepStrictEqual : 타입 검사하고 모든 내용이 같은 객체인지 비교한다. notDeepStrictEqual : 타입 무시하고 다른 부분이 있는 객체인지 비.. Var, Let, Const 차이점 자바스크립트의 변수 선언을 공부하다가 3가지가 있음을 알았습니다. 기존에는 var만 사용했는데, ES6 이후에는 let과 const가 새롭게 추가되었고 var는 이제 잘 사용하지 않는다고 합니다. 차이점을 비교해보겠습니다. Var ES6 등장 이전에, var 선언이 규칙이었습니다. 하지만, var 사용은 몇 가지 문제가 있습니다. 그 문제 때문에 var는 let과 const의 등장으로 이어졌습니다. var의 Scope Scope는 해당 변수들이 어디 범위에서 사용이 가능한지를 의미합니다. var는 전역 범위이거나 함수/지역 범위입니다. var가 함수 밖에서 선언되면 전역 범위입니다. 즉, 함수 밖에서 var로 선언된 어떠한 변수들도 전체 window에서 사용이 가능하다는 것을 의미합니다. var는 함수 .. 회원가입에서 공백, 특수문자 검사하기 회원가입 시, 이름이나 아이디 공백을 처리하지 않아 "홍길동"처럼 저장되어야하는데 "홍길동 "으로 저장되는 경우가 있습니다. 가입자 입장에서 무의식으로 스페이스를 치고 가입을 하면 DB에 4글자가 들어가서 나중에 "홍길동"이라고 검색 조건을 걸었을 때 찾지 못하는 문제가 발생합니다. 따라서 공백을 제거하는 장치가 필요합니다. 제 프로젝트 기준으로 프런트인 자바스크립트에서 검사하는 방법과, 백엔드인 자바 스프링에서 검사하는 방법이 있습니다. 또한 입력된 값의 공백을 제거해주는 방법과 공백이 있을 시 오류를 반환하는 방법이 있습니다. 먼저 자바스크립트에서 공백과 특수문자를 검사하는 방법입니다. var str = "..."; //공백만 입력된 경우 var blank_pattern = /^\s+|\s+$/g; .. 컴포넌트 ( 같은 레벨에서의 통신 ) 같은 레벨에서의 통신은 어떻게 할 수 있을까? Root아래에 있는 자식끼리 서로 통신을 하는 방법은? 바로 1:1의 관계로 할 수 없고ㅡ Root를 통해서 거쳐가야 한다. 이때 앞에서 배운 props와 event를 사용한다. 보내는 쪽(from)은 event를 Root에게 보내면 Root는 받는 쪽(to)에 props를 보낸다. appContent의 component가 appHeader로 데이터를 보낸다고 가정한다. 1. 보내는 쪽에서 Root에 event 보내기 appContent에 정의되어 있는 component 내에는 template을 정의한다. ex) template : 'content pass' v-on을 통해 event를 발생시킨다는 것을 알 수 있으며, 우리는 passNum method를 만.. 컴포넌트 통신 ( v-bind와 v-on) Vue에서는 상위 컴포넌트, 하위컴포넌트가 존재한다. 어찌보면 당연한 것이다. 컴포넌트를 어렵게 이해할 필요 없이 고유한 데이터의 범위를 갖는다고 생각하면 된다. 특히, html 상에서 요소로 구분되어지는 부분에 해당한다고 할 수 있을 것이다. 상위 컴포넌트는 props를 하위 컴포넌트에 전달하며, 하위 컴포넌트는 event를 상위 컴포넌트에 전달한다. 컴포넌트를 왜 사용해야 할까? 컴포넌트로 캡슐화를 하여 독립성을 유지한다고 생각된다. 자신의 상위 컴포넌트가 아닌 엉뚱한 곳에서 호출이 되는 것을 막을 수 있다. *v-bind props의 경우, v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"의 형태로 저장된다. ex) v-bind:propsdata="message" 프롭스 속성이름이란, .. 인스턴스와 컴포넌트 / MVVM Vue는 React에 비해 사용방법이 쉽다고 하여서 강의를 시작하였다. 기존의 Spring의 MVC 패턴과는 다르게 MVVM을 사용한다. View로 보여지는 부분들이 ViewModel 덕분에 Model에서의 수정이 이루어지는 즉시 반영된다. 특히, 인스턴스와 컴포넌트에 대한 개념을 확인한다. new Vue()라는... 일반적으로 우리가 아는 new를 이용한 인스턴스 생성이 있다. 컴포넌트는 프런트를 보다 쉽게 꾸미기 위해서 사용한다. 컴포넌트의 경우, 전역 컴포넌트와 지역 컴포넌트가 있다. 보통은 지역 컴포넌트로 사용을 한다. component는 단일 갯수를 나타낸다. 보통 여러 개를 정의하기 때문에 components를 사용하는 편이다. var vm = new Vue() 처럼 인스터스를 변수에 담지 말.. JSON에서 원하는 값 선택하기 var txt = '{"name":[{"John" : "hello"},{"Selly" : "bye"}], "age":30, "city":"New York"}' var obj = JSON.parse(txt); document.getElementById("demo").innerHTML = obj.name[1].John + ", " + obj.age; txt는 String형이므로, 먼저 JSON.parse를 통해 Json 형태로 바꿔준 후 사용한다. key-value이며 key를 입력하면 value를 반환한다. {}는 "." 을 계속 입력하면서 값을 찾을 수 있으며, [ ]는 "[]"를 통해 값을 찾는다. Q> Selly의 bye를 얻고 싶다면? Q> age의 30을 얻고 싶다면? A> obj.name[1]... 이전 1 2 다음