728x90 IT/JS10 최신 자바스크립트 기술: 배열에서 람다식 활용하기 현대 웹 개발에서 자바스크립트는 그 어느 때보다도 중요해졌습니다. 그 중에서도 배열 조작을 위한 람다식(화살표 함수)은 코드의 간결함과 가독성을 높이는 데 기여하고 있습니다. 이번 포스팅에서는 자바스크립트 배열에서 람다식을 활용한 여러 예제를 정리해보겠습니다.1. 기본적인 람다식 문법람다식은 '화살표 함수'라고도 불리며, 간단하게 함수를 표현할 수 있는 문법입니다. 전통적인 함수 표현식과 비교할 때 문법이 더욱 간결해집니다. 아래의 코드블럭을 통해 기본적인 문법을 살펴보겠습니다.const sum = (a, b) => a + b;console.log(sum(5, 10)); // 15위 예제에서 볼 수 있듯, 'function' 키워드 대신 화살표(=>)를 사용하여 함수를 정의할 수 있습니다.2. 배열의 m.. 2025. 3. 23. HTML Input Validation: 쉬운 방법과 예제 HTML 입력 폼의 유효성 검사는 사용자 경험을 향상시키기 위한 중요한 요소입니다. 본 포스트에서는 HTML5의 내장 유효성 검사 기능을 사용한 간단한 Input Validation 폼 예제를 소개하겠습니다.1. HTML5의 유효성 검사HTML5에서는 input 요소에서 type 속성을 사용하여 다양한 형식의 데이터를 검증할 수 있습니다. 예를 들어, 이메일, URL, 숫자, 날짜 등 다양한 형식을 쉽게 지정할 수 있습니다. 사용자가 잘못된 형식의 데이터를 입력할 경우 브라우저가 기본적으로 경고 메시지를 표시합니다.2. 유효성 검사를 활용한 간단한 예제다음은 간단한 회원 가입 폼의 예제입니다. 이 폼에는 이름, 이메일, 비밀번호, 비밀번호 확인 필드가 포함되어 있습니다. 회원가입 폼 .. 2025. 3. 18. 자바스크립트 ES6 Class 자바스크립트 ES6의 Class(클래스) 입니다. JS에서 클래스라니.. 신기하네요. 클래스에 대해 알아보겠습니다. Class 먼저 자바스크립트의 클래스는 Object가 아니고, Template입니다. (Object를 위한 Template입니다.) 클래스라 함은, 자바에서는 객체단위로 코드 재사용성이 매우좋아지는 장점이있습니다. 그렇다면, 자바스크립트에서의 클래스 선언은 어떻게 이루어질까요? 1 2 3 class ClassName { constructor() { ... } } cs 위와 같은 문법으로 클래스를 생성 할 수 있습니다. 그럼 예를들어보겠습니다. 1 2 3 4 5 6 class Car { constructor(name, year) { this.name = name; this.year = yea.. 2021. 5. 21. 자바스크립트 ES6 For/Of Loop 자바스크립트 ES6의 For/Of에 대해 알아보겠습니다. 기본적으로 자바스크립트에서 for문, for/in문을 사용하였는데요. ES6에서 새롭게 추가된 For/Of입니다. ES6 For/Of 기본정의는 반복 가능한 객체를 반복하는 것의 For/Of의 목적입니다. 1 2 3 for (variable of iterable) { // code block to be executed } cs variable 즉 변수, const, let, var를 선언할 수 있습니다. 아래에 샘플 코드를 몇 가지를 작성해보겠습니다. For/Of 예시1 1 2 3 4 5 6 let cars = ["BMW", "Volvo", "Mini"]; let text = ""; for (let x of cars) { text += x + " .. 2021. 5. 17. 자바스크립트 ES6 let, const keyword 자바스크립트 ES6의 let, const에 대해 알아보도록 하겠습니다. 'let', 'const' keyword JS ES5 이전에는 변수를 선언할 때 'var'로 통일하였습니다. 문제점도 많았죠. 1 2 var abc = "1234"; var abc = "12345"; // O 가능 cs var로 변수를 재선언시에는 해당 코드는 문제없이 허용되었습니다. 1 2 test = 1 var test = "1234" // O 가능 cs 또한, 해당 문법 또한 호이스팅(Hoisting)으로 허용되었습니다. (함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 범위 최상단으로 끌어올리는 것) (어쩌면, 문제점보단 이점으로 보았을지도 모르지만요.) ES6의 let과 const는 달라졌습니다. 1 2 3 4 5 let.. 2021. 5. 17. MosaicFlow 모자익플로우 알아보기 안녕하세요. 오늘은 모자익플로우(MosaicFlow) 플러그인을 소개드릴려합니다. MosaicFlow는 먼저 감이 안잡히실거라 생각이 듭니다. 쉽게설명을드리면, 사진데이터를 표현해주고싶은데 흔하게 게시판형식으로 정리하는것이 아닌 사이즈에 맞춰서 흐름대로 놓는 방식을 말합니다. 예를들어 표현한곳이 '핀터레스트(Pinterest)' 입니다. 핀터레스트 : https://www.pinterest.co.kr/ 핀터레스트를 경험해보신분이나 아니면 오늘 처음 접해보시는분은 '아~ 저런모양이 모자익 플로우' 이구나 이해하시면 됩니다. 이 플러그인은 제가 만든 플러그인은 아닙니다. 단순 소개 목적차 Github에서 가져온 자료라는것을 알려드립니다. 모자익플로우 (MosaicFlow) github에 나와있는 샘플 강아지.. 2019. 2. 11. 이전 1 2 다음 728x90
