react.js & node.js 1일차

1주차 : React 기초, React hooks
2주차 : todo list 만들기, api 통신
3주차 : bootstrap 따라만들기
4주차 : 영화,책 검색사이트(node.js) -> 네이버 open API를 사용해서 책 검색, 영화 검색 사이트만들기
5주차 : 인스타그램 클론코딩

 

프로그래밍 언어

브라우저의 동작을 코딩할 수 있음. (정적페이지 -> 동적페이지)

 

브라우저

JS코드를 실행할 수 있음 (v8엔진)

 

node.js의 등장

브라우저처럼 JS를 실행시킬 수 있는 환경. (runtime)

Backend Server는 express.js이다. express는 node.js를 기반으로 할 수 있는 웹 프레임워크, 서버이다. 이거말고도 koa.js라는 것도 있기도 하다.

 

node.js의 등장으로 프론트엔드, 백엔드, pc 프로그램, 모바일 앱까지도 구현할 수 있게 되었다.

 

JS로 할 수 있는 것

• 프론트엔드
• 백엔드
• pc 프로그램(electron)
• 모바일 앱(React Native)

 

es6(es2015)

- let, const (var X) : 블록레벨 스코프
- 화살표함수 const func = (a) => { return a }
- 비구조화 할당 - const { a, b } = abc
- default parameter
- 템플릿 리터럴 ${foo}
"스트링" + abc + "입니다" `스트링${abc}입니다`
- import from , export default
- 펼침연산자 : [...arr], {...object} )
- Promise , async&await

 

 

1. 블록레벨 스코프

const 로 항당된 상수는 값이 변경되지 않는다.let은 재할당이 가능해진다.

 

var을 안쓰는 이유는 결국 블록 스코프 외부에서 사용되는 것을 막기 위함이다. var는 함수 스코프이기 때문에 블록 스코프 밖에서라도 사용이 가능해진것이다. 그 외에도 호이스팅과 같은 에러나는 요인들이 너무 많아서 안쓴다.

 

2. 함수 선언방법

1. 함수 선언식function name() {}

2. 함수 표현식const name2 = function () {}

3. 화살표 함수const name3 = (a,b) {return (a+b)}

const name4 = (a,b) => (a+b);

화살표함수는 this가 조금 다르게 작동한다. 화살표함수 this는 이 함수가 선언된 this를 의미한다.

4. IIFE 즉시실행함수(()=>{})()

이렇게하면 괄호안의 이름붙여지지 않은 함수가 실행되어진다.쓰는 이유는 const, let이 블록 스코프이기 때문에 이 안에서만 유효한 변수를 사용하고 싶을때 감싸서 사용. async라는 비동기 프로그램을 쓸때 await를 쓰게 되는데 나중에 이 async를 못붙이는 경우가 생긴다. 그때 사용하게 된다.

 

이때 JS의 함수는 1급 객체로 불리운다. 함수를 변수에 담고 자유자재로 할 수 있다는 특징이 있다. 이것을 함수형 프로그래밍이라고 불리운다.

 

3,. 비구조화 할당

const obj = {a:3, b:4}; 와 같이 객체가 선언되어 있는데 이것을 쪼개는 것이다.

const a = obj.a

const b = obj.b

 

위와 같이 객체 key값이랑 변수명이 같을때 이렇게 선언가능해진다.

const {a,b} = obj;

 

---

 

const name = "john";

const age = 13;

const info = {name:name, age:age};

 

와 같이 key값과 변수명이 같다면 변수명을 생략가능해진다.

const info = {name, age};

 

비구조화 할당은 함수 parameter에서도 사용된다.

const Accordion = ({data}) => {}

이런식으로 쓰면 함수의 비구조화 변수로 사용하겠다는 의미이다. 이걸안하면 그냥 객체로 받아온다.

const Accordion = (props) => {}

위와 같이 된다면 props 내부 객체를 따로 뽑아내야한다.

 

4. default parameter

const add = (a, b=3) => {

return (a+b);
}

위와같이 인자를 안들어오더라도 b가 기본값으로 지정되어진다.

 

5. 템플릿 리터럴 ${foo}, 스트링" + abc + "입니다" `스트링${abc}입니다`

원래는

alert("이런" + work + "가 작동합니다);

이런식으로 되어 있어서 가독성이 크게 떨어졌다.

alert(`이 ${work} 를 수행하면 됩니다.`)

로 하면 된다.

6. import from , export default

react에서 export한것을 import 할수 있다.

7. 펼침연산자 : [...arr], {...object} )

const arr = [1,2,3,4,5];

const arr2 = [0, ...arr, 6];

const obj = {a: "a", b: "b"};

const obj2 = {...obj, c: "c", a: "A"}; -> 없는 값이 추가되고 있는 값으넣으면 덮어써진다.

8. Promise , async&await

원시타입: Primitive Type
- 종류 : Numbers, Strings, Booleans, null, undefined
- 값 자체를 저장

참조타입: Reference Type
- 종류 : Object, Array, Function ...
- 값이 담긴 주소를 저장