• TypeScript는 Microsoft 에서 개발 및 유지 관리하는 오픈 소스 언어
• 큰 스케일의 애플리케이션 개발을 위해 설계된 언어
• JavaScript에 정적 타이핑과 선택적 타입 annotation 추가
• JavaScript의 상위 집합이 TypeScript
• 모든 Javascript 코드는 구문적으로 유효한 TypeScript

타입스크립트의 주요 특징

• 크로스 플랫폼 : TypeScript는 JavaScript가 실행되는 모든 플랫폼에서 실행된다.
• 객체 지향 언어 : TypeScript는 클래스, 인터페이스, 모듈과 같은 강력한 객체 지향 프로그래밍 기능을 제공한다.
• 정적 타입 검사 : TypeScript는 정적 타이핑을 사용하며, 이는 타입 annotation(타입 주석)을 통해 수행된다. 이를 통해 컴파일 시에 타입 검사가 가능하므로, 스크립트를 매번 실행하지 않아도 코드 작성 중에 오류를 찾기 쉽다.
• 타입 추론 : 변수가 타입 없이 선언되면, 그 값에 기반하여 타입을 추론하는 기능을 제공한다.
• 선택적 정적 타이핑 : TypeScript의 정적 타입은 선택적이다
• DOM 조작 : Javascript처럼 TypeScript도 DOM을 조작하는 데 사용할 수 있습니다.
• ES 6 기능 포함 : TypeScript는 클래스, 인터페이스, 화살표 함수 등 예정된 ECMAScript 2015의 대부분 기능을 포함하고 있습니다.

JS vs TS

• JavaScript 는 웹의 표준 언어로, 동적인 웹사이트와 애플리케이션을 만드는 데 필수적인 도구이다. 하지만 JavaScript만으로는 프ㅏ로그램의 복잡성이 커질 때 발생할 수 있는 여러 문제들을 해결하기 어렵다.
• TypeScript는 JavaScript의 상위 집합으로, JavaScript의 모든 기능을 포함하면서도 정적 타입 검사와 같은 강력한 기능을 추가한다.

오즈코딩스쿨 with AWS 해커톤의 날!!

안녕하세요! 오즈코딩스쿨 초격차 과정 7기 정봉석입니다. 이번에 AWS JAM에 참여한 경험을 공유하고자 합니다. 부트캠프를 통해 웹 개발의 기초를 다졌지만, AWS사옥에 가서 해커톤도 한다고 하더라구요? 재밌어 보여서 참여했습니다.

오즈코딩스쿨과 AWS가 함께하는 해커톤에 참여한 소감이 어떠셨나요?

AWS를 가면 좋은 스토리가 될거라고 생각했다. AWS 서비스 중, Iam, S3, CloudFront만 써보고 가서 걱정이 많았었다. 모르는 부분 반 이상!! 아는거 조금!!인 상태로 참여 했는데 생각보다 재밌게 했어요.

오늘 우승 목표!

그나마 쉬운것 + 어려운것 택1해서 빨리 끝내고 1등으로 끝내고 쉬겠다가 전략이었다. (성공적)

AWS JAM

참여한 AWS JAM의 주제나 목적 혹은 진행 방식에 대한 간략한 소개

조재구 강사님이 시작 전 설문으로 아는 부분과 완전히 모르는 부분에 대해 조사 하시고 1차적인 개념 설명을 해주신 다음 9개 문제 풀이에 들어 갔습니다. 문제 풀이 시작부터 끝까지 자유로운 분위기로 진행됬지만 뭔가 다들 집중한다고 말을 안해서 조용히 풀었던 것 같습니다.

팀원들과의 협업 방식이나 역할 분담에 대한 언급

중요하지않다. 스피드가 생명이다. 빨리 끝낼 수 있는걸 선택해서 끝내는걸 목표로 잡았다.

실패한 접근 방식도 포함해 학습 과정을 공유해 주세요!

적혀있는 내용을 이해못해서 헤매긴 했는데 구글과 GPT는 천사다.

마무리

AWS서비스에 대해 새롭게 배운 점들을 정리해요.

오늘 와서 한것들이 다 새로웠다. 어떤 스토리에서 어떻게 써야하는지 AWS 서비스들간의 관계의 흐름을 알 수 있었다.

AWS JAM에서 배운 내용이 실제 업무에 어떻게 적용될 수 있을까요?

아예 모르는 상태는 아니기에 찾아찾아 사용할 수 있지 않을까 싶다.

AWS JAM 추천하시나요?

추천하고 해볼 수 있으면 해보는게 좋다고 생각한다.

찐후기

밀크티 맛있다.

Node.js의 장점을 들어 Node.js를 사용하는 이유에 대해 설명하세요. -node.js는 자바스크립트 기반이기 때문에 프론트엔드와 백엔드 모두 같은 언어를 사용할 수 있고, 이로 인해 개발 시간을 단축시켜주고 코드 유지보수를 훨씬 용이하게 해 줍니다. node.js는 npm이라는 패키지 관리 시스템이 있기 때문에 전 세계 개발자들이 만든 수많은 오픈 소스 라이브러리와 모듈을 쉽게 설치하고 사용할 수 있습니다. 이로 인해 개발 속도를 높이고 코드 품질을 향상시킬 수 있습니다.

NPM을 사용해서 프로젝트에 패키지를 활용하는 명령어를 작성하세요

package.json 파일의 역할과 중요성에 대해 설명하세요 -역할 : 프로젝트의 이름,버전, 설명, 작성자, 라이선스 등을 저장하고, npm start나 npm test로 개발 과정을 자동화하고 효율성을 높입니다.

• 중요성 : 프로젝트 공유 및 재사용이 가능하고, 유지보수가 편하며 버전 정보를 명확하게 관리하여 다른 라이브러리나 x 호환성 문제를 예방할 수 있습니다.

HTTP(Hyper Text Transfer Protocol)는 웹 브라우저와 웹 서버가 데이터를 주고 받을 수 있게 디자인된 통신 규약이다. 우리가 웹을 통해서 데이터를 주고 받을 때 그 데이터를 주고 받는 방식의 이름이 HTTP이다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 이 규약을 암호화하여 보안을 확보한 규약을 HTTPS라 한다.

HTTP 통신

클라이언트(사용자)가 서버(호스트)에 요청 메시지를 보내고 이에 대해 서버가 응답 메시지를 반환한다. 서버는 응답 메시지를 반환한 후에 초기 상태로 돌아간다. 이러한 특징으로 인해 HTTP를 stasteless 규약이라고도 한다.

HTTP 요청과 응답 - 요청

요청 메세지는 요청 행, 요청 헤더, 메시지 본문으로 구성된다.

• 요청 행 : 요청 메소드,URL,HTTP 버전 정보 등을 포함한다.
• 요청 헤더 : 메시지 정보, 메세지에 저장한 데이터 정보 등을 포함한다.
• 메시지 본문 : 서버 측으로 보내는 데이터를 포함한다. =>요청 메소드란? GET,POST 등 데이터 송수신 방식을 지정한 것

HTTP 요청과 응답 - 응답

응답도 마찬가지로 요청과 같이 3가지로 나뉘어진다.

• 요청 행 : 상태 코드,보충 메시지,HTTP 버전 정보 등을 포함한다.
• 요청 헤더 : 메시지 정보, 메세지에 저장한 데이터 정보 등을 포함한다.
• 메시지 본문 : 클라이언트 측으로 보내는 데이터를 포함한다. => 상태 코드란? 요청이 성공적으로 완료되었는지를 보여주는 숫자 코드

주요 상태 코드

상태 코드는 요청이 성공적으로 완료되었는지를 보여주는 숫자 코드이며, 각 숫자마다 의미가 정해져 있다.

XMLHttpRequest

XMLHttpRequest는 서버와 상호작용하기 위해 사용하는 자바스크립트 빌트인 생성자이다. 이를 이용하면 서버(URL)로부터 데이터를 받아와 전체 페이지의 새로고침 없이도 페이지의 일부만 업데이트하는 비동기 방식의 데이터 통신을 수행할 수 있다. 이러한 프로그래밍 기법을 Ajax라 한다! Ajax(Asynchronous JavaScript And XML)는 웹 서버와 비동기로 통신하고 dom을 이용하여 웹 페이지를 동적으로 갱싱하는 프로그래밍 기법을 말한다.

XMLHttpRequest 사용 흐름

Ajax 기법에 기초한 XMLHttpRequest 비동기 통신은 다음 세 단계를 거친다.

• XMLHttpRequest 객체를 생성한다.
• 서버와 통신할 때 필요한 정보 및 처리 방법 등을 기입한다.
• 요청을 전송해 통신을 시작한다! =>객체 생성은 new 연산

이벤트 핸들링

비동기 통신을 할 때는 서버와의 통신 상태를 감시할 수 있다. 그리고 이때 발생하는 이벤트에 대한 이벤트 핸들러를 등록할 수 있다. 아래는 XMLHttpRequest 객체의 주요 이벤트 몇 가지를 정리한 표이다.

요청 초기화 및 전송

서버에 요청을 보낼 때는 XMLHttpRequest 객체의 open 메소드로 요청을 초기화하고, 이후 send 메소드로 보내주는 순서로 작업을 한다.

// open 메소드 사용시 기본 형태
const request = new XMLHttpRequest()
request.open("HTTP메소드", "서버URL")

//초기화는 했고, 이제 요청 보내기
request.send()

이 속성은 현재 도메인의 로컬 저장소에 접근할 수 있게 해주는 속성이다. 웹브라우저에서 각 도메인에 대해 할당해주는 저장 공간으로, 여기에는 데이터를 영구적으로 보관할 수 있다. 데이터 보관 시에는 데이터의 이름과 데이터의 실제 값을 각각 지정하며, 이때 데이터 타입은 문자열 형태만 허용된다.

• 영구적으로 보관한다? 브라우즈럴 껏따가 켜거나 페이지를 새로고침을 해도 해당 도메인에 데이터가 남아있도록 할 수 있다는 뜻이다.
• 크롬 기준, 개발자 도구의 application 탭에서 조회가능하다.

localStorage 사용법

로컬스토리지부터 데이터를 읽거나 쓸 때에는 메소드를 이용해 접근한다. 로컬스토리지의 데이터 이름은 중복될 수 없다.

배열 메소드

두 메소드의 공통점은

1. 콜백함수를 인수로 전달받는다.
2. 배열의 멤버를 기반으로 새로운 배열을 생성한다.

• 자바스크립트 객체 표기법을 뜻하며, 이는 자바스크립트 객체를 문자열로 표현하는 데이터 포맷이다.
• 주로 자바스크립트에서 사용할 수 있는 객체 타입을, 다른 프로그래밍 언어에서도 사용할 수 있는 형태(문자열)로 변환하기 위해 사용한다.

JSON 형식으로 쓰게 되면

JSON 형식은 자바스크립트 객체 리터럴 표기법에 기반을 두고 있다. 객체 키와 문자열은 따옴표로 묶어야하나, 나머지는 그대로 표기할 수 있다.

const goku0bject = {
  name: "손오공",
  race: "사이어인",
  skills: [
    "에네르기파",
    "계왕권",
    "원기옥",
    "순간이동"
    ]
}

이건 객체 리터럴이고

const gokuJSON = `{
"name":"손오공",
"race":"사이어인",
"skills": [
"에네르기파",
"계왕권",
"원기옥",
"순간이동"
]
}`

이건 JSON 문자열이다.

내장 객체 JSON

두 가지의 메소드가 있다. 객체를 JSON 형식 문자열로 변환하거나, 그 반대의 환원도 진행 할 수 있다.

객체를 구성하는 속성(값이나 기능)의 이름과 실제 값을 한 쌍으로 묶어 표현하는 '객체 리터널'을 이용하면 객체를 생성할 수 있다. 이 때 속성의 이름을 키(key), 속성의 실제 값을 밸류(value)라 한다.

const cat = {
name: "국희",
town: "부천"
}

여기서 name과 town은 키, "국희"와 "부천"은 밸류!

밸류가 함수면? 당연히 메소드다.

속성의 밸류로 함수가 주어지면, 이속성은 메소드가 된다.

const cat = {
name: "국희",
town: "부천",
eat: function(){
  console.log("밥 먹는다")
},
  scratch: function(){
    console.log("건드리면 문다.")
  }
}

• 중요! 키는 중복될 수 없고 밸류는 중복이 되도 상관이 없다!

객체 리터널로 속성에 접근!

객체 안의 속성 값을 참조할 때 도트(.)연산자 or 대괄호([]) 연사자를 사용할 수 있다.

//도트 연산자를 사용할 때
console.log(cat.town) // 부천
cat.scratch() // 건드리면 문다.

//대괄호 연산자를 사용할 때
console.log(cat['name]) //국희
cat['eat]() // 밥 먹는다             

• 중요포인트! 속성 이용에 키를 쓰므로 키는 중복될 수 없다.

스프레드 연산자

객체 리터럴의 요소 목록을 펼칠 수 있다. 전개 구문, 전개 연산자 등으로 불린다. (펼치다 = spread) 객체 리터럴에 대해 스프레드 연산을 수행하면, 구성 요소를 그대로 복사한다.

const bird = {
  parrot: "앵무새",
  chichen: "닭"
}
const animal = {
  ...bird,
  dog: "강아지"
}
console.log(animal)

이렇게 스프레드 연산을 하면 parrot: '앵무새', chichen:'닭', dog:'강아지'로 나오게 된다. 배열의 요소에도 사용이 가능하다.

Math는 수와 관련된 속성과 메소드를 가진 내장 객체이다! 생성자 아님 주의

new Math() //오류납니다.

Math.메소드()
Math.속성 //이렇게 사용해야 합니다.

자주 사용되는 메소드 종류!

여러 개의 데이터를 보관하는 역할을 수행하는 객체이다. 이전까지 변수(또는 상수)에는 데이터를 하나씩만 대입할 수 있었지만, 배열을 사용하면 여러 개의 데이터를 대입할 수 있다.

let number = 3; //숫자 1개 대입
let numbers = [1, 2, 3]//배열을 이용해 숫자 세 개 대입!

배열을 만드는 두 가지 방법

1. 배열 리터럴 쉼표로 구분한 값을 대괄호로 묶어서 표현

   const arr = [1, 2, 3, 4, 5, 6, 7, 8] 

2. Array 생성자로 생성하기! 배열을 만드는데 사용하는 기본 내장 생성자가 존재한다.

   const arr = new Array(1, 2, 3, 4, 5, 6, 7, 8)

배열의 특징

배열 객체를 다루기 위해 알아두어야 할 몇 가지 특징들.

• 배열에 포함된 값 하나하나를 '배열요소'라고 한다.
• 각 배열 요소는 왼쪽부터 순서(번호)가 매겨진다. 이를 '인덱스 번호'라고 한다.
• 인덱스 번호는 0부터 시작한다.
• 배열 요소 수는 원하는 개수만큼 포함시킬 수 있으며, 0개일 수도 있다.
• 다양한 유형의 데이터를 포함할 수 있다. 숫자,문자열, 객체 등

인덱스 번호의 중요성

대괄호([])연산자를 이용해서 특정 인덱스 번호의 배열 요소를 참조할 수 있다. 참조할 수 있다는 것은 곧 읽거나 쓸 수 있다는 것을 의미한다.

const ohMyGirl = ["효정", "미미", "유아", "승희", "지호", "비니", "아린"]
console.log(ohMyGirl[0])//효정
console.log(ohMyGirl[2])//유아
console.log(ohMyGirl[5])//비니
console.log(ohMyGirl[9])//undefined!!

ohMyGirl[0] = "갓효정" //원래 효정이였지만, 갓효정으로 변경!
console.log(ohMyGirl)[0] //갓효정으로 나온다.

배열 메소드

배열은 객체이기에 메소드가 다수 정의되어 있다.(속성도) 유용하고 대표적인 메소드 몇가지만 적어 놓겠다. 종류가 너무나 다양하고 많아 다 보는것은 불가능하다. 그러므로 구글을 잘 이용하자!

Element.classList

classList 속성은 웹 요소(Element)로부터 클래스 콜렉션을 반환하는 속성이다.

<p class = "hello greet good">
  안녕하세요
</p>

const p = document.querySelector('p')
console.log(p.classList)

classlist를 사용하면 0:hello 1:greet 2:good 이렇게 나뉘어지는 것을 볼 수 있다.

관련 메소드

자바스크립트는 개발자의 편의를 위해 유용한 기능을 제공하는 빌트인 생성자 또는 빌트인 객체를 지원한다.

• 빌트인 생성자 : JavaScript에 새로운 객체를 생성하기 위한 내장함수입니다.
  • 이를 이용하여 객체를 생성할 수 있습니다.
  • ex ) Object(), Array(), Date()
• 빌트인 객체 : JavaScript에 이미 정의되어 있는 객체입니다.
  • 이를 이용하여 값이나 기능을 호출할 수 있습니다.
  • 별도의 선언 없이 사용할 수 있습니다.
  • ex ) Math, Date, Array

빌트인 생성자 Date

날짜와 시간을 처리하는 다양한 메소드가 정의된 빌트인 생성자이다.

// 코드가 실행되는 시점의 날짜와 시간 정보를 담은 객체
const now = new Date()

//2008년 6월 10일의 날짜와 시간 정보를 담은 객체
const then = new Date(2008, 5, 10)

//date 객체끼리는 밀리초 단위로 연산된다
const interval = now - then
console.log(interval) //419184288514 -참고만

메서드 기능 특이사항 getFullYear 연도를 뜻하는 숫자 값 반환함
getMonth 월을 뜻하는 숫자 값 반환함 0부터 시작하므로 1월 → ‘0’ 반환 getDate 날짜를 뜻하는 숫자 값 반환함
getDay 요일을 뜻하는 숫자 값 반환함 0부터 시작하므로 일요일 → ‘0’ 반환 getHours 시각 중 시간을 나타내는 숫자 반환함
getMinutes 시각 중 분을 나타내는 숫자 반환함
getSeconds 시각 중 초를 나타내는 숫자 반환함
toLocaleString 지역 날짜 및 시간 문자열 반환함 ‘2021/09/17 16:30:45’ 형식

객체.데이터 (객체가 가지고 있는 숫자, 문자 등의 다양한 데이터를 사용할 수 있고 객체가 가지고 있는 데이터를 가르켜 일반적으로 '속성'이라고 한다.) 객체.기능() (객체가 가지고 있는 다양한 기능을 수행할 수 있다.(괄호 필수). 객체가 가지고 있는 기능을 가리켜 일반적으로 '메소드'라고 한다.

즉, 자바스크립트 코드 내에서 객체란 '값 또는 기능을 가지고 있는 데이터'이다. 그리고 개발자는 자신이 원하는 값이나 기능으로 구성된 객체를 직접 만들 수 있다!

객체를 만드는 생성자

생성자란 객체를 생성할 때 사용하는 함수로서, '생성자 함수'라고도 한다. 사용할 기능을 정의한 일반 함수와 생성자 함수 사이에 특별한 문법적 차이는 존재하지 않는다. 즉, 함수는 생성자 역할을 할 수 있다. 단. 생성자 함수는 객체생성을 목적으로 만드는 것이다.

생성자의 쓸모?

자바스크립트가 제공하지 않는 유형의 데이터를 창조할 수 있다.

키워드 this 사용하기

생성자 함수 정의 시 this 키워드는 객체 그 자신을 의미한다. this를 이용해 해당 객체의 속성이나 메소드를 추가할 수 있다.

//강아지를 표현하는 'dog'객체를 만들고 싶다
function Dog(){
this.name = "콩이"
this.breed = "시츄"
}

일반적으로, 생성자 함수명의 첫글자는 대문자로 한다.(필수가 아닌 관례)

객체 생성은 new 연산자로!

생성자 함수는 '객체를 이렇게 만들겠습니다.'에 대한 정의일 뿐이며, 실제 객체가 생성되 기 위해서는 new 연산을 통해 객체를 반환해야 한다.

function Dog(){
this.name = "콩이"
this.breed = "시츄"
}
//Dog 객체를 생성하고, myDog 라는 이름을 붙이겠다
const myDog = new Dog();
console.log(myDog.name) //콩이
console.log(myDog.breed) //시츄

생성자 하나로 여러 개 만들기

생성자 함수는 '객체를 이렇게 만들겠습니다.'에 대한 정의, 즉 '설계도'의 역할이며 생성자 함수 하나로 객체를 여러 개 만들 수 있다.

//생성자에도 매개변수를 정의할 수 있다.
function Dog(eachName, eachBreed){
  this.name = eachName
  this.breed = eachBreed
}

//생성 시에도 인자를 전달할 수 있다.
const one = new Dog("바둑이","진돗개");
const two = new Dog("하나코", "시바견");
const three = new Dog("마르코", "셰퍼드");

• 선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행한다.

switch문과 함께 쓰이는 명령어들

• break : switch문을 빠져나올 때 사용한다.

• default : 목록 중에 없는 경우 default문의 내용을 무조건 수행한다.

  switch문과 break

  switch(30) {
   case 10 : document.write("SEOUL") ; break;
   case 20 : document.write("JEJU") ; break;
   case 30 : document.write("BUSAN") ; break;
  } // switch
  

switch문 옆에 30이란 숫자가 보인다. 이 말은 아래의 case 문의 여러가지 경우 중 30의 값과 일치하는 경우일 때 case 30의 값을 출력하라는 뜻이다. switch문이 30값을 가진 case 30을 찾아서 BUSAN이란 단어를 출력하라는 코드를 받고, 그 뒤의 break 명령어로 인해 switch문을 빠져나오게 되어 BUSAN이 화면에 출력되게 된다.

switch문과 default

default 명령어는 switch의 값이 아래의 case 중 일치하는 것이 없을 때 출력하라는 뜻이다.

위의 코드에 default 문을 추가로 하고 swtich의 값도 변경했다.

switch(40) {
    case 10 : document.write("SEOUL") ; break;
    case 20 : document.write("JEJU") ; break;
    case 30 : document.write("BUSAN") ; break;
    default : document.write("기타..."); break;
} // switch end

이렇게 코드를 넣으면 switch의 값이 case 중에는 일치하는 것이 없기에 default의 값인 "기타..."가 출력되게 된다.

만약 break문이 없게 되면?

switch(20) {
    case 10 : document.write("SEOUL") ; break;
    case 20 : document.write("JEJU") ;
    case 30 : document.write("BUSAN") ; break;
    default : document.write("기타..."); break;
} // switch end

JEJUBUSAN이 출력이 된다. 이유는 switch의 값이 20이므로 case 20의 값이 출력이 되나 break가 없기에 빠져나오지 못하고 그 밑에 있는 BUSAN까지 가서 출력이 된 것이다.

• 자바 스크립트엔 세 종류의 논리 연산 ||(or), &&(and), !(not) 이 있다.

||(or)

• 값을 비교 시 둘 중 하나라도 참(true) 일시 참(true)를 반환하고, 그렇지 않으면 (거짓)false 반환

  console.log( true || true); //true
  console.log( true || false); // true
  console.log( false || false); //false
  console.log( false || true); //true

첫 번째 truthy를 찾는 OR 연산자 ‘||’

• truthy란? 자바스크립트에서 논리 타입이 아닌 값을 암묵적으로 참으로 평가한 값을 의미한다.

  result = value1 || value2 || value3;

• 가장 왼쪽 피연사자부터 시작해 오른쪽으로 나아가면 피연사자를 평가한다.
• 각 피연산자를 불린형으로 변환하고 변환한 값이 참(true)면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.

예시 2번째

let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

or을 사용하면 실제 값이 들어있는 변수를 찾고, 그 값을 보여줄 수 있다.

단락평가?

• or은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하는데, truthy를 만나면 나머지 값들은 건드리지 않은 채 평가를 멈춘다. 이런 프로세스를 '단락 평가'라고 한다. 예시를 들어

  true || alert("not printed");
  flase || alert("printed");

  단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰인다.

&&(and)

• AND 연산자는 연산자 왼쪽과 오른쪽의 값이 모두 참이면 참, 한 쪽이라도 거짓이면 거짓을 반환한다.

  console.log(true && true) // true
  console.log(true && false) // false
  console.log(false && true) // false
  console.log(false && false) // false

첫 번째 falsy를 찾는 AND 연산자 '&&'

• falsy란? 쉽게 말해 if문의 조건으로 넣었을때 false로 변환되는 겂을 의미한다.

  result = value1 || value2 || value3;

• 가장 왼쪽 피연사자부터 시작해 오른쪽으로 나아가면 피연사자를 평가한다.
• 각 피연산자를 불린형으로 변환하고 변환한 값이 거짓(false)이면 연산을 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.

!(not)

• 위의 두개에 비하면 아주 간단 연산자이다. result = !조건 끝이다. !(not)는 참은 거짓으로, 거짓은 참으로 바꾸는 연산자이다.

병합 연산자 '??'

• nullish 병합 연사자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다. 예를 들어 a ?? b라 하면 a가 null도 아니고 undefined도 아니면 a 그 외는 b이다.

  let firstName = null;
  let lastName = null;
  let nickName = "바이올렛";
  

// null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ?? nickName ?? "익명의 사용자"); // 바이올렛

#### '??'(병합 연산자)와 ||(or)의 차이?
* '||' 은 첫번째 truthy 값 반환
* '??'은 첫번쨰 정의된(defined) 값을 반환
--> null, undefinde, 숫자 0 을 구분해야할 때 위의 차이가 중요!
```javascript
let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

연산자 우선순위?

1순위 부터 우선 적용됨

(input)(select)처럼 사용자로부터 입력을 받는데 사용 되는 요소들이 있다. 여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성을 써보자

• 차이점 요소에 쓰여져 있는 텍스트에 접근한다:textContent 사용자가 직접 요소에 입력한 값에 접근하고 싶다:value

접근?

• 입력 요소의 value에 접근하여 할 수 있는 일은 크게 두 가지, 읽기와 쓰기다.

  //대상 요소의 사용자 입력값을 읽어 콘솔에 출력하자!
  console.log(target.value)
  //대상 요소의 사용자 입력값을 "변경값"으로 바꾸자!
  target.value = "변경값"

(Form)요소

여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽어들일 때는, 개별 입력 요소의 name 속성값을 토대로 입력값에 접근 할 수 있다.

```javascript

const form = document.querySelector("form") form.addEventListener("submit", function(e){ console.log (e.target.이름.value) console.log (e.target.별명.value) })

• 웹 프로그래밍에서 이벤트란, DOM에서 발생하는 다양한 액션 또는 상호작용 동작을 나타내는 프로그래밍 인터페이스이다. 예시
• 웹페이지 사용자가 버튼을 클릭(클릭 이벤트)
• 웹페이지 사용자가 키보드를 누름(키다운 이벤트)
• 입력 폼의 내용을 제출(제출 이벤트) 등

다양한 상황에 대한 통칭이 이벤트이다.

이벤트 핸들러?

이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라 한다.

addEventListener() 사용하자!

• onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 편하고 유용한 이벤트 처리 방법은, addEventLIstener 메소를 활용하는 것이다.
• 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.
• 같은 리스너(타겟)에 대해 다수의 핸들러를 등록할 수 있다.

이벤트 객체?

• 이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다. 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달 받을 수 있도록 해야한다.

  //click 이벤트가 발생하면 함수를 호출하겠다!
  target.addEventListener('click', function(){})
  

//click 이벤트가 발생하면 함수를 호출하겠다! //+ 이때 자동으로 전달 되는 이벤트 객체를 매개변수 event에 대입하겠다! target.addEventListener('click', function(event){}) ```

• '불러서 쓸 수 있는 코드 조각'이다. 변수를 선언하고 데이터를 대입하면 변수의 이름을 데이터(값) 대신 사용할 수 있는 것처럼, 함수를 선언하고 기능을 정의하면 함수의 이름을 코드 조각 대신 사용할 수 있다.

함수를 만드는 두 가지 방법

function 함수명(){    // 함수선언식
  // 함수의 기능을 표현한 문구
}
const 함수명 = function(){  //함수표현식
//함수의 기능을 표현한 구문
}

주의점

함수가 만들어지고 나면, 함수명은 스스로 보관하고 있는 구문 대신 사용될 수 있다. 그리고 함수가 사용되기 위해서는 함수를 '호출'해야만 한다.

const saytHello = fuction(){
  let number = 3 + 3
  console.log (number)
}

sayHello() //함수호출

• 함수를 호출할 때는 함수의 이름 뒤에 반드시 소괄호를 붙여줘야 한다!

함수에 데이터 전달

함수 호출문은 '함수명 + 소괄호'이다. 소괄호의 역할은, 함수가 실행될 때 사용할 재료를 전달받는 것이다. 재료란 데이터를 뜻하며, 이렇게 전달되는 데이터를 가르켜 '인수(argument)'라 한다!

인수를 전달할 수 있으려면

인수를 전달받아 기능을 수행하는 함수를 만들 때는, 함수 정의 시 '매개변수(parameter)'를 추가해야한다. 이느 ㄴ함수의 기능을 다양화하는 유용한 도구다.

원하는 만큼 사용 가능.

매개변수를 원하는 만큼 추가할 수 있고, 두개 이상일 경우 각각을 쉼표로 구분해주어야 한다.

함수의 값 반환

함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있다. 함수가 데이터를 반환한다는 것은, 함수 호출문이 데이터로 대체됨을 뜻한다 예로써

// 그냥 3을 출력
console.log(3)
//3을 반환하는 함수 호출문을 출력
console.log(getThree())

• 함수가 데이터를 반환하려면, '이 데이터를 반환한다'라는 구문을 함수 내부에 추가해 주어야 한다. 이 때 키워드 return이 사용된다.

  function getThree(){
  //이 함수를 호출하면, 호출문이 3을 반환할 것!
  return 3;

  return 키워드는 두 가지 기능을 가지고 있다. 데이터 반환, 그리고 함수 강제 종료!

if문의 기본 형태는 다음과 같다.

if(조건){
조건이 true일 때 실행할 코드
}

>예시
```javascript
let age = 16
if(age < 20){
console.log("미성년자입니다.)
}

변수 age의 갑싱 20보다 작다, 라는 조건이 true를 반환한다면? 콘솔 창에 "미성년자입니다"라고 출력이 된다.

else?

if는 조건의 참 거짓을 나타내는 것이고 else는 조건이 거짓일 때 추가 정의를 입력한다.

if(조건) {
조건이 true일 때 실행할 코드
} else {
조건이 false일 때 실행할 코드
}

→else를 추가한 if문을 if-else문이라고 부르기도 한다.
else문은 제한 없이 추가할 수 있다.

#### 'else if'로 복수 조건 처리하기
유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있다.
그 때 else if를 사용한다.
>```javascript
let year = prompt('년도');
if(year<2022){
aleart('숫자 올리기');
}else if(year > 2022){
alert('숫자 내리기');
}else{
alert('정답');
}

위 예시에서 if 조건인 year < 2022를 확인하고, 이 조건이 거짓이라면 다음 조건 year > 2022를 확인 후 이 조건 또한 거짓이라면 else절 내의 alert를 실행한다.

조건부 연산자 '?'(삼향 연산 Ternary operator)

가끔 코드를 짤 때, 조건에 따라 변수에 값을 할당해야 할 때가 있다.

let accessAllowed;
let age = prompt('몇 살?', '');
if (age > 18) {
  accessAllowed = true;
} else {
  accessAllowed = false;
}
alert(accessAllowed); 

위에서와 같이 나이가 18세 이상인 경우에 true를 반환하고 아니면 false를 accessAllowed라는 변수에 값을 할당 해야 할 때가 있다. 이 if~else 구문을 좀 더 간단하고 짧은 방식으로 사용하는 것을 "ternary(삼항)", 또는 "question mark(물음표)"라고 한다.

예시

let result = condition ? value1 : value2;

위의 구문에서 condition은 true나 false를 결과값으로 반환되어야할 구문이며, 이 condition이 true이면 value1을, false이면 value2를 리턴한다. 그래서.. 아까 위의 예시를 삼항연산으로 표현하자면

let accessAllowed = (age > 18) ? true : false;

이렇게 표현할 수 있다. 그리고 age > 18의 괄호 부분을 제외해도 상관없다. 그 이유는 상항연산 ?는 낮은 우선 순위에 있기 때문에 비교 연산자인 >가 먼저 실행되고 그 후에 삼항 연산 ?가 실행된다.

#### 다중 삼항연산 '?'
물음표 연산자 ?를 연속으로 사용하면 하나 이상의 조건에 따라 값을 리턴할 수 있다.
>```javascript
let age = prompt('age?', 18); 
let message = (age < 3) ? "Hi, Baby!" :
              (age < 18) ? "Hello!"   :
              (age < 100) ? "hi!" :
              "What?";
alert(message);

이러한 문제를

1. 처음 삼항 연산은 prompt에서 받은 age가 3살 보다 작은지 큰지 비교한다.

2. 만약 true이면 "Hi, Baby!"라는 alert창을 띄우고, 아니면 콜론( : ) 다음의 연산인 age가 18보다 작은지 큰지를 비교한다.

3. 만약 비교 결과가 true면 "Hello!"를 반환하고 아니면 다음 콜론( : )의 연산인 age가 100보다 작은지 큰지를 비교한다.

4. 만약 비교 결과가 true면 "hi!"를 반환하고 아니면 마지막 콜론 ( : ) 뒤의 "What?"를 반환한다.

부적절한 '?'

가끔 ?연산자는 if를 대체하여 사용하기도 하는데 이런 식으로 물음표 연산자를 사용하는 것은 좋지 않다. 코드 길이가 짧아지긴 하지만 가독성이 좋지 않다.

반복문

비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문이고 대표적으로 for문과 while문이 있다.

for문

구문 작성시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 직관적으로 반복 횟수를 표현할 수 있는 구문이다.

for(초기식; 조건식; 반복식){ 조건이 true인 경우 반복 수행할 코드 }

→초기식: 반복 조건의 초기화 작업 →반복식: 반복이 한 번 끝날 때마다 실행될 작업

예시

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

while문

'주어진 조건이 참일 동안에 구문을 반복하는' 반복문이다.

while(조건){ 조건이 true인 동안에 반복 수행할 코드 }

→조건이란 불리언을 반환하거나 불리언으로 해석될 수 있는 표현식! →반복 구문은 '루프'라고도 한다.

예시

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

i가 1이고 i가 5보다 작거나 같을 때까지 반복한다.

do...while 반복문

do {
  // 조건식 계산 전 실행
  [명령문]
} while([조건식]) //조건식이 거짓이면 반복문 탈출
// 예시
let sum = 0; var i = 1;
do {
  sum = sum + i;
  i = i + 1;
} while(i < 10) //sum에는 1부터 10까지의 합이 저장된다.

do while문은 while문과 달리 while 문은 표현식의 참/거짓에 따라 명령을 실행하거나 하지 않지만, do while문은 do 부분의 명령을 무조건 한 번은 실행 하고 while문 표현식의 참/거짓을 검사한다는 것이다.

let a = 10;
let b = 5;
console.log(a > b);   // true
console.log(a < b);   // false
console.log(a == b);  // false
console.log(a != b);  // true
console.log(a === b); // false
console.log(a !== b); // true
console.log(a >= b);  // true
console.log(a <= b);  // false   
console.log(5 == "5");  // true (타입이 달라도 값이 같으므로 true)
console.log(5 === "5"); // false (타입이 다르므로 false)```

* ==(동등연산자)는 '추상적(abstract) 같음 비교'로써 자료형이 서로 다르더라도 같다고 판단할 수 있고 ===(일치연산자)는 '엄격한(strict)같음 비교'로써, 자료형과 데이터가 모두 일치해야만 같다고 판단한다. 
* ==(동등연산자) 와 !=(부등 연산자) 연산자는 타입을 고려하지 않고 값만 비교합니다. 엄격한 비교를 위해서는 === 와 !== 를 사용하는 것이 좋다.
* ==(동등연산자) 와 !=(부등 연산자)는 타입을 비교하지 않기 때문에 원하는 결과 값을 반환 하지 못하는 경우가 생기기도 한다. 그렇기 때문에 값과 타입을 모두 비교하는 ===(일치연산자)와 !==(불일치 연산자)를 이용하여 값을 비교하는 것을 추천한다.

#### 불린형 반환
다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환한다. 반환 값은 불린형이다.
true가 반환되면, ‘긍정’, ‘참’, '사실’을 의미한다.
false가 반환되면, ‘부정’, ‘거짓’, '사실이 아님’을 의미한다.  

반환된 불린값은 다른 여타 값처럼 변수에 할당 할 수 있다.
예시:
```javascript
let result = 5> 4; - 비교 결과를 변수에 할당
  alert(result); - true

문자열간의 비교

JavaScript의 문자열값은 '사전'순(Alphabetically)으로 비교한다. '사전편집(lexciographical)'순이라고도 불린다. 이 순서 비교의 기준은 사전 뒤쪽의 문자열이 사전 앞쪽의 문자열보다 크다고 판단한다. (정확히는 사전 순이 아니라 utf-16 순이다. 자바스크립트는 대 소문자를 따지기 때문에 대문자 A와 소문자 a를 비교 했을 때 소문자 a가 더 크다.) 비교 연산자를 사용해서 문자열간의 크기를 비교할 수 있다. 알파벳 순서에 따라서 크기가 결정되고, 소문자는 대문자보다 크며 z는 a보다 크다. 다만 문자열간을 비교할 때, 규칙에서 벗어나는 예외 상황이 있다.

• utf-16이란? 자바스크립트 문자열의 표현 방식 중 하나로 흔히 볼 수 있는 문자열 인코딩 방식이다. 우리가 사용하는 문자를 비트(bits)로 나타낸 것이다.

예시

  alert( 'a' > 'Z' );    // true, 소문자는 대문자보다 크다.
alert( 'Österreich' > 'Zealand' );    // true

// true, 발음 구별 기호가 붙은 문자는 알파벳 순서 기준을 따르지 않음 // 발음 구별 기호가 아닌 일반 O 였다면, false가 나왓을 것

다른 형을 가진 값 간의 비교

비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꾼다.

예시

  console.log('2' > 1); //true; 문자열 2('2')가 숫자 2로 변환된 후 비교
  console.log('01' = 1); //true; 문자열 '01'이 숫자 1로 변환된 후 비교
  __boolean값의 경우 true는 1, false는 0으로 변환된 후 비교가 이루어집니다.__
  console.log(true == 1); // true
console.log(false == 0); // true

예시2

  let a = 0;
console.log(Boolean(a));    // false
let b = "0";
console.log(Boolean(b));    // true; 문자열의 값은 Boolean형으로 1
console.log(a == b);         // true;

이런값이 나타나는 이유는 ==(동등 비교 연산자; equality operator)는 값의 형을 b의 문자열 "0"을 숫자 0으로 변환하여 비교하게 된다. ==은 유형변환 비교를 하기 때문에 비교하는 두 값을 비교한다.

일치 연산자

  동등 연산자(equality operator) ==은 0과 false를 구별하지 못한다.

예시

  console.log(0 == false);     // true
console.log(' ' == false);    // true

동등 연산자(==)가 형이 다른 피연산자를 비교할 때 피연산자를 숫자형으로 바꾸기 때문에 발생한다.(빈문자열' ',false는 숫자형으로 변환하면 0 이다.) 그렇다면 0과 false를 구별할 수 있는 방법은 일치 연산자(strict equality operator) ===를 사용하면 형 변환 없이 값을 비교하고 구별할 수 있다.

예시

  alert( 0 === false ); // false, 피연산자의 형이 다르기 때문이다.

null과 undefined 비교

  일치 연산자(===)를 사용하여 null과 undefined를 비교   두 값의 자료형의 값이 다르기 때문에 거짓(false)가 반환된다.

예시 console.log(null === undefined); // false    

동등 연산자(==)를 사용하여 null과 undefined를 비교

  둘을 동등 연산하게 되면 true가 반환된다. 둘다 '없다'라는 값 자체로서 비교하게 되면 결국 같은 것이다.

예시

javascript console.log(null == undefined); // true   산술 연산자나 기타 비교 연산자 <, >, <=, >=를 사용하여 null과 undefined를 비교하면   null과 undefined는 숫자형으로 변환한다. null은 0, undefined는 NaN(Not a Number)으로 변환된다.      

null vs 0

  null과 0을 비교

예시

javascript console.log(null > 0); // false console.log(null == 0); // false console.log(null >= 0); // true 기타 비교 연산자(>, <, >=, <=)를 사용하게되면 null은 0으로서 비교된다.         비교가 불가능한 undefined   undefined를 다른 값과 비교해서는 안 된다.

예시

javascript console.log(undefined > 0); // false console.log(undefined < 0); // false console.log(undefined == 0); // false
  - 1, 2번 줄은 undefined가 NaN으로 변환되어 다른 값과 비교 연산할 경우 항상 false를 반환한다.    - 3번 줄에서 undefined는 null과 같다. 그리고 그 이외의 값과는 같지 않기 때문에 false를 반환한다.

메소드는 지정된 이름의 HTML 요소를 만들어 반환한다. 즉, 내가 작성한 HTML에 존재하지 않는 태그를 뒤늦게 만들어서 추가할 수 있게 도와주는 메소드이다.

document.crateElement('div')
document.crateElement('p')
document.crateElement('a')

crateElement는 만드는 역할만 할뿐이지 웹 브라우저 화면에 추가되는 것은 아니다!

appendChild()

appendChild 메소드는 DOM 내 개별요소에 자식 요소를 추가할 때 사용하는 메소드이다.

기본적으로 target,appendChild(자식으로 추가할 요소) 예시 const p = document.crateElement("p") document.body.appendChild(p)

append()

타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재한다.

• append(내용만 가지고도 추가 가능)를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체(html 요소만 추가 가능)만을 추가할 수 있다.
• append child의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없다.

자바스크립트는 주어진 두 항을 비교할 수 있는 '비교 연산자'를 제공한다. (대소 비교),(등가 비교) → 무언갈 비교하는 작업 또한 '연산'의 일종이다.

비교 연산의 특징

비교 연산식은 언제나 boolean 데이터를 반환한다.(true, false)

완전히 같다?

등가 비교를 할 때, 등호의 개수에 따라 비교 규칙에 차이가 있다. ==는 '추상적(abstract)같음 비교'로써, 자료형이 서로 다르더라도 같다고 판단할 수 있는 비교이다. ==='엄격한(strict) 같음 비교'로써, 자료형과 데이터가 모두 일치해야만 같다고 판단한다.

조건문

주어진 조건의 참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문을 뜻한다. 불리언 데이터를 반환하거나 불리언 데이터로 해석할 수 있는 표현식을 의미한다.

EX) 게임 캐릭터의 HP가 0입니까? → true일 경우 캐릭터는 죽는다 지하철 요금을 낼 만큼의 돈이 있습니까? → true일 경우 지하철을 탈 수 있다.

조건문의 시작은 if

if문의 기본 형태는 다음과 같다.

if(조건){
조건이 true일 때 실행할 코드
}

예시

let age = 16
if(ㅁㅎㄷ < 20){
console.log("미성년자입니다.)
}

변수 age의 갑싱 20보다 작다, 라는 조건이 true를 반환한다면? 콘손 창에 "미성년자입니다"라고 출력하자! 아님 말고!

else?

if는 조건의 참 거짓을 나타내는 것이고 else는 조건이 거짓일 때 추가 정의를 입력한다.

if(조건) {
조건이 true일 때 실행할 코드
} else {
조건이 false일 때 실행할 코드
}

→else를 추가한 if문을 if-else문이라고 부르기도 한다. else문은 제한 없이 추가할 수 있다.

반복문

비슷하거나 동일한 구문을 반복해서 수행할 수 있는 구문이고 대표적으로 for문과 while문이 있다.

for문

구문 작성시 반복을 위해 필요한 세 가지 요소를 한 곳에 모아 작성함으로써 직관적으로 반복 횟수를 표현할 수 있는 구문이다.

for(초기식; 조건식; 반복식){
조건이 true인 경우 반복 수행할 코드
}

→초기식: 반복 조건의 초기화 작업 →반복식: 반복이 한 번 끝날 때마다 실행될 작업

while문

'주어진 조건이 참일 동안에 구문을 반복하는' 반복문이다.

while(조건){
조건이 true인 동안에 반복 수행할 코드
}

→조건이란 불리언을 반환하거나 불리언으로 해석될 수 있는 표현식! →반복 구문은 '루프'라고도 한다.

예시)

while(prompt("set number") != 0{
document.write("get number!<br>")
}

prompt()메소드를 이용하여 사용자로부터 정보를 입력 받고 주어진 정보가 0이 아닐 때는 document.write() 명령을 수행하고, 0일 때는 작업을 종료한다는 말이다.