본문 바로가기

programming

(118)
이벤트 버블링과 캡처링 캡처링과 버블링을 간단히 정의하면 다음과 같다. 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다. 버블링 버블링과 캡처링 ko.javascript.info 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. 사례) 테이블의 경우에 테이블 전체(event.currentTarget)에 이벤트를 ..
API, SDK, Library, Framework API API : Application Program Interface all about communication : 다른서비스끼리의 의사소통 방법 응용프로그램에서 운영체제나 프로그래밍언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 연결, 다리 /naver-map/jamsil 구현과 독립적으로 사양만 정의되어있다 API에 따라 접근권한이 필요할 수 있다 open API : 노출된 API 구성 : 요청, Library 응용 프로그램 개발을 위해 필요한 기능(함수)를 모아놓은 소프트웨어 독립성을 가진다 응용프로그램이 능동적으로 라이브러리를 사용한다 library와 API의 차이점은 구현 로직의 유무이다 SDK SDK : Software Development Kit 소스코드의 모음과 유틸리티 Tool ..
github actions & pages로 Vue.js 프로젝트 build 하고 호스팅하기 (CI/CD 맛보기) CI Continuous Integration CD Continuous Deploy github action 컨테이너를 띄워서 일련의 작업들을 할 수 있도록 해줌, 그 외 여러가지도 가능 github pages github에서 제공하는 호스팅 TODO : vue.js를 스터디한 내용을 github에 push 하고, github action과 github pages를 사용하여 호스팅을 해보려 한다. 1. github push 생략 (add-commit-push) 2. github action 1) 폴더만들고 그안에 main.yaml 생성 폴더 트리 구조와 파일명을 준수해야한다 .github/workflows/main.yaml 2) main.yaml 파일내용 주의점은 [main] -> 배포할 브랜치를 명시,..
[React] react-router-dom으로 레이아웃 구현, 네비게이션 바로 라우팅 구현, useParams로 파라미터 받 TODO Router 아무 path 없을 때는 layout 구현, 그 안에 Route 구현 notFound 페이지 예외 처리 예정 Layout 에서 NavLink로 링크 구현 Outlet으로 랜더할 내용 받아줌 useParams로 parameter 받기 1. 사용할 페이지 간략 내용 views들 생성 /views/About.js /views/About.js /views/NotFound.js /views/UserDetail.js /views/Users.js Layout은 조금 이따가 2. 레이아웃 담당할 Layout.js 작성 react-router-dom이 제공하는 NavLink, Outlet 사용 NavLink는 a태그 역할 링크 역할 Outlet은 Content가 담길 곳 명시하는 것 (react-r..
[Javascript] 실행 컨텍스트 실행하는 환경 실행되는 환경 실행되는 공간 컨텍스트의 원칙 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생깁니다. 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성됩니다. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾습니다. 함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다. '컨텍스트': { 변수객체: { arguments: [{ word : 'hello' }], variable: null, }, scopeChain: ['wow 변수객체', '전역 변수객체'], this: wi..
[Javascript] 스코프(Scope), 스코프체인, 렉시컬스코프 스코프 : 범위, 함수를 선언할 때 만들어진다. 전역변수 / 지역변수 스코프체인 : 찾는 변수가 내부에 없으면 외부로 -> 전역으로 이어서 찾아가는 것 내부에선 외부로 참조 가능, 외부에서 내부는 참조 불가 var globalName = 'globalName'; // 전역변수 function outer() { console.log('외부에서 전역호출', globalName);// 외부에서 전역호출 var outName = 'outName'; function inner() { console.log('내부에서 전역호출', globalName); //내부에서 전역호출 console.log('내부에서 외부호출', outName); var inName = 'inName'; } inner(); } outer(); ..
[Javascript] 함수선언문 & 함수표현식 & 화살표함수()=>{} 비교(호이스팅, this 관점에서) 호이스팅 관점에서의 차이 함수선언문은 함수 자체가 호이스팅 된다. 함수표현식은 함수 자체는 호이스팅 되지 않고, 변수가 호이스팅된다. 화살표함수는 함수표현식의 다른 표현(ES6에서 추가)으로 마찬가지로 함수는 호이스팅 되지 않고, 변수만 호이스팅된다. 선언하고, 사용하는게 정상적 로직이므로 함수표현식&화살표함수를 권장한다. case1) 함수 선언문은, 런타임 이전에 엔진에서 먼저 실행되어서 함수 자체를 호이스팅 한다. console.dir(plus) // output: ƒ plus(x, y) console.log(plus(2, 5)) // output: 7 // 함수 선언문 function plus(x, y) { return x+y } case2) 함수 표현식은 런타임 이전에 변수에 undefined라고..
[Javascript] 제너레이터 (Generator) 이터러블, 이터레이터와 비교 generator yield는 제너레이터 함수 안에 존재 next는 함수 밖에서 호출되는 메서드, yield를 순서대로 부름 function* generateSequence() { yield 1; yield 2; return 3; } let generator = generateSequence(); console.log(generator.next()); // {value: 1, done: false} console.log(generator.next()); console.log(generator.next()); console.log(generator.next()); [실행결과] 어디서 많이 봤다. 어디서? Symbol.iterator() 메소드가 반환하는 값 = interator const array = [..
[Javascript] (iterable 프로토콜, iterator 프로토콜) of [iteration 프로토콜] ES6에서 도입됨 이터러블은 데이터 공급자의 역할 다양한 이터러블이 각자의 순회방식을 갖는다면, 데이터 소비자는 모든 방식을 각각 지원해야한다. 효율성을 위해 프로토콜(규칙)을 정의 이터러블은 Lazy evaluation(지연평가)를 통해 값을 생성한다. 100개의 값이 필요할때 처음부터 100개를 만드는 것이아니고, 하나씩 next -> next-> next로 하나씩 만든다. 할당이 이루어지기 전까지는 데이터를 생성하지 않는다. iteration 프로토콜 데이터 컬렉션을 순회하기 위한 프로토콜(규칙) 이터레이션 프로토콜(규칙)을 준수한 객체는 for문으로 순회할 수 있고, spread문법으로 펼칠 수 있다. 이터레이션 프로토콜 (대분류) 안에 이터러블 프로토콜과 이터레이터 프로토콜이 있다. iterab..
CSS3 특성 선택자(Selector) 특성 선택자란? 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택하는 것 title link Internal link https://example.com Insensitive internal link http://example.org /* css */ /* elements with a title attribute */ a[title] { color: red; } /* elements with an href matching "https://example.org" */ a[href="https://example.com"] { color: green; } /* elements with an href containing "example" */ a[href*="example"] { font-size: 2em;..