본문 바로가기
반응형

분류 전체보기289

[웹 디자인] 5일차: HTML 폼과 입력 요소 HTML 폼HTML 폼은 사용자로부터 입력을 받아 서버로 전송하는 데 사용됩니다. 폼은 다양한 입력 요소를 포함하며, 사용자가 데이터를 입력하고 제출할 수 있게 합니다.폼 요소: 폼을 정의하는 요소입니다.action: 폼 데이터를 제출할 URL을 지정합니다.method: 폼 데이터를 전송하는 HTTP 메서드를 지정합니다 (GET 또는 POST).예제: 입력 요소입력 요소는 폼 내에서 사용자로부터 데이터를 입력받는 다양한 방법을 제공합니다.텍스트 입력: 단일 행 텍스트 입력 필드를 정의합니다.: 암호 입력 필드를 정의합니다. 입력한 텍스트가 숨겨집니다.: 이메일 주소를 입력받는 필드를 정의합니다. 이메일 형식을 검증합니다.: URL을 입력받는 필드를 정의합니다. URL 형식을 검증합니다.예제: 이름: .. 2024. 8. 5.
[JavaScript 프레임워크] 5일차: JavaScript 상태 관리 이해하기: Redux와 Vuex 5. 상태 관리 (Redux, Vuex 등)프로젝트 개요이번 글에서는 JavaScript 애플리케이션에서 상태 관리를 위해 널리 사용되는 Redux와 Vuex에 대해 알아보겠습니다. 상태 관리는 애플리케이션의 상태를 중앙 집중식으로 관리하여 복잡한 상태 변화를 쉽게 추적하고 관리할 수 있게 해줍니다.ReduxRedux란 무엇인가?Redux는 애플리케이션의 상태를 예측 가능하게 관리하기 위한 JavaScript 라이브러리입니다. 주로 React와 함께 사용되지만, 다른 프레임워크와도 통합할 수 있습니다. Redux는 단일 스토어를 통해 상태를 관리하고, 액션과 리듀서를 통해 상태를 변경합니다. Redux 설치 및 기본 설정Redux 및 React-Redux 설치npm install redux react-r.. 2024. 8. 5.
[JavaScript 최신 기능 시리즈] 5일차: JavaScript 클래스와 상속 이해하기 5. 클래스와 상속클래스란 무엇인가?ES6에서 도입된 클래스(Class)는 JavaScript에서 객체 지향 프로그래밍(OOP)을 구현하는 새로운 방법입니다. 클래스는 프로토타입 기반 상속을 더 명확하고 간결하게 작성할 수 있게 해줍니다.클래스 선언클래스를 선언하는 방법은 다음과 같습니다.1. 기본 클래스 선언class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`); }}const alice = new Person('Alice', 30);alice... 2024. 8. 5.
[JavaScript 프로젝트 시리즈] 5일차: JavaScript로 간단한 채팅 애플리케이션 만들기 5. 간단한 채팅 애플리케이션 개발프로젝트 개요이번 프로젝트에서는 JavaScript와 웹소켓(WebSocket)을 사용하여 간단한 채팅 애플리케이션을 만들어보겠습니다. 사용자는 실시간으로 메시지를 주고받을 수 있습니다.준비물HTMLCSSJavaScriptWebSocket 서버단계 1: 기본 HTML 구조 만들기먼저, 채팅 애플리케이션의 기본 HTML 구조를 만듭니다. Chat App Send 단계 2: 기본 CSS 스타일링채팅 애플리케이션의 기본 스타일을 정의합니다./* styles.css */body { font-family: Arial, sans-serif; background-color: #f4f4f4; display:.. 2024. 8. 5.
[JavaScript 심화 시리즈] 5일차: JavaScript 모듈과 패키지 관리 이해하기 5. 모듈과 패키지 관리모듈이란 무엇인가?모듈은 코드의 재사용성과 유지보수성을 높이기 위해 코드를 독립적인 단위로 분리한 것입니다. 모듈 시스템을 사용하면 코드의 복잡성을 줄이고, 각 모듈을 개별적으로 개발하고 테스트할 수 있습니다.ES6 모듈ES6에서는 자바스크립트에서 모듈을 표준화하기 위해 import와 export 키워드를 도입했습니다.1. 모듈 생성모듈 파일 math.js를 생성합니다.// math.jsexport function add(a, b) { return a + b;}export function subtract(a, b) { return a - b;}2. 모듈 가져오기다른 파일에서 math.js 모듈을 가져와 사용합니다.// main.jsimport { add, subtract } f.. 2024. 8. 5.
[JavaScript 기초 시리즈] 5일차: JavaScript 객체와 배열에 대해 알아보자 5. 객체와 배열객체란 무엇인가?객체는 키-값 쌍의 컬렉션입니다. 객체를 사용하면 여러 관련 데이터를 하나의 단위로 묶을 수 있습니다.객체 생성1. 객체 리터럴객체 리터럴을 사용하여 객체를 생성할 수 있습니다.let person = { name: "Alice", age: 30, greet: function() { console.log("Hello, " + this.name + "!"); }};console.log(person.name); // 출력: Aliceconsole.log(person.age); // 출력: 30person.greet(); // 출력: Hello, Alice! 2. 프로퍼티 접근객체의 프로퍼티에 접근하는 방법은 두 가지가 있습니다.console.. 2024. 8. 5.
[JavaScript 문법] 4일차: 조건문 조건문이란?조건문은 특정 조건에 따라 코드 블록을 실행하거나 건너뛰게 하는 제어 구조입니다. JavaScript에서 조건문을 사용하면 다양한 상황에 대응하는 코드를 작성할 수 있습니다.if 문if 문은 주어진 조건이 참일 때만 코드 블록을 실행합니다. 기본 문법if (조건) { // 조건이 참일 때 실행될 코드}예제let age = 18;if (age >= 18) { console.log('You are an adult.');}if...else 문if...else 문은 주어진 조건이 참일 때와 거짓일 때 각각 다른 코드 블록을 실행합니다.기본 문법if (조건) { // 조건이 참일 때 실행될 코드} else { // 조건이 거짓일 때 실행될 코드}예제let age = 16;if (age >= 18.. 2024. 8. 4.
[웹 디자인] 4일차: HTML 링크와 이미지 링크HTML에서 링크는 사용자가 다른 페이지나 리소스로 이동할 수 있도록 합니다. 링크는 요소를 사용하여 정의됩니다.하이퍼링크: 앵커 태그로, 링크를 정의하는 요소입니다.href: 하이퍼링크 참조 속성으로, 이동할 URL을 지정합니다.예제:Example Website링크의 다양한 속성target: 링크를 클릭할 때 열리는 방법을 지정합니다._self: 현재 창에서 열림 (기본값)_blank: 새 창이나 새 탭에서 열림_parent: 부모 프레임에서 열림_top: 최상위 프레임에서 열림예제:Open in new tabtitle: 링크에 대한 추가 정보를 제공합니다. 사용자가 링크 위에 마우스를 올렸을 때 툴팁으로 표시됩니다.예제:Example Website링크 텍스트와 이미지텍스트 링크: 링크 텍스트로 .. 2024. 8. 4.
[JavaScript 프레임워크] 4일차: JavaScript 프레임워크 프로젝트 설정 및 기본 구조 4. 프로젝트 설정 및 기본 구조프로젝트 개요이번 글에서는 JavaScript 프레임워크 프로젝트를 설정하고 기본 구조를 만드는 방법에 대해 알아보겠습니다. React, Vue.js, Angular의 각 프레임워크별로 프로젝트를 초기화하고 기본 구조를 설정하는 과정을 설명합니다.React 프로젝트 설정 및 기본 구조React 프로젝트 생성npx create-react-app my-react-appcd my-react-app 프로젝트 폴더 구조my-react-app/├── node_modules/├── public/│ ├── index.html│ └── ...├── src/│ ├── assets/│ ├── components/│ │ └── HelloWorld.js│ ├── view.. 2024. 8. 4.
[JavaScript 프로젝트 시리즈]4일차: JavaScript로 로컬 스토리지를 이용한 메모 앱 만들기 4. 로컬 스토리지를 이용한 메모 앱 만들기프로젝트 개요이번 프로젝트에서는 JavaScript와 로컬 스토리지를 사용하여 간단한 메모 애플리케이션을 만들어보겠습니다. 사용자는 메모를 작성하고, 저장된 메모를 로컬 스토리지에서 불러와 수정하거나 삭제할 수 있습니다.준비물HTMLCSSJavaScript단계 1: 기본 HTML 구조 만들기먼저, 메모 앱의 기본 HTML 구조를 만듭니다. Memo App Add Memo 단계 2: 기본 CSS 스타일링메모 앱의 기본 스타일을 정의합니다./* styles.css */body { font-family: Arial, sans-serif; background-color: #f4f4f4; display: fle.. 2024. 8. 4.
반응형

티스토리툴바