-------
개발 블로그를 티스토리로 옮기며 기존의 네이버 블로그에 작성한 내용을 옮겼습니다.
https://blog.naver.com/0yeonjae2/222353308854
-------
이론 복습하기-최신 자바스크립트 문법 2 (with CodeSandBox)
(1) 제어문
: 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 제어문을 사용하면 코드의 실행흐름을 인위적으로 제어할 수 있는데, 코드의 실행 순서의 변화가 일어나므로 가독성이 떨어지고, 오류가 발생할 확률이 높다. 따라서 요즘은 if, for문 대신 고차함수를 사용해 프로그래밍하는 것을 권장한다.
○조건문 : 주어진 조건식에 따라 코드 블록의 실행을 결정한다.
① if, else if, else문
(조건에 따라 단순히 값을 결정해 변수에 값을 할당하는 경우는 삼항 조건 연산자를 사용해 코드의 가독성을 높이는 것을 추천한다. )
② switch문
○ 반복문 : 조건식의 평가 결과가 true인 경우 코드 블록을 실행한다.
① for문 : 조건식이 false로 평가될 때까지 코드블록을 실행한다.
② while문 : 조건식의 평가 결과가 true면 계속 코드 블록을 실행한다.
for문은 주로 반복횟수가 명확할 때 사용하고, while문은 반복 횟수가 명확하지 않을 때 주로 사용한다.
break는 조건식의 평가결과가 true이면 코드블록을 탈출하게끔 한다.
(2) 함수 ⇒ 자바스크립트에서 가장 중요한 개념!
:입력(input)을 받고 결과(output)를 도출한다.
○함수 내부로 입력을 전달받는 변수를 매개변수(parameter), 입력을 인수(argument), 출력은 반환값(return value)라 한다.
○함수정의 != 함수실행
: 함수를 사용하려면, 함수호출을 해야 한다.
이때 함수호출( function call / invoke )은 함수에 필요한 값을 넣고 함수의 실행을 명시적으로 지시하는 것이다.
○함수는 객체 타입의 값이다. 따라서 함수 리터럴을 생성할 수 있다.
(리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기 방식)
○함수를 정의하는 네 가지 방식
①함수 선언문
fuction add(x, y) {
return x + y ;
}②함수 표현식 (변수에 함수 리터럴 할당)
let f = function add(x, y) {
return x + y ;
}③Function 생성자 함수
let add = new Fuction('x', 'y', 'return x + y') ;④화살표 함수(ES6) : function 키워드 대신 화살표를 이용해 간략한 방식으로 함수를 선언하며, 익명이다.
let add = (x, y) => x + y ;
add(2, 5); //7▶ ①(함수 선언문) 과 ④(화살표 함수)의 차이
- 화살표 함수는 생성자 함수 constructor를 사용할 수 없다.
화살표 함수를 사용하면 오류가 발생한다.
- 화살표 함수는 arguments 객체를 바인딩하지 않는다.
: arguments 객체는 매개변수를 통해 함수에 전달하는 인수를 프로퍼티 값 value로, 전달한 순서를 프로퍼티 키 key로 나타내는 객체이다.
Foo 함수의 매개변수 x, y, z가 있다. 이 함수는 함수에 바인딩되는 arguments라는 객체를 콘솔창에 출력하는 방식으로 작동한다.
화살표 함수를 사용하면 오류가 나는 것을 볼 수 있다.
- 화살표 함수는 메서드 method로 사용할 수 없다.
introduce의 값인 익명의 함수가 메서드이다.
화살표 함수를 사용해 introduce를 작성하면 오류가 발생한다.
-화살표 함수는 프로토타입(prototype)을 가지지 않는다.
객체 리터럴로 객체를 생성하면 동일한 구조의 프로퍼티를 반복해서 작성해야 한다는 점에서 불편하다.
그래서 생성자 함수를 사용해서 중복 작성 없이 객체를 생성한다.
하지만 생성자 함수는 동일한 메서드를 중복으로 소유하게 되어 메모리를 낭비한다. 이러한 문제를 해결할 수 있는 방법이 바로 프로토타입이다.
프로토타입은 생성자함수에 추가하는데, 화살표 함수는 생성자 함수로 사용할 수 없다. 따라서 생성자 함수에 추가할 수 있는 프로토타입은 없다.
상속(inheritance) : 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있다는 개념
-화살표 함수는 암묵적으로 반환할 수 있다.
const student = (major) => console.log(`${major}`)위의 코드처럼 함수 실행문이 하나의 문으로 구성된다면 함수 실행문을 감싸는 { } 을 생략할 수 있다. 함수 실행문이 하나의 문이 아니라면 원래대로 작성한다.
(3) 배열
1. 배열의 프로퍼티
○배열은 객체 타입의 값이다. (객체는 프로퍼티와 메서드의 집합체)
○프로퍼티는 key와 value의 포맷을 가진다.
○배열에 들어있는 요소는 프로퍼티(value)이며, 각각의 요소에는 배열에 들어있는 순서(인덱스 index)대로 key값이 주어진다.
○ 배열 요소를 참조할 때는 대괄호 표기법[ ]을 사용하며 대괄호 안에 인덱스를 적는다.
○ length 프로퍼티 : 배열의 길이 == 배열에 들어있는 요소의 수를 나타냄.
2. 배열의 메서드
배열 메서드에는 불변성 유지 유무에 따라 결과를 반환하는 패턴이 두 가지로 나뉜다.
○원본 배열을 직접 변경하는 메서드 (metator method)
① push 메서드 : 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고, 변경된 length를 반환한다. (push 메서드는 성능 면에서 좋지 않으므로 스프레드 문법이나 뒤에서 언급할 concat 메서드로 대체하는 것을 추천한다.)
② pop 메서드 : 원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환한다.
③ unshift 메서드 : 인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. (push 메서드와 마찬가지로 스프레드 문법으로 대체해 쓰는 것을 추천한다.)
④ shift 메서드 : 원본 배열에서 첫 번째 요소를 제거하고 제거한 요소를 반환한다.
⑤ splice 메서드 : 원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용한다.
(splice 메서드의 두 번째 인수를 0으로 지정하면 요소의 제거 없이 삽입만 이루어진다. splice 메서드의 두 번째 인수를 생략하면 첫 번째 인수로 전달된 시작 인덱스부터 모든 요소를 제거한다. )
○원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드(accessor method)
① concat 메서드 : 인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다.
② slice 메서드 : 인수로 전달된 범위의 요소들을 복사하여 배열로 반환한다.
slice 메서드는 두 개의 매개변수를 갖는다. (복사 시작 인덱스, 복사 종료 인덱스)
○배열은 요소를 동적으로 추가할 수 있고, 이미 존재하는 요소에 값을 재할당하면 요소의 값이 갱신된다.
3. 배열 고차 함수
: 함수를 인수로 전달받거나 함수를 반환하는 함수
고차함수는 불변성을 지향하는 함수형 프로그래밍에 기반을 두고 있다. 함수형 프로그래밍은 조건문과 반복문을 제거해 복잡성을 해결하고 변수의 사용을 억제해 상태 변경을 피하려 한다.
○ 원본을 직접 변경
sort 메서드 : 배열의 요소를 오름차순으로 정렬한다.
sort로 숫자 요소를 정렬할 때는 sort메서드에 정렬 순서를 정의하는 비교함수를 인수로 전달해야 한다. 비교 함수는 양수, 음수, 0 중 하나를 반환하는데, 양수이면 함수의 첫 번째 인수를 우선해 정렬하고, 음수이면 함수의 두 번째 인수를 우선해 정렬하고, 0이면 정렬하지 않는다.
○ 원본 배열의 불변성 유지
① forEach 메서드 : for 문을 대체할 수 있다.
② map 메서드
-배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
-콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
▶ map 과 forEach의 공통점, 차이점
공통점 : 콜백 함수를 호출하면 세 개의 인수(요소값, 인덱스값, this)를 전달한다.
차이점: forEach메서드는 undefined를 반환하고, map메서드는 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.
③ filter메서드
-배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
-콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
④ reduce 메서드
-배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
-콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백함수를 호출하여 하나의 결괏값을 만들어 반환한다.
과제
2주 동안 배운 자바 스크립트 문법을 활용할 수 있는 문제들을 푸는 것이 이번 주의 과제였다.
오늘 새로 배운 내용들과 달리, 파이썬에서도 배운 for문이 친숙해서 그런지 대부분의 문제를 for문을 이용해 해결했다. 교수님께서 올려주신 답안들을 참고해서 오늘 배운 내용들을 이용해 다시 풀어봐야겠다.
실습하기
1. html 특수 문자 기호 사용하기
: 지니 사이트 내의 공지사항 부분을 보면 저렇게 태그 내에 <문자> 형태로 글이 작성되어 있다. 그래서 그 부분만 보고 vscode에 똑같은 방식으로 에러가 났었다. 저번 주까지만 하더라도 클론 코딩 사이트와 똑같은 방식으로 했으니 그냥 신경 쓰지 않았다. 그러다가 문득 html에서 특수문자를 표기하는 방법을 찾아서 적용하면 에러를 없앨 수 있을 것 같다는 생각이 들어서 바로 적용해보았다.
<a>회원정책 관련하여 안내드립니다. </a>
<a><지니 이용 회원에게 드리는 감사 이벤트 2탄 자브라 > 당첨자 발표</a>
<a><올해 가장 기대되는 소띠 아티스트 1위 방탄소년단 정국 스페셜 페이지 > 당첨자 발표</a>
2. 푸터 공지사항 js 적용
(동영상은 글의 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)
3. 에디터 추천 컨텐츠 더 보기 기능 js 추가
기존의 2줄에서 컨텐츠 더 보기 버튼을 눌렀을 때 추가로 두 줄이 더 나오도록 하는 기능과, 컨텐츠 접기 버튼을 눌렀을 때 초기 상태로 돌아가도록 하는 기능을 추가했다. 기존의 코드를 복사해서 약간만 정리해 주면 돼서 금방 할 수 있었다.
4. 최신 음악 창 ← → 버튼 클릭 시 생기는 변화 구현하기
(동영상은 글의 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)
음악 앨범들을 모두 코드에 넣기 전에 위에 있는 1/5와 화살표 버튼에 js를 적용해서 숫자의 변동을 표현했다.
2번과 4번이 시간이 굉장히 오래 걸렸다. js에서 무엇을 어떻게 사용해야 할지 맥락은 알겠는데 세부적인 사항을 정하는 것이 어려웠다. 구글링도 정말 많이 해서 겨우겨우 성공했다.
특히 4번 같은 경우는 구글에 검색해보면 다양한 코드를 찾을 수 있다. 하지만 내가 내 프로젝트에 적용해봤을 때는 결과가 잘 나오지 않았다. 타인의 코드를 이해하고 수정해 내 코드로 작성하는 것이 정말 어려운 것 같다는 생각이 들었다. 결국 1~5까지의 숫자를 모두 적고, 함수에 각각의 경우를 다 if문을 이용해 표현했다.
그런데 계속 실행해봤을 때 else if문이 잘 작동되지 않았다. 해결하긴 했는데 좀 당황스러운 실수로 인한 결과였다.
afteralbum.addEventListener("click", function() {
if (number1.style.display === 'block'){
number1.style.display = 'none'
number2.style.display = 'none'
number3.style.display = 'none'
number4.style.display = 'none'
number5.style.display = ' block'
...위의 코드처럼 작성해 나갔어야 하는데 if문의 조건절에서 등호를 실수로 계속 하나만 쓰고 원하는 결과가 나오지 않는다고 고민하고 있었다. 발견하는 것도 힘들었는데, 발견하고도 황당했다.
전체적인 코드가 마음에 들지 않는다. 분명 더 쉽고 명시적인 방법이 있을 것 같은데 아직은 잘 모르겠다. 일단 구현은 성공했으니, 더 좋은 방법을 생각해 보기로 했다.
그리고 전반적으로 아직 다 하지 못했던 내용들을 구현했다.
(동영상은 글의 상단에 걸어둔 네이버 블로그를 통해 볼 수 있습니다.)
느낀 점
이론
자바스크립트 문법을 배우며, 큰 틀은 파이썬과 크게 다르지 않다는 생각이 들었다. 하지만 함수나 배열 메서드는 처음 보는 방식이라 어려웠다. 과제를 하면서 메서드를 써 보려고 노력했는데 생각보다 쉽지 않았다. 자주 사용해보면서 친숙해져야겠다는 생각이 들었다.
실습
이번 주는 지금까지 했던 실습 중 가장 많이 코드를 수정했다. 특히 JS 코드는 수정을 정말 많이 했다. 열심히 작성하고 실행했는데, 원하는 결과대로 나오지 않아서 힘들었다. 원인을 찾으면, 복잡하거나 아예 잘못된 접근이 아니고, 사소한 실수 위주들이라 황당했다. 그래도 결국 다 해결해서 마지막에는 뿌듯했다. 다음 주에는 미디어 쿼리와 구현하는 데 실패한 기능 하나를 구현하는 데 집중할 생각이다.
'전공과목 정리 > 웹프로그래밍기초' 카테고리의 다른 글
| [웹프로그래밍기초🎀] 13주차 개발일지 (0) | 2022.01.31 |
|---|---|
| [웹프로그래밍기초🎀] 12주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 10주차 개발 일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 9주차 개발일지 (0) | 2022.01.31 |
| [웹프로그래밍기초🎀] 7~8주차 개발일지 (0) | 2022.01.31 |