본문 바로가기

Front-End: Web

 (163)
객체와 생성자 함수 1. 자바스크립트 객체의 특징 자바스크립트에서 객체는 객체지향 프로그래밍 언어의 객체와 조금 다른 점이 있다. 1.1 prototype 기반의 언어 Java와 C++은 클래스(Class) 기반의 객체지향 언어인 반면, JS는 프로토타입(Prototype) 기반의 객체지향 언어이다. Class 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의없이도 객체를 생성할 수 있다. 물론 생성자 함수를 톻애 class를 따라할 순 있는데, ES6부터는 정식으로 class 문법이 추가되었다. 1.2 캡슐화와 상속 지원 객체지향 프로그래밍에서 중요한 특징 중 하나는 캡슐화와 상속이라는 개념이다. JS는 class가 없어도 클로저를..
[작성중]프로토타입(Prototype) 프로토타입 자바스크립트는 프로토타입 기반 언어 Java와 C++은 클래스 기반의 객체지향 언어인 반면, Javascript는 프로토타입 기반의 객체지향 언어이다. 모든 객체들이 메소드와 속성들을 상속 받기 위해 프로토타입 객체를 가진다. 클래스 기반의 객체지향 언어는 class라는 껍데기를 정의하고 이를 통해 객체를 생성한다. 하지만 프로토타입 기반의 객체지향 언어는 class 정의 없이도 객체를 생성할 수 있다. 물론 생성자 함수를 통해 class를 따라할 순 있지만, ES6부터는 정식으로 자바스크립트에서 class가 추가되었다. 프로토타입 객체는 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수 있는데, 이를 프로토타입 체인(prototype chain)이라 부른다. 다른 객체에 정의된 메소드..
이벤트의 모든 것: on, addListener, onclick, addEventListener 노드 교과서 4장에서 addEventListener 메서드를 사용하여 클릭 이벤트를 작성하던 중, 예전에 클릭 이벤트 코드를 작성할 때 onclick 혹은 .on('click', listener) 메서드를 사용했던 기억이 떠올랐다. 그러다 이 이벤트들 사이에 어떤 차이가 있는지 궁금해졌고 조사하던 중 항상 헷갈렸던 용어들도 공부하며 이벤트의 모든 것을 정리하기로 했다. 1. 용어 정리 1.1 이벤트 웹 페이지에서 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글쓰기 등 특정 동작을 수행하는 것을 이벤트가 발생했다고 한다. 그리고 이벤트가 발생할 때마다 웹 브라우저가 서버에게 그 사실을 알려준다. 1.2 이벤트 처리기 1.2.1 이벤트 처리기란? 이벤트가 발생했을 때 이에 반응하여 수행할 동작이 ..
jQuery란 무엇일까? jQuery 대부분 웹사이트가 사용하고 있는 라이브러리. 라이브러리일 뿐, 자바스크립트와 별개의 언어가 아니다! ('제이쿼리를 자바스크립트로 바꿔주세요'와 같은 말은 잘못된 것임). 특징 단점 무겁다. 제이쿼리 없이 순수 자바스크립트로 작성한 코드보다 속도가 10~100배 정도 더 느리다. 모듈화가 되어 있지 않다. 따라서 React, Angular를 사용하는 경우 제이쿼리를 사용하기 어렵다. 장점 코드가 간결해지고 가독성이 높아진다. document.getElementById('id'); 보다 $('#id') 라고 작성하는 게 훨씬 좋으니까! IE와 기타 브라우저에 대한 지원이 좋다. 따라서 하나의 코드로 여러 브라우저에서 다 호환이 된다. 플러그인을 지원하여 원하는 기능을 추가할 수도 있다. 애니메이..
window 객체 & BOM window 객체 브라우저의 요소들과 자바스크립트 엔진, 모든 전역변수를 담고 있는 객체. window 객체 아래, 대표적으로 screen, location, history, document 같은 객체들이 자주 쓰인다. 메소드는 parseInt, isNaN 같은 게 있다. window는 전역객체(글로벌객체)이므로 모든 객체를 다 포함하고 있기 때문에 사용할 때 window를 그냥 생략해도 된다. 하지만 다른 함수와 헷갈릴 수 있기 때문에 window를 붙여주는 것도 괜찮다. 생략하냐 마냐는 각자의 스타일에 맡기면 된다. window.close() 현재 창을 닫는다. window는 생략가능하기 때문에 close(); 라고 작성해도 된다. window.open() 새 창을 연다. 첫 번째 인자: 페이지 주소..
신년운세 패키지 - 2일차 01. 운세페이지 만들기 만들 것 구경하기 신년운세 by 르탄! 2021년 띠 별 운세를 알려드립니다 new-year.spartacodingclub.kr 1. result.html 만들기 위의 운세 페이지를 result.html에 작성한다. 우선 index.html의 배경과 같은 기본 속성을 동일하게 작성한다. 2. index.html과 result.html 연결하기 쥐 02. 르탄이 만들기 만들 것 확인하기 코드 가져와서 르탄이 만들기 이전에 index.html에서 만든 르탄이들을 데려오면 된다. 쥐 이전과 달리 하이퍼링크 기능이 필요없으므로, 로 변경한다. 그리고 이 페이지에 르탄이가 하나 뿐이므로 class명도 변경한다. 쥐 index.html의 .rtans > a의 css도 긁어오자. .rtan ..
신년운세 패키지 - 1일차 강의 자료 [스파르타] 신년운세 패키지 슬랙 가입 가이드 www.notion.so 수업 목표 서버와 클라이언트 역할에 대해 이해한다. HTML, CSS의 기초 지식을 이해한다. 신년운세 메인페이지를 완성한다! 01. 스파르타 튜토리얼 만들게 될 것 신년운세 by 르탄! 2021년 띠 별 운세를 알려드립니다 new-year.spartacodingclub.kr 02. 설치 프로그램 1) Chrome Chrome 웹브라우저 더욱 스마트해진 Google로 더 심플하고 안전하고 빠르게. www.google.com 2) Visual Studio Code (VS Code) Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and ..
[웹 UI 개발 코칭스터디 1기] 2. 웹 접근성의 이해 1. 웹 접근성의 이해 접근성이란? 사용자가 어떤 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도. 웹에서의 접근성이란? 웹에 잘 접근할 수 있는지 없는지의 정도. 어떠한 사용자(장애인, 노인 등)가 어떠한 기술 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것. 즉, 모든 사용자가 모든 기기에서 웹에 접근할 수 있도록 하는 것을 말한다. 그러므로 개발자는 모든 사용자와 모든 기술환경을 고려해야 한다. 웹 접근성을 지켜야 하는 이유 1. 장애인 차별 금지법(장차법) 2013년 4월 11일부터 장애인들도 비장애인과 동등하게 전자정보 및 비전자정보를 사용할 수 있도록 해야 한다는 내용이 포함되어 있다. 따라서 법으로 정해져 있기 때문에 웹 접근성을 지..
반응형

티스토리툴바