React는 페이스북에서 만든 웹 개발 라이브러리다.

장점

컴포넌트를 화면 구성을 효율적으로 구성할 수 있다.

리엑트는 컴포넌트라는 작고 독립적인 코드 블럭을 조합해, 빠르고 효율적으로 화면을 구성한다. 리엑트는 VirtualDom을 도입하여 화면 출력 속도를 높이고 코드의 복잡성을 줄였다.

• 화면 출력 속도가 빠르다...? 자바스크립트에는 jQuery와 Handlebars라는 라이브러리가 있다. 이 라이브러리는 아주 간결한 코드로 화면을 구성할 수 있지만, 화면이 커질 수록 화면을 그리는 시간도 길어진다. 특히, 화면의 일부분만 수정되어도 화면 전체를 다시 그려야한다.

화면 전체를 다시 그리는 비효율성을 해결하기 위해, 리엑트에 '다음에 나타날 화면의 일부(노드)를 미리 그려 놓고 변경된 화면의 일부(노드)만 수정하기' Virtaul DOM 기술을 적용했다.

npm

npm은 프로젝트에 필요한 라이브러리를 내려받아 설치하고 삭제하는 등의 관리를 해주는 프로그램이다. node_modules 폴더에 라이브러리를 내려받아 저장하고, *package.json *파일에 설치된 라이브러리 정보를 저장한다.

package.json에 라이브러리 명세를 따로 관리하는 이유는 node_modules의 용량이 너무 크다. 그래서 프로젝트를 공유할 때 용량이 큰 라이브러리를 전송할 필요 없이 라이브러리 목록과 핵심 코드만 전달하면 된다.

webpack

웹팩은 프로젝트에 사용된 파일을 분석해 기존 웹 문서 파일로 변환하는 도구다. 프레임워크가 .js, .css, .jpg와 같은 기존 웹 문서 파일을 사용하지 않기 때문이다.

트위터 템플릿은 웹 문서 style을 .css가 아닌 .sass파일로 작성한다. 웹 브라우저는 .sass파일을 해석하지 못해 웹팩이 파일을 해석해 브라우저가 인식할 수 있게 만들어준다.

각각의 프로그램은 LifeCycle이 존재한다. LifeCycle을 제대로 이해하는 것이 개발에 있어서 필수적이다. 리액트의 Life Cycle을 공부해보자. 리엑트는 컴포넌트 기반 프로그래밍이다. 컴포넌트는 생성(Mount) => 업데이트(Update) => 제거(Unmount)의 생명주기를 갖는다. 리엑트 컴포넌트는 Class컴포넌트와 함수형 컴포넌트가 있다. Class컴포넌트는 lifecycle메서드, 함수형 컴포넌트는 Hook을 사용한다. Class컴포넌트는 컴포넌트의 생명주기 단계구별이 함수형보다 명확하다는 장점이 있다.

Class 컴포넌트

1. Mount

• 컴포넌트가 생성될 때

  constructor

• 컴포넌트 생성자
• 컴포넌트가 생성되면 가장 먼저 실행
• this.props, this.state에 접근 가능
• 리엑트 컴포넌트 반환

  getDerivedStateFromProps

• props을 state에 넣어줄 때 호출

  render

• 컴포넌트를 렌더링

  componentDidMount

• 컴포넌트 렌더링이 마치면 호출
• 웹에 컴포넌트가 보이는 상태
• 서버 데이터 요청, 컴포넌트 접근 등의 처리

2. Update

• 사용자의 입력 처리, 데이터의 변경이 발생하는 단계

  getDerivedStateFromProps

• props나 state가 변경되었을 때 호출

  shouldComponentUpdate

• 컴포넌트 리렌더링을 결정하는 메서드

  componenetDidUpdate

• 컴포넌트 업데이트 완료 후 호출

3. Unmount

• 컴포넌트가 사라질 때

  componentWillUnmount

• 컴포넌트가 사라지기 전에 호출
• DOM에 등록했던 이벤트를 제거

React Hooks

함수형 컴포넌트에서 React State와 LifeCycle 기능을 연동하게 해주는 함수

why?

• 기존의 LifeCycle 메서드 기반이 아닌 로직 기반으로 나눌 수 있어 컴포넌트를 함수 단위로 분할이 가능

종류

useState

• 컴포넌트의 State를 생성
• 컴포넌트의 값이 변경되면 컴포넌트 리렌더링 발생

useEffect

• 컴포넌트의 렌더링이 완료되면 실행
• Class컴포넌트의 componentDidMount/componentDidUpdate/componentDidUpdate가 합쳐진 것

  useEffect(() => {
  return 'cleanup 코드'
  }, [의존 state])

• return에서 이벤트를 해지

useContext

• Context API를 통해 만들어진 Context에서 제공하는 Value를 가져올 수 있음
• 전역변수를 만들 때 사용

useReducer

• useState의 대체 함수
• 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리 가능
• 컴포넌트 바깥에 로직 작성 가능
• 다른 파일에 작성한 후 불러와 사용 가능

useRef

• DOM에서 특정 컴포넌트를 선택할 때 사용
• .current에 컴포넌트를 저장
• 이 객체는 리렌더링 되어도 값이 초기화 되지 않음

ES

ECMA Script의 약자로 '자바스크립트의 표준 규격'을 의미한다. European Computer Manufacturers Association(ECMA)에서 정한 자바스크립트의 통일된 표준이다.

ES5/ES6 문법 차이

버전의 차이일뿐 다른 문법이 아니다. 버전에 따라 추가된 기능과 메소드들이 있다.

ES5

1. 배열에 forEach, map, filter, reduce, some, every와 같은 메소드들이 지원
2. Object에 대한 getter와 setter가 지원
3. Javascript strict모드가 지원 (더 엄격하게 문법 검사를 진행)
4. json 형식의 자료들을 지원. 과거에는 XML이라는 규격을 사용했다가, json이 인기를 끌면서 javascript에서도 지원.

ES6

1. Hoisting을 개선.
2. 기존에는 var키워드를 사용하여 호이스팅이 빈번하게 일어났는데 이를 방지하기 위해 블록 스코프를 가진 let과 const를 추가.
3. 화살표 문법을 지원. 장점 : 코드의 간결화, this를 바인딩하지 않음.
4. iterator와 generator 추가.
5. module의 import/export 추가.
6. Promise 도입

C계열의 문법을 주로 사용했던터라 JavaScript는 편리하면서도 신기한 기능들이 많았다. 기능이 너무 많아서 다양하게 적용해보면서 익혀야겠다.

분류

생명 주기는 크게 3개로 분류한다.

1. 생성 될 때 처음으로 컴포먼트를 불러와 실제 DOM에 생성하는 단계(=mount한다)
2. 업데이트 할 때 유저의 행동에 의해 DOM의 내용이 바뀌는 단계
3. 제거할 때 화면에서 컴포넌트가 제거될 떄(=unmount한다)

리엑트 Component

하나의 block이다. 리엑트 공식 홈페이지에서는 클래스형이 아닌 함수형 컴포넌트를 사용하라고 명시했다. 라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용가능하다.

클래스형 컴포넌트

• state, lifeCycle 관련 기능 사용 가능
• 메모리 자원을 함수형 컴포넌트보다 더 사용
• 임의 메소드를 정의 가능

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

function App() { const name = 'react'; return

export default App;

### 함수형 컴포넌트
- state, lifeCycle 관련 기능사용이 불가능 => React Hook을 사용해 적용
- 메모리 자원을 클래스형 컴포넌트보다 덜 사용
- 컴포넌트 선언이 편리
```javascript
import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

State & Props

컴포넌트가 가지고 있는 데이터의 형태로 2가지가 있다.

State

Component가 가지고 있는 데이터이다. state의 수정/생성을 자유롭게 가능하다.

Props

Component가 부모Component로부터 받아온 데이터이다. 부모의 State에서 받아온 정보를 말한다. 받아온 정보(=props)는 수정이 불가능하다.

기존의 웹 개발을 구현하는 방법에서 _사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유현한 JavaScript 라이브러리_이다. "컴포넌트"라는 작고 고립된 코드의 조각을 이용하여 복잡한 UI를 구성할수 있도록 도와준다.

• SPA(Single Page Application)를 전제로 하고 있다.
• Virtual Dom을 활용하여 업데이트 해야하는 Dom요소를 찾아서 해당 부분만 업데이트 하기에, 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있다.

주요 특징

• 컴포넌트 기반
• 선언형 뷰
• JSX(JavaScript Extension)
• Hooks
• State & Props

참고

SPA (Single Page Application)

과거 웹 사이트는 문서 하나에 전달되는 파일 용량이 적었다. 완전히 새로운 페이지를 서버에서 전송해주는 것이 어렵지 않았다. 그러나 최근 웹 사이트에서는 한 페이지에 해당하는 페이지 용량이 커지고, 매번 새로운 페이지를 전달하는게 점점 버거워지게 되었다. 이러한 문제를 해결하기 위해 등장한 것이** SPA**이다. 어떤 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 방식이다.

상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 보여지는 것도 최초 load된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

Virtual Dom

브라우저의 WorkFlow

1. Dom Tree 생성

   브라우저가 HTML을 받으면, 브라우저의 렌더 엔진이 이를 파싱하고 Dom 노드로 이뤄진 트리를 생성. 각 노드는 각 HTML 엘리먼트들과 연관

2. Render Tree 생성 외부 CSS 파일과 각 엘리번트의 inline 스타일을 파싱. 스타일 정보를 사용하여 Dom트리에 따라 새로운 트리, 렌더트리 생성 Dom트리의 모든 노드들은 'attach'라는 메소드가 존재. attach메소드를 통해 스타일 정보를 계산해서 객체형태로 반환.

   3. Layout Render Tree가 생성되면, layout과정을 거침. 각 노드들은 스크린의 좌표가 주어지고, 배치가 된다.

   4. Painting 렌더링 된 요소들에 색을 입힌다. 트리의 각 노드들을 거쳐가면서 paint()메소드를 호출.

Dom에 변화가 생기면, 그때마다 _렌더트리를 재생성하고, 모든 요소들의 스타일이 다시 계산한 뒤, 레이아웃을 만들고 페인팅 하는 과정_이 반복된다.

장점

• 브라우저의 연산량을 줄여준다.

복잡한 SPA에서는 Dom 조작이 많이 발생해, 변화를 적용하기 위해 브라우저가 많은 연산을 해야한다. 이는 전체적인 프로세스를 비효율적으로 만든다. Virtual Dom은 뷰에 변화가 발생하면, 그 변화는 실제 Dom에 적용되기 전, 가상의 Dom에 먼저 적용시키고 그 최종적인 결과를 실제 Dom에 전달한다. 이를 통해 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선된다.

• fragment 관리의 자동화 및 추상화 Virtual Dom은 fragment의 관리하는 과정을 자동화하고 추상화해준다. 이 작업을 직접 구현하려면 기존 값 중 어떤게 변경됐고, 변경되지 않았는지를 계속 파악하고 있어야한다. 이 과정을 Virtual Dom이 자동으로 관리해준다.

참고 문서

Javascirpt의 자료형과 Javascirpt만의 특성은 무엇일까?

1. 느슨한 타입의 동적 언어

low level의 언어들과 달리 Javascript의 변수는 특정 자료형으로 선언하지 않고, 이는 모든 타입의 값으로 할당 및 재할당이 가능하다. 값이 할당될 때 변수의 타입을 지정한다. 변수 선언만 하고 값을 할당하지 않을 경우는 undefined 값이 할당 된다.

var test; // undefined
test = null; // null
test = 42; // number
test = 'bar' // string
test = true // boolean

원시 값

• Boolean
• Null
• Undefined
• Number
• BigInt
• String
• Symbol

2. JavaScript 객체와 불변성이란?

원시 타입은 불변한다. 불변 데이터는 한번 생성되고나면 그 뒤에는 수정이 불가능하다. 새로운 값을 할당할 때는 같은 메모리 공간을 수정하는 것이 아니라, 완전히 새로운 메모리에 값이 생성되어 재할당 되는 것이다.

C에서 문자열 수정하는 것이 Javascript에서는 불가능하다. 기존 값에 수정한 문자열을 새로 생성해서 할당해주게 된다.

var test = "Hello World";
test[0] = "T"; // 이런게 안된다.

javascript에서는 원시타입을 제외한 모든 값은 _Object타입_으로 할당 받는다.

const

const는 재선언 및 재할당이 불가능하다고 알고 있다. const로 선언한 변수는 값이 불변한다고 생각할 수 있다. 하지만 const는 값에 대한 '참조'가 한번 변수에 할당되고 나면 변할 수 없다는 의미지, const 변수가 참조하고 있는 객체의 '값/속성'이 불변한다는 것을 의미하지 않는다.

//객체 할당
const student = {
  name : "rio",
  age : 20,
};

//새로운 객체 할당 ==> error 발생!!
student = {
  name : "kai",
  age : 15,
}; 

student.name ="kai";
student.age = 15;
console.log(studnet); // {name : "kai", age : 15}로 잘 변경되었다.

즉, const는 객체 내부의 깊은 곳까지의 재할당은 제어하지 않는다는 점을 알 수 있다.

3. Object.freeze()

Javascript에서 기본적으로 제공하는 메소드로 불변 객체를 만들 때 사용한다.

//객체 할당
const student = {
  name : "rio",
  age : 20,
};

Object.freeze(student); 

//이제 객체의 속성 변경이 되지 않는다.
//에러를 띄우지 않고 무시된다.
student.name ="kai"; 
student.age = 15;
console.log(studnet); // {name : "rio", age : 20} 객체의 속성이 변경되지 않는다.

4.Deep Copy와 Shallow Copy

우선 개념부터 정의하자면 ShallowCopy 얕은 복사는 참조(주소)값의 복사를, DeepCopy 깊은 복사는 값 자체의 복사를 의미한다.

const student1 = {
  name : "rio",
  age : 20,
};

const student2 = student1;
student2.name = "key";
console.log(student1.name); // key 속성의 값이 바뀐것을 알 수 있다.
console.log(student1 === student2); // true

참조 할당의 경우, 데이터가 그대로 생성이 되는 것이 아니라 해당 데이터의 메모리 주소를 전달해 하나의 데이터, 같은 데이터를 공유하는 것이다.

5.== 과 ===

주된 차이점은 ===은 두 변수의 타입도 확인한다는 것이다.

☝🏻 javascirpt에서는 0이란 값은 false와 동일하다.

0 == false; // true

☝🏻 그러나, 0은 Number, fals은 boolean으로 타입이 다르다.

0 === false; // false

☝🏻 null과 undefined는 다른 타입이다.

nulll === undefined // false

===과 같이 값과 타입 모두를 비교하는 비교 연산자가 나오게 된 이유는 아무래도 javascript의 자료형이 느슨한타입의 동적언어이기 떄문인 것 같다.

생성은 마음대로 하고, 사용은 맘대로 아닌...?🤔 필요에 따라 ==을 사용하겠지만, 코드의 에러를 방지하기 위해 === 사용을 습관화해야겠다.

호이스팅

코드가 실행이 될 때, var 변수와 함수 선언을 먼저 메모리에 할당되는 것을 의미한다. 이게 무슨 말이냐...?

console.log(text); // undefined
var text = "Rio";

text라는 변수는 console.log() 밑에 선언했는데 error를 띄우는것이 아닌 undefined을 출력한다.

Mission

let b = 1;

function hi () {

    const a = 1;

    let b = 100;

    b++;

    console.log(a,b); // a(local) : 1, b(loacl) : 101

}

//console.log(a); //error : a는 hi 안의 로컬 변수이기 때문에 접근 불가능

console.log(b); // b(global) : 1;

hi();

console.log(b); // b(global) : 1; 변화 없음

박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 layout 모델이다. 1차원 모델이라 부르는 이유는, layout을 다룰 때 한번에 하나의 차원(행or열)만 다룰 수 있기때문이다. 요소를 담은 부분을 flexbox 또는 flex 컨테이너라고 한다. 일단, 요소를 flex컨테이너로 만들기위해서는 display:flex를 적용시키면 된다.

추축과 교차축

flex에는 주축과 교차축이 있다. 가로가 주축이 되면 세로가 교차축, 세로가 주축이 되면 가로축이 교차축이 된다.

flex-direction

flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향,역방향)을 지정한다.

속성

• row : 기본값, 주축 = 행, 방향 = 콘텐츠의 방향과 동일
• row-reverse : 주축 = 행 , 방향 = 콘텐츠의 방향과 반대
• column : 주축 = 열, 방향 = 콘텐츠 방향과 동일
• column-revers : 주축 = 행, 방향 = 콘텐츠의 방향과 반대

justify-content

주축 배치 방법으로, 축을 기준으로 요소들 간의 배치 방법(간격)을 결정할 수 있다.

속성

• ceneter : 축의 가운데 정렬
• flex-start : 축의 맨 앞부터 정렬
• flex-end : 축의 맨 뒤부터 정렬
• space-around : 모든 요소들을 축의 길이 공간을 균등하게 나눠 띄워 배치한다. 텍스트의 전체정렬같은 느낌...?
• space-between : 일단 요소 두개를 축의 좌우에 붙여놓고, 가운데 남은 공간을 균등하게 요소들을 띄워 배치한다.

align-item

교차축 배치 방법, 축을 기준으로 요소들 간의 배치 방법(간격)을 결정할 수 있다.

속성

• justify-content와 동일

align-self

교차축 개별요소 배치 방법으로, align-content와 달리 align-self는 요소 하나 하나 배치 방법을 결정할 수 있다.

속성

• justify-content와 동일

flex-wrap

줄 바꿈 여부으로, 요소들이 flex컨테이너 축의 길이를 넘어가게 되는 경우 처리하는 방법을 결정할 수 있다.

❗️주의! flexbox는 자식 요소들이 자기의 크기보다 크다면, flexbox는 자식 요소들의 크기를 축소시킨다.

속성

• nowrap: 기본상태로, 자식요소들이 flexbox의 크기보다 크면 자식요소를 축소시킨다.
• wrap : 자식요소의 길이 합이 주축보다 클 경우, 자동으로 줄바꿈을 시켜 이동시킨다.
• wrap-reverse : 줄바꿈을 밑에서부터 위로 시킨다.

z-index

요소의 쌓임 순서(stack order)를 정의할 수 있다. 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의 위치 지정 요소에 대해 적용할 수 있는 속성이다. 정수 값이 클 수록 상단에 위치하게 된다.

사진 위에다 버튼 구현하려고 할 때 사용하면 될 듯!

Casacading Style Sheet의 줄임말로 Html이 페이지의 구조를 설계했다면 페이지의 스타일 담당하는 부분이다.

• 담당하는 내용 font / background-color / width,height ...etc

Html에 style을 적용하는 방법은 다양하다.

1. 인라인 스타일: Html파일 안에서, 태그에 style속성을 직접 추가하기
2. 스타일 태그: Html파일 안에서, style 태그를 분리해서 적용
3. 문서 간의 연결 CSS 파일을 별도로 만들어, 필요한 Html 파일에 연결

처음에는 1,2번 방법으로 했다가 Html 파일이 너무 길어지고, 코드의 재사용과 유지보수가 어려웠다. CSS의 속성들도 제대로 이해할 겸 복습을 해보자.

😆 선택자

- 기본 선택자

1. 전체 선택자

모든 요소들을 선택 적용

* { color : red; }

2. 태그 선택자

특정 tag에만 선택 적용

p { color : red; }

3. 클래스 선택자

특정 class에만 선택 적용

.text { color : red; }

4. 아이디 선택자

특정 id에만 선택 적용

#text { color : red; }

id는 고유한 식별자 기능으로 중복 사용이 불가능하다!!

- 그룹 선택자

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다. 쉼표(,)를 이용해 선택자를 그룹화한다.

h1, p, div { color : red; }

선택자가 겹치는 경우

• 선택자가 겹치는 경우: 기본적으로는 나중에 작성된 스타일이 적용이된다.

  p { color : red; } //정의했는데 
  p { color : black; } //밑에서 또 정의한 경우 뒤에 것을 적용

• 선택자가 다르지만 요소가 겹치는 경우: 선택자 우선순위에 의해 적용될 스타일이 결정된다.

  p { color : red; }
  #board { color : black; } //우선 순위에 따라 id 선택자에서 정의한 속성이 적용

  • 선택자 우선순위 id 선택자 > class 선택자 > tag 선택자

🕹 text 속성

• font-family : 글꼴
• font-size : 글자 크기
• text-align : 글자 정렬 방식
• color : 글자 색상 ```css
• { font-family : Times, monospace, serif; //여러개 지정시 우선순위 적용 가능! font-size : 16px;// px,rem,em 단위가 있다. text-aling : left; // left,right: 좌우정렬 center : 가운데 justify : 양끝 정렬 color : red;

}

<hr>


## 💣 Block레벨 요소 / inline 요소
### 블록 레벨 요소
자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
> div, p, h1

### 인라인 요소
자기에게 필요한 만큼의 공간만 차지
> span, a 

### display 속성
해당 부분을 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의해 속성을 변경할 수 있다.
```css
//블록 레벨 요소인 div 요소를 인라인으로 만들기
div { display: inline; }
//인라인 요소인 a 요소를 블록 레벨로 만들기
a { display: block; }

이외에 inline-block, none 등 다양한 요소들이 있다.

inline의 경우, content의 내용에 따라 자동으로 너비와 높이가 결정되므로 수정이 불가능하다. 이런 경우 inline-block으로 display속성을 변경해주면 설정이 가능하다

🍉 박스 모델

브라우저가 요소를 Rendering할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 된다. 이 영역을 'Box'라고 표현하며, CSS는 박스의 크기, 위치, 속성을 결정하게 된다.

박스의 4개 영역

• 콘텐츠 영역 (Content)

• 안쪽 여백 (Padding)

• 경계선(테두리) (Border)

• 바깥쪽 여백 (Margin)

• 박스 모델 이미지

box-sizing

해당 속성은 요소의 너비와 높이를 계산하는 방법을 지정한다.

• content-box : default. 너비와 높이가 콘텐츠 영역만 포함
• border-box : 너비와 높이가 padding과 border영역까지 포함

너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있다!

🍅 Background

콘텐츠의 배경을 정의

속성

• background-color : 배경색
• background-image : 배경이미지
• background-position : 배경 이미지 초기 위치
• background-size : 배경 이미지 크기
• background-repeat : 배경 이미지 반복 방법

배경 속성 더보기

🍻 Float과 Clear

Float

요소가 문서의 일반적인 흐름에서 제외되어, 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른족에 배치되게 한다.

속성값

• none : 기본값
• left : 자신이 속한 박스의 왼편에 떠 있기
• right : 자신이 속한 박스의 오른쪽에 떠 있기

문서의 흐름에서는 제외되지만, 필요한 만큼의 공간을 차지!

Clear

float 요소 이후에 표시되는 요소가 float을 해제하여 float 요소의 아래로 내려가게 할 수 있다.

속성

• none : 기본값
• left : float이 left인 요소의 아래로 내려간다.
• right : float이 right인 요소 아래로 내려간다.
• both : float이 left와 right인 요소의 아래로 내려가겠다.

Position

요소를 어떻게 배치할지 정의

속성

• static : 기본값
• relative : 문서 흐름에 따라 적용하되, 상하좌우 위치 값에 따라 offset을 적용
• absolute : 일반적인 문서 흐름에서 제거, 가장 가까운 position 지정 요소에 대해 상대적 offset을 적용
• fixed : 일반적인 문서 흐름에서 제거, 지정한 위치에 고정
• sticky : 일반적인 문서 흐름에서 제거, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 offset적용

var input = prompt("값을 입력해주세요");

그럼 텍스트필드 영역에 입력한 값을 _** '문자열'**_로 가져온다. 입력한 값을 number나 다른 자료형으로 사용한다면 형변환을 해주어야한다.

var input = prompt("값을 입력해주세요");
parseInt(input); //문자열을 정수로 변경
parseFloat(input); //문자열을 실수로 변경
Number(input); //문자타입을 숫자타입으로 변경

그러나 Number(str)과 parseInt(str), parseFloat(str)과는 좀 차이가 있다.

Number(str)

var num = Number('1234'); // 숫자 1234
var num = Number('10.123'); //숫자 10.123
var num = Number('1000원'); // NaN 에러!! 변환안된다.

parseInt(str) / parseFloat(str)

var num = parseInt('1234'); // 1234
var num = parseInt('1000원'); // num에 1000이 저장
var num = parseInt('가격 : 1000원'); // num에 NaN이 저장

문자열의 시작이 숫자로 시작하면 거기까지 숫자를 인식해서 반환해준다 👍🏻

Null / undefined

둘 다 값이 없다는 점은 동일! 변수를 선언만 하고 초기화를 안하거나, 선언조차 안된 변수를 호출할 때undefined 상태가 된다. Null은 의도적으로 개발자가 값을 넣어놓지 않은, 즉 무의 상태를 표현하기 위해 사용된다.

var _obj; //undefined
var _null_obj = null; //null

문자열

str1.concat("str2");

두 문자열을 연결하는 메소드

var str1 ="Hello";
var str2 ="World";
var str3 = str1.concat(str2); //"Hello World"

str1 + str2;

그냥 문자열을 더하기 연산으로도 연결할 수 있다. 문자열과 숫자를 더할 경우 숫자를 자동으로 문자열로 변경하여 연결한다.

var str1 ="Hello";
var str2 ="World";
var str3 = str1 + str2; //"Hello World"
var str4 = "Pi:" + 3.14 // "Pi:3.14"

charAt(인덱스)

특정 위치의 문자열을 알아내는 메소드

var str = "abcdef";
str.charAt(0); // a
str.charAt(5); // f
str[2]; // c
str.charAt(7); //""

한 가지 특이한 점은 다른 문법에서는 문자열의 범위를 넘어가는 인덱스에 접근하면 OutOfRange 에러를 띄우는데, javascript에서는 빈 값 ""을 반환한다.

부분 문자열 구하기

문자열 중 일부 구간만 필요할 때가 있다.

.substr(pos,length)

• length 생략 시, pos에서 맨 마지막까지 반환
• pos가 음수인 경우, 문자열 길이 - pos로 동작 = 즉 뒤 쪽부터

var str = "abcdef";
str.substring(2,4); //"cde"

.substring(pos1, pos2)

• pos1에서 pos2 문자열 추출
• pos2 생략시 맨 마지막까지 추출

문자열 검색하기

• indexOf(str) : str이 있으면 첫 시작 위치 인덱스 반환
• lastIndexOf(str) : 여러번 발생한 경우, 마지막 문자의 시작 인덱스 반환

  문자열이 없으면 -1을 반환

  var str = "abcdab";
  str.indexOf("ab"); // 0
  str.lastIndexOf("ab"); // 4
  str.indexOf("f"); // -1

배열 요소 추가/삭제하기

배열의 앞과 뒤에서 엘리먼트를 추가하거나 삭제가 가능하다

• .push(element) : 배열의 뒤에 요소 추가
• .pop() : 배열의 뒤에서 요소 삭제하고 리턴
• .shift() : 배열의 앞에서 요소 삭제하고 리턴
• .unshift(element) : 배열의 앞에 요소 추가

  var arr = [1,2,3,4,5];
  arr.push(6); // arr = [1,2,3,4,5,6];
  arr.pop(); // arr = [1,2,3,4,5]; 이 되고 6을 반환
  arr.shift(); // arr = [2,3,4,5]; 이 되고 1을 반환
  arr.unshift(7); // arr = [7,2,3,4,5]; 

배열 붙이기, 검색하기

• ary1.concat(ary2) : ary1과 ary2를 붙임
• ary.indexOf(element) : ary에서 element가 있는 첫 위치를 검색
• ary.lastIndexOf(element) : ary에서 element가 있는 마지막 위치르 반환

for in / for of

둘 다 객체의 요소들을 자동으로 순차 접근하게 해주는 기능이다.

var obj = {
    name: "object",
    age: 10,
    weight: 5
}
for(var v in obj){
    console.log(v); // name, age, weight
      console.log(obj[v]); //"object", 10, 5
}

☝🏻 Bulma

• BootStrap과 똑같은 기능을 하는 프레임워크
• 미리 정해진 클래스를 가져다 쓸 수 있는 무료 CSS 프레임워크
• why Bulma...? not BootStrap?

  1.순수 CSS로만 이루어진 프레임워크! 고로 직접 수정해서 커스터마이징이 유리하다
  2.직관적이다
  3.디자인적으로 Bulma의 모양이 더 이쁘다

[Bulma 공식문서]https://bulma.io/documentation/

☝🏻 회원가입

• 해시함수

  알고리즘의 한 종류로서, 임의의 데이터를 입력 받아 항상 고정된 길이의 임의의 값으로 변환해주는 함수
  역추적이 불가능하기 때문에 암호화한 후 데이터베이스에 저장
  ex_입력한 비밀번호를 랜덤한 암호화된 값으로 바꿔버린다.

• 회원가입은 됐으나 로그인시 에러 issue 강의에서는 Robo 3T라는 mongodb Gui 프로그램 툴을 사용하는데 웹 플러스반 강의에서는 연동의 설명이 없어서 다들 방법을 찾았지만 명확한 답을 못찾았다. 그래서 그냥 DNSPython 패키지를 설치해서 다이렉트로 mongodb 클라우드에 저장을 하는 방법으로 대처했다. 내 경우 클라우드 db에 접근하기 위해서는 추가로 작업해줘야하는게 있어서 적어두기로 한다.

  pip install certifi

또한 회원가입을 하고 로그인을 해보면 에러가 발생하는데 구글링 하다가 관련 문제를 해결하신 분이 있어 참고해 해결했다. 이미 decode가 되었기 때문에 decode할게 없다라는 문제라고 한다. .decode('utf-8')를 지워주면 잘 작동한다 ㅎㅎ [참고] https://fusiondeveloper.tistory.com/31

☝🏻 로그인

• JWT(Json Web Token)

  Json객체를 사용해서 정보를 안정성 있게 전달하는 웹 표준

• Cookie 로그인을 하면, 반드시 쿠키가 생성된다. 페이지에 관계없이 브라우저에 임시로 저장되는 정보 딕셔너리 형태로 저장된다. 쿠키가 있기 때문에, 한번 로그인하면 네이버에서 다시 로그인할 필요가 없다. 브러우저를 닫으면 자동 삭제되거나, 일정 시간이 지나면 삭제되게 만들 수 있다. 로그아웃하면 받았던 토큰이 지워지게 된다.

• DSS (Daily Style Share)

2. 소개

---

오늘 나의 스타일링을 자랑하고, 다른 사람들의 스타일링 또한 서로 구경하며 공유할 수 있는 서비스입니다.
딱 오늘 하루 맞춤 스타일링을 공유해보세요 🤩

[Github] https://github.com/dudgns5845/DSS

3. 와이어프레임

---

• 로그인 페이지

• 회원가입 페이지

• 메인 페이지

• 글 작성 부분 설명

  
  # 4.개발해야하는 기능들

  ---

  |기능|Method|URL|Request|Response| |------|---|---|---|---| |로그인|Post|/api/login|{'id' : id, 'pw' : pw}| |회원 가입|POST|/api/membership|{'id' : id, 'pw' : pw}|가입 완료 메세지| |글 목록 조회|GET|/api/posts||글 리스트| |글 작성|POST|/api/posts|{'img' : img, 'id' : id, 'heart': heart, 'commnet' : commnet}|작성 글 데이터|

• 메모리에 올라온 프로세스들 중 어떤 프로세스를 먼저 처리할지 순서를 정하는 것
• Ready Queue에 있는 프로세스들 중에 누구에게 CPU를 할당해 줄 것인지 결정하는 것

Why?

• CPU는 한번에 하나의 프로세스만 실행 가능.
• 특정 프로세스가 I/O 요청에 의해 대기해야할 경우 CPU 대기 상태.
• 다중 프로그래밍에서는 이러한 시간을 생산적으로 활용하고자 CPU를 그 프로세스로부터 회수해 다른 프로세스에 할당해 CPU 이용률 극대화.

📌 선점/비선점 스케줄링

CPU 스케줄러 동작 상황

1.한 프로세스가 실행상태에서 대기 상태로 전환될 때 ex) I/O 요청에 의한 대기 2.프로세스가 실행 상태에서 준비 완료 상태로 전환될 때 ex) 할당된 시간이 다 끝났을 때 (타이머 인터럽트가 발생했을 때) 3.프로세스가 대기 상태에서 준비완료 상태로 전환될 때 ex) I/O 종료 시 4.프로세스가 종료될 때

선점 스케줄링(Preemptive)

• 2, 3번 상황과 같이 강제적으로 CPU를 빼앗기는 경우.
• Windows, macOS, Linux를 포함한 거의 모든 최신 운영체제들은 선점 스케줄링 알고리즘을 사용.

비선점 (Nonpreemptive)

• 1, 4번 상황과 같이 프로세스가 자발적으로 CPU를 반납하는 경우.
• CPU가 한 프로세스에게 할당되면 프로세스가 종료되든지, 또는 대기 상태로 전환해 CPU를 방출할 때까지 CPU를 점유

⭐️ 스케줄링 기준

1.CPU 이용률 (Utilization)

• 전체 시스템 시간 중 CPU가 작업을 처리하는 시간의 비율
• CPU 이용률이 높을수록 CPU가 바쁘게 일을 하고 있다는 것

2.처리량 (Throughput)

• 단위 시간당 완료된 프로세스의 개수
• 긴 프로세스인 경우 이 비율을 몇 초 동안 한 프로세스가 될 수도 있고, 짧은 프로세스인 경우 처리량은 초당 수십 개의 프로세스가 될 수도 있음

3.총처리 시간 (Turnaround time)

• 프로세스가 시작해서 끝날 때까지 걸리는 시간
• 준비큐에서 대기한 시간, CPU에서 실행하는 시간, I/O 시간을 합한 시간

4.대기 시간 (Waiting time)

• 프로세스가 준비 큐에서 대기하면서 보낸 시간의 합

5.응답 시간 (Response time)

• 하나의 요구를 제출한 후 첫 번째 응답이 나올 때까지의 시간
• 이 기준은 응답이 시작되는 데까지 걸리는 시간

How?

CPU 이용률과 처리량을 최대화하고 총처리 시간/대기 시간/응답 시간을 최소화 하는 것이 Best!!

👾 스케줄링 알고리즘

1.선입 선처리 (FCFS) / 비선점

• CPU를 요청하는 순서대로 할당 받는것
• 긴 프로세스가 CPU를 양도하길 모든 프로세스가 대기하게 되는 문제

2.SJF (Shortest Job First) / 비선점

• 가장 적은 CPU 사용시간을 가진 프로세스부터 우선 할당하는 방식
• 최소의 평균대기 시간을 가짐(이론상)
• 하지만 프로세스가 얼마만큼의 CPU 이용 길이를 가지는지 미리 알수가 없어 구현 물가능

3.RR (Round Robin) / 선점

• 시간 할당량(time quantum)을 정의하여 선점형으로 동작
• 프로세스의 CPU 이용시간이 할당된 시간보다 크면 프로세스는 CPU를 반납
• 시간 할당량을 작게 주면 Context Switching이 빈번하게 발생
• 시간 할당량을 너무 크게 되면 FCFS와 같음

4.우선순위 스케줄링 (Priority Scheduling) / 선점 & 비선점

• 운영체제 혹은 사용자에 의해 프로세스에 우선순위를 부여
• CPU는 가장 높은 우선순위를 가진 프로세스에 할당
• *무한 봉쇄 or 기아 상태 * 문제 발생
• 높은 우선순위 프로세스가 계속 들어오면 낮은 우선순위 프로세스의 순서가 오지않아 무하 대기 발생
• Aging 기법을 활용해 우선순위를 높여줌

5.다단계 큐 (Multilevel Queue)

• 다수의 준비 큐를 가지는 스케줄링 기법
• 각각의 큐는 자신만의 스케줄링 알고리즘 존재하고, 큐들간의 우선순위가 존재

[참고] https://velog.io/@mu1616/CPU-%EC%8A%A4%EC%BC%80%EC%A4%84%EB%A7%81

• 프로그램이 실행하게 되면 OS는 메모리(RAM)에 공간을 할당한다.
• 할당해주는 메모리 공간은 4가지(Code, Data, Stack, Heap)영역이 있다.

버퍼_Buffer

• 속도에 차이가 있는 두 장치 사이에서 그 차이를 완화하는 역할을 한다.

• 데이터를 한꺼번에 모았다가 한번에 전송한다.(귤을 5개를 한개씩 전달하는 것보단 바구니에 모아서 보내는것이 더 효율적이다.)

• 하드디스크에서는 메모리 버퍼가 있다.

• 일반적으로 버퍼 사이즈를 크게 하면 데이터 전송량이 늘어나지만 반대로 대기 시간이 길어지는데 이를 버퍼링이라고 한다.

스풀_Spool

• CPU와 입출력장치가 독립적으로 동작하도록 고안된 소프트웨어적인 버퍼이다.
• ex_프린터로 출력을 넣고 다른 문서작업을 진행 할 수 있다.
• 스풀러가 버퍼랑 다르게 버퍼의 경우 버퍼가 차면 데이터를 전송한다. 그러나 스풀러는 다른 작업이 간섭할 수 없는 베타적인 성격이다.

캐시_Cache

• 메모리와 CPU 사이에 속도 차이를 완화하기 위해 메모리의 데이터를 미리 가져와 저장해두는 임시 저장장소이다.

• 캐시는 필요한 데이터를 모아 한꺼번에 전달하는 버퍼의 일종으로 CPU가 앞으로 사용할 것으로 예상되는 데이터를 미리 가져다 놓는다.

• 메모리의 경우 시스템 버스의 속도로 작동하기 때문에 느리다.

  cf_버스 : 컴퓨터 부품 간, 컴퓨터 간에 데이터와 정보를 전송하는 통로(통신 시스템)

캐시 히트_Cache hit : 원하는 데이터를 찾았다. 캐시 미스_Cache miss : 원하는 데이터가 없으면 메모리로 가서 데이터를 찾는다.

• 컴퓨터의 성능을 향상시키려면 캐시 적중률이 높아야 한다.
• 캐시 적중률을 높이는 방법 중 하나는 캐시의 크기를 늘리는 것이다.
• 캐시가 커지면 더 많은 데이터를 미리 가져올 수 있어 캐시 적중률이 올라간다.
• 그러나, 캐시는 가격이 비싸기 때문에 크기를 늘리는 데 한계가 있어 몇 메가바이트 정도만 사용한다.
• 캐시의 적중률을 높이는 또 다른 방법은 앞으로 많이 사용될 데이터를 가져오는 것이다.
• 이와 관련된 이론으로는 현재 위치에 가까운 데이터가 멀리 있는 데이터보다 사용될 확률이 높다는 지역성locality이론이 있다.

즉시쓰기와 지연쓰기

캐시에 있는 데이터가 변경되는 경우 이를 반영해야 하는 문제도 있다. 캐시는 메모리에 있는 데이터를 임시로 가져온 것이기 때문에 캐시에 있는 데이터가 변경되면 메모리에 있는 데이터도 변경해야 한다. 캐시의 변경된 데이터를 메모리에 반영하는 데에는 즉시쓰기 방식과 지연쓰기 방식이 있다.

• 즉시쓰기 write through

  캐시에 있는 데이터가 변경되면 이를 즉시 메모리에 반영하는 방식이다. 메모리와의 빈번한 데이터 전송으로 인해 성능이 느려진다는 것이 단점이다 메모리의 최신 값이 항상 유지되기 때문에 급작스러운 정전에도 데이터를 잃어버리지 않는다.

• 지연쓰기 write back 캐시에 있는 데이터가 변경되면 이를 즉시 메모리에 반영하는 것이 아니라 변경된 내용을 모아서 주기적으로 반영하는 방식이다. 메모리와의 데이터 전송횟수가 줄어들어 시스템의 성능을 향상할 수는 있으나 메모리와 캐시된 데이터 사이의 불일치가 발생할 수도 있다는 것이 단점이다.

L1 캐시와 L2 캐시

• 프로그램 명령어는 크게 어떤 작업을 할 지 나타내는 명령어 부분과 작업 대상인 데이터 부분으로 나눌 수 있다.
• 캐시는 명령어와 데이터의 구분 없이 모든 자료를 가져오는 일반 캐시, 명령어와 데이터를 구분하여 가져오는 특수 캐시라는 두 가지 레벨로 구분된다.

  L1 캐시 : CPU 레지스터에 직접 연결되기 때문에 L1캐시라고 불린다. 특수캐시로 명령어 캐시와 데이터 캐시가 있는데 명령어 캐시는 명령어 레지스터와 연결, 데이터 캐시는 데이터 레지스터와 연결되어 있다.

  L2 캐시 : 일반캐시로 메모리와 연결되기 때문에 L2캐시라고 불린다.

저장 장치의 계층 구조

• 램에 프로그램의 데이터를 다 올릴 수 없기 때문에 자주 사용하는 데이터를 비싸고 속도가 빠른 저장장치를 cpu 가까운 곳에 배치하여 성능을 향상시킨다.

인터럽트

• 프로그램의 실행과 상관없이 비동기적 이벤트를 처리하기 위한 기법
• 네트워크 패킷 도착 이벤트, I/O 요청 같은 이벤트에 사용된다.

  인터럽트 처리 순서

  1. 다른 인터럽트를 차단
  2. 현재 실행 상태(State)를 PCB에 저장
  3. ISR(Interrupt Service Routine)로 점프
  4. 저장한 실행 상태(State)를 복원
  5. 인터럽트로 중단된 지점부터 다시 시작

질문 내용

예상 면접 질문

• 저장장치의 계층 구조를 설명바랍니다.
• 버퍼 사이즈를 크게 하면 좋은거 아닌가요?
• 비동기적 이벤트를 처리하기 위한 방식이 무엇인가요?

과거에는 슈퍼컴퓨터에만 적용되어 왔던 병렬컴퓨터 아키텍처가 현재 일반 PC에도 범용적으로 채택되어 컴퓨터의 성능 향상에 많은 기여를 한다. 현재 멀티코어 시대에서는 프로세서 간의 협력을 최상으로 끌어내기 위해 _소프트웨어 설계를 어떻게 하는 것_이 중요하게 되었다.

• 순차처리
  • 문제가 일련의 개별 명령어로 나누어져있다.
  • 명령어들은 순차적으로 하나씩 단일 프로세서에 실행이 된다.

• 병렬처리
  • 문제가 동시에 해결할 수 있는 독립적인 부분들로 나눌 수 있다.
    • 부분화된 작업들은 서로 다른 프로세서에서 동시에 실행된다.
    • 동시에 작업하는 과정은 항상 제어와 조정의 알고리즘이 필요하다.

✔️병렬화

순차적인 직렬 프로그램을 분할하고 분할된 단위를 동시에 병렬로 수행함으로써 성능을 향상시키는 프로그래밍 기술이라한다. 하나의 큰 문제를 해결하기 위해 문제들을 분할하여 동시에 처리함으로써, 문제 해결에 드는 시간 및 비용을 절약하기 위해 이러한 방식을 사용한다. 그러나, 병렬 처리를 하는 과정에서 큰 문제를 작은 문제들로 분할하는 과정이 어렵다. 분할을 하더라도 다시 부분 문제의 답을 모아 전체 문제의 답을 재구성하는 과정 또한 어려움이 따른다. 늘 병렬 처리하는 과정에서 발생하는 문제인 데이터 간의 의존성과 동기화의 문제도 고려해야한다.

✔️병렬화 과정

• 병렬프로그래밍을 구현하기 위해서는 가장 먼저 성능의 병목지점인 병렬화 대상을 찾아야한다.

• 실제 병렬화가 가능한지에 대한 의존성 분석과 병렬화를 어떤 방식으로 진행할 건지 패턴 결정이 필요하다.

  ✔️ 병렬화 패턴 결정

  데이터 병렬화(벡터화)

  어떠한 데이터 집합을 분해한 뒤, 각 프로세서에 할당하여 동일한 연산을 수행하는 기술이다.

  A[n]+B[n] = C[n]이라는 연산을 처리할 때, 순차처리 방식에서는 For문 내의 각 데이터 연산이 순서대로 수행되기 때문에 시간이 많이 소요된다. 하지만 연산을 처리하는 Core가 n개이고 각 연산이 서로 의존성이 없는 경우, 동시에 병렬처리가 가능하게 됩니다.

  태스크 병렬화

  수행해야 할 작업들을 기능 별로 분해한 뒤, 각 프로세서에 할당하여 서로 다른 기능들을 동시에 수행하는 기술이다.

  Task1에는 I/O 작업, Task2에는 연산 작업 등을 맡겨 서로 다른 기능들이 동시에 수행할 수 있게끔 하는 기술이 바로 태스크 병렬화라고 한다. 보통 기능적 단위로 수행되기 때문에 범용 CPU를 활용한 병렬컴퓨터 구조에서 주로 구현이 가능하며, 멀티스레드 방식에서는 하나의 스레드가 하나의 Task를 맡아 수행하는 구조로 동작된다.

  ✔️ 병렬프로그래밍 구현

  공유 메모리 병렬프로그래밍 모델

  공유 메모리 시스템 구조에 적합한 방식으로써 다수의 코어의 협력을 통해 병렬화를 수행하는 모델이다. 여러 개의 스레드를 생성한 후 다수의 코어로 분배하여 병렬처리를 수행한다.

  메세지 패싱 프로그래밍 모델

  분산 메모리 시스템 구조에 적합한 병렬 프로그래밍 모델이다. 메모리 공유 방식이 아니기 때문에 노드 간에 서로 네트워크를 통해 메시지를 주고받는 형태로 정보를 공유한다. 네트워크 상의 통신 속도가 성능의 매우 중요한 요소로, 고속의 연산처리를 필요로하는 슈퍼컴퓨터에 많이 사용된다.

  가속기 프로그래밍 모델

  위 두 모델과 달리 범용 CPU가 아닌 특정 연산에 특화된 가속기를 활용하여 병렬화하는 모델이다. 수치계산에 최적화된 CPU,DSP,GPU등을 활용한 프로그래밍 모델로 데이터 병렬화에 주로 사용한다.

✔️ 동기화

프로그램의 성능을 향상시키기 위해 병렬화를 할 때 늘 고려해야하는 것이 동기화이다.

여러 개의 Task들이 병렬로 실행될 때, 동일한 자원을 공유해야 하는 경우가 발생한다. 이러한 자원을 공유자원이라고 하는데 다수의 Task가 공유자원을 동시에 변경하고자 하는 경우 공유자원은 우리가 예상치 못한 값이 되어버릴 수가 있다. 따라서 하나의 Task가 공유자원을 변경하는 동안 다른 Task가 해당 자원을 변경하지 못하도록 원자성을 보장해야 할 필요가 있으며, 이를 해결하기 위한 방법이 바로 동기화입니다.

데이터 레이스(DATA RACE)

** 다수의 스레드들이 공유자원에 동시에 접근하는 상황**을 뜻한다. 스레드들이 단순히 값을 Read하는 것은 문제가 되지 않지만, Write작업(값 변경)의 경우 예측하지 못한(=엉뚱한 값)을 참조하게 되어 결과값이 다르게 된다. 이러한 문제를 해결하기 위해서 하나의 스레드가 작업을 진행하는 동안 다른 스레드는 작업을 멈추고 대기하는 메커니즘이 필요하다.

동기화 알고리즘

기본적으로 작업을 진행 중인 스레드는 Lock을 통해서 작업에 대한 독립성을 확보하고 나머지 스레드들은 Wait을 통해 대기하는 메커니즘을 가진다. 소프트웨어적으로 동기화 알고리즘을 구현할 수 있지만 OS에서도 동기화를 위한 장치들을 제공하고 있으므로 이를 활용하면 된다.

데드락

다수의 스레드들이 서로 다른 스레드가 점유하고 있는 자원이 해제(lock상태 해제)될 때까지 무한정으로 대기하는 상태를 말한다. 하나의 스레드가 특정자원을 독점하고 lock상태로 해제되지 않아 다른 스레드들이 무한히 wait상태에 빠지게 되는 상황이다.

1. 스레드가 공유자원을 unlock하지 않은 경우 코드를 작성할때 공유자원을 해제하는 코드를 넣지 않아서 발생한다 2. 스레드가 공유자원을 lock한 이후, 해당 스레드가 종료되는 경우 스레드가 어떤 오류로 강제 종료되는 경우 발생한다. 이러한 경우 예외 처리를 해서 공유자원을 해제 시키는 구문을 작성해야한다. 3. 스레드 간에 서로 자원을 요청하면서 대기 상태에 빠지게 되는 경우 자원을 점유하는 순서를 조정하여 이러한 상황이 발생하지 않게 예방해야한다.

[참고] https://www.samsungsds.com/kr/story/1233713_4655.html?referrer=https://ibocon.tistory.com/118

오늘날 운영체제는 여러 프로세스(Process)를 동시에 실행할 수 있다. > ex_유튜브로 노래를 들으며 동영상 편집을 할 수 있다.

프로세스도 한번에 여러가지 작업이 가능하다

ex_VScode에서 코드를 작성하면서 동시에 잘못된 문법을 체크해 붉은색으로 표시해준다.

🤷‍♀️프로세스_Process

프로세스는 실행 파일이 실행되어 메모리에 적재된 인스턴스. 예를 들어 워드가 실행 파일이라면, 이 실행 파일에 담겨 있는 데이터와 코드가 메모리에 적재되어 동작하는 것이 프로세스이다. 프로세스는 반드시 하나 이상의 스레드로 구성되는데, _스레드는 운영체제가 CPU시간을 할당하는 기본단위_이다.

• 운영체제와 프로세스, 프로세스와 스레드

• 단일 스레드: "프로세스3"처럼 한 번에 한 가지 일만 하는 것
• 멀티 스레드: "프로세스1","프로세스2","프로세스3"처럼 여러 개의 스레드를 가져 다중 작업을 하는 것

✏️멀티 스레드의 장단점

• 장점

  1. 대화형 프로그램에서 멀티 스레드를 이용하면 응답성을 높일 수 있다.

     단일 스레드를 사용하는 프로그램을 만들었다. 이 프로그램에서 파일 복사만 30분이 걸린다. 사용자가 파일 복사를 취소하고 싶어도 프로그램은 사용자에게 반응하지 않아서 복사를 취소할 수가 없다. 결국 작업 관리자를 이용해서 강제로 프로세스를 종료시켜야했다.

     이 프로그램에서 사용자와의 대화를 위한 스레드를 하나 더 추가한다면 파일 복사를 하면서도 사용자로부터 명령을 입력받을 수 있다.

2. 멀티 프로세스 방식에 비해 멀티 스레드 방식이 자원 공유가 쉽다.

   멀티 프로세스는 GUI가 없는 웹 서버 같은 서버용 애플리케이션에서 많이 취하는 구조이다. 프로세스끼리 데이터를 교환하려면 소켓이나 공유 메모리 같은 IPC(Inter Process Communication)를 이용해야하는데 이는 꽤나 번거롭다. 반면 멀티 스레드 방식에서는 그저 스레드끼리 코드 내의 변수를 같이 사용하는 것만으로도 데이터 교환을 할 수가 있다.

   • IPC를 통한 프로세스 간의 데이터 교환

   • 변수를 이용한 스레드 간의 데이터 교환

3. 경제성이 좋다. 프로세스를 띄우기 위해 메모리와 자원을 할당하는 작업은 비용이 비싸다. 스레드를 띄울 때, 이미 프로세스에 할당된 메모리와 자원을 그대로 사용하므로 메모리와 자원을 할당하는 비용을 지불하지 않아도 된다.

• 단점

1. 구현하기가 매우 까다롭다. 멀티 프로세스 기반의 소프트웨어는 여러 개의 자식 프로세스 중 하나에 문제가 생기면 그 자식 프로세스 하나가 kill되는 게 끝. 멀티 스레드 기반의 소프트웨어는 자식 스레드 중 하나에 문제가 생기면** 전체 프로세스에 영향이 발생한다.**

2. 스레드를 너무 많이 사용하면 오히려 성능이 더 저하된다. 스레드가 CPU를 사용하기 위해서는 _작업 간 전환(context swtiching)_을 해야하는데, 이 작업이 비용을 많이 소모한다. 많은 스레드가 너무 자주 작업 간 전환을 수행하면 애플리케이션이 실제로 일하는 시간에 비해 작업 전환에 사용하는 시간이 커져 성능이 저하된다.

👨‍💻C#에서 스레드 하기

C#은 .NET에서 스레드를 제어하는 클래스 System.Threading.Thread를 제공한다.

• 클래스를 사용하는 방법

1. Thread의 인스턴스를 생성한다. 이때 생성자의 인수로 스레드가 실행할 메소드를 넘긴다.
2. Thread.Start() 메소드를 호출하여 스레드를 시작한다.
3. Thread.Join() 메소드를 호출하여 스레드가 끝날 때까지 기다린다.

//스레드가 실행할 메소드
static void DoSometing() {
    for(int i = 0 ; i < 5 ; i++){
        Console.WriteLine("DoSomething : {0}",i);
    }
}
static void Main(string[] args){
    //Thread인스턴스 생성 및 인수로 메서드를 넘긴다.
    Thread t1 = new Thread(new ThreadStart(DoSomething)); 
    //스레드 시작
    t1.Start();
    //스레드의 종료 대기
    t1.Join();
}

위 코드에서 생성한 스레드가 적재되는 시점은 인스턴스를 만드는 것이 아닌 t1.Start()이다. 생성한 스레드를 실행하면 메인 프로세스에서 나와 작업을 수행하고 Join()메소드가 반환되는 시점에서 다시 프로세스로 합류한다.

• 스레드 상태_ThreadState
• ThreadState가 Flags 속성을 가지고 있다. Flags는 자신이 수식하는 열거형을 비트 필드,즉 플래그 집합으로 처리할 수 있다.

✏️스레드 간의 동기화

애플리케이션을 구성하는 각 스레드는 여러 가지 자원을 공유한다. 파일 핸들, 네트워크 커넥션, 메모리에 선언한 변수를 통해 공유를 한다.

동시에 여러 작업을 할 때는 멀티 스레드를 사용하는 것이 멀티 프로세스보다 시스템 자원(메모리)를 더 적게 사용한다.

스레드가 프로세스에 비해 탁월한 기능을 가지고 있어보이지만, 스레드에도 단점이 있다. 바로 동기화(Sysnchronize)이슈이다.

스레드1이 공유 자원 내의 어떤 데이터를 조작한다. 스레드2에게 제어권을 넘겨준 이후 스레드2가 그 데이터를 번경한다. 스레드1이 다시 제어권을 받아 남은 작업을 계속할 때 원하지 않는 결과가 나온다.

• 은행 출금 동기화 문제

이러한 문제를 해결하기 위해 특정 자원에 접근하지 못하도록 Lock을 걸어 동기화 문제를 해결한다. 다양한 동기화 기법을 운영체제가 제공한다. 하지만 스케줄링을 운영체제가 자동으로 해주지 않고, 프로그래머가 적절한 기법을 선택하여 직접 구현해야한다.

cf_스케줄링 기법

😎예상 면접 질문

• 멀티 스레드의 장단점이 무엇인가?

  장점 : 응답성 향상, 자원공유 용이, 경제성 단점 : 동기화 이슈, 잦은 스위칭시 비용 증가

• Context Switching이 왜 필요한가요?

  현재 진행하고 있는 Task(Process, Thread)의 상태를 저장하고 다음 진행할 Task의 상태 값을 읽어 적용하는 과정을 말합니다.

• 프로세스와 스레드간에 어떤 것이Context Switching에 비용이 더 드는가요?

  Context Switching 비용은 Process가 Thread보다 많이 듭니다. Thread는 Stack 영역을 제외한 모든 메모리를 공유하기 때문에 Context Switching 발생시 Stack 영역만 변경을 진행하면 됩니다.

개와 고양이는 종은 다르지만 젖을 먹인다는 공통점 때문에 _포유류_로 분류된다. 이를 코드로 구현하면 다음과 같다.

//포유류 클래스
class Mammal{
    public void Nurse();
} 
//개 클래스
class Dog : Mammal{
    public void Bark();
}
//고양이 클래스
class Cat : Mammal{
    public void Meow();
}

그런데 포유류 = 포유류, 개 = 포유류, 고양이 = 포유류이므로 다음과 같이 작성 가능하다.
>
```c
Mammal mamml = new Mammal();
mammal.Nurse();
mammal = new Dog();
mammal.Nurse();
Dog dog = (Dog)mammal;
dog.Nurse();
dog.Bark();
mamml = new Cat();
mammal.Nurse();
Cat cat = (Cat)mammal;
cat.Nurse();
cat.Meow();

이처럼 기반 클래스와 파생 클래스 사이에서 족보를 오르내리는 형식 변환이 가능하다. 파생클래스의 인스턴스는 기반 클래스의 인스턴스로서도 사용가능하다. 근데, 왜 이렇게 사용하지?? 코드의 생산성이 높아진다. 예를 들어 Mammal클래스를 상속한 300개의 클래스가 파생되었다고 가정해보자. 그리고 동물원 사육사 클래스들 만들고 동물들을 씻기는 Wash() 메소드를 구현한다고 생각해보자. 그럼 300개의 Wash() 메소드를 오버로딩 해야한다

clas Zookeeper{
    public void Wash(Dog dog);
    public void Wash(Cat cat);
    public void Wash(Lion lion);
    // 등등 300개 Wash()메소드 선언
}

그러나 300개의 동물 클래스들이 모드 Mammal 클래스로부터 상속 받았기 때문에 이들은 모두 Mammal로 간주할 수 있다. 그래서 딱 하나의 Wash()메소드로 모든 동물 클래스에 적용이 가능하다

class Zookeeper{
    public void Wash(Mammal mammal);
}

✏️형식 변환 연산자_is_as

• is 객체가 해당 형식에 해당하는지 검사한 뒤 그 결과를 bool 값으로 반환한다.

Mammal mammal = new Dog();
Dog dog;
if(mammal is Dog){
    dog = (Dog)mammal;
    dog.Bark();
}

- as
형식 변환 연산자와 같은 역할을 한다. 다만 형식 변환 연산자가 변환에 실패하는 경우 예외를 throw하는 반면_** as 연산자는 객체 참조를 null로 만든다는 것이 다르다.**_

>
```c
Mammal mammal = new Cat();
Cat cat = mammal as Cat;
if(cat != null){ 
    cat.Meow();
}

일반적으로 (Dog)mammal이나 (Mammal)cat과 같이 형식 변환 대신 as 연산자를 사용하는 것을 권장한다. 형식 변환에 실패하더라도 예외가 일어나서 갑자기 코드의 실행이 점프(=catch구문으로 이동)하는 것을 막기에 코드를 관리하기가 더 수월하기 때문이다. 단, as 연산자는 참조 형식에 대해서만 사용이 가능하므로 값 형식의 객체는 기존의 형식 변환 연산자를 사용해야한다.

• 값 형식(Value Type) : 변수가 값을 담는 데이터 형식
• 참조 형식(Reference Type) : 변수가 값 대신 값이 있는 위치(주소)를 담는 데이터 형식
• 메모리 영역

  Stack과 값 형식

  • 컴파일 타임에 크기가 결정 => 정적인 영역
  • 변수가 코드 블럭을 벗어나면 데이터가 사라짐

    Heap과 참조 타입

  • 런 타임에 동적으로 생성 가능
  • 데이터가 코드블록의 여부와 상관없이 데이터가 유지 => 가비지컬렉터가 필요

✏️object 형식

- obect 형식은 참조 형식

"돈은 여기 있다. 이제 물건을 넘겨" => 물건 : 어떤 것이든 의미할 수 있음

object 타입의 변수는 다른 데이터 형식의 데이터를 다 담을 수 있다.

모든 데이터 형식을 자동으로 object 형식으로부터 상속을 받는다. 따라서 컴파일러는 어떤 형식의 데이터라도 object에 담아 처리할 수 있다. cf_var과 object는 다르다. var은 자동으로 데이터 형식을 파악해 스택에 할당하고 object는 힙에 할당한다

✏️박싱과 언박싱

object 형식은 참조 형식이기 때문에 Heap에 데이터를 할당한다.
그럼 값 형식의 데이터를 object 형식 객체에 담는 과정은 어떻게??

박싱

object a = 20;

1. 20은 박스에 담겨 힙에 할당

2. object type 변수 a는 stack에 할당되어 20의 주소를 참조

   언박싱

   object a = 20; int b = (int)a;

3. b가 a가 참조하고 있는 메모리로부터 값을 복사하려는 과정

4. 박싱된 값을 꺼낸다 -> 언박싱을 할 때 다른 타입으로 하거나, 해당 타입보다 작은 범위로 변환을 하려면 오류(InvalidCastException)가 발생. 미리 같은 타입인지를 먼저 확인하는 절차 필요. is 연산자를 이용해서 미리 같은 타입인지 확인 후에 캐스팅을 해야 안전

5. 일치하는 값 형식 변수에 저장한다

   🤷‍♀️왜 사용하는가?

   • 값을 타입의 형식에 상관없이 저장을 할 수 있어서 사용
     ArrayList arryL = new ArrayList(); arrL.add("Rio"); arrL.add(2022); // 박싱 arrL.add(myClassObject); int thisYear = (int)arrL[1]; //언박싱

• 성능 캐스팅 여부 확인 및 지연 시간, 메모리 생성과 복사 시간, 가비지 발생 등 가급적 제네릭 사용으로 박싱/언박싱을 피하자

• 길 찾기 알고리즘에 대표적으로 엔시스타 알고리즘이 있다.
• 그러나 실시간 연산이 프로그램에게 부담이 된다.
• Unity에서는 미리 계산을 해서 Mesh형태로 메모리(Cache)에 등록을 해주는 방식을 사용한다.

  using UnityEngine.AI;
  

public class AgentMove : MonoBehaviour {

MeshAgent agent; 
GameObject target; // 따라갈 대상
void Start(){
    agent = GetComponemt<AgentMove>();
    agent.destination = target.transform.position;

    //agent.enable = false; //길찾기(follow) 비활성화 
    //agent.enable = true; //길찾기(follow) 활성화 
}

}

```

Light

• 광 종류
• 반사 성질
• Normal Map : Normal Vector의 값만 따로 저장하는 map

FixedUpdate

• Update에서는 Time.delatime가 일정하지 않아 "터널링"(벽을 뚫고 지나가버리는)문제가 발생
• 이를 해결하기 위해 고정 시간을 Update하기 위해서 FixedUpdate를 사용
• 애니메이션 제어할 때는 FixedUpdate에서 해주는 것을 권장
• default값은 0.02초
• 슬로우모션을 하고 싶으면 TimeScale을 0에 가깝게 조절해주면 된다.
• 업데이트가 늦다보니 사용자의 key입력이 씹히는 경우가 발생 --> key입력은 Update에서 구현
• 움직임을 FixedUpdate에서 구현하면 오브젝트가 덜덜 떨리는 상황이 발생

카메라 줌 구현

• 스나이퍼 저격 줌 상황
• 카메라의 FOV(Field Of View)를 조절해서 구현하는 것
• Cliping Planes :
• ViewPort : 내가 원하는
• TargetTexture : 내가 원하는 곳에다가 현재 카메라가 보이는 것을 텍스쳐로 보여줄때
• Culling Mask : 내가 그리고 싶은 것을 선택하는 곳
• 줌은 카메라의 포지션을 옮기면 된다 --> 포지션을 두 군데 저장하면 된다 Lerp를 활용하면 줌하는 과정이 자연스럽게 된다.

이미지

• sprit
• atlas

 void Move() 
    {
        Vector3 dir = target.transform.position - gameObject.transform.position ;
        dir.Normalize();
        //transform.position += dir * speed * Time.deltaTime
        //cc.Move(dir * speed * Time.deltaTime);    
        cc.SimpleMove(dir * speed); //점프 못함
        //target을 바라보게 하고 싶다
        //1. transform.LookAt(target.transform);
        //2. transform.forward = dir;
        //+ 부드럽게 회전하고 싶다
        transform.forward = Vector3.Lerp(transform.forward, dir, rotSpeed * Time.deltaTime);

    }

FSM 상태머신

두 물체간 거리 구하기

1. Vector3.Distance(물체1위치, 물체2위치)
2. 벡터로 구하기 Vector3 dir = target.transform.position - gameObject.transform.position ; float distance = dir.magnitude;

원충돌

Vertex, Edge, Polygon, Mesh

Vertext : 점, Edge : 선, Polygon : 면, Mesh : 면의 모음 Material -> texture -> shader: mesh를 어떤 느낌으로 그릴지 정의한 것

CharacterController 움직임구현

public class PlayerMove : MonoBehaviour
{
    public float speed = 6.0F;
    public float jumpSpeed = 8.0F;
    public float gravity = 20.0F;
    private Vector3 moveDirection = Vector3.zero;
    void Update()
    {
        CharacterController controller = GetComponent<CharacterController>();
        if (controller.isGrounded)
        {
            moveDirection = new Vector3(Input.GetAxis("Horizontal"), 0, Input.GetAxis("Vertical"));
            moveDirection = transform.TransformDirection(moveDirection);
            speed = 6.0F;
            if (Input.GetKey(KeyCode.LeftShift)) //달리기 구현
            {
                speed = 12.0F;
            }
            moveDirection *= speed;
            if (Input.GetButton("Jump"))
                moveDirection.y = jumpSpeed;
        }
        moveDirection.y -= gravity * Time.deltaTime;
        controller.Move(moveDirection * Time.deltaTime);
    } 
}

1인칭 시점 만들기

• 마우스에 따라 시점 회전하기

  public class PlayerRot_00 : MonoBehaviour
  {
    //마우스의 회전 누적치를 저장할 변수
    float mx;
    float my;
  
    //회전할 속도
    float rotSpeed = 500;
  
    //회전 가능 여부
    public bool canRotH;
    public bool canRotV;
  
    // 진동 크기
    public float amp = 0.07f;
    public float freq = 20;
    float tempY;
  
    private void Start()
    {
        tempY = transform.localPosition.y;
        mx = transform.localEulerAngles.x;
        my = transform.localEulerAngles.y;
    }
  
    void Update()
    {
        //마우스의 움직임을 받아서
        float h = Input.GetAxis("Mouse X");
        float v = Input.GetAxis("Mouse Y");
  
        //마우스의 회전값으로 각도를 누적하고(계산하고)
        if (canRotV)
            mx += v * rotSpeed * Time.deltaTime;
        if (canRotH)
            my += h * rotSpeed * Time.deltaTime;
  
        //mx 최소값을 -60, 최대값을 60으로 셋팅
        mx = Mathf.Clamp(mx, -60, 60);
        //누적된 회전값으로 게임오브젝트의 각도를 셋팅하자
        transform.localEulerAngles = new Vector3(-mx, my, 0);
  
        // 만약 카메라라면 
        if (gameObject.tag == "MainCamera")
        {
            if (Input.GetButton("Horizontal") || Input.GetButton("Vertical"))
            {
                amp = 0.07f;
                freq = 20;
                if (Input.GetKey(KeyCode.LeftShift)) //달리기 구현
                {
                    print("shift눌림");
                    amp = 0.07f;
                    freq = 50;
                }
                transform.localPosition = new Vector3(0, tempY + amp * Mathf.Sin(freq * Time.time), 0);
            }
        }
    }
  }

• 그전에는 하나의 Scene에 SetActive를 이용해서 페이지를 구현하려고 했다...ㅎㅎㅎ

• 위 방법에는 간단하게 구현은 가능하나 초기화나 다양한 에러가 발생한다

• Scene별로 구현하면 Reload하면 초기 상태로 돌아가니 Scene 전환을 알아보자

• SceneManagement SceneManager라는 빈 오브젝트를 생성해 스크립트를 추가한다 BuildSetting에서 Scene 목록을 추가해줘야 전환 함수 실행이 가능하다

• Scene을 다시 Load하면 화면이 어둡게 되는 현상이 발생

• 그 해당 Scene의 Light 정보를 따로 저장해줘야한다

• Scene 마다 각자 Light 파일을 저장을 해줘야한다 -> Scene별 폴더를 만들기

• Window > Rendering -> Lighting 으로 들어간다

• Lighting 창에서 Generate Lighting을 눌러 Scene의 Light 정보를 생성한다

• 그럼 해당 Scene이 있는 곳에 Lighting 정보가 생성된다

• 끝!

  Light 정보를 미리 추출하게 되면 Scene을 Load할 때 빛의 연산을 미리 저장한 baked를 사용하게 되어 연산을 줄일 수 있다.

✨ SingleTone_싱글톤

• 말그대로 해당 스크립트의 객체가 전체에서 하나만 존재하게 만드는 방식

• 예를 들어 게임을 개발하다보면 이런 기능이 필요하다

  • Game Manager -플래이어의 기록을 저장 및 갱신 -게임의 상태 (Ready, Stop, Start) -Scene 전환

• 위 기능은 많은 다른 클래스에서 필요로 하는 기능이다.

• 필요로 하는 클래스마다 정의를 하게 되면 각자마다 다른 값들을 가지고 있어 상태관리가 어렵다

• 이를 위해서 대표로 단 하나의 객체만을 만들어 그 객체에 접근해서 다른 클래스들이 참조하거나 값을 변경하게 해 상태를 공유하도록 만드는 것이 singleton의 원리이다.

• 미리 자신 클래스를 객체로 가지고 있다는 것이 특징!!

• 해당 스크립트를 가지고 있는 object를 onDestroy에 추가해주면 모든 Scene 전환시 쉽게 관리가 가능하다

• 외부에서는 해당 클래스를 객체 생성하지 않고 "class명.객체.객체속성"으로 접근하면 된다.

  public class GameScore{
  
     public static GameManager instance; // 자신 클래스 객체를 참고하기 위해 주소값을 저장
  
     int Score = 0;
  
     private void Awake() //instatnce가 static이기 때문에 Awake에서 주소값을 할당 해줘야한다
    {
        if(instance == null){
            instance = this;
    } else {
           Destroy(this); //만약 이미 있다면(=새로 만들라고 하려면) 생성을 불가능하게 만들기
    }
    }
  }
  
  

//player.cs에서 Score을 변화시키기 public class player{ private void Start(){ GameScore.instance.Score = 10; } }

## 👀Enum_열거형
- 내가 원하는 자료형을 정의하는 것
- 주의할 점은 enum을 저장할 변수가 public이면 enum 정의부도 public으로 설정해줘야한다.
- 중간에 속성을 하나 추가하면 자동으로 해당 인덱스가 밀리게 된다
```c
enum Game_State {
    Stop, //0
        Ready, //1
        Start //2
}

int state = Game_State.Stop;  //state = 0
if (state == Game_State.Ready){ print("Ready!!"); }

🎧 Easing_애니메이션 도구

• 영상에서 FadeIn/Out이나 버튼 UI에서 애니메이션 등과 같은 기능을 구현할 때 사용된다.

• Opacity나 Scale, Position의 값들을 변환시켜 애니메이션 효과를 구현하는 것

• AssetStore에서 iTween을 다운받는다. iTween - Free Asset

• 프로젝트에 Import

  

• 문서를 참고하면서 해당 기능을 구현 http://www.pixelplacement.com/itween/documentation.php

  //easeOutBack 사용
  iTween.ScaleTo(gameObject, iTween.Hash(
              "x", 2,
              "y", 2,
              "z", 2,
              "time", 0.5,
              "easetype", iTween.EaseType.easeOutBack
              ));