쿤즈 Dev/JS HTML CSS31 [Javascript] HTML Radio 타입 선택된 값(checked value) 가져오는 방법 Javascript를 사용해서 많은 기능들을 프로그래밍하다보면 굉장히 간단한 것들에 고민을 하는 때가 발생합니다. 이 경우도 그렇습니다. 이번 포스팅에서는 HTML의 radio 타입에서 선택된 값을 가져오는 방법을 알아볼게요. HTML의 radio 타입 radio 타입은 HTML의 input 태그의 타입으로 생성가능한 타입입니다. 라디오타입은 여러 선택사항 중 하나를 선택할 때 사용하는 기능입니다. 이 경우는 성별을 선택하는 input 태그의 radio 타입입니다. 여기서 javascript 를 이용해서 선택된 값을 가져오는 방법은 무엇일까요? Javascript를 이용해 radio 선택값 가져오기 Javascript를 이용해서 선택된 값을 가져오는 방법은 간단합니다. 바로 querySelector() .. 2022. 3. 18. [Javascript] Promise 사용시 async, await 사용하는 방법 지난 포스팅에서는 프로미스(Promise)에 대해서 알아보고 Promise 함수를 만드는 방법에 대해서 소스코드로 알아보았습니다. 비동기 함수를 사용하데 있어서 어려움이 있습니다. 이 어려움을 프로미스가 조금 더 편리하게 비동기 함수를 사용할 수 있도록 만들어 주었습니다. 이번 포스팅에서는 비동기를 동기처럼 사용해 볼 수 있는 async와 await에 대해서 알아보겠습니다. async와 await async와 await 키워드를 사용하면 프로미스를 조금 더 편하게 사용할 수 있습니다. 그럼 각각은 어떤 역할을 하고 있는지 보시죠. async async는 함수 앞에 붙는 키워드입니다. 이 키워드를 사용하면 사용한 함수는 항상 프로미스(Promise)를 반환합니다. 아래 예제를 보겠습니다. const asy.. 2021. 6. 1. [Javascript] 프로미스(Promise) 비동기 함수 사용 방법 지난 포스팅들에서는 비동기의 작동 방법과 대표적인 함수인 setTimeout() 함수, 그리고 콜백 함수를 사용하는 방법까지 알아보았습니다. 2021.05.23 - [쿤즈 Dev/JS HTML CSS] - [Javascript] 비동기(Asynchronous) 사용해보기 2021.05.26 - [쿤즈 Dev/JS HTML CSS] - [Javascript] 콜백 (Callback) 함수 사용 방법 비동기와 콜백의 개념과 사용을 알고 있어야만 이번 포스팅에서 진행할 프로미스(Promise)에 대해서 이해하실 수 있습니다. 이번 포스팅에서는 프로미스(Promise)를 사용하는 방법에 대해서 알아보도록 하겠습니다. 프로미스(Promise)란 무엇인가 프로미스는 비동기 함수를 보다 편리하게 다룰 수 있는 Obj.. 2021. 5. 28. [Javascript] 콜백 (Callback) 함수 사용 방법 Javascript를 공부하다 보면 반드시 나오는 단어 중 하나가 바로 콜백(Callback) 함수입니다. 그리고 콜백 함수를 조금 더 쉽고 편하게 사용하기 위한 기능도 내장되어 있습니다. 이번 포스팅에서는 콜백 함수가 무엇이고 어떻게 사용한지 알아보도록 하겠습니다. 콜백(Callback) 함수란 무엇인가 콜백 함수는 어떤 함수를 실행시키고 난 이후에 결과를 받을 함수 혹은, 그다음에 실행될 함수를 의미합니다. 콜백 함수가 나오게 된 이유는 Javascript의 모든 이벤트는 모두 싱글 스레드입니다. 즉, 한 번에 한 가지 일만 처리하는 것이죠. 싱글 스레드의 경우는 작업을 요청한 이후에 그 작업이 끝날 때까지 다음 작업은 진행할 수 없습니다. 만약 통신 과정이 포함되어 있고 데이터를 보낸 이후에 답이 .. 2021. 5. 27. [Javascript] 비동기(Asynchronous) 사용해보기 Javascript 프로그래밍에서 이제는 빼놓을 수 없는 프로그래밍 방법이 바로 비동기 (Asynchronous) 프로그래밍입니다. 이번 포스팅에서는 비동기가 무엇인지 알아보고 대표적인 비동기 함수인 setTimeout()에 대해서 알아보겠습니다. 비동기(Asynchronous)란 무엇인가 비동기 프로그램 이전에 동기 프로그래밍이 있었습니다. 대부분의 C언어는 동기 프로그래밍입니다. 동기와 비동기의 차이점은 하나입니다. 결과를 받을 때까지 기다리는가, 아니면 기다리지 않는가. 이게 무슨 의미인지 아래를 보도록 하겠습니다. 우선 동기(Synchronous)라고 생각해 보겠습니다. statement1(); statement2(); statement3(); statement1() 함수를 실행했을 때 st1의 .. 2021. 5. 23. [Javascript] Map 사용 방법 (ES6) Javascript의 ES6 이상 버전에서는 여러 가지 편리한 기능과 함수들이 다수 등장했습니다. 이전 포스팅에서 언급한 Spread 연산자도 그 한 부분입니다. 이번 포스팅에서는 map에 대해서 알아보고 사용을 해보도록 하겠습니다. Javascirpt Map Javascript에서 Map은 Object과 유사한 부분을 가지고 있습니다. 모두 key와 value의 형태로 데이터를 저장한다는 것입니다. 다만 Map의 키는 문자열뿐만 아니라 함수 혹은 다른 데이터 타입도 키로 사용할 수 있습니다. Javascript의 Map을 사용하는 방법은 다음과 같습니다. let map = new Map(); console.log(map); // Map(0) {} 새로운 Object를 변수에 대입시킬때처럼 new 키워드.. 2021. 5. 22. [Javascript] 최댓값, 최솟값 구하는 방법 Javascript를 이용해서 여러 가지 수학적인 계산을 하는 경우도 있고, 데이터를 분석하기 위해서 값을 찾는 경우도 있습니다. 이번 포스팅에서는 Javascript 내장 함수를 이용해서 최댓값과 최솟값을 구하는 방법을 알아보겠습니다. Javascript 최댓값 구하기 최댓값과 최솟값을 구하기 위해서는 Javascript 내장 함수를 사용합니다. 내장 함수는 Math Object의 max(), min() 함수입니다. Math.max([val1, val2, ... ]) Math Object에는 많은 함수들이 있습니다. 그중에서도 max() 함수를 사용합니다. max() 함수의 parameter는 값들이 들어갑니다. 예를 들어서 보도록 하겠습니다. Math.max(1, 2, 3, 4, 5); // 5 ma.. 2021. 5. 20. [Javascript] 연산자 Spread 사용 방법(2): Rest Parameter 지난 포스팅에서는 Spread 연산자에 대해서 알아보았습니다. Spread 연산자는 ... 키워드를 이용해서 배열을 손쉽게 복사하고 추가할 수 있는 키워드입니다. 이번 포스팅에서는 Spread 연산자를 이어서 Rest Parameter에 대해서 알아보도록 하겠습니다. Javascript Rest Parameter 일반적으로 Javascript의 함수 사용시 parameter로 값을 넣을 때에는 아래와 같이 사용합니다. let myFunc = function ( arg1, arg2, arg3 ) { ... } 받을 parameter의 개수를 파악하여 입력받을때 만들어줍니다. 그렇다면 Spread 연산자를 이용해 보면 어떨까요? let myFunc = function ( ...args ) { ... } 위와.. 2021. 5. 17. [Javascript] 연산자 Spread 사용 방법(1): 복사, 합치기 Javascript의 ES6버전을 소개해 드렸습니다. 그리고 하나씩 자세히 포스팅하고 있어요. 이번 포스팅은 Spread 연산자입니다. Javascript Spread 연산자 Javascript의 Spread 연산자는 ES6버전에서 새롭게 등장한 연산자입니다. 새롭게 등장했지만 너무나 활용도가 좋아서 Javascript를 이용하는 많은 프로그램(Node.js, React 등)에서도 자주 사용하는 문법입니다. Spread 연산자는 ... 입니다. 점 세 개를 연산자로 사용한다니 첫 느낌이 신기한 느낌입니다. Spread 연산자는 아래와 같이 사용합니다. const arr = [1, 2, 3, 4, 5]; console.log(...arr); // 1 2 3 4 5 Spread 연산자는 반복문처럼 배열에서 .. 2021. 5. 16. 이전 1 2 3 4 다음
