최연탄 원본: A beginner’s guide to JPEG files 웹에 콘텐츠를 올린 적이 있다면 JPEG 파일로 올렸을 것 입니다. 하지만 이 파일이 실제로 무엇인지 잘 몰랐을 가능성이 큽니다. 요약하자면 다음과 같습니다. JPEG 파일은 이미지를 저장하는 래스터 이미지 파일(픽셀로 저장되는)의 한 유형입니다. 이는 작은 용량에 많은 데이터를 저장할 수 있기 때문에 디지털 사진에서 웹 그래픽에 이르기까지 모든 곳에 … Read more
원본: HTML 툴팁 만드는 방법 (+ 코드 예제) 애플리케이션이나 웹 사이트를 이용하다 보면 아이콘이나 양식 필드가 무슨 용도인지 알 수 없을 때가 있습니다. 대부분의 사람들은 본능적으로 요소 위에 마우스를 올려 정보를 제공하는 팝업을 찾을 것 입니다. 이를 일반적으로 “툴팁”이라 부릅니다. 툴팁 요소는 사용자 인터페이스의 핵심 구성요소로, 디자이너가 화면을 어지럽히지 않고도 웹 페이지에 추가 정보를 넣을 … Read more
원본: An Introduction to JSON JavaScript Object Notation의 약자인 JSON 형식은 데이터를 공유하기 위해 만들어졌습니다. 이름에서 알 수 있듯이 자바스크립트에서 파생되었지만 Python, Ruby, PHP, Java 등 다양한 언어에서 사용할 수 있습니다. 이는 읽기 쉽고 가벼우며 XML의 좋은 대안으로 훨씬 적은 문자열을 사용합니다. 이 포스트에서는 JSON 파일에서 사용할 수 있는 데이터와 이 형식의 일반 구조 및 … Read more
원본: What Is XML Used For? 개발자라면 XML 이라는 용어가 무엇을 의미하는지, 어떻게 사용되는지 궁금할 것 입니다. 이 형식 자체는 프로그래밍 언어는 아니지만, 본인이 공부한 프로그래밍 언어에 상관없이 알아야 합니다. 이 포스트에서는 이것이 무엇인지, 왜 유용한 지, 정확히 어디에 사용되는지 알아 보겠습니다. XML 이란? XML 이란 eXtensible Markup Language의 약자로 확장 가능한 마크업 언어를 말합니다. … Read more
원본: 해시 알고리즘 개요: 유형, 방법론 및 사용법 해시 알고리즘은 데이터를 왜곡하여 읽을 수 없게하는 수학 함수입니다. 이는 단방향 알고리즘으로 다른 사람이 텍스트를 해독하거나 디코드할 수 없게 하는 것이 해시의 핵심 개념입니다. 해시는 유휴 데이터를 보호하므로, 다른 사용자가 서버에 접근해 코드를 읽어낸다 해도 저장된 내용을 알아낼 수 없습니다. 또한 작성자가 데이터를 만든 후 데이터가 변경되지 … Read more
원본: HTML textarea – How to Add a Text Box Input Type Tag to Your Website 텍스트 박스는 사용자로부터 텍스트를 입력 받을 수 있는 요소입니다. 텍스트 박스를 클릭하거나 탭하면 깜박이는 커서가 나타나 입력 받을 준비가 되었음을 알려줍니다. 텍스트 박스는 text field와 text area의 두 가지 유형으로 분류됩니다. 이 두 입력 박스는 서로 다른 용도로 사용되며 … Read more
원본: 자바스크립트에서 랜덤 문자열 생성하는 방법 랜덤 문자열은 사용자 ID, 비밀번호 생성, 토큰 생성 등 다양한 목적으로 사용됩니다. 이 포스트에서는 자바스크립트를 사용하여 무작위 데이터인 랜덤 문자열 생성하는 방법을 알아보겠습니다. 랜덤 문자열 필요성 이는 소프트웨어 개발 시 사용자 ID, 비밀번호, 토큰 등을 구성하는데 필요합니다. 웹 애플리케이션을 만든다고 가정했을 때 각각의 사용자가 로그인 할 수 있도록 임의의 … Read more
원본: 자바스크립트에서 문자열 날짜 정규식 확인 방법 이번 포스트에서는 자바스크립트에서 문자열 타입의 날짜 정규식 유효성 검사 방법에 대해 알아보겠습니다. 문자열 날짜 타입의 유효성을 검사하려면 해당 날짜가 해당 형식을 따르는지 확인하고 연도, 월, 일 구성 요소의 순서를 준수하는지 확인해야 합니다. 날짜 타입이 올바른지 여부를 확인하는 방법은 여러 가지가 있습니다. 예제를 통해 여러 방법과 구현을 살펴보겠습니다. Date.parse()로 … Read more
원본: 자바스크립트 정규 표현식으로 특수문자 제거 알파벳이나 숫자가 아닌 구두점, 악센트, 기호 등 읽을 수 없는 문자를 특수문자 라고 합니다. 문자열을 읽거나 이해하기 더 쉽도록 문자열에서 특수문자 제거를 해야합니다. 이 작업을 가장 간단하게 하는 방법은 정규 표현식을 사용하는 것 입니다. 포스트를 시작하기 전에 자바스크립트의 정규 표현식에 대해 간단하게 살펴보고 넘어가겠습니다. 자바스크립트의 정규 표현식 정규 표현식은 … Read more
원본: 자바스크립트로 범위 내의 랜덤 숫자 생성하기 자바스크립트의 Math.random()은 0과 1 사이의 난수를 생성하는 랜덤 함수입니다. 즉, 0과 같거나 크고 1 보다 작은 값을 리턴합니다. (0 <= x < 1) 다른 범위의 숫자가 필요한 경우 간단한 수학을 사용하여 원하는 범위의 값을 얻을 수 있습니다. 참고로 이 메소드는 암호학적으로 안전한 랜덤 값을 생성하지 않습니다. 보안과 관련된 … Read more
원본: 자바스크립트의 round(), ceil(), floor()를 사용하여 반올림 이 포스트에서는 자바스크립트의 round(), ceil(), floor() 메소드를 사용하여 숫자를 반올림, 올림, 내림 하는 방법을 알아보겠습니다. 위의 모든 메소드는 Math 객체의 정적 메소드입니다. 즉, Math 객체의 인스턴스에서 메소드를 호출하는 것이 아니라 Math.method()와 같은 형태로 직접 호출합니다. (Math에는 생성자가 없습니다.) 참고로 이 메소드는 숫자(정수, 소수)에 대해서만 호출할 수 있으며, 그 … Read more
원본: HTML로 라디오 버튼 만들기 방문자를 늘리기 위해 매년 새로운 웹 기술이 도입되지만, 시간이 지나도 변하지 않는 기술도 있습니다. 이번 포스트에서 그런 요소 중 하나인 HTML 라디오 버튼에 대해 알아보겠습니다. Form 양식에서 라디오 버튼 타입을 통해 여러 가지 옵션 중 하나를 선택하는 필드를 본 적 있을 것 입니다. HTML에서는 편리하게도 input 태그의 type 으로 라디오 … Read more
원본: 자바스크립트에서 문자열 제거 방법 자바스크립트의 문자열은 기본 자료형으로 작은따옴표(‘), 큰따옴표(“), 백틱(`)으로 묶인 일련의 문자를 가집니다. 문자열은 수정할 수 없습니다(immutable). 즉, 문자열을 변경하려면 원래 문자열은 놔두고 새 문자열을 만들게 됩니다. 문자열을 조작해주는 빌트인 메소드로 문자열을 수정하고 변환할 수 있으며, 이는 더 적은 코드로 작업을 더 쉽게 만듭니다. 문자열을 조작하는 작업 중 하나는 문자열에서 문자를 제거하는 … Read more
원본: JavaScript Substring Method 이번 포스트에서는 자바스크립트의 substring() 메소드를 효과적으로 사용하는 방법에 대해 알아보겠습니다. 여기서는 메소드의 작동 방식을 알아보기위해 예제와 패턴, 특이점 등을 확인해 보겠습니다. 일반적으로 substring() 메소드는 문자열의 일부를 추출하고 저장할 때 사용하는 String 객체의 메소드입니다. 추출하는 동안 원본 문자열은 그대로 유지되며 대상 부분만 새 문자열로 리턴됩니다. 문자열의 특정 부분을 가져올 때 사용하기 좋습니다. … Read more
원본: 자바스크립트 체크박스 이 포스트에서는 자바스크립트를 사용하여 체크박스가 선택되었는지 확인하고, 선택된 값을 가져오고, 모든 체크박스를 선택/해제하는 방법을 알아보겠습니다. 체크박스 생성 체크박스를 생성하기 위해서는 다음 예제와 같이 <input> 요소의 type 속성을 checkbox로 설정하면 됩니다: 가용성과 접근성을 향상시키기 위해 체크박스와 <label> 요소를 항상 연결하여 사용하는 것이 좋습니다. 이렇게 하면 다음과 같이 레이블을 클릭해도 체크박스가 선택되거나 해제됩니다: 또는: … Read more
원본: HTML Drop-down Menu – How to Add a Drop-Down List with the Select Element 대부분의 웹 페이지나 응용프로그램에서는 드롭다운 메뉴를 사용하여 정보 목록을 표시합니다. 우리는 이를 사용하여 탐색 메뉴, Form 옵션 등을 만들 수 있습니다. 웹 사이트나 프로그램의 메뉴를 보면 ‘메뉴를 만들기 복잡할 것 같다’라는 생각이 들 것 입니다. 맞습니다. 경우에 따라 복잡해지기도 합니다. … Read more
원본: 자바스크립트로 드롭다운 메뉴를 만드는 방법 웹 서핑을 하면서 드롭다운 메뉴를 사용해 본 적이 있을 것 입니다. 이는 주로 Form 양식에서 사용자 입력 수집하기, 웹 애플리케이션에서 탐색 메뉴 구현 등에 사용됩니다. 드롭다운은 애플리케이션의 레이아웃 흐름을 깨지 않고 여러 기능을 제공하는 가장 좋은 방법입니다. 웹 외에도 exe 프로그램, 운영체제 등에서 사용됩니다. 이 포스트에서는 HTML, CSS, 자바스크립트를 … Read more
원본: Forms and Form Input Fields form 양식은 사용자가 제공한 정보를 HTTP를 통해 서버로 제출하게 하는 요소로, 자바스크립트 웹 초기 버전에서 서버와의 상호 작용 이후에는 항상 새 페이지로 이동한다는 가정 하에 설계된 요소입니다. 하지만 이제는 DOM의 일부이며 form 필드를 나타내는 DOM 요소는 다른 요소에는 없는 속성과 이벤트를 지원합니다. 이를 통해 입력 필드를 검사, 제어하고 기존 … Read more
원본: 자바스크립트 배열 – 배열 생성 방법 배열은 순서가 있는 요소의 목록을 가지는 자료구조입니다. 이 포스트에서는 자바스크립트를 사용하여 배열을 생성하는 4 가지 방법을 알아보겠습니다. 할당 연산자로 배열 생성 자바스크립트에서 가장 일반적으로 배열을 만드는 방법은 다음과 같이 배열 변수를 할당하는 것 입니다: 개발자 도구를 켜고 console.log() 메소드를 사용하여 배열 값을 확인하면 4 개의 요소를 가진 배열이 … Read more
원본: JavaScript Console Log: Best Logging Techniques 자바스크립트의 console.log() 메소드와 고급 자바스크립트 로깅 기술은 현대 웹 개발에 중요한 위치를 차지하고 있습니다. Safari, Chrome 등 브라우저의 개발자 도구 없이는 대부분의 프로젝트에서 채택하고 있는 애자일 방법론에 따른 빠른 릴리즈 주기를 맞출 수 없을 것 입니다. 이러한 도구는 앱이 실제 환경에서 어떻게 작동하는지를 보여주고, 개발자가 소스 코드를 자세히 … Read more