![]()
이벤트(Event) 1. 이벤트(Event) JavaScript에서 이벤트에 대해 알아봅시다! 이벤트(Event)란? 사용자 상호 작용 or 웹 페이지의 상태 변화와 같은 다양한 동작을 처리하는 데 사용됩니다. 이벤트는 일종의 신호로, 웹 페이지 or 애플리케이션에서 어떤 일이 발생했음을 알리는 역할을 합니다. 이벤트는 함수(핸들러)를 연결시켜 활동 발생 시, 동작(트리거)하게 합니다. 2. 이벤트 핸들러 종류 대표적인 DOM 이벤트 핸들러의 종류는 다음과 같습니다. 1) click 요소를 마우스 왼쪽 버튼으로 눌렀을 때, 발생합니다. 예를 들어, 다음과 같이 +1 버튼을 클릭 시, 숫자가 1씩 증가하게 할 수 있습니다. See the Pen Tistory_Front-End Study_JavaScript..
![]()
브라우저 객체 1. 브라우저 객체 브라우저 객체에 대해 알아봅시다! 브라우저 객체란? 웹 브라우저 환경에서 사용할 수 있는 객체들을 말합니다. 이러한 객체들은 웹 페이지의 구조, 동작, 스타일 등을 조작하는 데 사용됩니다. 2. 브라우저 객체의 종류 주요한 브라우저 객체들은 다음과 같습니다. 1) Window 객체 모든 브라우저 객체의 최상위 객체로, 브라우저 윈도우를 나타냅니다. 전역 객체이기도 하며, 브라우저 창의 크기, 위치, 브라우저 히스토리, 타이머 등을 다룰 수 있습니다. window 객체의 속성은 다음과 같습니다. window { alert : 경고 메시지 출력 함수, confirm : 확인 메시지 출력 함수, prompt : 입력 메시지 출력 함수, setTimeout : n초 후에 함수를..
![]()
DOM 1. DOM DOM(Document Object Model)에 대해 알아봅시다. 여기서 DOM이란? HTML, XHTML 또는 XML 문서의 프로그래밍 인터페이스를 나타냅니다. 이는 웹 페이지의 구조화된 표현을 나타내며, 프로그래밍 언어가 해당 구조를 조작할 수 있는 방법을 제공합니다. 2. 특정요소 찾기 그러면 DOM을 다뤄봅시다! DOM에서 특정 요소를 찾는 데 사용되는 주요 메서드로는 다음과 같이 있습니다. document.getElementById('아이디') : 해당 ID를 가진 요소를 찾습니다. document.querySelecter('css') : CSS 선택자를 사용하여, 첫 번째 일치하는 요소를 반환합니다. document.getElementsByClassName('class')..
![]()
디버깅(Debugging) 1. 디버깅(Debugging) 디버깅(Debugging)에 대해 알아봅시다! 디버깅(Debugging)이란? 컴퓨터 프로그램 개발 단계 중 발생한 시스템의 논리적 오류 or 버그를 찾아내고 수정하는 작업 과정을 말합니다. 2. 디버깅 도구 및 기법 JavaScript에선 디버깅을 수행하는 데 사용할 수 있는 몇 가지 도구와 기법이 있습니다. 1) 브라우저 콘솔 대부분 웹 브라우저는 개발자 도구를 제공하며, 코드 실행 시 발생하는 오류를 보고하는 console이 포함되어 있습니다. 오류 메시지, 경고 및 로그 메시지를 확인하여 코드에서 발생하는 문제를 식별할 수 있습니다. Chrome 브라우저에서는 F12를 누르고, Console 탭을 선택하여 콘솔을 열 수 있습니다. 2) 디..
![]()
데이터를 받아와서 상품 목록 만들기 1. 데이터를 받아와서 상품 목록 만들기 이번엔 데이터를 직접 받아와서 상품 목록을 만들어 봅시다! #1. assets 폴더 안에 oneRoom.js 파일을 생성한 후, post.js 파일 안에 다음과 같이 입력하여 데이터를 추가해 줍니다. export default [ { id: 0, title: "Sinrim station 30 meters away", image: "https://codingapple1.github.io/vue/room0.jpg", content: "18년 신축공사한 남향 원룸 ☀️, 공기청정기 제공", price: 340000, }, { id: 1, title: "Changdong Aurora Bedroom(Queen-size)", image: ..
![]()
export와 export default의 차이 1. export와 export default의 차이 코딩을 하다보면, export를 사용하는 경우와 export default를 사용하는 경우가 있습니다. 이 둘의 차이는 뭘까요? 2. export export는 모듈에서 하나 이상의 변수, 함수 or 객체를 내보내는 데 사용합니다. 여러 개의 이름이 지정된 항목을 모듈에서 내보낼 수 있습니다. 예를 들어 봅시다. → 이 경우, aaa와 bbb를 내보내고 다른 모듈에서 가져올 때, 이름으로 가져올 수 있습니다. // 항목 1 const aaa = 'aaa'; // 항목 2 function bbb() { return 'bbb'; } export {aaa, bbb}; /* 이렇게도 사용할 수 있음 export..
![]()
Modal 0. 시작하기 전 일단 시작하기 전에 페이지를 꾸며봅시다. #1. App.vue에 들어가서 다음과 같이 입력해 이미지를 추가해 줍니다. ... ... ... // 1. Modal 이번엔 Modal 창을 만들어 봅시다. Modal이란? 추가 정보를 제공하거나 사용자 입력을 요구하거나 확인을 요청하기 위해 메인 콘텐츠 위에 나타나는 창을 의미합니다. #1. 바로 실습해 봅시다. 다음과 같이 입력하여, modal 창 생성 및 기본 디자인을 구현해 줍니다. 상세 페이지 상세 페이지 내용 ... // 이제 동적인 UI를 만들어야 합니다. 동적인 UI를 만들기 위해선 UI의 현재 상태를 데이터에 저장해두고, 데이터에 따라 UI가 어떻게 보일지 작성하면 됩니다. #2. script 태그 안에 다음과 같은 ..
![]()
이벤트 핸들러 (Event Handler) 1. 이벤트 핸들러 (Event Handler) 이번엔 이벤트 핸들러에 대해 배워봅시다. Vue.js의 이벤트 핸들러란? 사용자의 클릭, 요소 위로 마우스를 올리거나 입력 필드에 타이핑하는 등 특정 이벤트가 발생할 때, 실행되는 메서드 or 함수입니다. 버튼을 눌렀을 때, JS를 실행하려면 다음과 같이 입력하면 됩니다. v-on:click="JavaScript 문장" // v-on을 @로 사용할 수 있음 @click="JavaScript 문장" #1. 바로 실습해 봅시다. App.vue에 들어가 다음과 같이 입력하여, 버튼 이벤트를 생성해 줍시다. 허위매물신고 신고수 : {{ declareNo }} // → 브라우저에 들어가면, 버튼을 누를 때마다 숫자가 오르는..
![]()
v-for 반복문 1. v-for 반복문 이번엔 v-for 반복문에 대해 배워봅시다. #1. 바로 실습으로 들어갑니다. App.vue에 들어가 다음과 같이 입력합니다. Home Products About // → 브라우저를 실행하면, 다음과 같이 나오게 됩니다. 이렇게 코드를 짜다보면, 반복적인 HTML 태그가 나옵니다. 그것을 간단하기 위해 v-for 반복문을 사용합니다. v-for 반복문은 다음과 같이 사용합니다. #2. 그러면 방금 코드를 다음과 같이 수정하여, a 태그를 이용할 수 있습니다. Home // // → 브라우저를 보면, Home 메뉴가 3개 생긴 것을 확인할 수 있습니다. #3. 이제 배열과 v-for 반복문을 사용해 다음과 같이 입력하여, 메뉴를 생성할 수 있습니다. {{ menu ..
![]()
데이터 바인딩 1. 데이터 바인딩(Data Binding) Vue.js의 데이터 바인딩에 대해 알아봅시다! Vue.js에서 데이터 바인딩은 JS 데이터를 HTML에 넣는 문법을 말합니다. 데이터 바인딩을 쓰면, HTML을 코딩하기 쉽고 Vue의 실시간 자동 렌더링을 쓸 수 있습니다. #1. 바로 실습해봅시다. App.js에 들어가서 다음과 같이 입력해 줍니다. XX 원룸 XX 만원 XX 원룸 XX 만원 전에 보셨다시피 template 태그와 script 태그가 있습니다. 이 섹션들은 무엇을 의미할까요? 1) 템플릿(Template) 템플릿은 사용자에게 보여지는 HTML의 모양과 내용을 정의합니다. Vue.js의 템플릿은 HTML과 Vue.js의 특별한 구문을 혼합하여 사용합니다. 이 구문은 브라우저에서 ..
![]()
Vue.js 설치 1. Vue.js 설치 그러면 Vue.js를 설치해 봅시다! #1. 공부할 폴더를 생성한 후, VSCode의 터미널에 다음과 같이 입력하여 Vue.js를 설치해 줍니다. npm install -g @vue/cli #2. 설치가 끝났으면, 다음과 같이 입력하여 프로젝트를 생성해 줍니다. (저는 프로젝트명을 vuedongsan이라고 입력하였습니다.) vue create vuedongsan #3. 그러면 다음과 같이 나오게 됩니다. Vue 3버전의 Default를 클릭해 줍니다. → 조금만 기다리면, 정상적으로 설치가 되었습니다! #4. 터미널을 보면 cd test로 넘어간 후, npm run serve로 실행하면 된다고 나와있습니다. 그대로 해줍시다. #5. 그러면, localhost:80..
![]()
Vue.js 1. Vue.js Vue.js에 대해 배워봅시다! Vue.js란? 프론트엔드 웹 애플리케이션을 개발하기 위한 오픈 소스 JavaScript 프레임워크입니다. 화면에 데이터를 바인딩하고 동적으로 업데이트하기 위해 설계되었습니다. 이를 통해 개발자들은 UI를 쉽게 만들고 관리할 수 있습니다. 2. 기능 및 특징 1) 바인딩(Binding) 데이터와 DOM 요소 사이의 양방향 데이터 바인딩을 제공합니다. 이를 통해 데이터의 변경이 자동으로 화면에 반영되고, 화변의 변경이 데이터에도 반영됩니다. 2) 컴포넌트 기반 아키텍처(Component-Based Architecture) 컴포넌트 기반 아키텍처를 기반으로 하여, UI를 작은 독립적인 컴포넌트로 구성합니다. 이는 코드의 재사용성을 높이고, 유지보..
![]()
Angular 1. Angular Angular에 대해 알아봅시다! Angular는 Google이 개발한 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크입니다. 웹 애플리케이션을 구축하기 위한 도구와 기능을 제공하여, 개발자가 보다 쉽고 효율적으로 웹 애플리케이션을 구축할 수 있도록 돕습니다. 2. 기능 및 특징 Angular의 핵심 기능과 특징은 여러가지가 있습니다. 1) 컴포넌트 기반 아키텍처 컴포넌트 기반 아키텍처를 채택하여, 개발자가 애플리케이션을 여러 개의 작은 컴포넌트로 분할하고 관리할 수 있도록 합니다. 2) 양방향 데이터 바인딩 모델과 뷰 사이의 양방향 데이터 바인딩을 지원하여, 데이터의 변경이 자동으로 화면에 반영되도록 합니다. 3) 의존성 주입 컴포넌트 간의 의존성을 관리하고 코드의 재..
![]()
유틸리티 타입 1. 유틸리티 타입 이번엔 유틸리티 타입에 대해 알아봅시다. 유틸리티 타입은 기존 타입을 변환하거나 새로운 타입을 생성하기 위해 사용되는 내장 타입입니다. 유틸리티 타입은 코드를 더 간결하고 유연하게 작성할 수 있도록 도와줍니다. 2. keyof keyof는 객체의 속성 이름 집합을 가져옵니다. 해당 객체의 모든 속성 이름을 포함하는 유니온 타입이 생성됩니다. 다음 코드처럼 사용할 수 있습니다. interface User { id: number; name: string; age: number; gender: "m" | "f"; } type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender' // UserKey의 키 값을 입력해야 함 con..
![]()
제네릭(Generics) 1. 제네릭(Generics) 이번엔 제네릭(Generics)에 대해 알아봅시다! 제네릭이란? 코드를 재사용하고 유연성을 높이는 데 사용되는 강력한 도구입니다. 제네릭을 사용하면 함수, 클래스, 인터페이스 등을 정의할 때 데이터 타입을 명시하지 않고 추상적으로 유지할 수 있습니다. 이렇게 하면, 여러 종류의 유형을 다루는 함수 or 클래스를 만들 수 있습니다. 2. 사용방법 사용방법에 대해 알아봅시다. 다음 코드를 확인해 봅시다. → getSize라는 함수를 arr1은 사용할 수 있지만, arr2는 string타입이라 사용할 수 없습니다. function getSize(arr: number[]): number { return arr.length; } const arr1 = [1,..
