JavaScript - 아이폰 스톱워치 만들기

기능시작 / 정지 / 재시작 분, 초, 밀리초로 표시랩See the Pen Stop Watch by powerku (@powerku) on CodePen.

• format_list_bulleted Develop/JavaScript
• · 2025. 3. 21.
• textsms

자바스크립트 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..

• format_list_bulleted Develop/JavaScript
• · 2024. 2. 7.
• textsms

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..

• format_list_bulleted Develop/JavaScript
• · 2024. 1. 11.
• textsms

Request with GET/HEAD method cannot have body 오류 해결 방법

오류 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. fetch("https://jsonplaceholder.typicode.com/posts", { body: JSON.stringify({id: 1}) }).then(function(response) { return response.json(); }) 자바스크립트에서 fetch 호출 시 위와 같은 에러가 발생하였습니다. 원인 GET 방식의 호출인데, body에 값을 넣어서 발생하였습니다. GET 방식은 읽기 전용이기 때문에 body 값을 가질 수가 없습니다. 해결방법 1. 읽기 전용이 아닌 ..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 21.
• textsms

자바스크립트 - function vs Arrow 함수 무엇을 사용하는 것이 좋을까?

자바스크립트에 함수를 만들 수 있는 방법이 일반적으로 function 함수가 있고 ES6 문법 이후로 Arrow 함수가 생겼습니다. function 함수 함수를 만드는 일반적인 방법입니다. function add(a, b) { return a + b; } 생성자, arguments, prototype 기능이 사용 가능합니다. 함수 선언시에 호이스팅 됩니다. 함수에 이름 있어 직관적으로 사용이 가능하고 디버깅등에 편리합니다. Arrow 함수 const add = (num1, num2) => { return num + 1 } 화살표 키워드를 이용해서 간편하게 함수를 표현할 수 있습니다. 더 간단히 return 키워드와 중괄호까지 생략할 수 있습니다. const add = (num1, num2) => num1..

• format_list_bulleted Develop/JavaScript
• · 2023. 9. 20.
• textsms

자바스크립트 - onclick / addEventListener 이용하여 이벤트 사용하기

HTML과 자바스크립트에서 이벤트를 등록할 수 있습니다. 1. HTML에서 이벤트 등록 btn1 HTML 태그에 onclick을 입력하여 클릭 이벤트를 등록하는 방법이 있습니다. 2. JavaScript onclick 속성 추가하기 자바스크립트에서 onclick속성을 부여해서 이벤트를 추가하는 방법이 있습니다. const btn = document.querySelector('#btn2'); btn.onclick = function() { alert('Hi') }; 3. addEventListener를 이용하여 이벤트 등록하는 방법 element에서 addEventListener를 이용하여 클릭 이벤트를 등록할 수 있습니다. const btn = document.getElementById('btn'); b..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 14.
• textsms

React 프로젝트 설정하기

간단하게 React 프로젝트를 설정해 보겠습니다. 1. Node 설치하기 먼저 컴퓨터에 Node.js가 설치되어 있어야 합니다. 아래 사이트에서 설치할 수 있습니다. https://nodejs.org/en/ 2. 터미널 열기 터미널을 열고 본인이 React 프로젝트를 설정하고 싶은 폴더로 이동합니다. 3. React 설정하기 터미널 창에 아래와 같이 입력합니다. npx create-react-app hello-react hello-react는 프로젝트 이름이며, hello-react 폴더가 생기며 자동으로 react 설치됩니다. 짜잔 설치 완료되었습니다. 이제 아래와 같이 입력하여서 react 프로젝트를 실행해보겠습니다. cd hello-react npm start 자동으로 localhost:3000이 ..

• format_list_bulleted Develop/React
• · 2023. 1. 9.
• textsms

자바스크립트 try..catch를 사용하는 이유

try…catch를 사용하는 이유 자바스크립트는 에러가 발생하면, 스크립트가 종료된다. try..catch문을 에러가 발생할 것 같은 곳에서사용하면 스크립트 종료 없이 아래와 같이 동작하게 된다. 동작 순서 error 발생 try문 중단 catch 동작 이후 스크립트 실행 아후스크립트가 종료하지 않고 계속 진행한다. try { wakeup(); // ReferenceError: wakeup is not defined } catch(e) { console.log(e); } throw throw 고의로 오류를 발생시킨다. 스크립트 오류는 아니지만, throw 문을 사용하게 되면 오류를 발생 시킬 수 있다. try { // do Something; throw '에러 발생'; } catch(e) { consol..

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 27.
• textsms

자바스크립트 실행과 페이지 렌더링은 별개다

sample document.body.innerHTML = 'Hello'; var time = 3000; var date = new Date().getTime() + time; var curDate = new Date().getTime(); while(curDate < date) { curDate = new Date().getTime(); } 위 코드 실행 시 반복문에 다 돌고 난 뒤 페이지에 Hello가 찍히게된다. innerHTML은 동기코드인데 왜 반복문이 다 돌고나서 찍히게 될까? 자바스크립트 실행과 페이지 렌더링을 별개이다. 자바스크립트 실행 이후 페이지 렌더링을 실행하게 된다. 단, 디버깅으로 보게되면 먼저 'Hello'가 렌더링이 된다.

• format_list_bulleted Develop/JavaScript
• · 2022. 9. 21.
• textsms

자바스크립트 - split 특정 문자를 기준으로 자르기

split 특정 문자를 기준으로 문자열을 잘라 배열에 넣어 return 합니다. 강남구/용산구/마포구 위의 구들을 '/' 기준으로 문자로 잘라서 사용하고 싶을 때 사용합니다. 문법 문자열.split('특정 문자') 사용 예시 var pNum = 010-1111-2222 var arr = pNum.split('-') for(var i=0 i

• format_list_bulleted Develop/JavaScript
• · 2019. 3. 22.
• textsms