위코딩
반응형
article thumbnail
[React] JSX(JavaScript XML) 소개와 사용법
Framework/React 2023. 7. 21. 14:42

JSX는 JavaScript의 확장 문법으로, React에서 사용되는 UI 요소를 작성할 때 사용됩니다. JSX는 JavaScript 코드에서 HTML과 유사한 문법으로 UI를 작성할 수 있도록 도와주며, 가독성이 좋고 작성하기 쉬워 React 컴포넌트 개발에서 널리 사용됩니다. 아래에서 JSX의 소개와 사용법에 대해 알아보겠습니다. JSX란? JSX는 React의 핵심 요소 중 하나로, JavaScript의 확장 문법입니다. React 컴포넌트의 UI를 작성할 때 HTML과 유사한 구조를 사용하여 작성할 수 있으며, 이를 통해 코드의 가독성을 높이고 개발자들이 쉽게 이해하고 작성할 수 있도록 도와줍니다. JSX는 React 엘리먼트를 생성하고, 속성(props), 이벤트 핸들러, 자식 요소 등을 정의하..

article thumbnail
[jQuery] jQuery와 JavaScript의 차이점
Library/jQuery 2023. 7. 20. 15:06

jQuery와 JavaScript는 웹 개발에서 둘 다 사용되는 프로그래밍 언어나 라이브러리입니다. 하지만 둘은 서로 다른 개념과 용도를 가지고 있습니다. JavaScript JavaScript는 웹 개발에서 가장 기본적인 클라이언트 측 프로그래밍 언어입니다. 웹 페이지의 동적인 기능을 담당하며, HTML과 CSS와 함께 웹 페이지의 내용, 레이아웃, 동작을 구현하는데 사용됩니다. JavaScript는 모든 웹 브라우저에서 지원되며, 클라이언트 측에서 실행되므로 사용자의 상호작용에 따라 웹 페이지가 동적으로 변화할 수 있습니다. 주요 특징: 웹 페이지 동적 제어 이벤트 핸들링 DOM 조작 데이터 유효성 검사 비동기 통신 (AJAX) jQuery jQuery는 JavaScript 라이브러리로, JavaSc..

article thumbnail
[JS] AJAX와 비동기적 프로그래밍
Language/JavaScript 2023. 7. 20. 14:18

AJAX (Asynchronous JavaScript and XML) AJAX는 웹 애플리케이션에서 비동기적으로 데이터를 전송하고 서버로부터 데이터를 받아오는 기술입니다. 전통적인 웹 페이지는 페이지 전체를 새로고침해야만 데이터를 갱신할 수 있었지만, AJAX를 사용하면 페이지 전체를 새로고침하지 않고도 서버와 통신하여 필요한 데이터만 업데이트할 수 있습니다. 이를 통해 웹 애플리케이션의 사용자 경험을 크게 향상시킬 수 있습니다. 비동기적 프로그래밍 (Asynchronous Programming) 비동기적 프로그래밍은 특정 작업이 완료될 때까지 기다리지 않고 다른 작업을 동시에 실행하는 프로그래밍 방식입니다. 기존의 동기적 프로그래밍은 순차적으로 작업을 수행하여 한 작업이 끝나야 다음 작업을 수행하는 반..

article thumbnail
[JS] 이벤트 핸들링 (클릭, 마우스 오버 등)
Language/JavaScript 2023. 7. 20. 14:12

이벤트 핸들링(Event Handling)은 웹 페이지에서 사용자의 동작에 대응하여 원하는 동작을 실행하는 기능을 말합니다. 웹 페이지에서 발생하는 다양한 이벤트에 대해 감지하고, 해당 이벤트에 대응하는 동작을 처리하는 것이 중요합니다. 자바스크립트를 사용하여 이벤트 핸들링을 구현하는 방법에 대해 알아보겠습니다. 이벤트 핸들링 개념 이벤트 핸들링은 사용자와의 상호작용에 응답하여 웹 페이지를 동적으로 제어하는 기능을 의미합니다. 주로 DOM 요소에 이벤트 리스너를 등록하여 이벤트를 감지하고, 이벤트가 발생했을 때 원하는 동작을 수행합니다. 이벤트 리스너 등록 이벤트 리스너를 등록하여 특정 이벤트를 감지하고, 이벤트가 발생했을 때 호출될 함수를 지정합니다. addEventListener 메서드를 사용하여 이..

article thumbnail
[JS] DOM(Document Object Model) 조작
Language/JavaScript 2023. 7. 20. 14:06

DOM(Document Object Model)은 웹 페이지의 내용을 트리 형태로 표현하는 문서 객체 모델로, HTML, XML 또는 XHTML 문서의 구조와 콘텐츠에 접근하고 조작하는 기능을 제공합니다. 웹 브라우저는 HTML 문서를 로드하면서 DOM을 생성하고, 이를 통해 웹 페이지의 내용과 구조에 동적으로 접근하고 변경할 수 있습니다. DOM을 조작하여 웹 페이지를 동적으로 제어하는 방법에 대해 알아보겠습니다. DOM 요소 선택하기 DOM 요소를 선택하는 것은 해당 요소에 접근하여 조작하는 기본 단계입니다. 다양한 선택자를 사용하여 요소를 선택할 수 있습니다. ID 선택자 This is a div element. let myDiv = document.getElementById('myDiv'); 클래..

article thumbnail
[JS] 배열과 객체
Language/JavaScript 2023. 7. 20. 14:06

배열과 객체는 자바스크립트에서 데이터를 구조화하고 다루는 데 사용되는 중요한 자료형입니다. 각각의 특징과 활용 방법에 대해 알아보겠습니다. 배열(Array) 배열은 여러 개의 값을 순서대로 나열한 데이터 구조입니다. 자바스크립트에서 배열은 [ ] 대괄호로 생성하며, 각 요소들은 쉼표(,)로 구분합니다. // 배열 생성 let fruits = ['apple', 'banana', 'orange']; // 인덱스를 사용하여 배열 요소에 접근 console.log(fruits[0]); // 'apple' console.log(fruits[1]); // 'banana' console.log(fruits[2]); // 'orange' 배열은 동적으로 크기가 조정되며, 요소들의 데이터 타입이 일치하지 않아도 됩니다...

article thumbnail
[JS] 함수 정의와 활용
Language/JavaScript 2023. 7. 20. 14:05

함수는 자바스크립트에서 재사용 가능한 코드 블록을 정의하고 호출하여 사용할 수 있는 기능입니다. 함수를 사용하면 코드를 구조화하고, 중복을 줄이며, 유지보수를 용이하게 할 수 있습니다. 함수의 정의와 활용 방법에 대해 알아보겠습니다. 함수의 정의 함수는 function 키워드를 사용하여 정의합니다. 함수는 인자(매개변수)를 받을 수 있으며, 필요에 따라 값을 반환할 수도 있습니다. // 함수 정의 function add(a, b) { return a + b; } 위의 예제에서 add라는 이름의 함수를 정의하고 있습니다. 이 함수는 a와 b라는 두 개의 인자를 받고, 이를 더한 값을 반환합니다. 함수의 호출 함수를 호출하려면 함수 이름 뒤에 괄호 ()를 붙이고, 인자를 전달합니다. 인자의 개수와 함수 정의..

article thumbnail
[JS] 조건문과 반복문 (if/else, switch, for, while 등)
Language/JavaScript 2023. 7. 20. 14:04

조건문과 반복문은 프로그래밍에서 가장 기본적이고 중요한 구문으로, 특정 조건에 따라 코드 블록을 실행하거나 반복적인 작업을 수행하는 데 사용됩니다. 자바스크립트에서는 다양한 유형의 조건문과 반복문을 지원합니다. 조건문 (if/else, switch) if/else 문 if/else 문은 주어진 조건이 참(true)인 경우와 거짓(false)인 경우에 서로 다른 코드 블록을 실행하는 데 사용됩니다. let age = 18; if (age >= 18) { console.log('성인입니다.'); } else { console.log('미성년자입니다.'); } switch 문 switch 문은 주어진 변수의 값에 따라 다른 경우들을 분기하여 처리하는 데 사용됩니다. let day = '월요일'; switch ..

article thumbnail
[JS] 변수, 데이터 타입, 연산자
Language/JavaScript 2023. 7. 20. 14:04

변수(Variable) 변수는 값을 저장하는 데 사용되는 이름을 가진 메모리 공간입니다. 자바스크립트에서 변수를 선언할 때는 var, let, const 키워드를 사용합니다. // 변수 선언과 할당 var age = 30; let name = 'John'; const PI = 3.14; var: 예전에 사용되던 변수 선언 방식으로, 함수 스코프를 가집니다. let: 블록 스코프를 가지며, 값을 변경할 수 있는 변수를 선언할 때 사용합니다. const: 블록 스코프를 가지며, 상수를 선언할 때 사용합니다. 한 번 할당된 값은 변경할 수 없습니다. 데이터 타입(Data Types) 자바스크립트의 데이터 타입은 동적으로 결정되며, 변수에 할당되는 값에 따라 자동으로 타입이 결정됩니다. // 숫자 타입 (Num..

article thumbnail
[JS] JavaScript 소개와 기본 구문
Language/JavaScript 2023. 7. 20. 13:49

JavaScript(자바스크립트)는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어 중 하나로, 웹 페이지를 동적으로 만들고 상호작용할 수 있도록 도와주는 스크립트 언어입니다. 웹 브라우저에서 실행되며, HTML과 함께 사용하여 웹 페이지의 동작을 제어하고 사용자와의 인터랙션을 처리합니다. 자바스크립트의 역할 자바스크립트는 다음과 같은 역할을 수행합니다: 웹 페이지의 동적인 요소 생성과 제어 사용자 입력에 대한 응답 처리 데이터의 유효성 검사와 처리 웹 페이지의 외부 API와의 연동 (예: 지도 서비스, 소셜 미디어 등) 애니메이션과 효과 추가 웹 페이지의 상태 관리와 이벤트 처리 기본 구문 변수 선언과 할당 변수는 값을 저장하는데 사용되며, var, let, const 키워드를 사용하여 선언합니다. v..

반응형
loading loading