Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS
06. 미니프로젝트-2W

08. SpringFramework , SrpingBoot 
19. 중간프로젝트 (1M)
10. Linux 명령어
11. AWS
12. Docker
13. Kubernetes
14. React JS (v)
15. App - Android
16. 최종프로젝트 (1M)

---

JS ES6

ES6 문법

1. let & const

• let변수는 중복선언이 불가능
• let변수의 유효범위는 {}블록

//let변수는 같은 블록에서 내에서 중복이 불가능하다.
let y = 1;
// let y = 100; //에러

//let변수의 유효범위는 {}블록이다
let z = 10;
if(true) {
    let z = 100;
    console.log(z); //100
}
console.log(z); //10

• const

const GENDER = "남자";
// var GENDER = "여자"; //에러
// GENDER = "여자"; //에러

const arr = ["홍길동", "이순신", "홍길자"];
// arr = ["김철수"]; //에러
arr[0] = "김철수"; //내부의 값 변경은 허용
arr.push("박영희"); //내부의 갑 변경 허용

//객체에서의 수정
const P1 = {"name" : "홍길동" };

// P1 = {"name" : "이순신"}; //P1을 전부 바꾸는 코드는 에러
P1.name = "이순신"; //내부의 값의 변경은 허용
P1.age = 20; //내부의 값의 추가도 허용

2. spread operator(전개문)

• 반복 가능한 객체에 적용할 수 있는 문법
• 배열이나 문자열 등을 아래처럼 풀어서 요소 하나 하나로 전개시킬 수 있음

const arr = [1,2,3];
console.log(...arr); //num의 요소들을 추출

const str1 = 'hello'; 
const str2 = [...str1]; 
console.log(str2); // [ "h", "e", "l", "l", "o"]

//배열에서 전개구문
//배열의 추가
const num1 = [10, 20, 30, ...arr];
console.log(num1)

//배열의 중간추가
const num2 = [10, 20, ...arr, 30];
console.log(num2)

//배열의 복사
const num3 = [...arr]; //splice와 유사(복사)
console.log(num3)

//배열 연결
const num4 = [...arr, ...arr]
console.log(num4)

3. Destrucuring assignment(구조 분해 할당)

• 배열

let arr = ["홍길동", "이순신", "홍길자", "김철수"];
/* 기존의 방법
let n1 = arr[0];
let n2 = arr[1];
let n3 = arr[2];
let n4 = arr[3];
*/

//위치요소를 반환받아서 한번에 사용한다.
let [a,b,c,d] = arr;
console.log(a,b,c,d)

let [n1, , ,n2] = arr;
console.log(n1, n2)

//전부다 반환한다.
let [...x] = arr;
console.log(x);

//남아있는 모든 요소를 반환한다.
let [k1, k2, ...all] = arr;
console.log(k1, k2, all)

• 객체

let person = {
    "name": "김철수", 
    "age" : 30,
    "job" : ["programmer", "designer"]
}

//name키 값을 가져온다.
let {name} = person;
console.log(name);

let {name, age, job} = person;
console.log(name, age, job);

//다른 이름으로 가져오기
let {name: aaa, age:bbb} = person; //name을 aaa이름으로 가져온다
console.log(aaa, bbb)

4. for of문

• 반복 가능한 객체를 for문 안에서 반복시켜 연속된 결과를 얻음
• forEach문에서 지원하지 않는 break, continue, return의 사용가능

    let arr = ["a", "b", "c"];
    //기존의 for문
    /*
    for(let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    for(let i in arr) {
        console.log(arr[i]); //i는 인덱스를 담아준다
    }
    */
    
    //기존의 foreach문
    /*
    arr.forEach(function(value, index, arr) { 
        console.log(value);
        console.log(index);
        console.log(arr);
    })
	*/

    //es06 - forof문 (단 list같은 반복가능 요소에만 적용된다)
    for(let i of arr ) {
        console.log(i); //값을 뽑아준다.
    }
    
    //error
    let obj = {name: "g", age: 1};
    for(let i of obj) {
        console.log(i);
    }

5. Backtick(백틱)

• 백틱(`)을 사용해 문자열을 표현하고, 템플릿 리터럴 ${}를 이용해 필요값 처리

    let name = '홍길동';
    let age = 20;
	//기존문법
    console.log('제 이름은 ' + name + '이고 나이는 ' + age + "입니다");
    //backtick문법    
    console.log(`제 이름은 ${name}이고 나이는 ${age}입니다`);

6. Arrow Function(화살표함수)

• 기본적으로 익명함수 대체

• 가독성 향상

• 문법1

• 코드가 한개줄이면 {} 생략이 가능하다
• {}를 쓰지 않으면 기본값으로 undefined를 반환합니다.
• {}를 쓰지 않고 구문을 작성하면 리턴문이 됩니다.

    let b1 = (a) => console.log(a); //출력
    console.log( b1(1) ); //undefined

    let b3 = (a, b) => a + b; //리턴문
    console.log( b3(1, 2) ); //3

• 문법2

• 매개변수가 1개라면, 매개변수 자리의 ()의 생략 가능

    let func = a => a + 10;
    console.log ( func(10) ); //20

• 문법3

• 객체를 반환할때는 ()를 묶어줌

    //1st
    let c = () => {
        return {key: '홍길동'};
    }
    //2nd
    let d = () => ({key: '이순신'});

7.class

    class Person {
        //멤버변수 
        name = '홍길동';
        age = 20;

        //객체변수
        state = { 
            a: 1,
            b: () => {
                return 'obj의 b';
            }
        }

        //생성자
        //자바스크립트 생성자는 1개 입니다. (생성자 중복 불가)
        //멤버변수는 선언하지 않더라도 this.변수명을 지칭하면 자동 생성됩니다.
        constructor(addr) {
            this.addr = addr;
        }

        //함수
        func = (a) => {
            return "함수호출";
        }

    }
    
    //객체 생성1
    let p = new Person();

    console.log(p.name) //멤버변수 접근
    console.log(p.age)
    console.log(p.func()); //함수호출한 결과 출력
    console.log(p.state.a); //obj의 a접근
    console.log(p.state.b()); //obj의 b함수 호출한 결과 출력
    
    //객체의 생성2
    let p2 = new Person('서울시');
    console.log(p2.addr); //서울시

8. module import, export

• 모듈은 JS ES6문법에서 미리 작성해 놓은 스크립트 파일이며, 모듈 안에는 변수, 함수, 클래스 등이 정의되어 있음
• 모듈을 내보내는 방법은 named export, default export 2가지 방법이 있음
• 여러 값을 내보낼 시 name export방식 사용

//내보내기 1
export const name = '홍길동';
export const age = 20;

export const getInfo = () => {
    console.log('이름:', name, '나이:', age);
}

//내보내기2
let sum = 0;
let add = (x) => {
    sum += x;
    console.log(sum);
}

export {sum, add}; //선언해논 변수를 export{} 로 내보내기

• 단일 값 내보낼 시 default export방식 사용

class Person {

    constructor(name, age) {
        this.name = name;
        this.age = age;
    }    

    getInfo = () => {
        return '이름:' + this.name; 
    }

}

export default Person

---

React(리액트)

• 리액트는 UI 자바스크립트 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리
• 리액트는 자바스크립트에 HTML을 포함하는 JSX(JavaScript XML)이라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용
• 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리
• 구조가 MVC, MVVM과 같은 다른 프레임워크등과는 다르게 오직 View만 처리하는 라이브러리

환경설정

1. node.js 설치
2. 에디터 vscode설치
3. create-react-app으로 프로젝트 생성 (프로젝트명은 대문자를 포함할 수 없음)

npm create react-app 프로젝트명(react-basic)

4. 프로젝트 시동

# 프로젝트 최상위에서 실행
cd 프로젝트명
npm start

패키지 관리자

1. npm(node package manager)

• 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 npm은 노드에서의 패키지 관리자
• npm은 패키지 설치, 버전관리 및 종속성 관리를 위한 도구
• 주로 프로젝트에 종속성을 설치하고 관리하기 위해 사용
• 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라는 Getting Started가 많고, 사용빈도가 높음

2. npx(execute npm package binaries)

• npm에 속해 있는 npm 패키지 실행 도구이다.
• 여기서 npx가 패키지 실행 도구 라는 것이 npm과의 큰 차이점
• npm 패키지를 실행하고 일시적으로 사용할 수 있도록 해주는 도구로 프로젝트에 설치된 패키지를 전역적으로 설치하지 않고도 실행할 수 있음
• ex) 다른 사람의 깃허브 레포지토리에서 다운받아 package.json의 scripts 중 하나를 실행하고 싶을 때, 패키지가 설치되어 있어야 하지만 이럴 때 npx와 스크립트를 적으면 패키지 설치를 하지 않고 실행을 할 수 있음

3. yarn

• 안전하고 안정적이며 재현 가능한 프로젝트yarn은 npm, npx와는 결이 다른 패키지 관리자
• 속도나 안정성에서는 npm과 비슷
• 다른 점이자 장점은 버전을 어디에서나 같게 만들어 버그를 줄임으로써 보안을 높였다는 점
• yean을 사용하고 싶다면 yarn 패키지 관리자를 설치해야 함

React 코드

1. index.js

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
	<React.StrictMode>
   		<App />
	</React.StrictMode>
);

• index.html에 id가 root인 값을 얻음
• React.StricMode는 옛날 기능을 사용할 때 경고를 출력하는 기능(클래스형 컴포넌트)
• root의 render함수는 App 컴포넌트를 화면에 그림

2. App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

• return (JSX) 문장을 반환
• export default App으로 모듈을 빼냄
• index.js파일에서 로 사용됨

JSX

• JS의 확장 문법으로 HTML에 JS코드를 녹여낸 형태
• 코드를 수정하게 될 때 자동으로 화면이 리렌더링 됨
• Webpack Loader는 직접 설정도 가능하고 create react-app 생성시 자동으로 해줌

1. css로더 - css로드
2. file로더 - 폰트,이미지, 파일 등 로드
3. babel로더 - ES6문법을 화면에서 사용할 ES5문법으로 다운그레이드 하여 변환 => webpackConfig.js

JSX의 문법

1. JSX의 주석 alt + shift + a
2. JSX문법 - 반드시 하나의 태그를 return 해야 함
3. div를 사용하기싫다면 Fragment컴포넌트를 이용
4. 함수안에서 만들어진 변수는 중괄호 {name} 로 참조
5. if문 대신 3항연산자를 이용
6. 화면에 보여주고싶은게 없다면 null을 이용
7. undefind을 반환하는 상황을 만들면 안 됨
8. DOM요소에 스타일을 직접 넣을때는 반드시 객체형 객체로 묶고 속성은 카멜 표기법을 사용
9. class대신 className을 사용
10. 홀로 사용하는 태그는 닫는태그를 반드시 작성