티스토리

프론트엔드 연구소
검색하기

블로그 홈

프론트엔드 연구소

powerku.tistory.com/m

프론트엔드 개발 관련 글을 작성하고 공유합니다😊

구독자
35
방명록 방문하기
공지 비전공자에서 프론트엔드 개발자 5년차⋯ 모두보기
반응형

주요 글 목록

  • JavaScript - 아이폰 스톱워치 만들기 기능시작 / 정지 / 재시작 분, 초, 밀리초로 표시랩See the Pen Stop Watch by powerku (@powerku) on CodePen. 공감수 1 댓글수 0 2025. 3. 21.
  • 사용하지 않는 dependency 정리하기 depcheck 사용하지 않는 dependency 정리하기 프로젝트를 점점 진행하다보면 package.json 파일에 dependency가 점점 쌓이게 됩니다.초기 프로젝트 세팅을 위한 vue, react, express 등등eslint, prettier, test tool 등각종 편의를 위한 라이브러리 등 모두 프로젝트에 사용하면 좋겠지만, 테스트를 위해 추가했다고 지우지 않고 커밋을 한다던가,더 이상 사용하지 않는 기능이라서 dependency에만 남아있는 경우가 있습니다.사용하지 않는 dependency가 계속 프로젝트에 남아 있으면프로젝트가 무거워지고 build 할때도 오래 걸리게 됩니다. 이럴때 필요한 라이브러리가 있습니다.depcheckpackage.json 에서 더 이상 사용하지 않는 쓸모 없는 depend.. 공감수 3 댓글수 1 2024. 12. 19.
  • 자바스크립트 - Promise all, allSettled 사용법, 차이점 자바스크립트에서비동기 작업 중 여러개의 API를 동시에 호출하고모든 비동기 작업이 완료 되었을 때, 새로운 코드를 작성하고 싶을 때가 있습니다. 또, 여러개의 API를 순차적으로 날리지 않고 동시에 호출하여 웹 성능을 향상할 수도 있습니다. 그럴때 Promise 메서드 중 all 과 allSettled 를 사용할 수 있습니다. Promise.all()Promise.all() 의 경우에는 n개의 비동기 함수를 동시에 실행하고 모든 함수가 완료하면, 함수의 결과 값을 반환합니다.하지만, 단 하나의 함수라도 실패하면 Promise가 실패되게 됩니다. const response = await Promise.all([ getExcelFile('name1.xls', 1000), getExcelFile('name.. 공감수 1 댓글수 0 2024. 8. 29.
  • 자바스크립트 - 비동기 Promise 란? 자바스크립트에서 비동기 함수들을 사용할 때, Promise를 많이 사용합니다.또 confirm, modal 등 미래에 일어날 일들에 대해서 Promise를 사용해서 개발을 진행하면편리하게 개발할 수 있는 장점이 있습니다. Promise 란?Promise 란 비동기 작업을 할 때, 미래에 일어날 결과 또는 실패 값을 나타내는 객체입니다. Promise 에는 세 가지 상태가 있습니다.pending (완료하지 않은 아직 대기 상태)fulfilled (완료)reject (실패)const getExcelFile = (name, delay = 1000, isSuccess = true) => { return new Promise((resolve, reject) => { setTimeout(() => { .. 공감수 1 댓글수 0 2024. 8. 24.
  • JavaScript - 조건부 배열 추가 하기 자바스크립트에서 조건에 따라서 배열에 값을 추가하고 싶을 때가 있습니다. 1. if문 이용하기고전적인 방법이지만 if 문을 이용하여 조건부로 추가할 수 있습니다.const arr = [];const condition = true;if (condition) { arr.push('superman');} 2. 삼항 연산자 이용하기삼항연산자를 이용하여 조건부로 배열의 값을 추가 할 수 있습니다.true 시 값이 있는 배열은 push 가 되고, 빈 배열은 아무값도 추가되지 않습니다.const condition = true;const arr = [ ...(condition ? ['superman'] : [])]   JavaScript - 조건부 객체 속성 추가하기조건에 따라서 객체의 속성을 추가하고 싶을 때.. 공감수 1 댓글수 0 2024. 6. 27.
  • 자바스크립트 - 사칙 연산 계산기 만들기 더하기, 빼기, 곱셉, 나누기, 나머지 계산하는 계산기 입니다. html계산기 첫번째값: 두번째값: + - * / % 계산결과:  javascriptconst num1 = document.getElementById('num1');const num2 = document.getElementById('num2');const plusBtn = document.getElementById('plusBtn');const subBtn = document.getElementById('subBtn');const multBtn = document.getElementById('multBtn');const divBtn = document.getElementById('divBtn');const res.. 공감수 2 댓글수 0 2024. 6. 23.
  • 자바스크립트 - 객체 속성 값을 변수로 만드는 방법 자바스크립트에서 객체를 사용하다고 보면 key 값을 변수로 사용하고 싶을 때가 있습니다.ES2015 문법 부터는 쉽게 객체의 key 값을 변수로 선언하여 사용할 수 있습니다. 객체 초기화 하기일반적으로는 아래와 같이 초기화 할 수 있습니다.var user = { name: 'superman', age: '23', job: 'developer'} 객체 초기화 (약식 문법)객체에 프로퍼티명을 약식으로 만들면 객체 property 값을 본인이 원하는 값으로 선언할 수 있습니다.const name = 'superman';const age = 23;const job = 'developler';var user = { name, age, job }  Computed Property 사용해서 객체 속성 변수.. 공감수 2 댓글수 0 2024. 6. 11.
  • 객체 구조 분해 이용하여 속성, key, property 삭제 하기 객체, 배열 구조 분해 사용법객체, 배열 구조 분해 할당을 사용하면 객체, 배열 내에 있는 값들을 쉽게 사용할 수 있습니다.const [a, b] = [1, 2]// a: 1, b: 2const { name, age } = { name: 'superman', age: 25 }// name: 'superman', age: 25  구조 분해 Rest Parameters 기능 사용하여 객체 Property 삭제 하기Rest Parameters란? 아래와 같이 뒤에 있는 남은 매개 변수를 한번에 받을 수 있는 방법입니다.function foo(...a) { console.log(a)}foo(1, 2, 3, 4) // [1, 2, 3, 4] 객체 구조 분해 Rest Parameters를 사용하면 객체의 키를.. 공감수 1 댓글수 0 2024. 6. 4.
  • 자바스크립트 - map 함수에서 비동기 함수 사용하기 async, Promise.all map 함수에서 비동기 사용하기 async function asynFunction(id) { const res = await fetch('https://dummyjson.com/products/${id}'); const data = await res.json(); console.log(data); return data } const array = [1, 2, 3, 4, 5]; const userList = array.map(async (id) => await asyncFunction()); console.log(userList); 위와 같이 map 함수에서 비동기 함수를 호출하게 되면 아래와 같이 데이터의 결과 값들이 아니라 Promise 객체가 반환 됩니다. await 의 경우에는 promise 객체는.. 공감수 0 댓글수 0 2024. 4. 19.
  • 자바스크립트 - 함수 속도 측정할 수 있는 방법 console.time(), performance.now() 프론트엔드 개발에서 성능 향상은 중요한 요소 중에 하나 입니다. 성능 향상을 위해 자바스크립트 함수 속도를 측정 할 수 있는 방법에 대해서 알려드리겠습니다. console.time() console.time(); doSomething(); console.timeEnd(); // default: 8007.467041015625 ms console 의 static 메서드인 time을 이용해서 속도를 측정할 수 있습니다. time 메서드 호출 이후, timeEnd 메서드를 호출하기까지의 시간을 계산해서 콘솔에 표시 해줍니다. 간단히 속도를 콘솔에서 확인할 수 있는 장점이 있지만, 콘솔에서만 확인할 수 있고, 데이터로 처리 하거나, 다른 방법으로 확인할 수 없는 단점이 있습니다. performance.now().. 공감수 1 댓글수 0 2024. 3. 31.
  • 자바스크립트 - 원시형(primitive) 이란? primitive이란? 자바스크립트의 원시형 타입이 있습니다. 객체도, 메서드도 속성을 가지지 않은 데이터 입니다 primitive 종류 총 7개가 있습니다. String Number Boolean null undefined 그리고 ES6 문법에서 Symbol ES 2020 문법 BigInt 가 추가 되었습니다. Symbol BigInt 예시 var str = 'superman'; console.log(str.length); // 8 str 변수에 superman 값을 담고 length 속성을 부르게 되면 8이 콘솔에 찍히게 됩니다. 문자열 데이터가 어떻게 length라는 속성을 가지게 되는건가요? length를 호출할 때, String 객체 래퍼를 만들고, 그 객체 length 속성 값을 가지고 오게 .. 공감수 1 댓글수 0 2024. 3. 26.
  • 자바스크립트 - async await 비동기 처리하기 비동기 asynchronous 란? 특정 작업이 완료할 때까지 대기하지 않고, 다른 작업을 먼저 진행하고 특정 작업이 완료가 되면 이벤트에 응답할 수 있는 방법입니다. fetch('https://dummyjson.com/users') .then(res => res.json()) .then(console.log); // to do something fetch 작업을 진행하고, 아래에는 다른 작업들이 진행되게 됩니다. 그리고 then 을 이용하여 api 호출이 완료가 되면 완료 이후 로직이 타게 됩니다. async / await 여러 비동기 함수를 콜백함수를 이용해서 처리하면, 콜백 지옥에 빠질 수 도 있습니다. 그렇게 되면 코드가 복잡하게 되어서 로직을 이해하기 어려울 수 있습니다. async / awai.. 공감수 1 댓글수 1 2024. 2. 24.
  • 자바스크립트 - 고차 함수와 보조 함수란? 함수형 프로그래밍에서 고차함수를 적극 사용합니다. 고차함수란? 함수 중에 파라미터로 함수를 받거나, 함수를 리턴하는 함수가 고차 함수입니다. 배열 고차 함수 중에 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.. 공감수 0 댓글수 0 2024. 2. 24.
  • 자바스크립트 - 함수형 프로그래밍이란? 함수형 프로그래밍이란? 함수형 프로그래밍은 항상 동일하게 동작하는 함수를 만들고, 보조 함수를 이용해서 로직을 완성하는 방식으로 프로그래밍을 하는 방법입니다. 예시 function map(array, condition) { const newArray = []; for (var i = 0; i 10; }) console.log(list); // [20, 30] map 함수에서 첫 번째 파라미터는 배열을 받고, 두 번째 파라미터는 조건을 .. 공감수 1 댓글수 0 2024. 2. 22.
  • 자바스크립트 - 호이스팅이란? (hoisting) 호이스팅이란? 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.. 공감수 1 댓글수 0 2024. 2. 22.
  • 자바스크립트 - 클로저란? (closure) 클로저란? 클로저는 영어로는 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 값을 기억하여 새로운 값을 만들 수 있습니다. 클로저는 언제 .. 공감수 1 댓글수 0 2024. 2. 21.
  • 자바스크립트 - 일정한 시간 간격으로 함수 호출하는 쓰로틀링(throttling) 구현하기 쓰로틀링(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) 디바운스 마지막으로 발생한 함수만 호출.. 공감수 2 댓글수 1 2024. 2. 15.
  • 자바스크립트 - 함수 호출 지연 시키는 debounce 구현하기 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.. 공감수 2 댓글수 0 2024. 2. 13.
  • 자바스크립트 Web Worker 사용하기 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.. 공감수 2 댓글수 1 2024. 2. 7.
  • JavaScript - 고유한 값을 저장하는 집합 Set 자바스크립트에 Set 문법이 있습니다. 자바스크립트에서 값을 저장할 때, 배열이나 객체를 많이 사용하는데 ES6 이후 부터 Set이 추가되었습니다. 기존 배열과 차이점이 뭔지 Set에 대해서 알아보도록 하겠습니다. Set 이란? 고유한 값을 저장하는 집합입니다. 값의 중복을 허용하지 않고 Index가 없다는 점이 배열과의 차이점입니다. Set 사용법 const mySet = new Set(); const mySet2 = new Set([1, 2, 3, 4, 5]); 데이터 추가 / 삭제 / 값 존재 여부 const mySet = new Set(); // 값 추가 mySet.add(1); mySet.add(2); mySet.add(3); mySet.add(1); // nope // 값 제거 mySet.de.. 공감수 1 댓글수 0 2024. 1. 12.
  • JavaScript - 파일 업로드 구현하기 multipart/form-data 파일 업로드 구현할 때, input file 태그에서 파일을 입력받고 파일 업로드를 하고 FormData에 파일을 넣고 axios post 메서드를 이용해서 파일 전송을 할 수 있습니다. 파일 업로드 예시 파일 업로드 const uploadBtn = document.getElementById('uploadBtn'); uploadBtn.addEventListener('click', () => { const fileInput = document.getElementById('fileInput'); const file = fileInput.files; const formData = new FormData(); forData.append('file', file); cosnt response = axios.post.. 공감수 1 댓글수 0 2024. 1. 11.
  • 자바스크립트 undefined와 null 차이점 자바스크립트에서는 undefined 와 null 개념이 있습니다. 언뜻 보면 둘다 비어있는, 없다라는 느낌의 친구들인데, 어떤 차이점이 있는지 알아보도록 하겠습니다. 둘다 값이 없거나, 정의 되지 않는 상태를 뜻합니다. Boolean 으로 표현하면 false 입니다. undefined 변수 또는 인수를 선언 후 값을 할당하지 않으면 undefined가 됩니다. 숫자적 표현하면 NaN 입니다. undefined + 12 // NaN null 의도적으로 비어있을 표현하는 값입니다. 숫자적으로 표현하면 0에 가깝습니다. null + 12 // 12 공감수 1 댓글수 0 2023. 12. 26.
  • JavaScript - 객체 복사 합치기 ➡️ Object.assign, Spread 연산자 공통점과 차이점 자바스크립트에서 객체를 합치는 방법 두가지에 대해서 말씀드리려고 합니다. Object.assign 함수를 이용하는 방법과 자바스크립트 Spread 연산자인 전개 연산자를 사용하는 방법이 있습니다. 두가지 방법 사용법과 공통점과 차이점에 대해서 알아보도록 하겠습니다. 사용법 1. Object.assign 이용하기 const target = { name: 'superman' }; const source = { age: 20 }; const result = Object.assign(target, source); // {name: 'superman', age: 20} 2. Spread 연산자 이용 하기 const target = { name: 'batman' }; const source = { age: 21 }.. 공감수 3 댓글수 1 2023. 11. 28.
  • JavaScript - 조건부 객체 속성 추가하기 조건에 따라서 객체의 속성을 추가하고 싶을 때가 있습니다.특정 조건일 경우에만 { name: 'superman' } 을 추가할 때 어떻게 코딩하면 좋은지 한번 알아보도록 하겠습니다. 고전적인 방법if문을 통해서 프로퍼티를 생성하고 값을 넣는 방법이 있습니다.var isCondition = true;var person = { age: 20};if (isCondition) { person.name = 'superman';} 삼항 연산자 이용하기객체에 삼항연산자를 이용해서 프로퍼티를 추가할 수 있습니다.var isCondition = true;var person = { age: 20, ...(isCondition ? { name : 'superman' } : {})}; 논리 연산자 ( && ) .. 공감수 1 댓글수 1 2023. 11. 28.
  • 드래그 할때, 클릭 이벤트 방지 하는 방법 아래와 같이 클릭 이벤트를 만들어서 사용하고 있었습니다. 하지만, 드래그할 때도 아래와 같이 클릭 이벤트가 발생하였습니다. 저는 단지 드래그 이후 복사를 하고 싶었는데, 클릭 이벤트를 발생시키고 싶지 않았습니다. const div = document.querySelector('div'); div.addEventListener('click', () => { alert('click'); }); 클릭 이벤트 방지 시키는 방법 아래와 같이 mousedown, mousemove 이벤트를 이용해서 동작이 드래그인지 판단합니다. 그 이후 mouseup 이벤트에서 click 이벤트 로직을 실행시킵니다. const div = document.querySelector('div'); let isDrag; div.addEve.. 공감수 2 댓글수 3 2023. 11. 23.
  • a태그 이용해서 파일 다운로드 하는 방법 2가지 a태그를 이용해서 다운로드할 수 있는 방법 두 가지에 대해서 알아보도록 하겠습니다. a 태그 download 속성 이용하기 a태그는 해당 url로 이동하거나, 새 탭을 열 수 있습니다. 하지만 download 속성을 사용하면 해당 url의 파일을 다운로드할 수 있습니다. download 값을 넣게 되면 해당 이름으로 파일 다운로드를 할 수 있습니다. 다운로드 단 주의해야할점이 있습니다. 동일 출처 정책에 의해서 다운로드 파일의 경로가 현재 페이지의 url과 동일해야 다운로드가 가능합니다. clickEvent를 이용해서 다운로드하기 다운로드의 파일 경로가 다르다면 a tag에 click 이벤트를 이용해서 다운로드할 수 있습니다. 아래와 같은 방법으로 파일 다운로드를 할 수 있습니다. 다운로드 const c.. 공감수 2 댓글수 1 2023. 11. 21.
  • 자바스크립트 - 문자열로 변경하는 방법 4가지 자바스크립트에서 문자열로 변경하는 방법이 여러가지 있습니다. 그 중 4가지를 소개 시켜드리겠습니다. String() String 생성자를 이용해서 문자열 변경할 수 있습니다. const num = 123; const obj = { name: 'superman' }; const arr = ['superman', 'batman'] const str = String(num); // '123' const str2 = String(obj); // [object Object] const str3 = String(arr); // superman,batman .toString() toString 메서드를 이용해서 문자열로 변경할 수 있습니다. const num = 456; const obj = { name: 'supe.. 공감수 2 댓글수 1 2023. 11. 12.
  • 자바스크립트 - 문자열을 숫자로 변경하는 방법 parseInt, Number 차이점 자바스크립트에서 문자열을 숫자로 변경할 수 있습니다. parseInt 함수를 사용하거나, Number 생성자를 이용하는 방법이 있습니다. parseInt와 Number를 사용하면 간단하게 문자열을 숫자로 변경할 수 있지만, 몇 가지 차이점이 있기 때문에 주의하셔야 합니다. 기본사용법 const str = '100'; parseInt(str); // 100 Number(str); // 100 뒤에 문자가 들어간 숫자 const str2 = '100px'; parseInt(str2); // 100 Number(str2); // NaN 앞에 문자가 들어간 숫자 const str3 = '약300'; parseInt(str3) //NaN Number(str3) // NaN 공백이 들어간 숫자 const str4 .. 공감수 2 댓글수 2 2023. 11. 7.
  • jQuery serialize() 이용해서 Form 데이터 ajax POST 전송하기 html의 폼 태그에 입력한 정보들을 POST 요청으로 전달하고 싶을 때가 있습니다. serialize jQuery serialize 메서드를 이용하면 폼 패너 내에 input, selelct, textarea의 value 값을 간단하게 표준 url 인코딩 형태 문자열로 만들 수가 있습니다. 회원가입 var formData = $('form').serialize() // id=1&password=2&username=superman&userEmail=superman@naver.com POST 전송 form Data를 jQuery ajax 옵션의 data 속성에 적용하면 POST로 데이터 전송이 가능합니다. $(document).ready(function() { $("#submitBtn").click(fun.. 공감수 1 댓글수 1 2023. 10. 4.
  • 자바스크립트 - fetch 이용해서 Ajax 비동기 통신 하기 fetch fetch API를 이용하면 서버와 브라우저를 비동기적으로 통신할 수 있습니다. fetch API 이전에는 XMLHttpRequest를 이용해서 통신을 하였습니다만, 너무 어렵고 복작해서 주로 jQuery 라이브러리를 많이 사용하였습니다. 현재는 fetch로 브라우저 window 객체에 내장 되어 있어서 다른 라이브러리 없이 비동기 통신을 할 수 있습니다. fetch 사용법 fetch(URL, Options); Get 방식 호출 기본적으로 Options 값이 없으면 GET 방식으로 호출됩니다. response는 json()으로 변경하면 요청한 데이터를 가지고 올 수 있습니다. fetch("https://jsonplaceholder.typicode.com/posts").then(function(.. 공감수 1 댓글수 0 2023. 9. 21.
    반응형
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.