처음 html파일을 만들고 나서 !탭을 누르게되면 기본 틀이 자동으로 나타나게 되는 유용한 단축키이다!

```

MDN을 보면 클로저의 정의는 다음과 같다.

클로저의 정의

: 함수와 그 함수가 선언된 어휘적 환경(lexical environment)의 조합

정의만으로는 알기 너무나 어렵다... 실행컨텍스트와 함께 알아보자면..

1. 실행컨텍스트란?

Js 엔진은 코드를 실행하기 위해 필요한 정보를 알고 있어야 한다. -> (변수와 함수의선언, 변수의 유효범위(스코프), this) 

따라서 실행 가능한 코드(전역코드/eval코드/함수내코드)로 이동하면 새로운 실행 컨텍스트 스택이 생성하여 이 정보들을 파악한다.

예를들면 : 전역 실행컨텍스트 실행하다가  함수의 호출을만남 -> 새로운 컨텍스트가 생성되어 스택에 쌓임

함수실행이 끝나면 해당 함수의 실행 컨텍스트를 파기하고 직전의 실행컨텍스트(예에선 전역)로 돌아감.

2. 클로저를 실행컨텍스트로 설명!

//

function 외부함수() {

  A = 1;

  function 내부함수 () {

    A = A + 1;

    console.log(A);

  }

Return 내부함수

}

외부함수();  // 2 가 콘솔에 출력됨!

//

A=1이란 변수선언은 내부함수의 스코프가 아니다.

이처럼 자신을 포함하고 있는 외부함수보다 내부함수가 더 오래 유지되는 경우, 외부함수 밖에서 내부함수가 호출되더라도 외부함수의 지역변수에 접곤할 수 있는데 이러한 함수를 클로저 라고한다.

즉 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경인(어휘적환경)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수를 말한다.

클로저에 의해 참조되는 외부함수의 변수 즉 outerFunc 함수의 변수 x를 자유변수(Free variable)라고 부른다. 클로저라는 이름은 자유변수에 함수가 닫혀있다(closed)라는 의미로 의역하면 자유변수에 엮여있는 함수라는 뜻이다.

실행 컨텍스트의 관점에 설명하면, 내부함수가 유효한 상태에서 외부함수가 종료하여 외부함수의 실행 컨텍스트가 반환되어도, 외부함수 실행 컨텍스트 내의 활성 객체(Activation object)(변수, 함수 선언 등의 정보를 가지고 있다)는 내부함수에 의해 참조되는 한 유효하여 내부함수가 스코프 체인을 통해 참조할 수 있는 것을 의미한다.

즉 외부함수가 이미 반환되었어도 외부함수 내의 변수는 이를 필요로 하는 내부함수가 하나 이상 존재하는 경우 계속 유지된다. 이때 내부함수가 외부함수에 있는 변수의 복사본이 아니라 실제 변수에 접근한다는 것에 주의하여야 한다.

Promise

설명

Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다.

Promise는 다음 중 하나의 상태를 가집니다.

• 대기(pending): 이행하거나 거부되지 않은 초기 상태.
• 이행(fulfilled): 연산이 성공적으로 완료됨.
• 거부(rejected): 연산이 실패함.

대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수 있습니다. 이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 then 메서드에 의해 대기열에 오릅니다. 이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출하므로, 비동기 연산과 처리기 연결 사이에 경합 조건은 없습니다.

Promise.prototype.then() 및 Promise.prototype.catch() (en-US) 메서드의 반환 값은 다른 프로미스이므로, 서로 연결할 수 있습니다.

혼동 주의: 느긋한 계산법 및 연산 연기를 위한 방법을 프로미스라고 부르는 다른 언어(예: Scheme)가 여럿 있습니다. 반면 JavaScript에서 프로미스는 콜백 함수를 연결할 수 있는 이미 진행 중인 프로세스를 나타냅니다. 표현식을 느긋하게 평가하려면 인수 없는 화살표 함수 f = () => expression를 사용하고, f()를 사용해 평가하세요.

참고: 프로미스는 대기 중이지 않으며 이행 또는 거부됐을 때 처리(settled)됐다고 말합니다. 프로미스와 함께 쓰이는 단어 resolved는 프로미스가 다른 프로미스의 상태에 맞춰 처리됨, 또는 상태가 "잠김"되었다는 의미입니다. 용어에 관한 더 자세한 설명은 Domenic Denicola의 글 States and fates에서 볼 수 있습니다.

생성자

속성

메서드

타입스크립트 사용 전 세팅할 것들

1. 노드.js 설치

2. npm install -g typescript

3. 자바스크립트 사용시에 만들던 .js 파일이 아닌 .ts파일 형식으로 생성

4. tsconfig.json 이라는 파일 생성 후 컴파일 설정 내용 넣어주기

{

  "compilerOptions": {

    "target": "es5", // 원하는 버젼 가능 최신은 esnext

    "module: "commonjs",

  }

}

5. 브라우저는 .ts 파일을 읽을 수 없음(.js 파일로 변환이 되게끔 하는 작업이 필요함) 

터미널을 켠다 -> tsc -w 입력하면 -> ts 파일을 자동으로 js 파일로 변환한 것이 생긴다.(컴파일 한다 라고 부른다. 4번과정에서 설정해준 그 과정)

타입스크립트 기초 문법

1. 변수 타입 지정

let 변수이름입니다 :string =  'hi';

변수이름입니다 = 1234; <- 이렇게 입력하면 에러가 난다.

* 타입 명칭에 들어갈 수 있는 것들 예) string, number, boolean, null, undefined, bigint, [], {} 등...

let 변수이름 :string[] = ['hi', 'hey'];

* :string[] 가 뜻하는 것은 '변수이름'에 들어갈 수 있는 배열은 문자열만을 요소로 갖는 배열이어야 한다는 것을 말한다.

let 변수이름2 :{ name : string } = { name: 'kim' } 

* :{ name : string }  는 '변수이름2' 에 들어갈 수 있는 객체의 name키의 값은 문자열만 올 수 있다는 것을 말한다.

* :{ name? : string } ?를 붙임으로서 name속성이 꼭 있어야 하는 것은 아닌 option임을 의미.

2. 다양한 타입이 들어올 수 있도록 하기 (Union type)

let 변수이름 :string | number = 'apple';

* :string | number '변수이름'에 문자열이나 숫자를 할당할 수 있음을 의미.

3. 설정하려는 타입종류가 많아 내용이 길어진다면 변수에 담을 수 있다. (Type alias)

type SampleType = string | number; (일반변수와 혼동을 막기위해 첫자 대문자를 많이 이용한다)

let 변수이름 :SampleType = 123;

4. 함수에 타입지정 가능

function 함수 (x :number*) :number** {

  return x * 2

}

* 파라미터에 타입 지정 

** 리턴값의 타입을 지정(함수의 () {}사이에!)

5. Array 에 쓸 수 있는 tuple 타입

type Member = [number, boolean];

let ryan :Member = [123, true]

*배열의 특정 자리에 특정 타입이 오게끔 지정 가능

6. 객체... object에 타입지정해야할 속성이 너무 많으면

type Member = {

  name : string

  [key :string] : string *문자열로 된 모든 object 속성의 타입은 문자열이어야 함을 의미!

}

let ryan : Member = { name : 'prodo' }

7. class 타입 지정 가능 (문법이 일반 함수와는 조금 다름 추후 정리할 것!)

class User {

  name :string;

  constructor(name : string) {

    this.name = name;

  }

}

 6월부터 시작된 코드스테이츠 일정을 따르는 동안 시간이 정말 엄청나게 빠르게 지나갔다. 섹션 1, 2, 3을 하는 동안 정말 많은 내용을 머리에 퍼붓는 느낌이 들었었다면, 이번 프로젝트를 스스로 하는 기간동안에는 그동안 퍼부었던 정보들을 주워담고 정리하며 어느정도 내 것으로 만드는 과정이라는 느낌이 들었다. 파이날 프로젝트를 하기 전에 2주 짜리 프로젝트로 배운 내용을 연습해 볼 수 있는 기간이 있긴 했지만 그래도 마지막 프로젝트를 하는 과정은 험난했다... 협업을 위한 가장 기본적인 툴인 '깃'부터 골치 아픈 일이 너무 많았다... 아무래도 4명이 한 레포지토리에 기여하는 방식으로 협업을 하다보니 문제가 발생할 확률이 컸을텐데 깃에 대한 별다른 규칙이나 약속을 정해놓지 않고 무작정 진행했던 것이 실수였던 것 같다. 굉장히 늦은 감이 있는 2주차 중반 쯔음에 문제에 대한 인식을 팀원들과 하게 되어서 커밋할때의 규칙을 만들었다. 풀이나 푸쉬를 하기 전에 꼭 깃 상태를 깨끗하게 만들어 놓을 것! 풀은 적어도 하루에 한번 코드리뷰를 하는시간에는 해둘 것! 커밋할때 메시지 템플릿을 잘 지킬 것! 다행히도 규칙을 정립하고 팀원들 모두 지키려고 노력을 한 이후에는 깃이 크게 말썽을 부리는 일은 없어졌다. 돌이켜 생각해보면 '깃'뿐만 아니라 새로운 모듈을 적용하거나 코드를 정리해주는 프리티어등의 도입 등 팀원들과 협업을 하는 과정에서는 규칙과 약속이 굉장히 중요하다고 느꼈다. 이 부분은 앞으로 다른 분들과 함께 또다시 프로젝트를 진행할 기회가 생기거나 회사에 가서 업무를 진행할 때에도 잊지말고 구성원들과의 약속을 준수하도록 해야겠다!

 프로젝트에서 내가 맡았던 부분은 백엔드 파트로 서버와 DB쪽 작업을 담당했었다. 사실 처음에는 나는 백엔드니까 프론트담당하시는 분들이 작업하는 리액트 등등은 전혀 신경쓰지 않아도 되겠지? 라는 안이한 생각을 했었다. 그러나 프로젝트가 진행되면서 매일 했던 코드리뷰 시간에 서로 작업한 내용을 공유하고 개선점은 없는지 등을 생각하는 시간을 가졌는데 이 때 프론트쪽의 코드를 이해하지 못한다면 전혀 의미없는 시간이 되버렸다. 코드리뷰 시간 뿐만아니라 서버쪽 작업을 할때에도 프론트쪽에서 어떤 상태를 가지고 요청을 보낼 수 있는지 등의 상황을 파악해야하는 상황이 많았다.(사실 거의 대부분 그랬던 것 같다...) 소셜 로그인을 구현하는 부분 같은 경우에는 리액트 쪽 이벤트 핸들링 함수등이 서버쪽 콜백과 관계가 긴밀해서 내가 직접 클라이언트쪽 파일에서 작업을 했었다. 이 외에도 서버에 요청을 보내는 부분과 클라이언트로 응답을 보내는 모든 것들이 백엔드와 프론트엔드간의 약속이 잘되어있어야 수월하게 진행이 가능했다. 사실 앞에서 구구절절히 이야기한 부분들은 API문서를 완벽하게 프로젝트 진행 전에 정리할 수 있다면 크게 문제될 부분이 없었을 것이다. 그렇지만... 나 같은 초보 개발자가 전혀 진행되지 않은 프로젝트 서버의 엔드포인트들과 요청시 필요한 파라미터들 그리고 응답의 모양등을 미리 정할 수 있다는 것은 불가능해 보였다.(잘하는 분들은 할 수 있을지도 모르겠지만... 나는 프로젝트를 진행해 나가면서 응답이 조금씩 머리속에 그려지면서 api문서를 채워나가는 방식으로 진행했다.)

 내가 담당했던 부분 중 가장 즐겁게 진행했던 부분은 DB관련된 부분이었다. 이번 프로젝트에서는 mySql이라는 관계형 데이터베이스를 사용했었는데 이 관계를 이용한다는게 무엇인지 프로젝트를 하면서 느껴볼 수 있었다! 섹션3쪽을 학습할 때에도 nosql쪽은 제대로 실습해보지 못해서 프로젝트에서는 몽고db를 사용할까도 생각해봤었지만 우리가 진행한 프로젝트의 데이터는 관계형을 쓰는게 적절했다!(회원정보 등을 여러 군데서 사용하고 굳이 매번 새로 저장하는 것보단 조인테이블을 활용하는게 효율적이기에...) 

 정말 많은 것을 배울 수 있었던 프로젝트였고 마음맞는 팀원이라는 소중한 인연을 만날 수 있어서 정말 좋았다! 앞으로도 더 나은 개발자로 성장해 나가는데 서로 도움이 될 수 있었으면 좋겠다. 파이날 프로젝트 회고는 여기까지..!

AWS-SDK 를 설치한 후 불러오고

AWS환경설정을 해준다.(여기서는 AWS cognito를 활용하여 자격증명)

인풋창의 onchange 이벤트핸들러함수의 모습.

자세한 내용은 다른 분의 블로그를 참조했다.

출처: https://merrily-code.tistory.com/143

git clone -b {branch_name} --single-branch {저장소 URL}

1. 세션기반 인증

2. 토큰기반 인증

3. OAuth 소셜 인증

출처: 코드스테이츠 Urclass 자료

ORM (Object Relational Mapping)

- ORM은 바로 Model을 기술하는 도구 (데이터베이스 세계와 프로그래밍 언어 사이의 개념의 간극을 줄여준다.)

ORM을 이용하여 SQL문을 직접 작성하지 않고 엔티티를 객체로 표현가능

- 객체 지향 프로그래밍은 클래스를 사용하고 관계형 데이터베이스는 테이블을 사용, 따라서 모델간의 불일치가 발생하는데 객체간의 관계를 바탕으로 SQL을 자동 생성하여 불일치를 해결하는 것이 ORM이다.

- 더 쉽게 표현하자면 Object - DBdata 사이에서 매핑의 역할을 하는것이 ORM

- MVC (Model View Controller)

디자인 패턴(추후 내용 보충할 것) 

Sequelize (ORM의 일종)

- a promise-based Node.js ORM

npm 모듈인 dotenv를 사용하면, 자바스크립트에서 환경변수를 사용할 수 있다. 

- 기본적인 사용법 

새로운 폴더를 만들고 npm init을 입력 / npm i dotenv 를 입력해 모듈을 설치(생성된 폴더는 설치할 모듈과 이름이 같아서는 안됨) 

설치한 dotenv를 이용해 환경변수에 접근할 수 있다. (새로운 파일 index.js를 생성하고, process.env를 출력하면 export로 확인한 내용과 동일한 내용을 객체로 출력함 / process.env는 Node.js환경에서 조회가 가능 / dotenv는 .env파일을 환경변수로 사용할 수 있게 함)

- .env: Node.js에서 환경변수 영구 적용

명령어 export로 적용한 환경변수는 현재 사용 중인 터미널에서만 임시로 사용이 가능함. 환경변수를 Linux 운영체제에 저장하는 방법은 여러가지가 있지만, Node.js에서는 파일 .env를 만들어 저장하는 방법을 사용한다.

1. .env파일을 생성하고, 사용하고자 하는 환경변수를 입력한 뒤 저장한다.

모듈 dotenv를 이용한다면, 파일 .env에 저장한 환경변수를 조회할 수 있다.

환경변수를 이용해 API key, DB password와 같이 민감한 정보를 저장하고 관리할 수 있다. 그 뿐만 아니라 서로 다른 PC 또는 여러 .env파일에서, 같은 변수 이름에 다른 값을 할당할 수 있다.