본문 바로가기

분류 전체보기

(215)
[JavaScript] CustomEvent JavaScript를 사용하면 핸들러를 할당할 수 있을 뿐만 아니라 이벤트를 직접 만들 수 있습니다. 내장 이벤트 클래스는 DOM요소 클래스 같이 계층 구조를 형성합니다. 내장 이벤트 클래스 계층의 꼭대기엔 Event 클래스가 존재합니다. 이벤트 객체는 아래와 같이 생성가능합니다. let event = new Event(type[, options]); 인수는 다음과 같습니다. type: 이벤트 타입을 나타내는 문자열로 'click'같은 내장이벤트, 'my-event' 같은 커스텀 이벤트가 올 수도 있습니다. options: 두 개의 선택 프로퍼티가 있는 객체가 옵니다. bubbles: true /false 이벤트 버블링 cancelabe: true/ false true인 경우 브라우저 기본동작이 실행되지..
defer & async in script tag 일반적으로 script태그를 아무런 속성없이 가져오게 되면 브라우저 HTML을 파싱하는 도중 멈추고 해당 스크립트를 가져오고 실행할 때까지 기다렸다가 다시 HTML을 파싱합니다. 이는 JavaScript코드가 DOM Tree에 접근하여 이를 수정할 수 있기 때문입니다. async 와 defer 속성을 사용한다면, script태그를 만나도 HTML파싱이 중단되지 않습니다. 또한 두 속성을 동시에 적는다면 async 가 적용되고, async 를 지원하지 않는 브라우저는 defer로 fallback이 일어납니다. script 태그의 defer속성은 페이지가 모두 로드되고 나서 해당 스크립트가 실행됨을 나타냅니다. defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false를 가지게 되고 명시하..
[FEConf Korea] 프론트엔드에서 TDD가 가능하다는 것을 보여드립니다. 이강의는 FEConf Korea 강의를 보고 정리한 자료입니다. TDD. Test Driven Development 궁극적 목표는 Clean code that works. 작동하는 깔끔한 코드이다. Testable 한 code를 어떻게 작성하는가? Seperation of Concerns, 관심사의 분리를 통해서 testable한 코드를 작성합니다. 이 관심사의 분리를 지키지 않으면 거대한 진흙덩어리 코드가 만들어진다. TDD 예제1 Redux -> 리액트의 관심사 때문에 쓴다. 리액트의 관심사는 state reflection, 상태의 반영이다. 상태의관리는 신경쓰지 않음. 컴포넌트에 상태가 전달이 된다면 화면을 리렌더링해야한다. 그렇기 때문에 리액트는 상태의 관리에 대해서는 관심이 없다는점 SRP (S..
eager evaluation과 lazy evaluation 프로그래밍 언어에서 '표현식'이라는 용어는 리터럴, 연산자, 변수,함수 호출등이 복합적으로 구성된 코드를 말합니다. 예를 들어, 1 + 2는 1과 2라는 리터럴과 덧셈연산자 + 로 구성된 표현식입니다. 표현식은 항상 컴파일러에 의해 계산법(evalutaion)이 적용되어 어떤 값이 됩니다. 1 + 2 표현식은 컴파일러에 의해 3이라는 값이 됩니다. 이와 같이 컴파일러는 표현식을 마주치면 계산법(evalutaion)을 적용해서 어떤 값(value)를 만듭니다. 계산법에는 조급한 계산법 (eager evaluation) 과 느긋한(또는 지연) (lazy evalutaion) 두가지가 있습니다. 1 + 2 예제의 경우는 eager evaluation을 적용한 것입니다. 컴파일러가 함수를 표현식을 마주친다고 해..
[SLASH 21] 실무에서 바로쓰는 Frontend Clean Code 토스 개발자 컨퍼런스 진유림님의 강의를 정리했습니다. 클린코드라 하면 '명확한 이름', '중복 줄이기'를 먼저 말하곤하는데, 실무에선 이 외에도 좀 더 섬세하게 코드를 정리하는 스킬이 필요합니다. 1. 실무에서 클린 코드의 의의 2. 안일한 코드 추가의 함정 3. 로직을 빠르게 찾을 수 있는 코드 4. 액션 아이템 실무에서 클린 코드의 의의 흐름 파악이 어렵고 도메인 맥락 표현이 안되어 동료에게 물어봐야 알 수 있는 코드가 회사마다 존재한다. 이런 코드는 개발할 때 병목이되고 유지보수할 때 시간이 오래걸리며 심하면 기능추가가 불가능한 상태가 됩니다. 실무에서 클린코드의 의의는 유지보수 시간의 단축입니다. 동료, 혹은 과거의 내가 짠 코드를 빠르게 이해할수있다면..!! 읽기 좋은 깔끔한 코드는 코드리뷰의 ..
[Modern JavaScript Deep Dive] closure 클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어 (예: 하스켈, 리스프, 얼랭, 스칼라등)에서 사용되는 중요한 특성이다. 클로저는 자바스크립트 고유의 개념이 아니므로 글로저의 정의가 ECMAScript 사양에 등장하지 않는다. MDN 에서는 클로저를 다음과 같이 정의한다. A closure is the combination of a function and the lexical enviroment within which that function was delared. 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10..
3584. 가장 가까운 공통 조상 문제의 중요한 점은 마지막에 주어지는 두 노드가 서로 부모가 될 수 있다는 점입니다. 그러니까 둘다 거슬러 올라갈 때 자기 자신도 포함해서 거슬러 올라가 줘야합니다. import sys T = int(sys.stdin.readline()) for _ in range(T): N=int(sys.stdin.readline()) p_list=[0 for _ in range(N+1)] for _ in range(N-1): p,c=map(int,sys.stdin.readline().split()) p_list[c]=p a,b=map(int,sys.stdin.readline().split()) a_parent=[a] b_parent=[b] while p_list[a]: a_parent.append(p_list[a])..
[Summer/Winter Coding(~2018)] 지형 편집 ⭐️ 지형 편집 문제를 처음 접했을 때 백준에서 풀어본 문제랑 거의 동일하다는 것을 느꼈습니다. 문제는 높이는 최소 1, 최대 300으로 제한하고 있습니다. 당연히 높이마다 탐색해서 최소값을 구하는 것 보다 최소 높이와 최대 높이를 정해서 이분탐색하는게 더 빠를 것 같습니다. def solution(land, P, Q): answer = 1e9 min_height = 1e9 max_height = 0 for i in range(len(land)): for j in range(len(land[0])): max_height = max(max_height, land[i][j]) min_height = min(min_height, land[i][j]) def find_value ( h, land): cnt =0..