1. NODE JS 와 EXPRESS JS 다운로드 하기 node.js ? 자바스크립트를 서버사이드에서도 사용이 가능하게 해준다. express.js? node를 쉽게 이용할 수 있게 해주는 프레임 워크이다. node.js 설치 1. node -v //버전확인 2. //노드 사이트에서 다운로드 받기 3. npm init //프로젝트 폴더를 만들고 안에다가 입력. 이는 package를 만드는 역할 4. 폴더에 들어가서 index.js 만들기 5. npm install express --save //express설치 2. 몽고 DB 연결 mongoose는 몽고db를 편하게 쓸 수 있는 툴이다. 설치하기 npm install mongoose --save const express = require("expres..

reduce 메서드 배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값); reduce 인자 누적 값(acc) 현재 값(cur) 현재 인덱스 (curIndex) 원본 배열(arr) 누적값이기 때문에 다양하게 활용할 수 있다. const oneTwoThree = [1, 2, 3]; result = oneTwoThree.reduce((acc, cur, i) => { console.log(acc, cur, i); return acc + cur; }, 0); // 0 1 0 // 1 2 1 // 3 3 2 result; // 6 누적된값 + 현재값을 더하면 된다! acc(누적값)이 초깃값인 0부터 시작해서 return하는대로 누적되는 것을 볼 수 있다. 초깃값을 적어주지..

Props 1. properties를 줄인 말 2. 컴포넌트간에 전달할 때 3. 컴포넌트의 소통 방식은 위에서 아래로 , 즉 부모 컴포넌트에서 자식 컴포넌트로 보낼 수 있음 4. 부모 컴포넌트에서 자식 컴포넌트에 전달 할 때, 이를 변경 할 수 없다. State 1. 컴포넌트 안에서 데이터를 교환하거나 전달 할 때 사용 2. props와 달리 변경이 가능하다. 3. state이 변화면 re-render 된다. Redux 리덕스가 없을 경우 props 하나하나 거쳐야 한다. state를 상위 컴포넌트에 두는 것이 아닌, redux store에 저장하면 직접 접근이 가능하다. 훨씬 편한 state 관리가 가능! Redux 데이터 Flow (Strict unidirectional data flow) Redux..

서버와 클라이언트를 따로따로 실행해 줘야 했는데 이런 번거로움을 해소 시키기 위해 concurrently라이브러리를 이용해 볼 것이다. 설치 npm install concurrently --save root 디렉토리에 package.json 의 scripts 부분에서 concurrently 다음에 서버 실행 명시 코드와 , 클라이언트 실행 명시 코드를 작성! "dev": "concurrently \"npm run server\" \"npm run start --prefix client\"" 내 package.json scripts 부분! npm run dev 성공!

유저가 무언가를 보내면 프록시 서버에서 하는 일 1. 아이피를 프록시서버에서 임의로 바꿔버릴 수 있어 인터넷에서 접근하는 사람의 IP를 모르게 숨긴다. 2. 데이터를 보낼 때 도 데이터도 바꿔서 숨길 수 있다. (더 나은 보안 제공) 3. 방화벽 기능 4. 웹 필터 기능 (회사에서 직원이나 아이들 인터넷 사용 제어) 5. 어떤 사이트에 들어갔을때 static한 이미지를 프록시 서버에 저장을 시킬 수 있어, 인터넷까지 가지 않아도 프록시서버에 담겨 있는 정보를 빠르게 볼 수 있다. (캐쉬를 이용해 더 빠른 인터넷 제공)

자바스크립트 코드의 동작 원리 console.log(1+1) setTimeout(function() { console.log(2+2) }, 1000) console.log(3+3) 이 코드를 실행하면 2 6 4 이러식으로 출력 결과가 나온다. 이 원리는 웹브라우저는 자바스크립트 코드를 실행시켜주는 엔진이다. 이때 해석할 때 단계는, 스택이라는 공간에 코드를 집어넣고 한줄한줄 실행을 해준다. (변수를 만났을 때는 힙이라는 공간에 넣고 가져다 쓴다.) 스택은 하나밖에 없기 때문에 한번에 코드 한줄 밖에 실행을 못한다. 이를 single threaded 라고 한다. setTimeout같은 코드는 바로 실행을 할 수 없는 코드이기 때문에, 잠깐 대기실에 놔두고 실행하다. 이 대기실에 보내는 코드들은 Ajax요청..

객체지향 Class 문법 만약에 {object} 자료형으로 정보를 가져올 때 그 수가 어마어마하게 많다면 일일히 치기 비 효율적이다. 이때 쉽게 할 수 있는 문법이 클래스 문법이다! 클래스 문법으로 비슷한 object형을 많이 만들어 쓸 수 있다. function 기계(스킬1,스킬2) { this.q = 스킬1; this.w = 스킬2; } this란? 간단하게 말해서 기계로부터 생성되는 object 이다. 이를 instance라고한다. this가 존재하면 클래스 역할이 가능하다. const nunu = new 기계('strike','courage') 클래스를 이용해 간단하게 오브젝트를 생성할 수 있다. new는 기계로 부터 자식을 뽑아주는 문법! ES6 class 문법 class Hero { const..

sort() 함수? 정렬 순서를 정의하는 함수. 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬됩니다. 리턴하는 값이 -1인경우, a가 b보다 앞에 오도록 정렬하고, 리턴하는 값이 1인 경우, b가 a보다 앞에 오도록 정렬합니다. 만약 0을 리턴하면, a와 b의 순서를 변경하지 않습니다. 배열의 숫자들을 유니코드 순서가 아닌, 숫자 크기 순서대로 정렬하기 위해서 sort() 함수의 파라미터로 함수를 정의해야한다. 두 숫자의 차가 양수값이냐, 음수값이냐를 이용하여 두 숫자의 차이를 리턴하는 함수를 sort() 함수의 파라미터로 전달 숫자를 오름차순으로 정렬하는 예제를 위와 같이 단순화 배열의 오름 차순 방법 1) arr.sort(function(a, b) { if..