zerobase/javascript(12)
-
JavaScript 과제를 끝내며
JavaScript를 공부하면서 느낀점 늘 느꼈듯이 자바스크립트로 가면서 난이도가 급상승한다. 좀 더 많은걸 표현할 수 있고 유연한 언어이기에 당연한 소리이지만, 그래도 어렵다.... HTML,CSS를 배울 때와는 달리 화면이 움직인다는 장점이 있지만, 그 화면을 쉽게 움직일 순 없다. 하나하나 차근차근 공부해야하고 공부양과 시간이 많이 필요한 언어이다. JavaScript 공부하면서 어려웠던 개념과 이유 늘 어려웠고 아직도 공부해야할 것이 많다고 생각한다. 특히 어려운점을 꼽는게 더 어려울 정도로 난 아직 자바스크립트를 제대로 이해하지 못했다. 배운개념과 구현해야할 개념이 조금씩 다르다는점, 배운것을 응용해야 써먹을 수 있다는점에서 시간을 많이 필요로하는 언어인데, 들어야하는 시간은 정해져있고, 온라인..
2023.05.24 -
브라우저 저장소
브라우저 저장소란? 웹 브라우저에서 데이터를 저장하는 방법이다. localStorage, sessionStorage, IndexedDB가 있다. JavaScript를 사용하여 쉽게 조작할 수 있고, 데이터는 key-value쌍으로 저장이 된다. 일반적으로 데이터는 문자열 형식으로 저장되지만, 필요에 따라 객체나 배열 형태로 저장할 수도 있다. localStorage localStorage는 브라우저에 데이터를 저장하기 위한 key-value형태의 저장소이다. 이 저장소는 브라우저의 세션이 종료되어도 데이터가 유지되어 사용자가 다시 웹사이트를 방문할 때에도 이전에 저장한 데이터를 볼 수 있게 해준다. 장점 데이터를 지속적으로 유지할 수 있다. 저장소 용량이 크고, 대부분의 브라우저에서 5MB이상의 데이터를..
2023.04.29 -
class를 활용해서 모듈화하기
class란? class는 객체 지향 프로그래밍에서 사용되는 기본적인 개념으로, 데이터와 해당 데이터를 처리하는 메서드를 포함하는 캡슐화된 코드 블록이다. 클래스는 객체를 만들기 위한 설계도 역할을 한다. 클래스를 사용하면 객체를 만들 때 해당 객체에 포함될 속성과 동작을 사전에 정의하고, 이를 기반으로 객체를 생성할 수 있다. 객체는 클래스에서 정의한 속성과 메서드를 상속하고 이를 활용하여 독립적인 동작을 수핼할 수 있다. class의 특징? class 내에 정의된 함수를 method라고 부른다 클래스를 통해 생성된 객체를 인스턴스라고 부른다. class도 함수처럼 호출하기 전까지는 코드가 실행되지 않는다. class의 이름은 항상 대문자로 시작한다. this는 본인 객체를 의미한다. 클래스 내에서 메..
2023.04.29 -
웹 프론트 JS
1. 인사 자바스크립트 런타임 : 자바스크립트 엔진을 포함하는 실행 환경 자바스크립트 엔진 : 자바스크립트 코드를 실행하는 프로그램 2. 디버깅 console.log(); chrome 개발자 도구 debugger; 3. DOM 다루기 Window 객체 Document 객체 특정 요소 찾기 getElementById getElementsByTagName 인접 노드 접근 children parentElement 노드 생성 createElement Node.style Node.innerHTML 4. 브라우저 객체 Navigator location location.href History 5. 이벤트 Click. Mouseover, keydown, focus… 이벤트 핸들러 addEventListener 6. 에..
2023.04.17 -
JS 기초 문법
1. 인사 console.log(x,y,z) 2. 기본연산자, 값 산술 연산자 : + , - , * , / , % , ** 복합할당 연산자 : += , -= , *= , /= , %= , **= 할당 연산자 : = 3. 연산자 비교 연산자 : == , === , = 증감 연산자 : ++ , -- , ++X, X++ 논리 연산자 : ||(OR) , &&(AND) 부정 연산자 : ! 4. 변수와 상수 let : 변수 생성 키워드 const : 상수 생성 키워드 var : 레거시 키워드 5. 자료형 동적 타입 언어 숫자형 : Infinity, -infinity, NaN BigInt형 : 2^53-1 보다 크거나 -(2^53-1) 보다 작은 정수 표현, 숫자 끝에 N을 붙혀서 사용 문자형 : “”, ..
2023.04.17 -
모듈
여러 파일로 하나의 어플레케이션을 분리할 때, 각각의 파일들을 모듈이라고 부름 1) 모듈 내보내기 export const func = () => {}; export const a = 1; 2) 모듈 가져오기 Import fileObj from ʻ./file.jsʼ; fileObj .func(); Import { func, a } from ʻ./file.jsʼ; func(); 3) 모듈 시스템 내보내지 않은 변수는 외부로 노출되지 않아 자원 보호가 가능함 CommonJS const func = require(ʻ./file.jsʼ) ES Modules Import func from ʻ./file.jsʼ; export const bark = () => { console.log('Bow-wow'); }; imp..
2023.04.16