Ch 9. JS 선행

🎯이번 챕터는

스타벅스 예제를 들어가기에 앞서 필요한 JS기술들을 

미리 공부해보는 시간이었다.

아직은 헷갈리는 것도 많고 어렵지만 나로서는 HTML,CSS보다 이부분이 

더 마음에는 편한것같다.

---

⭕01. 개요

📌강의 정리

• 스타벅스예제 만들기전에 자바스크립트 선행 학습을 할것이다.
• 예제를 만들수 있는 수준으로 선행학습을 하고 후에 예제하고 본격적으로 배울것
• TEST라는 빈폴더를 vscode로 열어준다.
• index.html을 !로 자동완성만들어준다. en을 ko로바꿔준다.
• main.js라는 파일을 만들고 console.log(’HEROPY’)를 해준다.
• 이제 head요소에서 script로 main.js를 연결해준다.
• 이제 표기법을 배워보자.
• dash-case(kebab-case) 는 the-quick-brown-fox-jumps-over-the-lazy-dog같이 -를 사용해서 표기하고 꼬챙이에 꼬인것같아 먹는 케밥을 따서 케밥케이스라 한다.
• html과 css에서는 컴퓨터가 이 문장을 한단어로 인식하지만 우리는 단어단어로 구분해서 읽을수있다. html과 css에서 주로 사용한다.
• snake_case는 the_quick_brown_fox...같이 _언더바를 통해서 우리는 구분하고 html과 css에서 주로 사용되며 한단어로 인식한다.
• camelCase 는 theQuickBrownFoxJumps...같이 단어의 처음만 대문자로 적어주는데 단어가 낙타처럼 뛰어오르게 되게 이런 표기법은 JS에서 많이 쓰인다.
• PascalCase는 TheQuickBrownFoxJumps...같이 단어의 맨 앞도 대문자로 한다. new라는 생성자를 쓸때 이런 표기법을 쓴다. JS에서 많이 쓴다. camelcase보다는 덜쓰인다.
• Zero-based Numbering 은 0기반 번호 매기기이다.
• 특수한 경우를 제외하고 0부터 숫자를 시작한다.
• let fruits = ['Apple', 'Banana', 'cherry']; //let은 키워드이다. console.log(fruits[0]); //이면 'Apple가 출력된다. //왜냐면 0부터 숫자를 사용하기 때문이다. console.log(new Date('2021_01-30').getDay()); //new라는 키워드로 함수를 실행하고 getDay라는 //메소드를 통해 2021-01-30은 토요일이지만 //6이 나온다. //0은 일요일, 6은 토요일이다. //일월화수목금토, 0123456
• //은 한 줄 메모이다.
• /* */ 는 영역을 지정해서 주석처리 할 수 있다.
• 주석보다는 컨트롤 /를 해주면 단축키로 주석을 사용할 수 있다.

 

📌느낀점

드디어 JS를 시작한다.

예제에 앞선 선행이지만 잘 배우고 싶다.

이번엔 기초인 표기법과 주석을 배웠다.

처음부터 잘 시작할 것이다.

---

⭕02. 데이터 종류

📌강의 정리

• 데이터 종류는 자료형이라고 한다.
• 스트링 넘버 불리언 같은것들이 있다.
• JS는 모든것들이 데이터로 이루어져 있다.
• JS로 제어하는 것들이 다 데이터로 다루는 것이다.
• 데이터로 사고하며 학습해야 한다.
• 스트링은 String(문자데이터)
• 따옴표를 사용한다.

let myName = "HEROPY" //"여기" 따옴표내부가
//문자데이터이다.
let hello = `Hello ${myName}?!`
//'`'백틱,그레이브기호는 보간법이라는 방식을 제공한다.
//내용이 들어가게 하고 싶을때
//중괄호로 묶고 $표시를 앞에 해주면
//추가로 무언가를 넣어준다는 뜻이다.
//여기서는 앞에서 선언한 myName이 들어간다.
//밑에서의 결과로 확인할 수 있다.

console.log(myName); //HEROPY
console.log(hello); //Hello HEROPY?!

• “, ‘, ` 같이 총 3개로 문자데이터를 표현할 수 있으며 그레이브는 보간법을 쓸 수 있다.
• let number = 123;
• console.log(number); //123이 나온다.
• let opacity = 1.57;
• console.log(opacity); //1.57이 나온다.
• ‘, “, `이 없으면 숫자데이터이다.
• boolean불린 데이터는 true, false 두 가지 값밖에 없는 논리데이터이다.
• let checked = true;
• console.log(checked); //true이다.
• 자바스크립트의 데이터는 언제 어디서든 무궁무진하게 활용될 수 있다.
• Undefined는 값이 할당되지 않은 상태를 나타낸다.
• let undef; let obj = {abc: 123}; console.log(undef); //undefined console.log(obj.abc); //123 console.log(obj.xyz); //undefined
• 두번째의 obj.abc는 obj내부의 abc가 무슨값인지를 묻는것이다.
• Null이라는 데이터가 있다.
• 어떤값이 의도적으로 비어있음을 의미한다.
• Null이 언디파인드와 다른점은 Null은 의도적으로 비어있음을 명시적으로 나타내는 것이다. 공집합같은 느낌.
• let empty = null;
• console.log(empty); //null
• Object(객체 데이터)
• 여러데이터를 Key:Value 형태로 저장한다. {}

let user = {
//key: value,
name: 'Heropy',
age: 85,
isValid: true
};

• 이런 데이터들을 user라는 변수에 한번에 묶어서 표현하는 방식이다.

console.log(user.name); //Heropy

• 같은 방식으로 .을 통해 객체데이터를 출력할 수 있다.
• Array라는 배열데이터가 있다.
• 여러데이터를 순차적으로 저장한다. []
• let fruits = [’Apple’, Banana‘, ‘Cherry’];
• console.log(fruits[0]); // ‘Apple’
• [ ]를 사용해서 출력한다는 점에 유의해야한다.
• myName이라는 변수를 선언할때는 let이라는 키워드를 붙여준다.
• 마지막에 ;을 안붙여도 자체적으로 있는것으로 해석하지만 붙이는게 좋다.
• 명령이 끝날때 ;를 붙이자.
• 백틱기호를 사용할때는 다른 문자를 보간해서 넣어줄 수 있다.
• 이때는 ${}를 통해 보간해주자.
• 보간은 숫자데이터와 문자데이터, 불린데이터, 위에서 선언한 변수도 문자로 추가해서 넣을 수 있다.
• 보간은 백틱기호라는 점을 잘생각하자.
• user는 객체데이터로 만들건데 {}를 써야한다.
• {}사이에 name이라는 키가 있고 ‘HEROPY’라는 문자를 밸류로 해줄 수 있다.
• 이를 객체데이터로 할 수 있다.
• 출력할때는 user.name으로 해주면 그 객체의 특정 키밸류만 출력할 수 있고 user를 출력하면 그 객체의 내용이 다 나온다.

 

📌느낀점

데이터는 잘 알고 있는 내용이었지만

다시 들으면서 인상깊었던것은 역시

undefined와 null 그리고 객체데이터 였다.

3개 다 알고리즘할때는 크게 잘 사용하지 않았기 때문이기도 한데 앞으로는 종종 잘 써야겠다는 생각이 들었다.

분명 편리할것이다.

---

⭕03. 변수, 예약어

📌강의 정리

• 변수는 데이터를 저장하고, 참조(사용)하는 데이터의 이름이다.
• var, let, const이다. 최근의 자바스크립트에서는 var를 안사용하는것이 좋다.
• let은 재사용이 가능하다.
• let으로 a와b를 만들면 콘솔로그를 통해서 사칙연산후 결과를 출력할 수 있다.
• let이라는 키워드를 이용해서 a라는 변수를 선언하고 12를 넣어준다. 이후 a를 출력할 수 있지만
• a = 999;를 다시 선언해서 값의 재할당이 가능하다.
• 출력하면 999가 출력된다.
• 하지만 const를 이용해서 a를 선언하면 이후에 재할당이 불가능하다.
• 타입에러 어사인먼트 투 콘스탄트 베리어블이라는 에러 코드가 뜬다.
• 거의 대부분의 경우에는 const를 사용하고 다시 재할당해야할때만 let으로 바꿔서 쓴다.
• 열린 상태는 무언가 낭비가 있을 수 있기 때문에 닫힌상태로 하는 편이다.
• 예약어는 특별한 의미를 가지고 있어, 변수나 함수이름 등으로 사용할 수 없는 단어를 뜻한다.
• this라는 단어는 변수명으로 쓰지못한다. 신텍스에러가 뜨는데 이는 이미 자바스크립트에서 this가 다른의미로 씌이기 때문이다.
• if와 break 또한 마찬가지이다.
• 예약어는 상당히 많다 그래서 외우기 힘들다. 따라서 자주 쓰는것만 자연스럽게 외우고 나머지는 신텍스에러가 뜰 시 바꿔주는것이 좋다.

 

📌느낀점

변수와 예약어에 대해 배웠다.

알고있는 내용이라 개념이 더 단단해지는 느낌이다.

---

⭕04. 함수

📌강의 정리

• 함수는 특정 동작(기능)을 수행하는 일부 코드의 집합(부분)이다. function
• function helloFunc()으로 함수를 선언해준다.
• 이후 {}로 함수의 명령들을 적어준다.
• 함수를 선언할때는 function적고 이름적고 (){}해주고 {}에는 실행코드를 적어준다.
• 이후에는 함수호출할때는 함수의 이름과()를 적어준다.
• helloFunc()하면 실행코드가 실행된다.
• 함수는 특정값을 반환할 수 있다.
• function returnFunc(){return 123;}으로 하면 123은
• let a = returnFunc();를 하면 a = 123 이 된다.
• return이라는 키워드를 통해서 함수 내부에서 특정값을 내보내기 할 수 있고 이 값을 사용할 수 있다.
• function sum(a, b){return a+b;}일때 a와b는 매개변수이다.
• sum이라는 함수를 정의했다. 이때 이 sum이라는 함수를 실행할때 데이터들을 넣을 수 있는데 이때 이 데이터를 받아주는 변수를 매개체라 하여 매개변수라 한다.
• a라는 변수는 sum(1, 2)를 했으므로 3을 갖게 되고 이때의 1,2를 인수라고 한다.
• 매개변수는 파라미터, 인수는 알규먼트라 한다.
• 우리가 배운 모든데이터들은 인수로 줄 수 있다.
• 인수와 매개변수가 헷갈릴 수 있지만 잘 구분해야한다.
• function hello(){console.log...}는 이미 함수의 이름이 있으므로 기명(이름이 있는)함수이다.
• let world = function(){...}이면 익명(이름이 없는) 함수라고 한다.
• 이런 함수들은 함수를 표현한다고 한다.
• 호이스팅이라는 개념에서 중요하게 사용되므로 추가적인 설명을 기다려보자.
• 이 둘은 나중에 다시 함수 호출을 할때
• hello(); 와 world();둘 다 호출이 된다.
• const heropy = {name: ‘HEROPY’, age: 85, getName: funcntion(){return this.name;}}이면 객체 데이터 내부에서 하나의 속성부분에 함수데이터를 할당하는 것을 메소드라고 한다.
• 이때의 함수는 함수가 표현되어있다.
• 함수라는 데이터가 설정되어있더라.
• this.name이 반환되는데 this라는 키워드와 .표기법으로 네임을 반환한다.
• this는 이 객체데이터를 의미한다. 즉 이 heropy라는 객체데이터내의 name을 반환한다.
• 익명함수를 반환한다. 꼭 변수에 할당해야하는것은 아니다.
• 변수의 이름을 따로 하지말고 바로 출력할 수도 있다.
• 함수를 데이터처럼 활용할 수 있다.
• 함수가 객체데이터에 속할때 메소드라고 부른다.

 

📌느낀점

이번파트에서 제일 어려우면서 제일 중요한 부분이지 않았나 싶다.

우선 함수를 선언하는것 말고 표현한다는 개념과 그것에 맞춰 나오는 호이스팅...

호이스팅은 정말 꼭 제대로 배우고 싶다.

그리고 모든것을 데이터로 표현하기에 객체데이터 내부의 함수를 매소드라하며 이때 함수는 익명함수로 표현되어진다는 점이 상당히 인상깊었다.

물론 나중에 또 계속 나오겠지만 이번내용은 특히 더 잘 기억해 놔야 겠다.

---

⭕05. 조건문

📌강의 정리

• 조건문은 조건의 결과(truthly, falsy)에 따라 다른 코드를 실행하는 구문이다.
• 변수를 두개 선언한다. isShow와 checked를
• 하나는 true 다른 하나는 false이다.
• if라는 조건문을 사용할때 if(isShow){...}을 할때 ()안에 isShow가 true이므로 {...}이 실행된다.
• 다음으로는 isShow가 트루인데 if문과 else문을 해줄 수 있다.
• 이때 if문 이후의 조건이 true이면 if문이 실행되고 조건이 트루가 아니라면 else이후의{...}이 출력된다.

 

📌느낀점

조건문이다.

else if문은 안했다.

다음에 좀 더 많이 배울건가 보다.

---

⭕06. DOM API (1)

📌강의 정리

• Document Object Model, Application Programming Interface,이다. div span등등을 도큐먼트라고 한다.
• 우리의 웹사이트가 동작하기 위해 필요한 명령들이다.
• 돔은 html구조들을 의미한다.
• 즉 html구조들을 제어하는 명령들을 의미한다.
• html에서 box클래스에 box라고 내용을 적어준다.
• 이후 main.js에서 let boxEl = document.querySelector(’.box’);
• 이면 ‘’는 문자인데 여기에 클래스선택자인 .box를 적어주었다.
• 이러면 html요소인 box를 도큐먼트로제어해서 boxEl에 넣어주겠다라는 뜻이다.
• 하지만 null이 뜬다. 정상적으로 동작하려면
• body에 script문을 넣어줘야 한다.
• 이럴때 이제 헤드에 script 넣어주고 중간에 defer를 넣어줘야한다.
• 스크립트 태그는 head에 있다.
• 브라우저는 위에서 아래로 읽는다. 스크립트를 읽을때 밑에 내용을 읽지 않았기에 박스클래스가 무엇인지 모른다 그래서 찾지 못하고 null값이 출력되는것이다.
• 따라서 해결 첫번째 방법은 스크립트문을 바디태그의 제일 밑에 넣어주는것이다.
• 두번째 방법은 스크립트문을 head에 넣기 위해 (구조상 정의를 위해) 스크립트태그내에 defer라는 속성을 넣어주어 모든 내용을 다읽고 다시 여기로 오게 할 수 있다.

//HTML 요소 (Element) 1개 검색/찾기
const boxEl = document.querySelector('.box');

• 도큐먼트라는 객체 내부에는 쿼리셀렉터라는 메소드가 정의되어 있다. 이 메소드를 사용하면 인수로 html의 클래스선택자를 받을 수 있다.
• 이 방법은 1개만 검색/찾기 한다.
• document는 이미 브라우저에서 정의되어있는 객체데이터이다.
• 애드이벤트리스너는 클릭했을때 무언가를 하겠다라는 의미로 코드를 짤 수 있다.
• 또한 애드이벤트리스너로 클릭했을때 익명함수를 실행시킬수 있다.
• 이런 익명의 함수를 핸들러라고 한다.
• 이 내용들을 알고 있으면 할 수 있는게 많다.
• boxEl.애드이벤트리스터를 해주면 인수를 두 개 받을 수 있다.
• 첫번째는 이벤트를 받는데 우선 클릭이라는 이벤트를 받고 두번쨰는 익명의 함수를 받아보자.
• 이는 boxEl이라는 변수를 계속 확인하고 있다가 이후 클릭이라는 이벤트가 발생하면 함수가 실행되면서 콘솔창에서 click!!!이라는 로그가 출력된다.
• 이후 브라우저에서 클릭!!를 클릭하면 콘솔창에 중복해서 출력된다.
• 도큐먼트라는 객체데이터 이후 쿼리셀렉터라는 메소드를 써서 .box라는 요소를 받아준다.
• boxEl 클래스 정보 객체 활용하자.
• boxEl.classList.add(’active’)는 애드이벤트리스너처럼 돔에이피아이처럼 써보자.
• add라는 매소드를 쓰는데 이때 액티브를 문자데이터로 추가하겠다라는 명령이다.
• active라는 클래스가 있는지 트루펄스로 출력해준다.
• 클래스리스트에 메소드 리무브라는 메소드가 있다.

 

📌느낀점

와...함수가 어려운줄 알았는데 이건 진짜 처음 보는 개념이었다.

dom api가 이해는 되는데 거의 써본적이 없어서 익숙하지 않아 많이 헷갈리는것 같다.

다행이도 이해는 잘되니 앞으로 꾸준히 잘 써서 익숙해지는것이 무엇보다 중요한것같다.

---

⭕07. DOM API (2)

📌강의 정리

• 애드이벤트리스너라는 돔에피아이가 있었다.
• 박스이엘에 클래스리스트라는 객체에 액티브라는 클래스를 추가할 수 있다.
• 콘솔창에 로그를 출력할 것이다.
• 컨테인이라는 메소드를 통해서 액티브라는 클래스가 있는지 확인하겠다 라는 뜻이다.
• remove라는 메소드로 액티브를 제거해주고 이후
• 클래스리스트의 컨테인으로 다시액티브가 있는지 확인하면 폴스가 뜬다.
• boxEls에 도큐먼트의 쿼리셀렉터올로 .box에 해당하는 모든 요소를 찾아서 검색한다.
• boxEls는 복수형태로 유사배열이라고 하지만 그냥 배열로 생각해도 괜찮다.
• 찾은 요소들 반복해서 함수를 실행한다.
• 익명 함수를 인수로 추가한다!
• 첫번째 매개변수는 반복적인 요소이다.boxEl
• 두번째 매개변수는 반복적인 번호를 의미한다.index
• forEach 를 배워보자.
• index를 보간을 이용해서 1씩 더해서 출력해볼것이다.
• 박스라는 클래스를 갖는 요소가 내용 1234로 4개 생겼다.
• boxEls.forEach()는 쿼리셀렉터올로 다찾았을때 쓸 수 있다.
• 익명의 함수내에서는 할 수 있는게 딱히 없다.
• 익명의 함수의 매개변수로는 boxEl, index를 해줄 수 있다.
• 이런 방식은 boxEl에 클래스리스트로 더할것이다.백틱을 이용해서 order-${index};를 해주면 html에 클래스가 시작된다.
• 여기서 index+1을 해주면 클래스가 1씩 증가하며 추가되게 된다.
• 자바스크립트는 html,혹은 css를 제어해서 출력하지만 기본적으로 데이터를 다루기 때문에 숫자데이터,문자데이터들에 대해서는 숙달이 되어야 한다.
• 이런 모양은 객체, 불린, 문자 같은것을 구별할 수 있어야 한다.
• textContent는 값을 얻는 용도 이고 Getter로 부르기도 한다.
• 또한 textContent는 값을 지정하는 용도로 Setter라고 하기도 한다.
• html에서 아까의 박스 4개를 봐보자.
• 텍스르로만 이루어진 클래스에 텍스트 컨텐츠에다가 맨처음의 내용을 추출해서 출력할 수 있다.
• textContent 를 한다. 지정된 값이 출력되는것을 볼 수 있다.
• 텍스트 컨텐츠를 통해서 html의 내용을 변경할 수 있다.
• 돔에피아이는 더 많지만 스타벅스예제에 필요한것만 이정도 배웠다.

📌느낀점

DOM API 두번째 시간이었는데 역시 쉽지는 않았지만 두번째라 그런지 조금은 더 익숙해진 것 같다.

html의 내용들을 JS로 어떻게 다루어야 할지 이제야 감이 잡히는 느낌이고 아주 조금 프로젝트의 문을 여는 느낌이다.

재밌는것을 많이 할 수 있을 것 같다.

---

⭕08. 메소드 체이닝

📌강의 정리

• 메소드 체이닝에 대해 배워보자.
• const a = ‘Hello~’를 해놨다.
• const b = a.split(’’).reverse().join(’’); //메소드 체이닝...
• 이런 방식을 메소드 체이닝이라고 한다.
• b는 ~olleH라고 출력된다.
• 우리가 쓰는 메소드들은 붙여서 쓸 수 있다.
• 스플릿은 인수 기준으로 쪼개서 배열로 반환한다.
• 리버스는 배열을 뒤집는다.
• 조인은 배열을 인수 기준으로 문자로 병합해 반환한다.
• 이 과정들이 위에서 진행됐고 그래서 합쳐져 길어지지않게 깔끔한코드로 해당기능을 사용할 수 있다

 

📌느낀점

그동안 JS알고리즘 시간에 단골로 사용했던 방식의 이름을 알게 되었다.

메소드 체이닝이라는 이름이 있는 줄도 몰랐는데

알고나니 좀 더 저 코드작성 방식이 익숙해지는 느낌이다.

---

⭕09. 질의응답

📌강의 정리

• The quick brown fox ⇒ theQuickBrownFox 로 바꾸면 카멜케이스이다.
• 컴에게는 하나의 단어 우리에게는 여러개 단어이다.
• console.log(fruits[1]);을 하면 Banana가 출력된다.
• 불린데이터에서 거짓을 의미하는 데이터는 false이다.
• 값이 의도적으로 비어있음을 의미하는 데이터는? ⇒ null
• 위 데이터의 종류는? {} ⇒ 객체데이터
• undefined이다. obj의 객체데이터의 키가 abc인데 출력은 obj.xyz를 출력하려 시도하기 때문에
• 값을 재할당 할 수 없는 키워드는 const이다.
• 값을 반환하기위 사용하는 키워드는 ⇒ return
• sum(2, 4); 위 함수 호출에서 2, 4를 무엇이라 하는가?⇒인수이다. 인수는 데이터이다.
• 함수호출에서 전달받은 인수를 함수 내부로 전달하기 위한 변수를 무엇이라하는가?⇒ 매개변수
• 이름이없는 함수는? ⇒ 익명함수 JS는익명함수를 많이쓴다.
• hello이름의 함수 표현은? 호출은?
• const hello = function(){};
• hello();
• 함수가 할당된 객체 데이터의 속성을 무엇이라 하는가? ⇒메소드
• 메소드는 하나의 함수이다.
• 조건이 참인 조건문은? ⇒ if(true){}
• 가져온 JS파일을 HTML 문서 분석 이후에 실행되도록 하는 속성은? ⇒ defer
• 콘스트 박스이엘 = 도큐먼트.쿼리셀렉터(’.박스’);
• 콘솔로그(박스이엘.텍스트컨텐트);
• 텍스트컨텐츠로 확인할 수 있다.
• 재할당할 목적의 변수 선언 키워드는? ⇒ let
• 클릭 이벤트 추가해 hello콘솔출력하려면? ⇒ 박스이엘.애드이벤트리스너(클릭,펑션(){콘솔로그(헬로)})
• div요소에 JS로 hello클래스 추가하려면?
• divEls를 만들어서 쿼리셀렉터올로 div다 찾아주고 divEls.forEach펀션divEl로 divEl.classListadd(’hello’);이다.
• 디아이브이를 반복적실행할때 헬로를 추가하는 코드를 짜준다.
• JS는 반복하고 반복에서 처리하는 과정을 대부분 갖는다.
• 메소드 이어 작성하는 방법은? ⇒ 메소드체이닝
• 우선 boxEl에 박스클래스가 있는것을 박스이엘에 넣었다.
• if(박스이엘.클래스리스트.컨테인(액티브)){콘솔로그포함됨}을 해주면 트루인지 폴스인지로 출력을 제어할 수 있다.

📌느낀점

이번에는 지금까지 배운 JS에 대해 질문과 답을 받는 시간이었다.

확실히 DOM API를 제외하면 다 맞췄지만

DOM API는 맞는것도 있고 틀린것도 있었다.

이번 스타벅스 예제를 하며 익숙해지게 노력해야겠다.