$ grep -rl "#JavaScript" posts/

#JavaScript_

32 posts tagged with JavaScript.

• 2026-02-20

  yarn peer dependency 에러 바로잡기

  yarn peer dependency 에러를 고쳐보자

  [frontend]
• 2025-11-16

  Rxjs 알아보기

  RxJS는 비동기적이고 이벤트 기반의 프로그램을 다루기 위한 라이브러리이다. RxJS는 observable한 sequence를 사용한다...

  [frontend]
• 2022-11-18

  Web Components

  Web Components는 재사용이 가능한 커스텀 element를 만들 수 있게 해주는 기술이다. 캡슐화를 함으로써 나머지 코드와 별개로 실행된다. 따라서 코드가 섞여서 혼란을 가져오진 않을까 걱정할 필요 없이 여기저기 붙여 재사용 할 수 있다. 세 가지 주요 컨셉이 있다. Custom elements 커스텀 elem…

  [frontend]
• 2022-01-12

  Event handler의 등록 및 삭제

  Event handler의 등록 및 삭제 이벤트 등록 EventTarget.addEventListener() Argument type: 이벤트 유형을 나타내는 문자열 listner: 이벤트 알림을 받는 function 객체 options capture: 으로 전송하기 전, 등록된 리스너로 이벤트의 전송여부를 나타내는 B…

  [frontend]
• 2020-10-08

  window.resize throttle 설정

  window.resize throttle 설정 이벤트에 리스너를 걸게되면 사이즈가 바뀌는 매순간 이벤트가 발생하기 때문에 성능 저하가 발생할 수 있다. 이것을 막기 위해 취하는 해결방법에 와 이 있다. 이전에 정리 포스팅을 올린 것 같은데 아무리 찾아도 없다..ㅠㅠ? 이벤트에 걸린 핸들러를 이벤트가 종료된 시점에 한 번…

  [frontend]
• 2020-10-03

  Javascript 30 Day 17

  Day 17 Sort Without Articles Articles : 관사, 즉 관사 없이 영어 문자열을 배열하는 방법이다. 완성본 기존 데이터 sorting 이후 소스 코드 sort를 하기 위해서 를 사용한다. 는 두개의 인자를 받는다. , 를 받는다고 했을 때 가 더 크면 을 반환하고 그렇지 않은 경우 을 반환한다…

  [frontend]
• 2020-10-03

  Javascript 30 Day 16

  Day 16 Mouse Move Shadow 마우스 이동에 따라 텍스트에 그림자 효과 주기 완성본 <style .hero { display: flex; justify content: center; align items: center; color: black; min height: 40vh; } </style <div c…

  [frontend]
• 2020-09-21

  for in, for of, forEach의 차이

  for in, for of, forEach의 차이 forEach 는 자료형의 prototype이다. 따라서 와 같은 유사 배열 자료형에 를 사용하기 위해서는 배열로 바꾸는 작업이 필요하다. 인자로 callback을 받는다. Array의 각 element를 callback 함수의 인자로 하나씩 넘겨준다. for ... i…

  [frontend]
• 2020-09-21

  closer / curring

  :rotating light: 초보자를 위한 Node.js 200제 정리 내용 closer 클로저 클로저는 내부함수가 참조하는 외부함수의 지역변수 가, 외부함수가 리턴된 이후에도 유효성이 유지될 때 , 이 내부함수를 부르는 단어이다. 와 함수는 각자 지역변수를 가지고 있고 ( , ) 또다른 함수를 return 하고 있다…

  [frontend]
• 2020-09-20

  [Javascript] Generator

  Generator 는 여러 개의 값을 필요에 따라 하나씩 반환( )할 수 있는 함수이다. 일반 함수는 하나 또는 0개의 값만을 반환할 수 있다는 것이 둘의 차이점이다. 실행되는 순서에 따라 동적으로 값을 반환한다는 것이 핵심이다. 사용법 제너레이터 함수 생성하기 제너레이터 함수는 키워드를 사용해 생성한다. 일반적인 함수…

  [frontend]
• 2020-09-18

  ES6 문법

  ES6 ES5에서 ES6로 넘어오면서 표준안이 생기게 되었고 많은 문법상 변화가 생겼다. 편리한 기능이 많이 추가되었고 최근에 나오는 많은 JS 문서의 코드들이 ES6 문법으로 쓰여진 경우를 많이 봤다. 기업에서도 ES6사용을 선호하고 있기 때문에 달라진 문법들을 잘 알아두는 것이 좋겠다. W3C ES6? 오래된 브라우…

  [frontend]
• 2020-09-13

  Promise

  Promise 는 비동기 로직을 구현할 때 유용하게 사용되는 기능이다. ES6부터 도입된 기능으로 JS의 다양한 비동기 함수들을 쉽게 컨트롤 할 수 있게 되었는데, Node.js 등에서 Promise를 사용하지 않으면 callback 지옥에 빠지게 된다. 구식 구현 방식.. 가독성이 정말 많이 떨어진다 ES6의 Prom…

  [frontend]
• 2020-09-13

  Hoisting

  Hoisting Hoisting이란 선언되기 전에 호출한 변수나 함수를 사용하더라도 JS 특성상 사용이 가능한 특징이다. 출력 선언되기도 전에 사용한 변수가 정상적으로 불러와짐으로 인해서 개발자에게 혼란을 가져왔는데, 주로 키워드를 사용할 때 이러한 문제들이 발생했다. 이런 문제점들은 을 사용하면 해결할 수 있다. 키워…

  [frontend]
• 2020-08-30

  [Node.js] Express.js

  Express.js Express란? Node.js로 개발을 할 때 가장 많이 사용되는 웹 프레임워크이다. 2020 Node.js popular web framework statistics 웹 프레임워크 란 웹 서비스를 개발하기 위해 사용되는, 그 이름 그대로 틀 이다. 프레임워크 없이도 개발을 할 수는 있지만 프레임워…

  [backend]
• 2020-08-30

  Javascript 30 Day 15

  Day 15 Local Storage local storage에 값을 저장해 새로고침을 해도 데이터가 유지되는 페이지를 만든다. 에 이벤트 등록 이렇게 생긴 폼이 있을 때, 보통은 button에 이벤트를 등록할 것이다. 하지만 대신 에 이벤트를 걸어주면 동작 뿐만이 아니라 로 들어오는 submit 작업 등 다양한 방식에…

  [frontend]
• 2020-08-30

  Javascript 30 Day 14

  Day 14 Javascript References vs Copying value copy & reference copy 어느 프로그래밍 언어를 공부해도 공통적으로 들어있는 내용이 있다. 얕은 복사(shallow copy)와 깊은 복사(deep copy)이다. 보통 변수 값을 복사하면 변수가 가진 value가 복사되는…

  [frontend]
• 2020-08-29

  Javascript 30 Day 13

  13. Slide in on Scroll 스크롤을 내릴 때 마다 본문에 포함된 이미지들에 없어져다가 나타나는 효과를 적용한다. Debouncing 스크롤을 내리는 동작은 한 번 휠을 굴릴 때 마다 엄청나게 많은 이벤트를 발생시킨다. 이는 높은 가능성으로 성능저하를 발생시킬 수 있다. 이를 방지하고자 이벤트를 제한 하는…

  [frontend]
• 2020-08-29

  [Node.js] Module Pattern

  Module Pattern 모든 코드를 App.js 에 몰아넣기 보다는 기능에 맞게 모듈화 하여 분리해 관리하는 것이 전체 프로젝트를 관리하기에 훨 씬 좋다. 모듈화 작업은 나중에 리팩토링 하려 하지 말고 처음부터 잡아놓는 것이 좋은 것 같다. 이후에 하려고 하면 복잡하다. Node.js의 standard 모듈화 방법은…

  [backend]
• 2020-08-27

  Javascript 30 Day 12

  Key Sequence Detection(KONAMI CODE) Konami Code 위키피디아 Konami Code란 몇몇 웹 사이트에서 동작하는 비밀 코드이다. 일련의 코드를 키보드로 입력하면 동작한다. 오늘은 이런 Konami Code를 동작시키기 위한 유저의 key sequence를 감지하는 기능을 자바스크립트로…

  [frontend]
• 2020-08-26

  Javascript 30 - Day 11

  Javascript30 Day 11. video 요소로 재생/일시정지 토글, 건너뛰기, progress bar를 갖춘 커스텀 비디오 플레이어를 직접 구현했다.

  [frontend]
• 2020-08-23

  Javascript 30 Day 10

  Javascript30 Day10<br Hold Shif and Check Checkboxes 프로그램 기능 구현해야 하는 기능은 하나의 체크 박스를 선택하고 키를 누른 상태로 위/아래의 다른 체크 박스를 선택하면 그 사이에 있는 모든 체크 박스가 함께 선택되는 기능이다. 이런 기능은 다양한 프로그램에서 사용되는 기능이…

  [frontend]
• 2020-08-21

  Javascript 30 - Day 9

  Javascript30 Day9 Dev Tools Domination Javascript로 수행하는 동작을 확인하기 위해서는 data들을 콘솔 창에 출력해봐야 한다. 주로 가 사용되는데 개발에 도움이 되는 비슷한 여러 함수들이 있다. console.log() 콘솔 창에 인자로 받은 문자열을 그대로 출력한다. 키워드를 사…

  [frontend]
• 2020-08-20

  Javascript 30 - Day 8

  Javascript30 Day8 Fun with HTML5 Canvas W3C 튜토리얼 HTML element는 웹 페이지에서 그래픽을 그리기 위해 사용하는 요소이다. 아래 캔버스에서 테스트 해볼 수 있다! (우클릭으로 캔버스 비우기) <canvas id="draw" width="700" height="300" styl…

  [frontend]
• 2020-08-20

  Javascript 30 - Day 7

  Javascript30 Day7 Array Cardio Day 2 Array 자료형의 유용한 메서드를 공부한다. test data는 아래와 같다. Array.prototype.some() function을 인자로 받아 조건을 만족하는 원소가 Array에 적어도 하나 있는지를 bool 형식으로 반환한다. Is at lea…

  [frontend]
• 2020-08-20

  [Node.js] API 구현하기

  API API : Application Programming Interface 프로그램은 여러가지 모듈을 이용해 만들어진다. 이러한 라이브러리를 만든 개발자와 이를 사용해 프로그램을 개발하는 개발자 간의 약속 을 바로 Interface 라고 부른다. 또한 애플리케이션 프로그램을 만들기 위해 만들어진 약속들을 API 라고…

  [backend]
• 2020-08-19

  [Node.js] 패키지 매니저와 PM2

  패키지 매니저와 PM2 Node.js를 사용하다보면 다양한 모듈을 설치해 외부 기능을 사용해야 할 때가 많다. 다양한 패키지 매니저가 있는데 나는 을 주로 사용한다. npm npm을 사용하기 위해서는 패키지 정보를 기록하는 파일이 필요하다. 명령어를 입력하면 자동으로 이 만들어진다. npm으로 다른 사람이 만든 모듈을…

  [backend]
• 2020-08-19

  [Node.js] 동기 & 비동기

  Synchronous & Asynchronous 동기 vs 비동기 ’동기’와 ’비동기’는 그 이름 그대로 동작한다. 동기적 작업 방식은 작업이 순차적으로 진행된다. A B C 가 호출이 되면, 각각의 작업이 하나씩 끝날 때 마다 다음 작업이 시작되는 것이다. 반면에 비동기적 작업 방식은 비동기적으로 동시에 작업이 진행된…

  [backend]
• 2020-08-18

  Javascript 30 - Day 6

  Javascript30 Day6 Type Ahead fetch를 사용한 서버와의 비동기적 통신을 이용해 필요하 데이터를 불러와 웹페이지에 출력한다. 예제에 사용된 JSON data는 다음 endpoint의 도시별 인구수 데이터를 나타내는 endpoint가 사용된다. 이번에 만들 서비스는 입력한 영문자를 포함하고 있는 도…

  [frontend]
• 2020-08-18

  Javascript 30 - Day 5

  Javascript30 Day5 Flex Panel Gallery Flex box를 다루는 방법을 공부한다. Flex flex 속성을 줄 경우 수직으로 정렬된다. 속성 : 모든 child element들이 주어진 컨테이너 공간을 모두 같은 너비로 나눠 쓰게 된다. 속성 : 해당 element가 나머지 element들 보…

  [frontend]
• 2020-08-16

  Javascript 30 - Day 4

  Javascript30 Day4 Array Cardio Day 1 Array 자료형에 내장된 여러 유용한 함수들을 사용하면, 일반 반복문으로 해결하던 작업들을 더 간단하게 수행할 수 있기 때문에 잘 활용하는게 좋다. 예제 Data 1. Array.proottype.filter() 지정된 filter function 조건…

  [frontend]
• 2020-08-16

  Javascript 30 - Day 3

  Javascript30 Day3 CSS Variables css 속성을 웹 페이지에서 실시간으로 수정하는 기능을 자바스크립트로 구현했다. 여기서 쓰이는 가장 중요한 요소는 custom css, 사용자 지정 css 속성이다. Mozilla 설명 사용자 지정 css 정의: 접근: 사용하는 이유: 같은 속성값이 여러번 사용…

  [frontend]
• 2020-08-15

  Javascript 30 - Day 1

  Javascript 30? Javascript30 위 링크에서 누구나 무료로 들을 수 있는 30여개의 자바스크립트 강의 동영상이다. 프로젝트를 몇가지 해봤지만 Node.js로 취업을 하기로 결심한 이상 자바스크립트를 좀 더 자유자재로 편하게 다룰 수 있어야 한다고 생각했다. 몇 달 전에 처음 발견하고, 학기가 끝나면 해…

  [frontend]