2023.12.28 TIL

오늘은 미니 프로젝트 발표회와 프로젝트에 대한 팀 회고 및 특강으로 크게 학습한 내용은 없지만 끄적거려본다.
주의: 정확하지 않을 수 있음

JavaScript 문법 종합반 강의를 보면서 내가 배운것.

 - 변수의 5가지 주요 개념 -

1. 변수 이름: 저장된 값의 고유 이름
2. 변수 값: 변수에 저장된 값
3. 변수 할당: 변수에 값을 저장하는 행위
4. 변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위
5. 변수 참조: 변수에 할당 된 값을 읽어오는 것 

- 할당과 참조가 항상 헷갈렸는데 이번 기회에 할당과 참조에 대한 확실한 개념을 배울 수 있었다!
앞으로는 있어보이게 배운 용어들을 사용해야겠다.

 - 변수를 선언할 수 있는 3가지 방법 -
1. var  2. let  3. const
ex) var myVar = "Hello World!";
* 세미콜론으로 마무리를 확실하게 지어준다! *

 * 변수 선언시 변수의 이름을 먼저 선언한 후 값을 할당할 수도 있다! *
ex) var myVar1;
myVar1 = 2; *하지만 거의 쓰는 경우는 없다.

- 3가지 변수 선언 방법의 차이점 -
- var은 똑같은 변수 이름으로 재선언이 가능하지만, let과 const는 같은 이름으로 변수 재선언이 불가능하다!!!

var myVar = "Hello World";

var myVar = "Test 1";

let myLet = "Hello World1";

let myLet = "Test 2";

const myConst = "Hello World2";

const myConst = "Test 3";

애초에 VS에서  이미 let과 const로 선언된 변수는 같은 이름으로 재선언이 불가능하다고 빨간줄로 알려준다.

- var와 let은 이미 할당된 값을 재할당할 수 있다. 하지만 const는 재할당이 불가능하다!(한번 선언, 할당하면 바꿀 수 없다.)

var myVar = "Hello World";

var myVar = "Test 1";

myVar = "GoodBye";

console.log(myVar);

let myLet = "Hello World1";

//let myLet = "Test 2";

myLet = "GoodBye 1";

console.log(myLet);

const myConst = "Hello World2";

// const myConst = "Test 3";

myConst = "GoodBye 2";

console.log(myConst);

터미널에 node 01.js를 입력해 확인을 해보면...
node 01.js
GoodBye
GoodBye 1(기존 값을 덮어 씌워버린 결과)
당연 const는 변할 수 없는 상수를 선언하는 녀석이라 절대 바꿀 수 없기 때문에 에러가 난다...

-데이터 타입-

// 1. 숫자

// 1-1. 정수

let num1 = 10;

console.log(num1);

console.log(typeof num1);

// 1-2 실수(float)

let num2 = 3.14;

console.log(num2);

console.log(typeof num2);

// 1-3 지수형(Exp)

let num3 = 2.5e5; // 2.5 * 10^5

console.log(num3);

console.log(typeof num3);

// 1-4 NaN(Not a Number) -> 숫자가 아닌 것을 변환할 때 나타나는 현상임.

let num4 = "Hello World" / 2;

console.log(num4);

// 1-5 Infinity(무한대)

let num5 = 1 / 0;

console.log(num5);

console.log(typeof num5);

// 1-6 - Infinity(-무한대)

let num6 = -1 / 0;

console.log(num6);

console.log(typeof num6);

생각보다 숫자형에도 종류가 많아서 놀랐다.... 정수, 실수, 지수형은 그렇다 쳐도 제일 신기한 건 다름아닌 NaN(Not A Number)인데 숫자가 아닌 것을 변환할 때 얼굴을 내비치는 녀석이다. 보이는 건 문자형인데 숫자형이라고 하니 이 녀석은 잘 기억해놔야겠다.

WEB 기초 특강에서 내가 배운 것
우리가 만들고자 하는 것? '웹서비스'
웹서비스: 웹공간에서 제공되는 서비스
웹개발자가 하는 역할: 서비스의 설계, 제작, 관리를 한다.

웹서비스의 동작
a. 웹 공간에서의 클라이언트의 요청(클라이언트(사용자) + 웹 브라우저)
b. 해당 요청을 받는 서버(=웹 서버)
c. (단순하게) 서버 = 컴퓨터(인터넷이 연결된)
웹서비스를 원활하게 하기 위한 도구 : AWS, Vercel, Netlify

서버에 정보를 요청하는 방법
클라이언트 -> [HTTP] [URL] -> 서버
서버는 JSON으로 클라이언트에 요청한 것을 내어준다.

1. URL과 Method의 조합으로 실시가 된다.
2. HTTP라는 서로간에 약속된 상호작용 방법 안에서 URL + Method로 한다.
Method: GET, POST, PUT, PATCH, DELETE

웹서버의 주요 기능: 페이지 제공, API제공
*API: Application Programming Interface
- API는 여러 소프트웨어 간에 정보나 기능 공유를 하게 해주는 중간 매개체의 역할을 수행한다.(일종의 규약)
주로 JSON이나 XML형식으로 응답을 반환하는데 주로 JSON으로 반환을 한다.

RESTful API와 Graph QL?
전통적인 방식과 복잡한 현대적인 방식임.

위에서 정리해 본 JavaScript 공부 내용은 이미 한번 공부한 것이지만 개념이 헷갈리는 개념도 있었고 몰랐던 부분이 있어서 새로워 개념을 새롭게 다질 수 있는 좋은 기회였다. 터미널을 사용하는 방법을 몰랐는데 이번 강의에서는 터미널을 사용하여 내가 작성한 코드를 확인 할 수 있다는 것에 매우 신기하고 새로운 것을 알아갔다.... 자주 사용해야겠다.

WEB 기초 강의에 관한 것
사실 들어도 잘 모르겠다. 이해가 가능한 건 클라이언트와 서버 딱 두가지였다. 아직 제대로 공부하지 않아 아무것도 모르는 상태였지만 이번 강의를 통해 서버와 클라이언트가 어떻게 정보를 주고 받는지 대략적으로 나마 알 수 있었던 좋은 기회였다. 특히 API가 뭔지 궁굼했는데 이번에 알 수 있어서 좋았지만.... 아직도 잘 모르겠다.... 공부가 더 필요하다.

미니 프로젝트에 대한 회고
미니 프로젝트를 마쳤지만 사실 그렇게 속이 시원하지 않고 아쉬운 점만 생각이 난다. 팀원 모두가 고생해서 만든 페이지지만 타 팀 발표를 보면서 완성품을 보니 뭔가 초라해보였다. 우리가 시도 하려던 기능보다 더 상위의 스킬을 사용하여 구현을 한 것을 보니 뭔가 초라해지는 하루였다.
느끼고 배운점: 협업 시 팀원들과의 의사소통을 잘 이루어졌지만 아무래도 시작할 때 너무 의욕과다로 내 수준 보다 높은 수준의 페이지를 구현하려는 욕심이 과다했고, S.A의 짜임새, 와이어 프레임을 제대로 설정하지 않은 점, 명확한 역할 구분을 하지 않아 혼선을 겪어가면서 작업을 했던 것 같다.  다음 프로젝트에서는 오늘 느낀 점을 양분 삼아 더 앞으로 나아가야겠다... 

오늘도 고생했고... 남들과 비교하지 않을 수는 없겠지만 좌절하지 않고 내 속도로 캠프 마지막날 까지 최선을 다해 나아가야겠다.