[KISA] 핀테크 아카데미 서비스 개발과정 (간편결제) #2회차 javascript 기본문법(ES6) / React 설치

이 글은 핀테크 아카데미에서 유관우 대표님의 "핀테크 서비스 개발 기초 과정 2회차 강의" 을 수강 후 개인적으로 공부한 내용을 정리한 게시글입니다. 잘못된 점이나 부족한 부분이 있다면 언제든 지적 부탁드립니다.

 

1. 웹프로그래밍 개요

2. 시스템 세팅

3. API란 무엇인가

4. 실전 프로젝트 개발 과정 

    - 리액트 기본 과정 (기본문법 / 컴포넌트 활용)

    - 리액트 AXIOS를 이용한 API 활용

5. 금융위 API를 통한 프로젝트 작성

---

# http vs https

HTTP : 하이퍼 텍스트 전송 프로토콜의(Hypertext Transfer Protocol)

HTTPS : 하이퍼 텍스트 전송 프로토콜 보안(Hypertext Transfer Protocol Secure)

 

* HTTP 프로토콜의 문제점 : 서버에서부터 브라우저로 전송되는 정보가 암호화되지 않음

즉, 데이터가 쉽게 도난당할 수 있음

* HTTPS 프로토콜은 SSL(보안 소켓 계층)을 사용함으로써 보안 문제 해결. 

SSL은 서버와 브라우저 사이에 안전하게 암호화된 연결을 만들 수 있게 도와주고, 서버 브라우저가 민감한 정보를 주고받을 때 이것이 도난당하는 것을 막아줌.

---

1. Javascript 기본문법 (ES6) 

#  변수 

var 

 - 함수레벨 스코프를 가진 변수

 - 중복선언이 가능함 => 변수의 오염문제

 - 선언 전에 사용해도 에러 발생 X undefined 로 초기화됨

==> 틀렸는지 맞았는지 알 수 없는 단점..

 

let 

 - 블록레벨 스코프를 가진 변수

 - 중복선언이 불가능

 - 재할당 가능

 

const

 - 블록레벨 스코프를 가진 변수

 - 중복선언이 불가능

 - 재할당 불가능

 - 반드시 초기값이 필요함

var name = "one";
var name = "two"; 
// var 타입은 중복이 가능하다

console.log(name) // two 

let c = "test";
// let c = "test2"; 
// 중복 X -- 오류
// 재할당 O
console.log(c)

const e = 11;
// e = 12
// 재할당 X 중복 X
// 초기값이 반드시 필요 
console.log(e);

# Method, function

: 기능을 선언하는 방법

 

es6 이후 에는 좀 더 간결한 방법으로 기능을 선언할 수 있습니다.

 - Arrow Function 은 자신만의 this를 생성하지 않음.

 - 화살표 함수는 자신의 this가 바인드 되지 않기 때문에 함수의 스코프에서의 this 가 적용.

// method, function 선언

// 옛 방식 --  아예 안 쓰는 건 아님
function test(p1, p2){
    return p1 + p2;
}

let result = test(5,5);
console.log(result);

// ES6 버전 -- Arrow Function
const plus = (p1, p2) => {
    return p1 + p2;
} 

const minus = (p1, p2) => {
    return p1 - p2
}

const multi = (p1, p2) => {
    return p1 * p2
}

const div = (p1, p2) => {
    console.log(this)
    return p1 / p2;
}

let a = plus(4,2);
let b = minus(4,2);
let c = multi(4,2);
let d = div(4,2);

console.log(a,b,c,d);

 

*Arrow Function 방식

// 1번
() => { return "javascript" };

// 2번 
a => { return a }; 

// 3번 
() => "javascript";

# Object 객체 

let car = {
    name : "sonata",
    ph : 200,
    start : () => {
        console.log("engine start");
    },
    stop : () => {
        console.log("engine stop");
    }
}

console.log(car.start); // 함수가 start 변수에 할당 
car.start();
console.log(car.name + "의 마력은 " + car.ph + "입니다.");
car.stop();

# 배열 

// 배열을 배우는 이유 : 데이터를 단순하게 object형으로 모두 표현 가능
// -> 그러기에는 성능도 떨어지고 사용하기도 불편해 
// 연속된 데이터, 비슷한 데이터를 받아내기 위함

let car01 = "sonata";
let car02 = "bmw";
let car03 = "tesla";

let car = {
    name : "sonata",
    ph : 200,
    start : () => {
        console.log("engine start");
    },
    stop : () => {
        console.log("engine stop");
    }
}

let cars = [car01, car02, 392, car]; 
// 다른 type도 가능
// 선언할 때 배열 크기도 안정해줘도 됨

console.log(cars);
console.log(cars[0]); // 배열 접근법 


//---------------------------------------------
//in Java
//String [] cars = new array[3];
//--> 넘치면 overflow 발생
//ArrayList<String> stringArray = new ArrayList<String>

# 반복문

let cars = ["sonata","bmw"]; 

for(car of cars) {
    console.log(car);
}

for(let i = 0; i<cars.length; i++){
    let car = cars[i]
    console.log(car);
}

cars.map((car)=>{
    console.log(car);
});

: map이란?

반복문을 돌며 배열 안의 요소들을 새로운 배열로 리턴한다. (매핑한다.)

 

*map 이용한 반복문 실습

let car1 = {
    name : "sonata",
    ph : 200,
    start : () => {
        console.log("engine start");
    },
    stop : () => {
        console.log("engine stop");
    }
}

let car2 = {
    name : "bmw",
    ph : 300,
    start : () => {
        console.log("engine start");
    },
    stop : () => {
        console.log("engine stop");
    }
}

let car3 = {
    name : "tesla",
    ph : 400,
    start : () => {
        console.log("engine start");
    },
    stop : () => {
        console.log("engine stop");
    }
}

let cars = [car1, car2, car3]

// 배열 내 bmw라는 이름을 가진 차량이 존재 할 때 "차량이 있습니다" 텍스트를 출력
cars.map((car)=>{
    if(car.name === "bmw"){
        console.log(car.name + " 차량이 있습니다");
    }else{
        console.log("bmw 차량이 없습니다");
    }
});

* == 과  ===의 차이점

== : 값만 비교

=== : 값 + 자료형 비교

 

# Destructuring Assignment

 

 

# 템플릿 리터럴

let name = "허영은";
let age = 23;

console.log(name + " 님의 나이는 " + age + " 입니다.");
// 기존 방식

console.log(`${name} 님의 나이는 ${age} 입니다.`); 
// 템플릿 리터럴 방식

---

2. 리액트 기초 

# 웹 프로그래밍 기초 

1) HTML : 문서의 전체적인 구조

2) CSS : 문서의 디자인

3) JS : 문서의 기능 정의 

 

# React란?

: 자바스크립트 라이브러리의 하나

: 사용자 인터페이스를 만들기 위해 사용

: 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용

 

# React  설치 하기

npm install create-react-app -g

npx create-react-app "프로젝트명"

* react web app set up하기

npm start

* 설치된 디렉토리로 이동 후 명령어 실행하기

--> 바보 같이 디렉토리 이동안하고 명령어 입력해서 왜 나만 안되는지 .. 화내고 있었음 ...^^ㅠㅠ

** 이동안하고 명령어 입력하면 아래와 같은 에러가 뜸!

npm ERR! Missing script: "start" npm ERR! npm ERR! Did you mean one of these? npm ERR! npm star # Mark your favorite packages npm ERR! npm stars # View packages marked as favorites npm ERR! npm ERR! To see a list of scripts, run: npm ERR! npm run npm ERR! A complete log of this run can be found in: npm ERR!  

성공><!!

 

HI~~..

 

 

---

* 참고 

 

핀테크 아카데미 "핀테크 서비스 개발 기초 과정" 강의

 http vs https 차이