전체 글 142

[Javascript] Event

이벤트 핸들러 이벤트에 반응하려면 이벤트가 발생했을 때 실행되는 함수인 핸들러(handler)를 할당해야 한다. 핸들러는 사용자의 행동에 어떻게 반응할지를 코드로 표현한 것이다. addEventListener HTML에 직접 이벤트 핸들러를 등록하는 방법은 단 1개의 이벤트만을 등록할 수 있다. 또한 코드가 길어져 가독성이 떨어지게 된다. addEventListener를 사용하면 복수의 핸들러를 등록할 수 있다. element.addEventListener(event, handler, [options]); event: 이벤트 이름. “click”, “scroll” 등 handler: 핸들러 함수 option once: true이면 이벤트가 트리거 될 때 리스너가 자동으로 삭제된다. capture: 어느 ..

JavaScript 2022.03.20

[Level 1] 미션 3: 나만의 유튜브 강의실 미션 1단계

debounce VS throttle 두 방법 모두 성능을 위해 이벤트를 제어하는 방법이다. 디바운스와 스로틀은 연속된 이벤트들을 그룹화해서 과도한 이벤트 핸들러의 호출을 방지한다. See the Pen Untitled by SunHo Park (@prefer2) on CodePen. 본격적으로 알아보기 전에, 예시를 통해 어떤 작동을 구현하려고 하는지 알아보자. 버튼을 빠르게 눌러보면 기본, 디바운스, 스로틀된 이벤트 핸들러의 호출 빈도의 차이를 볼 수 있다. debounce 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다. 여러 연속된 이벤트 콜을 하나로 그룹핑할 수 있게 한다. throttle 짧은 시..

우테코 2022.03.13

[Level 1] 미션 2: 로또 미션 2단계

Input 사용성을 높이려 이것저것 하다 보니 Input 태그에 생각보다 많은 속성이 있음을 확인할 수 있었다. 속성 값만 넣으면 알아서 invalid처리를 해준다. 주어진건 잘 써먹자 name name 속성은 form이 제출된 후 서버에서 form data를 참조하기 위해 사용되거나, 자바스크립트에서 요소를 참조하기 위해 사용 min, max (numeric types) input의 최소, 최대값을 설정할 수 있다. 범위를 벗어나게 되면 invalid step (numeric types) 단위값(증분값) 설정. 지정 단위로 나눠떨어지지 않으면 invalid autofocus 페이지가 로딩될때 지정된 input에 오토포커스 https://developer.mozilla.org/ko/docs/Web/HTM..

우테코 2022.03.06

[Level 1] 미션 2: 로또 미션 1단계

단위 테스트(unit test) 단위 테스트(unit test)는 컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차다. 단위 테스트(unit Test)는 하나의 모듈을 기준으로 독립적으로 진행되는 가장 작은 단위의 테스트이다. 여기서 모듈은 애플리케이션에서 작동하는 하나의 기능 또는 메소드로 이해할 수 있다. 이번 미션의 학습 목표 중 하나는 '단위 테스트 기반으로 리팩터링하는 경험' 이었다. 단위테스트를 찾아보니 위와 같은 내용들이 나왔다. 하나의 모듈? 모듈은 특정 기능을 하는 하나의 코드 묶음 단위(하나의 파일) 아닌가. 여기서부터 어디까지를 테스트해야하는가에 대해서 꼬이기 시작했다. 그러면 각 class에서도 테스트를 해야하나?!?!? 많은 고민 끝에 결국..

우테코 2022.02.27

웹팩(webpack) 알러지 치료하기 - 1

create-react-app 없이 react를 설정할 수 있는 그날까지....! 배경 왜 webpack을 사용하기 시작했는지를 알아보자. 웹팩의 깃헙에서 웹팩을 아래와 같이 소개하고 있다. webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset. 웹팩은 모듈(module)을 위한 번들러(bundler)이다. 그렇다면 모듈과 번들러에 대해 알아보자. 모듈(module) 모듈(module)은 재사용 가능한 ..

JavaScript 2022.02.27

[Level 1] 미션 1: 자동차 경주 게임 2단계

호출 스케줄링(scheduling a call) 이번 미션에서 가장 중점으로 둔 내용이었다. requestAnimationFrame을 처음으로 접해보았고, 다시한번 자바스크립트 런타임이 어떻게 진행되는지를 다시 정리할 수 있었다. setTimeout const timeoutID = setTimeout(function[, delay, arg1, arg2, ...]); setTimeout 함수는 두 번째 인수로 전달받은 시간(ms, 1/1000초)으로 단 한 번 동작하는 타이머를 생성한다. 타이머가 종료되면 첫번째 인수로 전달받은 콜백 함수가 호출된다. function 타이머가 만료된 뒤 실행할 함수 delay Optional 주어진 함수 또는 코드를 실행하기 전에 기다릴 밀리초 단위 시간 생략하거나 0을 ..

우테코 2022.02.21

[Level 1] 미션 1: 자동차 경주 게임 1단계

package.json package.json을 깔끔하게. 항상 npm init 후 아무 생각 없이 엔터를 누르며 작성했던 package.json이었다. 코드 리뷰를 받다보니 package.json이 첫인상?을 결정지을 것 같다는 느낌이 든다. 깔끔하고 보기 좋은 것이 코드 리뷰를 할때 보기 좋고 읽기 좋을 것이다. 공식 문서를 보며 package.json에 대해 좀 더 자세하게 알아보았다. 만약 사용하지 않는 패키지가 다운받아졌다면 아래 명령어를 사용하여 삭제해주도록 하자. npm uninstall [package-name] https://docs.npmjs.com/cli/v8/configuring-npm/package-json innerHTML VS insertAdjacentHTML 요소(elemen..

우테코 2022.02.15

삼성 SDS 2022 동계 알고리즘 특강 후기

친구와 마감 전날 모집 사실을 인지하고 신청했다. 따로 홍보를 많이 하지는 않는 것 같아 신청할 시기에 잘 찾아 봐야 한다. 지원은 구글폼으로 했고 따로 자기소개서 없이 간단한 인적사항과 재학증명서, 성적증명서를 기입하면 끝이었다. 사전 테스트 일주일이라는 시간동안 5문제를 자유롭게 푸는 형식으로 이루어졌다. 삼성에서 개발한듯한? 앨리스라는 사이트를 사용해서 문제를 풀어야했다. 문제의 난이도는 생각보다 어려웠다. 1번 문제를 제외하고는 하루 이상 고민을 했고 결과적으로는 2문제 통과 + 나머지 문제 부분점수로 제출했다. 발표가 난다는 날짜에 연락이 없길래 문제가 어렵더니만 역시 떨어졌나보군 하고 있었는데 다음날 연락이 왔다. 강의 정확하게 어떤 내용을 배웠는지는 블로그에 적을 수는 없겠지만 학부에서 배우..

회고 2022.01.30

[알고리즘] 다익스트라 알고리즘(Dijkstra Algorithm)

다익스트라 알고리즘? 한 정점에서 다른 정점까지의 최단경로를 구하는 알고리즘이다. 각 정점을 최대 한번씩만 방문하여 최단 거리를 정한다. 시작 노드로부터 각 노드까지의 거리를 저장하는 배열을 이용하여 탐색을 진행하면서 현재 누적 최단 거리와 간선의 가중치의 합이 이동하는 노드까지의 저장된 최단 거리보다 작을 경우 값을 업데이트해주며 구하고자 하는 바를 구한다. 다익스트라는 모든 가중치가 음이 아닐때만 사용할 수 있다. 동작 과정 아래 그림과 같은 예시에서 0번 노드에서 5번 노드로 가는 최단경로를 구하고 한다고 해보자. 최단거리를 저장하는 배열을 모두 INF로 설정해준다. priority queue에는 (노드, 누적거리)를 저장한다. 이 priority queue는 누적 거리를 기준으로 오름차순으로 정렬..

알고리즘/공부 2022.01.12

[알고리즘] 위상정렬(Topological Sort)

위상 정렬? 순서가 정해져 있는 일련의 작업을 차례대로 수행해야 할 때 사용할 수 있는 알고리즘이다. 이론적으로는 비순환 방향 그래프(DAG, Direct Acyclic Graph)에서 그래프의 방향성을 거르지 않고 정점들을 나열하는 알고리즘이다. 예를 들어 A작업이 끝난 후 B작업을 실행할 수 있고, C작업이 끝난 후 B작업을 실행할 수 있다고 할때 작업의 순서는 ACB 또는 CAB가 될 수 있다. 이렇게 정해진 순서를 위배하지 않으면서 모든 정점을 나열하는 알고리즘을 위상 정렬이라고 한다. 일반적으로 위상 정렬의 결과는 유일하지 않다. 동작 과정 배열에 각 노드들의 진입 차수를 저장한다. queue에는 진입차수가 0인 모든 노드들이 삽입된다. queue의 첫번째 값을 꺼낸다. 이 노드에 연결된 모든 ..

알고리즘/공부 2022.01.11
반응형