제 블로그 내에 코드 블럭을 클릭하면 자동으로 복사가 되는 소스를 구현해보았습니다. 소스는 생각보다 간단하였는데 이를 알기 위해서는 DOM에 대한 기본 지식이 있는 것이 좋을 것 같습니다. 위의 그림처럼 clipboard.js 를 사용하여도 무방하지만 거창하게 사용하고 싶지 않고 간단하게 작성하고자 하는 분들을 위해 글을 작성해보았습니다. DOM(Document Object Model): HTML 파일 내의 컨트롤은 DOM을 통해 이루어집니다. 즉 DOM은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다. 보다 자세한 내용은 아래 링크를 통해 확인해주세요 :) https://wit.nts-corp.com..
주소를 검색해서 우편번호를 입력하여야 하는 API를 찾아보다가 카카오에서 제공해주는 것을 확인하여 적용해봤습니다. 먼저 우편번호 서비스를 제공해주는 오픈 소스에 대한 명세입니다. https://postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 그리고 우편번호와 관련된 Q&A는 깃헙에서 또 받고 있더라구요, 아무래도 개발자들을 위한 편의성을 제공해주기 위한 다음카카오 측의 배려라고 생각이 들었습니다. 그 다음으로는 제가 작성한 코드를 올려볼까합니다. index.html i..
HTML5의 URL과 URLSearchParams 객체에 대해 알아보겠습니다. IE에서는 안 되지만, 모던 브라우저에서는 사용할 수 있는 기능입니다. 웹은 주소를 기반으로 동작하기 때문에 주소를 자유자재로 다룰 수 있으면 좋습니다. 특히, 쿼리스트링을 파싱하는 것과 같은 귀찮은 작업을 간단히 처리할 수 있어 편리합니다. 노드의 url 모듈과도 비슷합니다. 사용 예시를 봅시다. URL 생성자에 주소를 넣어 인스턴스화하면 됩니다. const url = new URL('https://www.abbo.com:8080/category/HTML'); url.href; // https://www.abbo.com:8080/category/HTML url.origin; // https://www.abbo.com:8080..
Author: 니용 자바스크립트를 사용하면서 함수를 커스터마이징해서 사용하는 개발자분들이 꽤 많을 것입니다. 자바스크립트 문서에서 많은 함수를 제공해주지만, 일부는 제공하지 않거나 같은 함수명을 가져 호출하였을 때 컴파일러가 인식하기 모호한 함수도 존재하거든요. 그래서 이번 글에서는 특정 타입에 대해 함수를 설정하고 직접 호출해서 사용해도 무리가 없는 방법을 알려드리려 합니다. 그 전에 알아두어야 할 사전 지식이 있는데요, 바로 Prototype이라는 것입니다. Prototype 보통 Java의 Class와 비교를 많이 합니다. Java에는 Class를 기반으로 객체지향언어가 선언되어 있다면 JavaScript는 Prototype 기반의 언어라고 하여도 됩니다. Java는 Class에 지정되어 있는 메소..
지난 글에서 Component를 만드는 방법을 알아보았다면 이번 글에서는 본격적으로 JavaScript가 어떻게 적용되는지 살펴보려고 합니다. 가장 먼저 WatchBody부분에 div를 하나 추가하여 시계가 들어갈 위치를 설정합니다. 클래스명을 js-clock으로 추가한 후 위의 div를 선택할 수 있는 선택자를 생성합니다. 이제 선택자를 추가하였다면 스크립트에서 시간에 해당하는 함수를 넣어주어야 합니다. 이전에 JavaScript의 기본 문법에서 확인할 수 있듯이 document.querySelector는 아래와 같습니다. querySelector(".className") : 클래스명이 className으로 정의된 태그를 선택 ( == getElementByClassName와 같은 역할) querySe..
1. 언어 React는 대부분의 소스가 JavaScript로 구성되어 있습니다. 물론 CSS나 HTML도 부가적인 요소이지만 가장 큰 비중을 차지하고 있는 것이 JavaScript입니다. 때문에 JavaScript 또는 TypeScript가 선행 과정으로 이수되어야 합니다. 2. 구조 프로젝트를 생성해보신 분들도 아시겠지만 React는 웹 프로젝트 구조를 가지며, Web App Server가 npm에 내장되어 있습니다. 때문에 "npm start"라는 명령어를 통해 WAS를 구동시키게 되는 것과 같은 원리이고, 터미널이 종료된다면 WAS 또한 종료되어 웹 프로젝트가 작동을 멈추게 됩니다. (생성 방법은 여기 글에 작성해두었어요.) React 프로젝트를 생성하게되면 기본적으로 index.js 와 App.j..
Author: 주니용 이번에는 간단하게 자바스크립트에서 자주 사용하는 정규식을 다루어 보려고 한다. 입력 받을 때 원하는 값만 입력받기 위해서는 HTML 태그에서 onkeyup함수에서 호출하여 사용해도 되고, validation 함수가 따로 있다면 그 안에 로직화 시켜서 사용하는 편이다. 자주 사용하는 정규식을 알아보자. 정규식을 사용하는 방법은 아래와 같다. 가령 data를 정규식과 비교하고 싶다면 '.search'를 사용하면 된다. (소스는 아래 더보기를 누르시면 확인 가능하십니다!) 더보기 // 올바른 시간의 포맷인지 체크하는 함수 isValidTimeFormat = function() { let data = $("input[name=sendTime]").val(); if(data.length !=..
Author: 주니용 요새 IT직군에서 알아주는 회사들은 대부분 입사 전 코딩 테스트를 필수로 치루게 된다. 나도 많은 코딩 테스트를 치뤄봤지만, 서버를 주로 개발한 사람의 입장으로서 자바를 코딩 테스트 언어로 많이 선택했었다. 내가 아는 한도에서 적어도 자바스크립트를 코딩 테스트 언어로 사용하는 이유는 다음과 같을 것이다. 편해서 또는 눈에 익어서 오토캐스팅이 되서 소스코드를 빠르게 작성하기 위해서 컴파일러 설치를 안해도 되서 현재도 그렇지만, 아직까지도 웹 생태계는 지속적으로 변하고 있다. 지금의 추세는 자바스크립트를 기본으로 한 프레임워크인 리-뷰-앵(React, Vue, Angular)의 시대라고 해도 과언이 아니다. 그래서 그런지 웹 개발을 할 수 있다는 사람이 주변에 너무나도 많고, 그 때문에..