본문 바로가기

Front-End: Web/JavaScript

 (90)
[js] event.currentTarget vs event.target 보호되어 있는 글입니다.
[js] 이벤트 핸들러들 (onClick, onChange, onSubmit, onInput, onLoad, ...) 보호되어 있는 글입니다.
[코딩애플] js part 1-2. this 키워드를 알아보자 this 키워드는 뜻이 사용 용도에 따라서 3~4가지가 된다. 1. 함수와 Object에서 사용하면? => 나를 담고 있는 오브젝트가 나옴 (1) 그냥 쓰거나, 일반 함수 안에서 쓰면, 객체 {window} ❓window란 자바스크립트 기본 함수들을 담고 있는 개체 자바스크립트는 **키워드나 변수를 만나면 데이터를 바꾸고 싶어한다**. 자바스크립트의 가장 최상단에서 this 키워드는 무엇을 의미하는지 콘솔 찍어보자. window가 출력이 된다. 이게 this 키워드의 첫 번째 뜻이다. this를 출력하는 함수를 생성해보고 실행하자. 동일하게 window가 뜬다. 즉, **그냥 쓰거나 일반 함수에서 쓰면 object {window}이다**. ❗자바스크립트 strict mode에서 쓰면 'undefined'..
[코딩애플] js part 1-1. 강의 듣기 전 자바스크립트 기본 문법 총정리 JavaScript를 쓰는 이유 1. HTML 변경하려고 씀 안녕 2. HTML 누르면 뭐 실행하고 싶을 때 ➡️이벤트리스너 안녕 버튼 3. 잠깐 자료를 저장해두고 싶다면 ➡️ 변수 용도에 따라 var, let, const 사용 가능함 4. 긴 코드를 짧게 축약하려면 ➡️ 함수 안녕 버튼 5. 함수 다양하게 쓰려면 ➡️ 파라미터로 업그레이드 안녕 버튼 화살표 함수 정확히 같은 역할을 하는 것은 아님. 후에 알아볼 것임. document.getElementById('button').addEventListener('click', () => { 작명('바보'); }) 6. 한 번에 여러 개 자료를 저장하려면 ➡️ array, object array array 속에 array나 함수를 넣을 수도 있다. 원하는 ..
[js] '?.' : 옵셔널 체이닝(optional chaining) 옵셔널 체이닝 '?.' 스펙에 추가된 지 얼마 안된 문법. 따라서 구식 브라우저는 폴리필이 필요함. 옵셔널 체이닝이 필요한 이유 (with 예제) ex 1) 사용자가 여러 명 있는데, 그 중 몇 명은 주소 정보를 가지고 있는 경우를 생각하자. 이 때, user.address.street로 접근하면 에러가 발생한다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined ex 2) 브라우저에서 동작하는 코드를 개발할 때 문제가 발생하는 경우도 있다. 자바스크립트로 페이지에 존재하지 않는 요소(Element)에 접근하여 요소의 정보를 가져오려고 하는 경우다..
[작성중] [js] 정규표현식 알기 정규표현식 문자열에서 특정 문자를 찾기 위한 패턴 ReqExp의 exec(), test(), 그리고 String의 match(), matchAll(), replace(), replaceAll(), search(), split()과 함께 사용 가능 사용 방법 1. 정규 표현식 리터럴 슬래시로 패턴을 감싸서 작성 스크립트를 불러올 때 컴파일됨. 그래서 바뀔 일이 없는 패턴일 때 사용하면 성능이 향상됨 const re = /ab+c/ 2. RegExp 객체의 생성자 호출 런타임에 컴파일됨. 그래서 바뀔 수 있는 패턴이나, 사용자의 입력과 같이 외부 출처에서 가져오는 패턴일 때 사용함 const re = new RegExp('ab+c') 작성하기 단순 패턴 사용 문자열을 있는 그대로 탐색할 때 사용 ex. /a..
[js] Set Set 객체에 사용 중복을 허용하지 않는 데이터 집합 1(숫자)와 '1'(문자열)을 다른 것으로 간주한다. 즉, 중복을 확인하기 위해서 강제로 자료형을 변형하지 않는다. forEach나 for of로 값에 접근 가능 ⭐배열 내 중복 원소를 제거하고 싶을 때, 배열을 Set으로 바꿨다가 배열로 다시 바꾸면 쉽게 해결된다. const mySet = new Set(); // {} mySet.add(1); // {1} mySet.add(2); //{1,2} mySet.size; //2 mySet.delete(1); //{2} mySet.has(2); //true mySet.has(1); //false myset.clear(); // {} let arr = [...mySet]; //Spread 연산자를 이용해 a..
[js] sort() vs sort((a,b) => a - b) [ 1, 2, 10, 3, 4, 23] 이 있을 때, sort() : [ 1, 10, 2, 23, 3, 4] sort((a,b) => a - b) : [1, 2, 3, 4, 10, 23] ➡️ 그냥 sort()는 문자열로 정리한다! 그래서 숫자별로 정리하고 싶을 땐 무조건 sort((a,b) => a - b)로 작성해야 한다. https://school.programmers.co.kr/questions/28509 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr
반응형

티스토리툴바