티스토리

천재만재

검색하기

블로그 홈

천재만재

keemzleun.tistory.com/m

천재만재(가 되고 싶어요)

구독자: 2

방명록 방문하기

주요 글 목록

[JS] Ch 3. JS 함수 * 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다. * 강의명 ) 프론트엔드 개발 초격차 패키지 Online 함수 복습 함수의 결과가 반복적으로 사용될 땐 변수에 담아서 사용하는 것이 유용 함수가 단일적으로 사용될 땐 바로 호출해서 사용 이후에 나오는 함수 표현과 함수 선언의 차이에 유의! 화살표 함수 // 그냥 함수 const double = function(x) { return x * 2 } console.log('double: ', double(7)) // 화살표 함수 const doubleArrow = (x) => { return x * 2 } console.log('doubleArrow: ', doubleArrow(7)) 화살표 함수는 기본적인 로직을 축약형으로 줄일 수 있음.. 공감수 0 댓글수 0 2023. 8. 3.
[JS] Ch 2. JS 시작하기 * 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다. * 강의명 ) 프론트엔드 개발 초격차 패키지 Online 01. ECMAScript 개요 및 프로젝트 초기화 ECMA: JS 표준화 기구 open with liveserver가 아닌 방식으로 웹에 띄우기 02. 데이터 타입 확인 명령어 뒤에 세미콜론(;) 안 붙여도 되긴 함 한 줄에 한 개의 명령만 작성 // typeof로는 구분할 수 없는 데이터 타입을 구분해주는 함수 function getType(data) { return Object.prototype.toString.call(data).slice(8, -1) } 산출, 할당 연산자 산술 연산자(arithmetic operator) +, -, *, /, % 할당 연산자(assig.. 공감수 0 댓글수 0 2023. 8. 3.
[JS] Ch 1. Node.js * 이 글은 강의를 들으며 개인적으로 정리하고 기록하기 위한 글입니다. * 강의명 ) 프론트엔드 개발 초격차 패키지 Online 개요 및 설치 크롬 V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 NVM: Node Version Manager NVM 사용법 $nvm install 노드js버전 짝수 버전이 좀 더 안정적인 버전 NPM 개요 Node Package Manager: 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리 알고 쓰자 package.json 알고 쓰자 package.json package.json이 하는 역할과 설정법에 대해 알아보자! hoya-kim.github.io [Node.js] lodash란? [Node.js] lodash란? lodash란? .. 공감수 0 댓글수 0 2023. 8. 3.
[JS] 06 이벤트와 이벤트 처리기 문서 로딩 이벤트 이벤트 이벤트가 발생하는 순간 abort 웹 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 error 문서가 정확히 로딩되지 않았을 때 load 문서 로딩이 끝났을 때 resize 문서 화면의 크기가 바뀌었을 때 scroll 문서 화면이 스크롤 되었을 때 unload 문서를 벗어날 때 마우스 이벤트 이벤트 이벤트가 발생하는 순간 click 사용자가 HTML 요소를 클릭했을 때 dbclick 사용자가 HTML 요소를 더블클릭했을 때 mousedown 사용자가 요소에서 마우스 버튼을 눌렀을 때 mousemove 사용자가 요소에서 마우스 포인터를 움직일 때 mouseover 마우스 포인터를 요소 위로 옮길 때 mouseout 마우스 포인터가 요소를 벗어날 때 mouseup 요소 위에 올려.. 공감수 0 댓글수 2 2023. 1. 26.
[JS] 05-2 웹 요소에 접근하기 '웹 요소에 접근한다': JS에서 웹 문서에 있는 이미지나 텍스트, 표 등 특정 요소를 찾아가는 것을 의미 웹 요소에 접근할 때 자주 사용하는 CSS 선택자 선택자 기능 사용 예 타입 선택자 특정 태그를 사용한 모든 요소 p { ... } class 선택자 클래스명을 사용하는 특정 부분 .accent { ... } id 선택자 id명을 사용하는 특정 부분 #container { ... } 하위 선택자 A 요소의 하위에 있는 모든 B 요소 from input { ... } 자식 선택자 A 요소의 하위에 있는 요소 중 자식 레벨의 B 요소 ul > li { ... } 메서드 method: 객체에 포함된 함수 선택자를 사용해 웹 요소에 접근할 때는 querySelector() 함수나 querySelectorA.. 공감수 0 댓글수 0 2023. 1. 23.
[JS] 05-1 DOM과 DOM 트리 DOM (Document Object Model) 자바스크립트 같은 프로그래밍 언어로 웹 문서에 접근하고 제어할 수 있도록 웹 문서를 체계적으로 정리하는 방법 DOM에서는 웹 문서를 하나의 객체로 정의하고, 웹 문서를 이루는 텍스트나 이미지, 표 등 모든 요소도 각각 객체로 정의함 웹 문서와 그 안의 요소들을 객체로 인식하고 조절하므로 '문서 객체 모델'이라고 함 웹 문서 객체들도 객체이므로 프로퍼티와 메서드를 갖고 있음 DOM 트리 웹 문서는 여러 가지 태그가 서로 포함 관계를 갖고 있는데, 이러한 포함 관계로 인해 각 태그 간에는 '부모'와 '자식' 관계가 생김 DOM을 활용해 웹 문서의 요소를 부모와 자식으로 구분해서 표시하다 보면 나무 모양을 띄는데 이것을 'DOM 트리'라고 부름 공감수 0 댓글수 0 2023. 1. 18.
[JS] 04-4 전개 구문 ~ 04-5 타이머 함수 전개 구문 spread syntax 말 그대로 '값을 펼쳐주는' 구문 배열처럼 값이 다양한 자료를 한꺼번에 인수로 넘겨주거나 배열과 배열을 합할 때처럼 배열을 하나의 덩어리로 처리해야 할 때 유용함 3개의 마침표를 이용한 '...' 기호 사용 문자열이나 배열, 객체처럼 여러 개의 값을 담고 있는 자료형에서 다른 정보는 필요 없고 그 안의 값만 꺼내 사용하려고 할 때 유용함 나머지 매개변수 전개 구문은 함수를 선언할 때 사용할 수도 있음 함수를 선언하면서 나중에 몇 개의 인수를 받게 될지 알 수 없는 경우 전개 구문을 사용해서 매개변수를 만드는데, 이것을 '나머지 매개변수'라고 함 function addNum(...numbers) { let sum = 0; for (let number of numbers).. 공감수 0 댓글수 0 2023. 1. 18.
[모던 자바스크립트] 04-3 함수 표현식 함수 이름을 지정하지 않고 함수를 실행할 수도 있고, 프로그램에서 한 번만 사용할 함수라면 함수 선언과 동시에 실행하는 방법이 있음. 이런 함수는 식처럼 동작하므로 '함수 표현식'이라고 함. 익명 함수 말 그대로 이름이 없는 함수 익명 함수는 변수에 할당해서 사용할 수 있음. let sum = function(a, b) { return a + b; } console.log(`함수 실행 결과: ${sum(10, 20)}`) 두 수를 더하는 함수를 sum이라는 변수에 할당한 예제 변수에 저장된 함수는 함수 이름 대신 변수를 이용해서 함수를 실행할 수 있음 자바스크립트에서는 함수를 하나의 값처럼 사용할 수 있기 때문에 함수를 변수에 할당할 수도 있고, 함수를 다른 함수의 매개 변수로 넘길 수도 있음 즉시 실행.. 공감수 0 댓글수 0 2023. 1. 17.
[모던 자바스크립트] 04-1 함수 ~ 04-2 스코프 함수 function: 동작해야 할 목적대로 여러 개의 명령을 묶는 것 function 함수명() { 명령(들) } 보통 함수 선언 소스를 실행 소스보다 앞에 작성 함수 선언 소스를 실행 소스보다 뒤에 두면 호이스팅이 발생해 선언 부분을 앞으로 끌어당겨 해석 매개변수 parameter: 함수를 선언할 때 외부에서 값을 받는 변수 인수 argument: 매개변수가 있는 함수를 호출할 때 실제로 값을 넣어 넘겨주는 것 스코프 scope: 선언한 변수의 적용 범위. 어느 위치에서 변수를 접근할 수 있는지를 가리킴. 지역 스코프 local scope: 변수를 특정 영역에서만 사용할 수 있을 때 '지역 스코프를 가지고 있다'고 말하고, 이런 변수를 '지역 변수'라고 함. 전역 스코프 global scope: 프로.. 공감수 0 댓글수 0 2023. 1. 15.
[모던 자바스크립트] 03-3 반복문 반복문: 같은 동작을 여러 번 실행하기 위해 사용하는 문 for 문 for (초깃값; 조건; 증가식) {...} ① 초깃값: 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화. 초깃값은 0이나 1부터 시작. ② 조건: 문장을 반복하기 위해 체크할 조건 부분. 이 조건을 만족해야 for문에 있는 명령을 반복. ③ 증가식: 문장을 실행한 후 카운터 변수를 증가시키는 부분. 보통 카운터값을 하나 더 증가시키는 용도. forEach 문 배열명.forEach(콜백 함수) {...} 콜백 함수: 다른 함수의 인수로 사용할 수 있는 함수를 가리킴 보통 배열 변수 이름은 복수형(ex. students). 각 요소는 단수형(ex. student)으로 사용 for...in.. 공감수 0 댓글수 0 2023. 1. 14.
[모던 자바스크립트] 03-2 조건문 조건문 Conditional Statement: 명령을 실행하기 위해 조건을 체크하는 문(statement) if 문 조건을 체크한 후 결괏값이 true이면 if문에 있는 명령을 실행하고, false이면 if문에 있는 명령은 건너뛰고 그 다음 명령을 실행 if (조건) { 조건이 true일 때 실행할 명령(들) } if...else 조건을 체크한 후 true일 때 처리할 명령과 false일 때 처리할 명령이 따로 있다면 if문과 else문을 사용. if (조건) { 조건이 true일 때 실행할 명령(들) } else { 조건이 false일 때 실행할 명령(들) } if (조건1) { 조건1이 맞을 때 실행할 명령 } else if (조건2) { 조건2가 맞을 때 실행할 명령 } ... else { 어떤 .. 공감수 0 댓글수 0 2023. 1. 13.
[모던 자바스크립트] 03-1 연산자 1. 프로그램 동작을 가리키는 기호, 연산자 연산자 operator: 프로그램에서 특정한 동작을 하도록 지시하는 기호 프로그래밍에서의 '연산': 숫자끼리 더하거나, 빼거나, 곱하거나, 나누는 사칙연산 + 문자열끼리 연결해 새로운 문자열을 만들거나 크기를 비교. 피연산자: 연산자의 왼쪽이나 오른쪽에 있는 연산 대상 산술 연산자 arithmetic operator: 수학적인 계산을 위해 사용하는 연산자 연산자 사용 예 + a = b + c - a = b - c * a = b * c / a = b / c % a = b % c ++ a++ -- a-- 연결 연산자: 문자열과 다른 자료형 또는 2개의 문자열을 합해서 하나의 문자열로 만드는 연산자 더하기 연산자와 같은 + 기호 사용 + 연산자의 피연산자가 모두 숫.. 공감수 0 댓글수 0 2023. 1. 10.
[모던 자바스크립트] 02 프로그래밍의 기본, 변수와 자료형 살펴보기 1. 프로그램에서 입력받고 출력하는 방법 alert() 함수: 알림 창을 표시. alert() 함수의 소괄호 안에 메세지를 입력하거나 변수를 사용하면 알림 창에 텍스트나 변숫값을 표시할 수 있음. confirm() 함수: 확인 창을 표시. [확인]과 [취소] 버튼이 있어 사용자가 어떤 버튼을 클릭했는가에 따라 서로 다른 반환값을 나타냄. [취소]버튼 클릭시 false 반환. prompt() 함수: 사용자가 간단한 값을 입력할 수 있는 프롬프트 창을 표시. 입력 기본값을 지정할 수도 있음. 값 입력 취소시 null 반환. 2. 프로그램과 친해지려면 변수부터 익히자 변수 선언 let 상수 선언 const 변수 선언시 var를 사용하게 되면 변수 호이스팅이 발생. 호이스팅(hoisting): '끌어올린다'는 .. 공감수 0 댓글수 0 2023. 1. 9.
[모던 자바스크립트] 01 자바스크립트 시작하기 1. 자바스크립트를 위한 기본 상식 자바와 자바스크립트는 붕어와 붕어빵 같은 사이! 붕어빵 안에 붕어 없음.. 에크마스크립트(ECMA Script)와 자바스크립트는 같다고 할 수 있을까? 아니요. 에크마스크립트는 자바스크립트를 기반으로 표준화된 스크립트 언어임. 자바스크립트는 에크마스크립트의 표준 사양을 따르는 가장 유명한 언어이지만, 이 외에도 여러 스크립트 언어가 있음. 2. 웹 개발에서 자바스크립트의 역할 클라이언트(client): 사용자의 눈에 보이는 부분 서버(server): 눈에 보이지 않는 부분 '서버 컴퓨터(server computer)': 인터넷에 직접 연결된 컴퓨터. 사이트에서 사용하는 텍스트와 이미지, 동영상, 게시판 정보 등 사이트와 관련된 모든 정보가 저장됨. '클라이언트 컴퓨터(.. 공감수 0 댓글수 0 2023. 1. 9.
08. 불변성 데이터 불변성(Immutability) 원시 데이터: String, Number, Boolean, undefined, null 참조형 데이터: Object, Array, Function // 원시형 데이터 let a = 1 let b = 4 console.log(a, b, a === b) // expected output: 1 4 false b = a// b가 a와 같은 저장소를 바라보게 됨 console.log(a, b, a === b) // e.o: 1 1 true a = 7 console.log(a, b, a === b)// e.o: 7 1 false let c = 1 console.log(b, c, b == c)// e.o: 1 1 true -> 데이터 불변성! // 원시형 데이터는 생김새가 같으.. 공감수 0 댓글수 0 2022. 3. 24.
07. 전개 연산자 // 전개 연산자(Spread) const fruits = ['Apple', 'Banana', 'Cherry'] console.log(fruits) //expected output: ["Apple", "Banana", "Cherry"] console.log(...fruits) // 전개 연산자. 문자 데이터로 출력됨. // e.o: Apple Banana Cherry // console.log('Apple', 'Banana', 'Cherry')와 같은 결과 // toObject = 객체 데이터로 변화시킴. function toObject(a, b, c) { return { a: a, b: b, c: c } } console.log(toObject(...fruits)) // e.o: {a: "Apple",.. 공감수 0 댓글수 0 2022. 3. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.