본문 바로가기

javascript32

[Javascript] HTML Radio 타입 선택된 값(checked value) 가져오는 방법 Javascript를 사용해서 많은 기능들을 프로그래밍하다보면 굉장히 간단한 것들에 고민을 하는 때가 발생합니다. 이 경우도 그렇습니다. 이번 포스팅에서는 HTML의 radio 타입에서 선택된 값을 가져오는 방법을 알아볼게요. HTML의 radio 타입 radio 타입은 HTML의 input 태그의 타입으로 생성가능한 타입입니다. 라디오타입은 여러 선택사항 중 하나를 선택할 때 사용하는 기능입니다. 이 경우는 성별을 선택하는 input 태그의 radio 타입입니다. 여기서 javascript 를 이용해서 선택된 값을 가져오는 방법은 무엇일까요? Javascript를 이용해 radio 선택값 가져오기 Javascript를 이용해서 선택된 값을 가져오는 방법은 간단합니다. 바로 querySelector() .. 2022. 3. 18.
[React] JSX 문법 살펴보기. Javascript? HTML? 엘리먼트? React를 사용하기 위해서는 기본적인 구조를 알아야 합니다. 또, Javascript는 기본으로 알면 더욱 좋지만 React를 하면서 배워도 괜찮습니다. 다만, JSX라는 것이 등장합니다. 이번 포스팅에서는 React에서 사용하는 JSX에 대해서 알아보도록 하겠습니다. React에서 사용하는 JSX란 우선 아래 형태를 볼게요. const element = Hello, world; element라는 변수에 HTML 태그가 저장되어 있습니다. 이러한 형태는 사실 Javascript도, HTML도 아닙니다. 이 둘을 모두 포함하고 있는 형태로 볼 수 있죠. JSX는 Javascript를 확장한 문법입니다. 따라서 Javascript의 모든 기능이 포함되어 있으면서도 HTML과 같은 엘리먼튼를 생성할 수도 있.. 2021. 6. 8.
[React] React구조와 Hello, World 출력하기 앞선 React 포스팅에서는 Node.js를 설치하고 React 라이브러리를 설치한 이후에 React 앱을 만들어서 실행해 보았어요. 2021.06.02 - [쿤즈 Dev/React] - [React] 새로운 React 앱 만드는 방법 앱을 만들 때는 간단한 패키지 관리자인 npx를 이용해서 만들었고 실행도 npm을 이용해서 진행했습니다. 이번 포스팅에서는 간단히 Hello, World를 출력해보겠습니다. 목차 React 내부 구조 React를 설치한 디렉터리를 VSCode를 이용해서 열어보았습니다. * VSCode외 다른 개발 툴을 이용해도 됩니다. 이 포스팅에서는 VSCode를 이용합니다. 디렉터리(폴더) 구조 열어서 구조를 보시면 아래와 같이 구성되어 있습니다. node_modules은 설치된 모듈.. 2021. 6. 4.
[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.

티스토리툴바