본문 바로가기

자바스크립트35

JavaScript - 배열 숫자 데이터 정렬하기 / sort(); 자바스크립트 배열 숫자 정렬 방법 안녕하세요. 고코더 입니다. 오늘은 자바스크립트에서 배열에 담긴 데이터를 정렬할 수 있는 함수를 한번 알아보려고 합니다. 내장 함수로 있는 바로 sort()가 그 주인공입니다. 오늘은 그중에서도 문자와 숫자를 정렬하는 방법을 알아보겠습니다. ● 1. 먼저 정렬할 배열을 선언합니다. data라는 변수에 정렬되지 않은 데이터를 입력하였습니다. var data = [1, 11, 12, 2, 3, 4]; ● 2. 이제 sort()를 기본으로 사용해 정렬해보겠습니다. 결과 값을 보시면 알겠지만 숫자도 문자 순서대로 정렬되어 뒤죽 반죽이 되었습니다. 1 다음 11이 오는 특징을 확인할 수 있습니다. data.sort(); // 결과값 [1, 11, 12, 2, 3, 4] ● 3. .. 2021. 4. 1.
Vanilla js - 바닐라 JS란? 무엇일까? / vanilla-js.com/ 바닐라 JS는 순수 자바스크립트다? 안녕하세요. 고코더 입니다. ● 1. 자바스크립트, 커피스크립트, 타입스크립트, 제이쿼리 등등 스크립트라는 이름도 참 많습니다. 요즘은 리액트, 뷰 까지 js 라는 이름이 들어간 네이밍이 많고 많습니다. 그중에서도 가장 특이한 이름을 뽑으라고 하면 아마도 "Vanilla JS" 바닐라 JS 라는 말은 좀 더 낯설 것입니다. 이 단어는 개발자도 모르는 경우가 많습니다. 도대체 맛있어 보이는 바닐라 JS는 무엇인지 한번 알아보겠습니다. ● 2. 해당 바닐라 JS를 알려주는 홈페이지를 방문해보겠습니다. 빠르고 가볍고 믿을 수 있는 자바스크립트라고 소개하고 있습니다. http://vanilla-js.com/ ● 3. 그리고 아래에는 다운로드 할 수 있는 버튼이 보입니다. 원하.. 2021. 2. 13.
JavaScript - setInterVal() 이란? / 반복 실행 메서드 / clearInterval() 스케줄러 실행 메서드 setInterVal() 안녕하세요. 고코더 입니다. ● 1. 오늘은 일정 시간을 두고 실행을 반복하는 메서드인 setInterVal에 대해 알아보겠습니다. 현업에서도 이 메서드는 자주 활용되는 기능입니다. 사용자의 상태를 체크하거나 매 초마다. 브라우저에 변화를 나타내기도 합니다. 대표적인 게 타이머 기능을 만들 때는 이 함수를 사용하게 됩니다. ● 2. 기본 사용방법 2번 라인 : 실행 코드를 넣습니다. 3번 라인 : 반복 실행 시간을 입력합니다. 1,000은 1초입니다. 100은 10/1 초입니다. setInterval( 실행코드, 1000 ); ● 3. 사용 시 주의할 점은 큰따옴표 묶어서 사용해야 제대로 동작합니다. setInterval("console.log('Timer .. 2021. 1. 24.
React.js - JSX에서 주석 사용하기 JSX에서 주석 안녕하세요. 고코더 입니다. ● 1. 이번 시간에는 JSX에서 주석을 사용하는 방법을 알아보겠습니다. JSX는 자바스크립트 기반입니다. 그러므로 주석도 스크립트에서 사용하는 방식입니다. 주석은 개발자들의 흔적을 남길 수 있고 지우는 대신에 주석을 처리함으로 실행되지 않게 할 수 있습니다. ● 2. 단일 행을 처리하는 주석입니다. 한 줄 한줄 사용 가능합니다. //단일행 주석 ● 3. 복수행을 처리하는 주석입니다. 여러 줄을 처리하는 복수행 주석을 사용합니다. /* 복수행 주석 */ ● 4. 예제 소스를 함께 살펴보겠습니다. 3번, 4번 라인 : 복수행 주석을 사용하여 2개의 줄을 한 번에 주석 처리했습니다. 5번 라인 : 중괄호 안에 자바스크립트에도 사용 가능 6번 라인 : 단일행을 주석.. 2021. 1. 20.
React.js - JSX에서 자바스크립트 문법 사용하기 JSX에서 javascript 문법 사용 안녕하세요. 고코더 입니다. ● 1. JSX는 자바스크립트와 XML이 합쳐진 확장 문법이라고 배웠습니다. 그러므로 JSX에서는 자연스럽게 자바스크립트의 모든 문법을 지원합니다. ● 2. 그러므로 자바스크립트에서 사용하는 제어문인 IF부터 함수를 만드는 function까지 모두 사용이 가능합니다. 예제 소스를 함께 살펴보겠습니다. function getGuest(user) { if (user) { return Hi {user}!; } return HI! Guest; } const element = {getGuest()}; //const element = {getGuest("GoCoder")}; ReactDOM.render( element,document.getEle.. 2021. 1. 20.
React.js - JSX에서 자바스크립트를 사용하는 방법 / 중괄호{} JSX에서 JavaScript 를 사용하기 안녕하세요. 고코더 입니다. ● 1. JSX에 대해 알아보았습니다. 자바스크립트와 XML 합성어로 만들어진 단어인 만큼 당연히 JSX에서는 스크립트를 사용할 수 있습니다. 하지만 규칙이 있고 방법은 어려운 부분은 아닙니다. 간단한 예제를 통해서 쉽게 학습할 수 있습니다. ● 2. JSX 태그안에서 중괄호 "{}"는 자바스립트를 사용할 수 있도록 합니다. 일종의 약속입니다. 이 부분만 안다면 자바스크립트를 원하는 곳에 자연스럽게 입력할 수 있습니다. 예제를 한번 살펴보겠습니다. ● 3. 스크립트 영역에서 name 이라는 변수에 "GoCoder"라는 텍스트를 입력하고 이를 element안에 변수를 함께 넣어서 문자열을 만들었습니다. 자바스크립트를 JSX 태그 안에 .. 2021. 1. 20.
ReactJS - 리액트를 만든 개발자는? , 왜 리액트 사용해해야 하는가! 리액트란? 안녕하세요. 고코더 입니다. ● 1. 오늘은 리액트란 무엇인지 한번 알아보는 시간을 가져보겠습니다. 2013년도에 공개되어 2015년도에는 React Native가 발표되었습니다. 웹부터 모바일까지 확장해서 여전히 꾸준하게 사용되고 있는 최고의 라이브러리입니다. 오늘은 이 리액트란 녀석을 만든 사람과 왜 이걸 사용해야 하는지 알아봅니다. 페이스북 개발자가 만든 프런트엔드 라이브러리 ● 2. 리액트는 Jordan Walke라는 천재 개발자가 만들었습니다. 현재 2010년 페이스북에서 10년이 넘는 시간 동안 재직해왔고, 워싱턴 대학을 나오고, 아마존에서 일을 한 경험도 있는 엘리트 개발자입니다. https://twitter.com/jordwalke ● 3. Jordan Walke의 깃허브와 링크.. 2021. 1. 4.
WebRTC 란? - 개발한 곳은?, 탄생, 문제점, 대표API / 이론 위주로 쉽게 설명 WebRTC를 간단하게 알아보기 안녕하세요. 고코더 입니다. 오늘은 무료 API로 실시간 통을 가능하게 하는 WebRTC에 대해 알아보려고 합니다 한줄 요약 ● 1. 고코더가 생각하는 한줄 요약은 "웹브라우저만으로 플러그인 도움 없이 실시간으로 고품질 커뮤니케이션 기술로, 영상, 음성 및 데이터 통신을 하는 자바스크립트 API이다." 구글이 시작한 프로젝트 ● 2. WebRTC 공식 홈페이지 입니다. 접속하면 Real-time communication for the web(웹을 위한 실시간 커뮤니케이션) 이라고 정체성을 드러내는 문구가 인상적입니다. 그리고 하단에 보면 Google Developers (구글 개발팀)의 로고가 보입니다. https://webrtc.org/ ● 3. WebRTC 소스 저장소.. 2020. 3. 31.
JavaScript - 호이스팅이란? 간단한 예제로 알아보기 / Hoisting 호이스팅 쉽게 알아보자 안녕하세요. 고코더 입니다. 오늘은 자바스크립트 언어의 고유한 특징인 "호이스팅(Hoisting)"을 간단하게 알아보겠습니다. 저는 최대한 한눈에 알아 볼 수 있게 쉽게 설명하려고 합니다. 개념 ● 1. 호이스팅의 단어의 뜻 영어 사전을 보면 해당 단어의 뜻이 "끌어 올리기; 들어올려 나르기."라고 사전에 나옵니다. 이 개념의 의미는 선언들을 끌어올려 최상단에 갖다. 두는 걸 이렇게 표현했습니다. ● 2. 호이스팅의 개념 - 자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사합니다. 이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단으로 끌어 올려 처리합니다. - 여기서 끌어 올려질 내용들은 선언입니다. var, let, const, function 등이 대표적입니다. -.. 2020. 3. 30.