JavaScript 주요 포인트 #15 HTML DOM Vue.js 없이도 DOM(Document Object Model)을 콘트롤 할 수 있어야 한다. DOM Element HTML 요소의 id, 태그명, 클래스명, CSS 선택자를 이용해 HTML 요소를 찾을 수 있다. 실무에서는 querySelector, querySelectorAll을 주로 사용한다. 사용자ID 비밀번호 로그인 HTML CSS JS 저장 사용자ID 비밀번호 로그인 HTML CSS JS 저장 DOM Attribute DOM 요소에 접근한 후 그 다음 할 일은 속성 정보를 제어하는 것이다(정보를 가져오거나, 정보를 설정하는 것). 서울 부산 제주도 제주시 서귀포시 가져오기 설정하기 저장하기 DOM Events 아래 코드는 DOM 이벤트..

JavaScript 주요 포인트 #14 Error 컨트롤할 수 없는 영역은 try...catch 문으로 작성해야 한다. 예를 들어 기상청 날씨 정보를 페이지 우측 상단에 보여준다면, 기상청 서버가 다운되었을 때 정보를 받아 올 수 없게 된다. 이러한 장애로 인해 시스템 전체가 다운되면 안되기 때문에 예외처리해주어야 한다. try...catch Strict Mode(엄격 모드) ES5에서 추가된 기능이다. 정규 표현식(Regular Expression) MDN Web Docs에서 필요할 때마다 정규식을 찾아볼 수 있다. 문자열 안에서 내가 원하는 특정한 패턴을 찾아내는 기술이 정규식이다. 정규식을 사용하면 수많은 코드를 써서 해결해야 하는 문제를 간단히 해결할 수 있다. 웬만한 정규식 패턴은 구글 검색으로..

JavaScript 주요 포인트 #13 Modules 규모가 큰 웹 애플리케이션을 만들기 시작하면서, 많은 기능과 함께 많은 함수가 만들어졌다. 많은 함수는 프로그램을 무겁게 만들었고 리소스 낭비로 개발에 불편을 줬다. 그래서 필요할 때만 가져다 쓰는 모듈을 만들게 되었다. node.js, Vue.js에서 많이 사용한다(자바스크립트 만으로는 잘 사용하지는 않는 것 같다). Class 클래스는 표준화된 틀을 제공해 준다.

JavaScript 주요 포인트 #12 자바스크립트는 AJAX(Asynchronous JavaScript and XML) 이전과 이후로 나뉜다. AJAX로 인해 비동기 통신 및 웹페이지의 특정 일부분만 랜더링 하는 것이 가능해졌다. 이로 인해 웹이 급속도록 발전하게 되었다. AJAX는 동적인 웹 페이지를 만들기 위해 사용한다. 여기에서 다루게 될 내용은 XMLHttpRequest, Fetch API, Promise, Async/Await로서 자바스크립트 전체 문법을 통틀어 매우 중요한 부분이다. 이번 실습은 테스트 서버가 필요하다. 따라서 JSON Server를 실행한다. JSON Server 실행 json-server --watch db.json XMLHttpRequest XMLHttpRequest(X..

JavaScript 주요 포인트 #11 JSON Server 만들기 XMLHttpRequest, Fetch API, Promise, Async/Await을 실습하기 위해서는 서버가 필요하다. 따라서 JSON Server를 설치한다. GitHub에서 JSON Server의 설치방법 및 사용법을 확인할 수 있다. JSON Server는 진짜 서버인 것 처럼 활용이 가능하며 실무에서 잘 활용할 수 있어야 한다. 유사한 툴로 Postman이 있다. JSON Server의 사용으로 얻을 수 있는 이점은 다음과 같다. 서버를 실제 구현하지 않아도 토이프로젝트 진행이 가능하다. 백엔드 개발자와 프론트엔트 개발자의 시간 불일치로 인한 리소스 낭비를 줄일 수 있다. JSON Server 설치 npm install -g ..

JavaScript 주요 포인트 #10 Object Literal Syntax Extension [] 안에 변수를 넣어주면 변수의 문자열 값을 object의 키로 사용할 수 있다. Spread Operator Object Destructuring Array Destructuring 더보기 실습 소스코드 : https://github.com/postforty/bootcamp/tree/main/javascript

JavaScript 주요 포인트 #9 this 키워드 this 키워드는 사용되는 위치에 따라 바인딩되는 객체가 달라진다. this와 Window 객체 // this에 Window 객체가 바인딩 된 경우 this와 DOM 요소 클릭 A B C this와 object // this에 object가 바인딩 된 경우 object 내에 함수를 정의할 수 있고, 함수가 object 내에 정의된 다른 키에 접근할 때 this 키워드를 사용한다. 이러한 방식은 object 내에 이미 정의된 키로 새로운 데이터를 만들고자 할 때 많이 사용한다. Scope 선언된 변수에 대한 접근성을 의미한다. Default Function Parameter 함수 호출 시 인자를 넣지 않은 경우에 대한 기본값을 적용한다. 파라미터 값이 ..

JavaScript 주요 포인트 #8 내장 객체 - JSON 객체 JSON(JavaScript Object Notation)은 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다(출처: 위키백과). JSON 객체는 JSON 포맷을 자바스크립트에서 효율적으로 사용하기 위해 사용한다. stringify, parse 함수 // JSON 객체 내장 객체 - Window 객체 JSON(JavaScript Object Notation)은 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다(출처: 위키백과). JSON 객체는 JSON 포맷을 자바스크립트에서 효율적으로 사용하기 위해 ..