웹 개발/JavaScript
-
-
[JavaScript] 객체 비 구조화 할당웹 개발/JavaScript 2021. 5. 14. 13:33
객체 비 구조화 할당은 객체 안에 있는 값들을 추출해 새로운 상수로 선언해준다. [예시] const object = { a: 1, b: 2 }; const { a, b } = object; console.log(a); // 1 console.log(b); // 2 - 함수 내에서 사용 예시 const object = { a: 1, b: 2 }; function print(object) { const { a, b } = object; console.log(a); console.log(b); } print(object); const object = { a: 1, b: 2 }; function print({ a, b }) { console.log(a); console.log(b); } print(object)..
-
[JavaScript] Hoisting 현상이란웹 개발/JavaScript 2021. 5. 7. 11:04
**변수는 var 키워드에만 적용 (let 안됨) ** **함수는 선언적 방식만 가능** 일반적으로는 선언을 먼저 하고 사용해야하지만 자바스크립트는 hoisting 문제로 키워드의 선언을 나중에 할 수 있다. catName("Chloe"); function catName(name) { console.log("My cat's name is " + name); } /* 위 코드의 결과는: "My cat's name is Chloe" */ - 단, Hoisting은 초기화가 아닌 선언만 끌어올린다는 것을 주의하자 [예시] var x = 1; // x 초기화 console.log(x + " " + y); // '1 undefined' var y = 2; [실제 로직] var x = 1; // x 초기화 var ..
-
[JavaScript] ESLint와 Prettier 설치 및 설정웹 개발/JavaScript 2021. 4. 29. 15:32
자바는 정적 컴파일을 하지 않은 인터프리터 언어이다. 따라서 에러 찾기가 힘들고, 에러를 해결하지 않은 채 배포할 가능성이 있다고 한다. 자바 스크립트를 사용하는 첫 협업 프로젝트라 이를 해결하기 위해 eslint와 prettier를 사용해보았다. EsLint는 자바스크립트 문법에서 에러를 표시해준다 (flutter의 linter와 같은 개념인 듯 하다.) Prettier는 코드스타일을 자동으로 formatting 해준다. ** CRA(create-react-app)에는 이미 세팅이 되어있다고 한다 ** 1. eslint 설치 및 설정 1) ESLint 확장기능 설치 vs code의 개발단에서도 사용할 수 있도록 VS code에 ESLint 라이브러리를 통합한다. 2) ESLint 설치 - 프로젝트에 설..
-
[JavaScript] DOM 이벤트 함수 사용 및 원리웹 개발/JavaScript 2021. 4. 27. 21:04
1) 자바스크립트 함수 생성 function sayName (name){ console.log("your name : ", name); } sayName("ohbox"); 2) 자바스크립트는 html 코드를 모두 가져와 DOM 객체로 바꾼다. - 아래의 예시는 title이라는 id를 가진 html 요소를 가져온다. const title = document.getElementsByName('title'); //id - 아래의 예시는 노드의 첫번 째 인자를 가져오는 document의 querySelector 객체를 이용했다. #는 html의 id, . 는 html의 class를 가리킨다. const title = document.querySelector('#title'); //노드의 첫 번째 인자 const..
-
[Java Script] DOM (Document object module)이란?웹 개발/JavaScript 2021. 4. 27. 21:02
DOM (Document object module)이란? DOM의 개체 구조는 노드 트리로 표현된다. HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다. (최초에 화면을 그릴때 사용하는 설계도) DOM : HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스) velog.io/@surim014/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80 DOM이란 무엇인가? 웹 페이지가 만들어지는 방법 먼저 DOM을 이해하기 위해서는 웹 페이지의 빌드과정을 알아야 한다. Critical Rendering Path 브라우저가 ..