Back Ground

React 프로젝트를 만드는 방법은 여러가지 있지만Node.js 기반으로 개발할때 유용하게 프로젝트를 생성 할때[create-react-app] 이 있다. webpack과 babel 등을 사용하여 개발하는 경우가 많은데해당 도구를 설치하고 일일이 설정해야 되는게 정석이지만 쉽게 리엑트 프로젝트를 만들수 있게 해주는 create-react-app 도구를 사용한다. create-react-app npm과 yarn으로 설치할 수 있는데 패키지를 설치하는데 방법이 2가지 있는데1. 지역적(local)으로 설치2. 전역적(global)으로 설치 둘의 차이점은 - 프로젝트 디렉터리에서만 사용할지- 모든 디렉터리에서 사용할지 정하는것인데 create-react-app는 커맨드라인 도구라 모든 디렉터리에서필요하므로 전..

먼저 React를 html에서 link를 이용하여도 사용할 수도 있지만. 우리는 Node를 활용하여 만들것이다. 그러기 위해서 Node를 먼저 설치해준다. Node.js다운로드 : https://nodejs.org/ko/ node.js 다운로드 사이트에서 자신의 windows의 bit에 알맞게 다운로드 할 수있게 되어있다. Node를 설치가 됐다면 npm을 함께 설치되었다. 에디터는 VS Code(Visual Studio Code)를 사용하기로 하였다. 자신에게 맞는 운영체제로 다운로드 해주면 된다. 다운로드 : https://code.visualstudio.com/ 다 설치가 됐다면 저 버튼을 눌러서 확장 프로그램을 설치해주는데 ESLint 자바스크립트 문법을 체크한다. Relative Path 상대 ..

React 시작하기 전ES6 (ECMA Script 2015 ) 방식으로 정리 할 내용이다. ES6가 익숙하지 않다면 먼저 ES6부터 숙지하고 오는걸 추천한다.(이게 ES6방식인지 React방식인지 구분을 할 수 있기 위함 ) 먼저 책은 리액트를 검색하다보면 한번쯤 봤을 법한 VeloPert(김민준)이 쓴 리액트를 다루는 기술 이라는 책으로 배워볼 생각이다.(책 설명이 괜찮게 나와 있어서 맘에 듬 ㅎ) 리엑트란 무엇인가 “컴포넌트” 라는 개념에 집중이 되어있는 페이스북 개발자들이 만든 라이브러리이다. 간단히 설명하자면, 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여준다. 페이스북이 리액트를 만들기 전에도, 이미 Angular, Backbone, Knockout.js, Ember 등의 수많..

사실 Object 그 자체도 객체다. 모든 객체의 최종 prototype이기도 하다 예시를 하나 들어 객체의 prototype이 뭔지 보자면이미 구현된 객체의 prototype을 확인할 때는 __proto__를 사용한다. prototype 은 Function 객체의 속성입니다. 이 함수로 생성 된 객체의 프로토 타입입니다.__proto__ 는 프로토 타입을 가리키는 객체의 내부 속성입니다. 현재 표준은 동등한 Object.getPrototypeOf(O) 메소드를 제공하지만 사실상 __proto__ 표준은 더 빠릅니다. 함수의 prototype 과 객체의 __proto__ 체인을 비교하여 instanceof 관계를 찾을 수 있으며 prototype 을 변경하여 이러한 관계를 깨뜨릴 수 있습니다.functi..

Router Express 4 에서는 Router 미들웨어가 포함되어 있다.Router 객체를 참조한 후 route() 메소드를 이용해 라우팅하는 방법인데. 12var router = express.Router();router.route('/process/login').post(function(req, res) {cs get(callback) GET 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. post(callback) POST 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. put(callback) PUT 방식으로 특정 패스 요청이 발생했을 때 사용할 콜백 함수를 지정합니다. delete(callback) DELETE 방식으로 특정 패스 요청이 발생했을..

- Static 정적(static) 사이트 하나의 html 파일이 하나의 웹페이지를 가지는 사이트.(html 의 변화가 없음) 웹사이트의 route 구조가 파일 디렉토리 구조와 동일. 파일들이 접근 제한이 없음(public) 동적(dynamic) 사이트 하나의 html 파일이 여러개의 웹페이지를 가지는 사이트.(필요에 따라 html 의 내용이 변화됨) 웹사이트의 route 를 제작자가 직접 파일에 연결할 수 있음. router를 통해 개별 파일에 접근 제한을 할 수 있음출처 : https://m.blog.naver.com/PostView.nhn?blogId=azure0777&logNo=220469049820&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F static으..

Request (요청) 웹으로 부터 요청 받은 Request를 이용한다. 12345678910111213141516171819202122232425262728293031323334353637var http = require('http'), express = require('express'); var app = express(); app.use('test',function(req,res,next){ console.log("미들웨어 1"); var userAgent = req.header('User-Agent'); var pName = req.query.name; var age = req.query.age; var url = 'nomal'; if(age

생성자 자바와 동일한 생성자 new를 붙이고 함수처럼 호출바로 자바스크립트 생성자(constructor) 함수 객체를 생성하는 함수를 생성자 함수라고 부름 다른 언어에서는 class가 있지만 자바스크립트에서는 없다 생성자 함수가 그 역할을 대신한다 사람 생성자를 만들면 다음과 같다12345678function Person(name, gender) { this.name = name; this.gender = gender; this.sayHello = function() { alert(this.name + ' said "hello"'); } this.... // 사람의 속성과 메소드를 더 정의할 수 있습니다.}Colored by Color Scriptercs 함수를 만들 때처럼 function을 쓰긴 했는데..