[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : Javascript 1

m_ngyeong·2023년 6월 16일

IT개발캠프 JavaScript React 개발자부트캠프 리액트 리액트캠프 부트캠프 스나이퍼팩토리 웅진씽크빅 유데미 인사이드아웃 프로젝트캠프 프로젝트캠프후기

[유데미x스나이퍼팩토리] 10주완성 프로젝트 캠프 React

목록 보기

9/28

JavaScript

DOM(Document Object Model)란?

DOM(Document Object Model)은 넓은 의미로 웹 브라우저가 HTML 문서를 인식하는 방식을 의미한다. DOM은 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이기도 하다. W3C에서 표준화된 API를 정의하고 있어 대부분의 브라우저에서 동일하게 작동한다.

Document Node(문서 노드)
DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킨다. HTML 문서 전체를 나타내는 노드이기도 하다.
Element Node(요소 노드)
모든 HTML 요소 (body, h2, div 등)는 이 요소 노드이다. 속성 노드를 가질 수 있는 유일한 노드로서, 부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있다.
Attribute Node(속성 노드)
모든 HTML 요소의 속성은 이 속성 노드이다. 요소 노드에 대한 정보를 가지고 있다. 그렇기 때문에 부모 노드가 아닌 해당 노드와 연결(바인딩)이 되어 있다.
Text Node(텍스트 노드)
HTML 문서의 모든 텍스트는 이 텍스트 노드라 볼 수 있다. 텍스트 노드는 정보를 표현하며, 가장 마지막에 위치하는 자식 노드이기 때문에 잎사귀를 닮았다 해 리프 노드라고 불리기도 한다.

문서 객체가 생성되는 방식

Static: 웹 브라우저가 HTML 문서에 적혀 있는 태그를 위에서부터 아래로 읽어내려가며 생성하는 것
Dynamic: 원래 HTML 문서에 없던 문서 객체를 JavaScript를 이용해서 생성하는 것

JavaScript

JavaScript는 객체 기반의 스크립트 프로그래밍 언어이다. DOM을 조작할 수 있는 프로그래밍 언어 중에서 가장 유명한 언어이다.

JavaScript 선언 방식

HTML에 문서에서 <script>~</script> 사이에 작성
외부 JavaScript 파일로 작성

Syntax

let/const

Variable(변수) : 어떤 정보에 이름을 붙여, 데이터 값을 넣을 수 있는 저장소. 재할당 가능
Constant(상수) : 값이 변하지 않는 변수

Data Type

String: "" / '' / ``
Number
- 64bit 부동 소수점, 정수는 최대 15자리까지
- NaN(Not a Number)
Booleans
Object
- {key:value}
- this : 객체 참조
Array object
Date object

 //String:
let color = "Yellow";
let lastName = "Kim";

//Numbers:
let length = 16;
let weight = 7.5;

//Booleans
let x = true;
let y = false;

//Object :
const person = { firstName: "Min Gyeong", lastName: "Kim" };

//Array object:
const cars = ["Saab", "Volvo", "BMW"];

//Date object:
const date = new Date("2023-06-16");

Operator

산술 연산자: + - / * %(나머지) **(거듭제곱)

증감 연산자: ++ --

후위연산자 / 전위연산자

// 후위연산자
let x = 3;
const y = x++;
console.log(`x:${x}, y:${y}`); // x:4, y:3

// 전위연산자
let x = 3;
const y = ++x;
console.log(`x:${x}, y:${y}`); // x:4, y:4

할당 연산자: =
문자열 연산자: +
비교 연산자: == === != !== >, < , >= , <=
- == vs === : 두 개의 피연산자가 일치하면 true, 다르다면 false 반환
  - === : data type 까지 일치해야만 true 반환.
- != vs !== : 두 개의 피연산자가 일치하지않는면 true, 일치하면 false 반환
- >, < , >= , <= : 맞다면 true, 틀리다면 false, 알파벳 순서가 같다면 문자열길이가 긴 것이 더 큼
논리 연산자: &&(and) ||(or) !

Array

선언 [ ] new Array()
접근 index

const travel_spot = ['방콕', '뉴욕', '파리'];
const travel_spot = new Array('방콕', '뉴욕', '파리');
const paris = travel_spot[2];

Oject

// 선언
const pooh = {
	key : 'value',
	name : 'pooh',
	'say-Hi' : function() {
       console.log("I'm winnie the pooh, What's your name?");
	}
}
// 호출
console.log(pooh.name);
console.log(pooh['say-Hi']); 
//function() {
//	console.log("I'm winnie the pooh, What's your name?");
//}

//변수명에 특수문자나 공백이 들어갔을 경우
console.log(pooh['say-Hi']());
// ()호출기호
//"I'm winnie the pooh, What's your name?"

Function

//기본 구조
function 함수명(매개변수){
	//매개변수=parameter : input
}

// Arrow Function
//함수 선언
//인자가 하나일 때 () 생략가능
const multiply10 = (num) => {
  const result = num * 10
  return result; 
}
const multiply10 = (num) => { 
  return num * 10; 
}
const multiply10 = (num) => num * 10;
const data = multiply10(100);
console.log(data);

조건문, if-else/switch-case

조건문은 지정한 조건이 참인 경우에 실행하는 명령 집합이다. avaScript는 if...else와 switch 두 종류의 조건문을 지원한다.

if...else 문

명령문을 논리 조건이 참일 때 실행하려면 if 문을 사용한다. 선택적으로, else 절을 추가해서 조건이 거짓인 경우에 실행할 명령문을 지정할 수 있다. else if를 사용해서 다수의 조건을 순차적으로 검사할 수도 있다.

false
- false
- undefined: 값이 할당되지 않음
- null: 존재하지 않는 값
- 0
- NaN
- 빈 문자열 ("")

switch 문

switch 문은 우선 표현식(expression)의 결과와 일치하는 레이블을 가진 case 절을 찾아, 일치하는 case의 명령문을 실행한다. 일치하는 레이블을 찾지 못했으면 default 절을 탐색하여 default 절의 명령문을 실행한다. default 절을 찾지 못했으면 switch 문 바깥의 다음 명령문을 실행한다.

break 문
각각의 case에는 선택적으로 break 문을 추가할 수 있다. break는 case의 명령문을 실행한 후에 프로그램이 switch의 밖으로 나가도록 한다. break를 생략하면 프로그램은 switch 문을 탈출하지 않고, 다음 case의 명령문을 실행한다.

// if-else
const ten = 10;
if(ten>15){
  console.log("ten>15");
} else{
  console.log("ten<=15");
}

// 삼항 연산자
age > 19 ?  console.log("술 마시기 가능") : console.log("삐빅 미성년자");

// switch-case
const device = "iphone";
switch(device){
  case "iphone":
    console.log("iphone");
  case "ipad":
    console.log("ipad");
    …
  default:
    console.log("just apple");
}

반복문, for/while/do-while

return과 break의 차이
만약에 함수 안에 작성된 루프 안에서 break가 쓰였다면, break를 감싸고 있는 루프를 빠져나가고 함수 밖으로는 나가지 않는다. return은 함수 실행을 종료하고 함수를 호출한 곳으로 실행 흐름을 옮긴다.
continue : 뒤에 있는 코드는 실행안하고 다음 반복문으로 넘어간다.

for(초기화식 ; 종료조건식 ; 증감식) {
	실행할 코드
}
for (let i = 1 ; i < 11 ; i++){  //+=1
  console.log(i);
}

시작점
while(조건){
	코드
	증감
}
let i = 1;
while(i < 11){
	console.log(i);
	i++;
}

```jsx
시작점
while(조건){
	코드
	증감
}
let i = 1;
while(i < 11){
	console.log(i);
	i++;
}

let i = 1; //초기화
do { //조건을 확인하지 않고 먼저 코드 실행
  console.log(i);
  i++;
} while(i < 11) //조건이 거짓이 되면 그대로 반복문 종료
console.log(numArr);

참고문서
DOM, https://www.codestates.com/blog/content/dom-javascript

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

m_ngyeong

사용자 경험 향상과 지속적인 성장을 추구하는 프론트엔드 개발자 ʚȉɞ

이전 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 2주차 과제2️⃣

다음 포스트

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : Javascript 1

[유데미x스나이퍼팩토리] 10주완성 프로젝트 캠프 React

JavaScript

DOM(Document Object Model)란?

문서 객체가 생성되는 방식

JavaScript

JavaScript 선언 방식

Syntax

let/const

Data Type

Operator

Array

Oject

Function

조건문, if-else/switch-case

if...else 문

switch 문

반복문, for/while/do-while

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 2주차 과제2️⃣

[유데미x스나이퍼팩토리] 10주 완성! 프로젝트 캠프 : 2주차 과제3️⃣

0개의 댓글