본문 바로가기

전체 글

[Javascript] HTML 문서에 새 요소 붙이는 방법 HTML 문서에 새 요소를 붙이는 방법은 Javascript로 구현할 수 있다.우선, 새 요소를 생성한다.부모 요소를 찾는다.새 요소를 부모 요소에 붙여준다. index.html :더보기 parent id를 갖는 div 태그 자식 요소로 추가한다.  새 요소 생성, document.createElement(요소) :DOM에서 새 HTML 요소를 javascript로 생성할 때 사용한다.더보기const child = document.createElement("div");div 요소를 만들어 준다. const img = document.createElement('img');img.src = 'image.jpg';img.alt = '설명 텍스트';img.style.width = '100px';.. 더보기
[Javascript] addEventListner로 이벤트 적용하기 addEventListner :HTML 요소에 이벤트를 감지해서 어떤 동작을 실행하도록 설정할 때 사용한다.element.addEventListener(event, function, useCapture);element: 이벤트를 감지할 HTML 요소이다. (예: 버튼, 문서 전체 등)event: 감지할 이벤트 종류이다. (예: "click", "keydown", "mouseover" 등)function: 이벤트가 발생했을 때 실행할 함수이다.useCapture (선택): true 또는 false – 이벤트 전파 설정 단계이다. (일반적으로는 생략하거나 false)     event 객체 : 이벤트가 발생했을 때, 브라우저가 자동으로 함수에 매개변수 형태로 전달해주는 객체(parameter)이다. 이 객체.. 더보기
[Javscript] 태그 요소 가져오는 방법 document.getElementsByName(name) :body 내의 특정 name 속성을 가진 모든 요소들을 찾을 수 있다. 📦 반환값 :NodeList(정확히는 NodeListOf)를 반환한다.이 NodeList는 배열처럼 생겼지만 진짜 배열은 아니며, 반복은 가능하지만 .forEach나 length, 인덱스 접근만 지원한다.name 속성을 가진 모든 요소들을 포함한다.더보기      document.getElementById(ID) :HTML 문서 안에서 특정 id(고유한 값) 값을 가진 요소 하나를 가져온다. 📦 반환값 : 해당 id 값을 가진 하나의 요소(Element) 를 반환한다.만약 해당 id를 가진 요소가 없다면 null을 반환한다.id는 문서 .. 더보기
[JAVA] JAVA란? Java 란?Java는 노트북 컴퓨터, 모바일, 디바이스, 게임 콘솔, 의료 장치 등을 포함한 수십억 개의 장치에서 실행되는, 객체 지향 프로그래밍 언어 및 소프트웨어 플랫폼 및 문서를 의미하기도 한다. 자바는 표준 스펙과 구현으로 나눌 수 있다.자바 표준 스펙자바를 이렇게 만들어야 한다는 설계도이며, 문서이다.이 표준 스펙을 기반으로 여러 회사에서 실제 작동하는 자바를 만든다.구현여러 회사에서 자바 표준 스펙에 맞추어 실작동하는 자바 프로그램을 개발한다.각 각 장단점이 있다. 예를 들어 Amazon Corretto는 AWS에 최적화 되어있다.  구현된 Java 작동 방식- Java를 사용하여 App을 제작하려면 각 OS에서 사용할 수 있는 Java 개발 키트(JDK)를 다운로드 해야합니다. 1. Jav.. 더보기
[JavaScript] 브라우저 Cookie 사용 방법 팀 프로젝트를 진행하였던, 쿠키 값을 통해 자동 로그인을 구현하는 방법에 대해서 간단한 예제를 통해 정리하고자 한다. 1. Cookie란?✅ 웹 서버가 생성하여 웹 브라우저로 전송하는 작은 정보 파일이다. 웹 브라우저는 수신한 쿠키를 미리 정해진 기간 동안 또는 웹 사이트의 사용자 세션 기간 동안 저장한다.웹 브라우저는 향후 사용자가 웹 서버에 요청을 보낼 때, 관련 쿠키를 첨부하여 보낸다.  2. Cookie 확인 방법✅ 개발자 도구를 킨다.(F12) → 애플리케이션 → 쿠키 → 주소를 누르면 된다.  3. 간단한 예제를 통한 학습index.html더보기 Login 로그인 폼을 간단하게 만든 후, login을 처리해주는 js 파일을 넣어주었다. .. 더보기
[Visual Studio Code Extensions] Live Server란? Visual Studio Code에 Extension으로 설치할 수 있는 Live Server에 대해서 소개하고자 한다.팀 프로젝트를 진행하는 중, index.html에 script 모듈을 넣었을 때 CORS 오류가 생성되어 애를 먹는 중 Live Server Extension을 사용하여 해결하였다.   1. Live Server란?정적 및 동적 페이지를 실시간으로 로컬 개발 서버에서 실행시켜주고 코드 저장이 일어날 때마다 자동으로 새로고침 해준다.   2. Live Server 사용 방법Liver Server 설치가 끝났다면내가 원하는 html 파일을 우클릭 후, "Open with Live Serer"를 클릭한다.  기다리면 다음과 같이 개발 서버로 웹 페이지가 열린다.    3. Live Serve.. 더보기
[Vanila JavaScript] 파티클 만들기 오늘은 내일 배움 캠프 자기소개서 페이지 제작 중, 적용한 파티클 만드는 방법에 대해서 리뷰를 하고자 한다.    다음과 같이 버튼을 누르면 사방으로 재각기 하트들이 파티클처럼 퍼지는 것을 볼 수 있다. 더보기
[FireBase] FireBase CORS 오류 및 해결 방법 index.html 파일 script에 type="module"을 사용하면, 브라우저는 이 스크립트를 일반 스크립트가 아니라 ES 모듈로 처리해. firebase.js 파일// Firebase SDK 라이브러리 가져오기import { initializeApp } from "...";import { getFirestore } from "...";import { collection, addDoc } from "...";import { getDocs } from "...";// For Firebase JS SDK v7.20.0 and later, measurementId is optionalconst firebaseConfig = { apiKey: "....", authDomain: ".... 더보기

티스토리툴바