240419 TIL

 

오늘 오전~오후에는 조원분이 미니프로젝트 발표 연습하시는 것 듣고 난 후 낮엔 다른 조원 분들도 

프로젝트 발표하는 걸 들었는데 . 내 실력은 아직 멀었다는 생각이 든다. 기능 하나 구현하는데에 

신기한 게 많았다. 예를 들면 , 게임형식으로 소개 페이지를 만들거나, 누르면 효과가 나온다거나.! 😮

더 열심히 공부해서 나도 저 기능을 구현해보고 싶다. 먼 미래겠지만 파이팅~!

 

미니프로젝트 발표 이후에 생각해보니 아직 내가 부족한게 많구나 더 열심히 코딩 공부를 해야겠구나 

좋은 자극을 받았다. 디자인 공부를 했지만 프론트엔드 쪽은 또 다른 영역이니까.. 

그래서 노션에 올라와있는 자바스크립트 기초 자료로 공부하고 메모했다. 기록해두지 않으면 

기억이 나지 않을 것 같아서 여기에 정리해둔다 

---

✨ 오늘의 공부 : 자료형 

 

원시 자료형 

 

Boolean  - true 또는 false 값으로만 표현 
string - "값" '값' 쌍으로 값을 묶어 표현
Number - 따옴표나 콤마등을 넣지 않고 숫자 값으로 표현

10!=='10' // 두 값은 같을수 없음

undefined - 값이 할당되지 않는 변수 
null  -어떤 값이 비어있음을 의도적으로 표현할 때

Object (객체) -

 

{ key1 : value, key2: value }의 형태로 표현
value엔 모든 자료형의 값을 담을 수 있다.
key를 기준으로 객체에 있는 값에 접근 가능 

객체의 key에 접근하는 방법 :  obj.key  /  obj['key']

객체의 key에 여백 대쉬 특수문자등 변수명 선언할 때
허용되지 않는 문자열을 사용할 경우 반드시 obj['key']; 와 같은 표현식을 사용해야 함

const person = {
   name :'재연' ,
   age : 28 ,
   'raising dog' : '포메라니안',
}

✨객체 구조 분해 할당

 

array(배열) - [vaue, value2, value3]의 형태로 표현 
value에는 모든 자료형의 값을 담을수 있음
index 최소 값 = 0 

const names = ['1','2','3','4'];
 	names[0];
	names[2];
	names[3];

✨ 배열 구조 분해 할당

객체 or 배열을 변수로 분해할수있음

* 배열 분해 

> 변수 이름을 마음대로 선언 가능 
> 배열의 순서대로 할당.
배열 구조 분해 할당으로 선언한 변수를 제외한 
나머지  배열의 요소는 할당 X

const arr = ["Node.js", "React", "Spring"];

	const [backEnd, frontEnd] = arr;
	console.log(backEnd); // Node.js
	console.log(frontEnd); // React

NaN (Not a Number의 줄임말)

- 숫자가 아닌 값을 숫자로 변환하는 경우 > NaN으로 반환
- NaN의 판별
> 다른 모든 값과 비교했을 때 같지 않으며, 다른 NaN과 같지 X
> 판별은 Number_isNaN() or isNaN()을 이용하면 분명하게 판별할수 있음
> isNaN() 현재 값이 NaN이거나 숫자로 변환했을 때 NaN이 된 경우 true를 반환 
> Number.isNaN() 현재 값이 NaN이어야만 true를 반환

NaN === NaN;        //  false
Number.NaN === NaN; //  false
isNaN(NaN);         //  true
isNaN(Number.NaN);  //  true

Function (함수) - 기능의 단위를 묶거나 반복되는 코드를 줄이기 위해 사용 

불리언 연산 

 

- true한 값은 true falsy한 값은 false로 평가
- falsy 값 > 빈 문자열 '' 숫자 0 불리언 false null undefined NaN이 해당
- falsy 값이 아닌 모든 값 > truthy로 연산 > true로 평가
- truthy로 판단되는 자료형  > Array Object
- 다른 자료형을 가진 값에 강제로 불리언 연산을 적용
- Bollean 함수 사용 

Boolean('String') //true
Boolean('') // false
Boolean(undefined) // false

 

---

 

저녁엔 특강으로 WEB특강에 대해 배웠는데 Front-End와 Back-End의 차이를 알 수 있었고,  이해하는 시간을 가졌다.

오늘은 자습하면서 자바스크립트 조금이라도 알 수 있는 시간이었다. 아직 실력이 부족한 만큼 많이 연습해야지! 😅