능숙한 웹 개발자가 되기 위해서는 HTML, CSS, JavaScript와 같은 핵심 웹 기술을 마스터하는 것이 필수적입니다. 다음은 이러한 각 기술을 숙달하는 방법에 대한 분석입니다. 1. HTML (Hypertext Markup Language) 기본 사항 알아보기: 제목(h1, h2, ...), 단락(p), 목록(ul, li), 링크(a) 및 이미지(image)와 같은 기본적인 HTML 요소와 태그를 이해하는 것부터 시작하세요. 시맨틱 HTML: 콘텐츠에 의미와 구조를 부여하기 위해 , , , , , 와 같은 시맨틱 HTML 태그를 사용하는 데 집중하세요. 양식(Forms): 입력 필드, 텍스트 영역, 라디오 버튼, 체크박스, submit 버튼 등 HTML을 사용하여 양식을 만드는 방법을 알아보세요..

빠르고 반응이 빠른 웹 애플리케이션을 만들려면 자바스크립트 실행 시간을 줄이는 것이 중요합니다. 자바스크립트는 강력하고 다재다능한 프로그래밍 언어이지만 제대로 최적화되지 않으면 웹 페이지 속도가 느려질 수 있습니다. 자바스크립트 코드를 실행하는 데 시간이 너무 오래 걸리면 사용자 경험이 느려지고 페이지 렌더링이 지연되며 이탈률이 증가할 수 있습니다. 따라서 원활한 사용자 경험을 보장하기 위해서는 자바스크립트 실행 시간을 최적화하는 것이 중요합니다. 전략 다음은 이를 달성하기 위한 몇 가지 전략입니다 자바스크립트 최소화 및 압축: 불필요한 코드를 제거하고 축소 및 압축 도구를 사용하여 웹페이지가 로드되는 자바스크립트 양을 줄입니다. 축소 및 압축된 자바스크립트 파일은 크기가 더 작으므로 다운로드가 더 빠르..

JavaScript 파일에서 TypeScript처럼 코드를 보호받을 수 있도록 하는 방법에 대해 알아보겠습니다. @ts-check JavaScript 파일에서 오류를 활성화하려면 // @ts-check를 .js 파일의 첫 번째 줄에 추가하여 TypeScript가 오류를 발생시키도록 합니다. TypeScript는 여러 오류를 제공할 수 있습니다. 아래 코드는 TypeScript와 같이 함수 파라미터에 정의가 되어 있지 않아 오류가 발생합니다. // @ts-check // [오류] export function init(🚫 config) { return true; } // [오류] export function exit(🚫 code) { return code + 1; } 이러한 오류를 무시하고 싶다면 // @t..

이전 글에서 추가된 Icon Feature를 Drag and Drop 하는 예제입니다. [OpenLayers] Custom Icon Feature 추가 이전 글 [OpenLayers] Static Image 에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추 hgko-dev.tistory.com Script ol.interaction.Modify 을 이용해서 Drag and Drop 기능을 구현합니다. modifystart, modifyend 이벤트를 등록하여 Icon을 선택하거나 이동 시 커서가 변경되도록 하였습니다. const styles..

이전 글에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. [OpenLayers] Static Image OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지 hgko-dev.tistory.com OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추가되었습니다. 먼저 ol.style.Icon 을 이용해서 아이콘 경로를 설정합니다. const styles = { icon:..

OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지도 정보 const mapInfo = { map: null, extent: null, projection: null, setProjection: function (w, h) { this.extent = [0, 0, w, h]; this.projection = new ol.proj.Projection({ code: 'pixel', units: 'pixels', extent: this.extent, }); }, init: funct..

JavaScript 에서 주민등록번호 유효성 검사 방법에 대해 알아보겠습니다. 주민등록번호란 주민등록번호는 “주민의 거주관계를 파악하고 상시로 인구의 동태를 명확히 하여 행정사무의 적정하고 간이 한 처리를 도모함”(1962년 주민등록법) 등을 목적으로 만든 일련번호로서, 개개인의 신원을 명확하게 구분하는 역할을 한다. 나무위키 내국인과 외국인 주민등록번호 유효성을 검사하는 소스코드입니다. 내국인 주민등록번호와 달리 외국인 등록번호는 뒤 7자리 숫자의 첫 숫자가 2000년 이전 출생 외국인에게는 남자는 5, 여자는 6, 2000년 이후 출생 외국인에게는 남자는 7, 여자는 8로 부여하고 있습니다. 내국인 주민등록번호 숫자는 1, 2, 3, 4 로 시작됩니다. 주민등록번호 입력 : - 검증 const Com..

이미지를 Jcrop 라이브러리를 사용하여 자르고 Canvas 영역을 blob 형식으로 바꿔서 a Tag를 생성하여 다운로드를 시도하였습니다. 크롬에서는 잘 동작하였지만 IE에서는 동작하지 않고 에러를 발생하였습니다. 아래 코드처럼 작성하였더니 둘 다 동작하였습니다. 소스 코드 function downloadURI(blob, name) { if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE에서 동작 window.navigator.msSaveBlob(blob, name); } else { // 크롬에서 동작 var link = document.createElement('a'); link.download = name; link.href = U..

reference는 react 코드를 이용해 HTML 요소를 지정하고 가져올 수 있는 방법입니다. 다시 말해서 자바스크립트로부터 HTML 요소를 가져오고 수정할 수 있도록 해줍니다. 사용 useRef를 사용하여 HTML 요소를 가져옵니다. 아래 코드는 button 클릭 시 input을 포커싱하고 해제하는 예제입니다. import { useRef } from 'react'; function RefEx() { const inputRef = useRef(null); const onClick = () => { inputRef.current?.focus(); // 5초 뒤에 focus 사라짐 setTimeout(() => { inputRef.current?.blur; }, 5000); }; return ( cli..

React에서 React Hook Form 사용 방법에 대해 알아보겠습니다. 기본적으로 Form을 사용할 때 작성하는 코드입니다. 하나의 input이지만 여러 개의 input을 사용할 경우 useState와 onChange 이벤트가 많이 생성됩니다. 그리고 Validation Check 하는 코드도 복잡해집니다. // InputForm.tsx import React, { useState } from 'react'; function InputForm() { const [toDo, setTodo] = useState(''); const [toDoError, setTodoError] = useState(''); const onChange = (event: React.FormEvent) => { const { ..