프론트엔드 연구소
함수형 프로그래밍에서 고차함수를 적극 사용합니다. 고차함수란? 함수 중에 파라미터로 함수를 받거나, 함수를 리턴하는 함수가 고차 함수입니다. 배열 고차 함수 중에 filter 함수가 있습니다. const array = [1, 2, 3]; array.filter((val) => { return val > 2 }) 이렇게 파리미터에 함수를 넣는 함수들을 고차 함수라고 합니다. 보조함수란? 보조 함수는 마찬가지로 고차함수에 파라미터로 들어가는 함수들을 보조 함수라고 합니다. button.addEventListener("click", function (e) { // click event listener }); 클릭 이벤트 리스너도 보조 함수입니다. const array = [1, 2, 3]; array.filt..
함수형 프로그래밍이란? 함수형 프로그래밍은 항상 동일하게 동작하는 함수를 만들고, 보조 함수를 이용해서 로직을 완성하는 방식으로 프로그래밍을 하는 방법입니다. 예시 function map(array, condition) { const newArray = []; for (var i = 0; i 10; }) console.log(list); // [20, 30] map 함수에서 첫 번째 파라미터는 배열을 받고, 두 번째 파라미터는 조건을 ..
호이스팅이란? hoist는 영어로 끌어올리다는 뜻입니다. 호이스팅은 변수와 함수를 선언할 때, 자신의 스코프 최상단으로 끌어올려서 어디서든 볼 수 있도록 하는것을 호이스팅이라고 합니다. 호이스팅 예시 1 add(1, 2); // 3 function add(a, b) { return a + b; } 위와 같이 add 함수를 아래에서 만들어도 호이스팅이 되어서 위에서 실행될 수 있습니다. minus(2, 1); // Uncaught TypeError: minus is not a function var minus = function(a, b) { return a - b } 단 변수에 함수를 담게 되면 에러가 발생 됩니다 에러가 발생하는 이유는 변수의 경우에는 선언과 초기화가 구분이 되어 있습니다. consol..
클로저란? 클로저는 영어로는 closure 폐쇄라는 뜻을 가지고 있습니다. 자바스크립트에서 클로저는 이렇게 정의할 수 있습니다. 클로저는 자신(함수)이 생성될 때, 자신의 스코프에서 알 수 있는 변수를 기억하는 함수입니다. 클로저 예시 function a() { var num1 = 5; function b(num2) { return num1 + num2; } return b; } var obj = a(); console.log(obj(5)); // 10 console.log(obj(10)); // 15 b 함수가 클로저입니다. b 함수가 생성될 때, num1 변수를 기억하고 있고, a 함수의 실행이 끝나도, obj 함수를 통해서 계속 num1 값을 기억하여 새로운 값을 만들 수 있습니다. 클로저는 언제 ..
쓰로틀링(throttling) 이란? 일정한 시간 간격으로 함수를 호출하는 방법입니다. 주로 스크롤 이벤트, 마우스 이동 등에서 사용하는 방법입니다. 쓰로틀링(throttling) 구현하기 function throttle(func, delay) { let timeoutId; return function() { if (!timeoutId) { timeoutId = setTimeout(() => { func(); timeoutId = null; }, delay); } }; } 쓰로틀링(throttling) 예시 See the Pen debounce by powerku (@powerku) on CodePen. 디바운스(debounce) vs 쓰로틀링(throttling) 디바운스 마지막으로 발생한 함수만 호출..
debounce란? 검색을 할 때, 검색어를 추천하는 기능이 있습니다. 하지만, 모든 음절마다 검색을 하게 되면 과도하게 많은 API가 발생할 수 있습니다. 일정 시간이 지날 때까지 함수 호출을 지연시키는 방법을 debounce라고 합니다. debounce 구현하기 const debounce = (func, delay = 300) => { let timer; return function () { clearTimeout(timer); timer = setTimeout(() => { func(); }, delay); }; }; const getData = () => { const ul = document.getElementById('content'); const li = document.createEleme..
1. Dockerfile 구성하기 FROM node WORKDIR /app COPY . /app RUN npm install EXPOSE 80 CMD ["node", "server.js"] FROM 필요한 노드 이미지 구축 할 때 사용합니다. 도커 허브에서 검색해서 사용 가능합니다. https://hub.docker.com/ Docker Hub Container Image Library | App Containerization Increase your reach and adoption on Docker Hub With a Docker Verified Publisher subscription, you'll increase trust, boost discoverability, get exclusive dat..
Web Worker 란? 자바스크립트는 싱글 스레드 언어입니다. 아래와 같이 작업 1과 작업 2가 있을 때, 자바스크립트는 작업 1을 모두 마친 뒤에 작업 2를 할 수가 있습니다. // 작업 1 let result = 0; for(let i = 0; i < 9999999999; i++) { result += i; } alert(result); // 작업 2 // do something 하지만 이런 방대한 계산을 처리하거나, 많은 브라우저에 부담을 주는 작업이 있을 때, Web Worker를 사용하면 주 메인 스레드가 아닌 백그라운드 스레드에서 작업을 할 수 있습니다. Web Worker 사용하기 index.html calculate calculate(use worker) 배경색 변경하기 js/app.js..
취업을 준비하면 원서접수 이후 코딩 테스트를 보는 경우가 있습니다. 대부분 자료구조, 알고리즘 등을 통해서 코딩 테스트를 보는데 그 외에도 간단한 요구사항을 주면서 취업을 준비할 때 프로젝트를 만들어 보라는 코딩 테스트도 두 번 정도 본 적이 있습니다. 프론트엔드의 경우 실무에서 알고리즘을 잘 사용하는 경우는 없어서 더욱 이런 코딩테스트를 많이 하는 것 같습니다. ex) 버스 예약 시스템 기능 : 예약하기 / 예약 조회하기 / 취소하기 등등 최근 저희 회사에서 지원한 분들의 코딩 테스트 결과물들을 검토한 적이 있습니다. 제가 누굴 평가할 수준은 아니지만, 어떻게 하면 지원자들이 제출한 코딩테스트들을 검토하면서 좋은 개발자를 뽑을 수 있을까 고민해 봤습니다. 1. 요구사항대로 기능 구현을 잘하였는가? (필..
2024년 실수령액 계산기로 이동하기
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.
