본문 바로가기

JavaScript

 (11)
[4주차] Step3(JavaScript Part3) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 27일 / 4주차 2. 알고 있는 내용 - template literals: 내장된 표현식을 허용하는 문자열 리터럴이다. function find(arr) { for (let i = 0; i < arr.length; i++) { if (arr[i] === "answer") { return `정답은 ${i}에 있다`; } }; } - 나머지 연산자(%)를 활용하여 홀수 짝수를 구별할 수 있다. - 객체에 새로운 속성을 추가할 때는 Dot notation 또는 Bracket Notation을 이용할 수 있다. 3. 알고 있다고 생각했지만 모르는 내용 - Array.pr..
[3주차] Step2(JavaScript Part2) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 20일 / 3주차 2. 알고 있는 내용 - 함수: 여러 개의 코드 구문들을 하나의 단위로 묶어 실행할 수 있는 것을 의미한다. - 함수는 두 가지 방법, 1) 함수 선언식 2) 함수 표현식 으로 선언할 수 있다(기능적인 차이 有). 선호하는 방식으로 선언하여 사용해도 무관하지만, 프로젝트 내에서 일관된 스타일을 유지하는 것이 중요하다. // Function Declaration (함수 선언식) function foo () { // function body.. } // Function Expression (함수 표현식) const foo = function () {..
[2주차] Step2(JavaScript Part1) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 13일 / 2주차 2. 알고 있는 내용 - 자바스크립트의 역할: 웹페이지가 동적으로 움직이도록 만들어줄 수 있다. => 자바스크립트는 HTML의 특정 요소(들)을 선택하여 "이벤트"(마우스 클릭, 키보드 입력 등)에 따라 어떤 동작을 하도록 기능을 넣어줄 수 있다. 자바스크립트는 이벤트에 따라 HTML이나 CSS를 조작할 수도 있고 그 외에도 여러가지를 할 수 있다. (예를 들면 아래와 같이 스크롤 이벤트에 따라 화면에 다른 글자, 다른 이미지가 나오게끔 할 수 있다) - 한 줄 코멘트는 // 로, 한 줄 이상의 코멘트는 /* */ 로 작성하기 // 한 줄 코멘트..
[1주차] Step1 + Step2(Introduction to Programming) * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 제대로 공부하시려면 바닐라코딩에서 공유한 스타터키트를 참고하시길 바랍니다. 1. 7월 6일 / 1주차 2. 알고 있는 내용 - HTML은 Hypertext Markup Language의 줄임말로, 웹사이트를 만드는 가장 기초가 되는 마크업 언어(프로그래밍 언어 X)다. 모든 웹 페이지는 HTML을 이용하여 그 구조가 결정된다. - HTML을 구성하는 기본 단위는 태그이다. 여는 태그와 닫는 태그를 이용하여 만든 것들을 하나의 element(요소)라고 부른다. , , 는 HTML 문서의 전반적인 구조를 정의하기 위해 사용된다. - 몇몇 HTML 태그는 attribute(속성)를 이용하여 추가적인 정보나 명령을 받을 수 있다. 태그는 src 속성을 통..
step2. 상태관리로 메뉴 관리하기 * 이 자료는 제가 복습하기 위해서 작성한 내용입니다. 강의내용과 제 생각이 한 데 섞여있어서 본 내용이 정확하지 않을 수 있습니다. 제대로 공부하시려면 유데미 강의를 구매하시길 추천드립니다. 0. step 2을 통해서 내가 배운 것 1) 기술적 - 상태 & 로컬스토리지 개념 - localStorage에 메뉴 상태를 저장하여 관리하기 (메뉴 추가, 수정, 삭제, 불러오기) - 계층적인 데이터 상태를 저장하고 관리하기 - 모듈화 하여 export, import 하는 법 - 다양한 메서드들 또는 방법 ▶ localStorage에 저장된 데이터 세팅하는: localStorage.setItem(Key, Value) ▶ localStorage에 저장된 데이터 가져오는: localStorage.getItem(Key..
step1. 돔 조작과 이벤트 핸들링으로 메뉴 관리하기 0. step 1을 통해서 내가 배운 것 1) 기술적 - 돔 조작 방법(요소 추가, 삭제) - 이벤트 핸들링(키보드 이벤트, 클릭 이벤트, 기본 이벤트 막기, 이벤트 위임) - 브라우저 인터페이스 활용 - 예외처리(return 적절하게 사용하기) - 다양한 메서드들 ▶ 돔 요소 선택시 querySelector(), ▶ 이벤트 기본동작 막는 preventDefault(), ▶ 특정 돔 트리 안에 원하는 노드 추가하는 insertAdjacentHTML(), ▶ 해당하는 돔 요소를 다 가져오는 querySelectorAll(), ▶ 노드리스트 길이 구하는 length, ▶ 이벤트를 발생시킨 요소를 가리키는 event.target(), ▶ 요소가 갖고 있는 클래스를 배열처럼(DOMTokenList) 반환하는 e..
04. 콜백 함수 in JavaScript 01. 콜백함수(Callback Function)란? - callback: 회신하다, 답신하다 - callback function: 회신되는 함수 - 함수 또는 메서드에(1)에 인자(argument)로 들어가는 함수(2)를 콜백함수(2)라 한다. ➡ 콜백함수(2)에 대한 제어권을 함수(1)에다가 넘긴다는 뜻이다. 콜백 함수를 위임받은 코드(2)는 자체적인 내부 로직에 의해 이 콜백 함수(1)를 적절한 시점에 실행할 것이다. 02. 제어권(콜백 함수를 넘겨받은 코드가 제어권을 가진다!) 1) 호출 시점 2) 인자 3) this 1) 호출 시점: 콜백 함수를 넘겨 받은 코드가 콜백 함수를 언제 호출할 지 결정한다. ex) setInteval 주기함수 - 위 예제에서는 콜백함수를 넘겨 받은 함수, 즉 setI..
03. this in JavaScript 01. 상황에 따라 달라지는 this 1) 전역 공간에서의 this 2) 메서드로 호출할 때 그 메서드 내부에서의 this 3) 함수로서 호출할 때 그 함수 내부에서의 this - 함수 내부에서의 this - 메서드의 내부함수에서의 this - 메서드의 내부 함수에서의 this를 우회하는 방법 - this를 바인딩하지 않는 함수 4) 콜백 함수 호출 시 그 함수 내부에서의 this 5) 생성자 함수 내부에서의 this 02. 명시적으로 this를 바인딩하는 방법 1) call 메서드 2) apply 메서드 3) call / apply 메서드의 활용 - 유사배열객체(array-like object)에 배열 메서드를 적용 - 생성자 내부에서 다른 생성자를 호출 - 여러 인수를 묶어 하나의 배열로 전달하고 싶..

티스토리툴바