웹 기초 썸네일형 리스트형 [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: ".... 더보기 [내일 배움 캠프, 웹 기초] html, <script> 태그의 위치 안에서 안녕하세요✅ HTML을 읽기 전에 스크립트가 실행됨✅ 보통 선언적 스크립트(전역 변수, 함수 정의)에 사용❌ DOM 요소가 아직 로드되지 않음 → document.getElementById() 같은 DOM 조작 불가능 html은 위에서부터 순차적으로 파싱이 된다.html 파싱 중 script를 만나면, 파싱을 중단하고 script를 다운 및 실행한다.파싱이 끝나지 않은 상태에서 Script가 실행되기 때문에 Script가 제대로 실행되지 않게 된다. 정확하게는 DOM 요소를 사용하는 경우 제대로 실행되지 않게 된다. 2. body 내부에 위치한 경우(1) body 시작 부분 안녕하세요✅ HTML 문서가 로드되는 초기에 실행❌ 여전히 DOM이 완전히 로드되지 않는다. (2) b.. 더보기 [내일 배움 캠프, 웹 기초] URL이란? 1. URL이란?URL(Uniform Resource Locator) : 웹에서 주어진 고유 리소스 주소를 의미한다.각각의 유효한 URL은 고유한 리소스를 가르킨다.HTML 페이지, CSS 문서, 이미지 등이 될 수 있다.URL로 표시되는 리소스와 URL 자체는 웹 서버에서 처리되므로 해당 리소스와 관련 URL을 신중하게 관리하는 것은 웹 서버 소유자에게 달려 있다. 2. URL 구성URL은 여러 부분으로 구성되며 일부는 필수이고 일부는 선택 사항이다. * 스키마Scheme는 URI(Uniform Resource Identifier)의 구성 요소로써 브라우저가 리소스를 요청하는 데 사용해야 하는 프로토콜을 나타낸다. (해당 사진에서는 http 프로토콜을 사용한 것을 나타낸 것) * 권한권한(authori.. 더보기 [내일 배움 캠프, 웹 기초] index.html이란? HTML 파일을 배포할 때, 파일명을 index.html로 하는 이유 :1. 자동 탐색 기능 :사용자가 URL에 구체적인 파일명을 입력하지 않아도 웹 서버가 자동으로 index.html을 기본 파일로 인식하여 첫 페이지를 로드합니다. 이는 사용자의 브라우징 경험을 단순화하고 편리하게 만듭니다. 2. 웹사이트 구조와 조직 : index.html은 웹사이트의 기본 페이지를 명확하게 나타내며, 사이트 내 다른 페이지들과의 구조적 구분을 쉽게 도와줍니다. 3. 검색 엔진 최적화(SEO) : 검색 엔진은 index.html을 중요한 페이지로 인식하여 더 나은 가시성과 순위를 부여할 수 있습니다, 이로써 웹사이트의 검색 가능성이 높아집니다. 4. 이식성 및 호환성 : index.html은 모든 플랫폼에서 사실상 표.. 더보기 [내일 배움 캠프, 웹 기초] 웹 브라우저 작동 원리 ※ 웹 기초를 복습하기 전에 전체적인 작동원리를 파악하고 공부하는 것이 도움이 될거같아 정리해보았다. 1. URL 입력과 네트워크 요청사용자가 웹 브라우저 주소창에 https://example.com과 같은 URL을 입력하면 브라우저는 이를 해석하여 다음 단계를 진행한다.(1) URL 해석URL을 프로토콜(Scheme), 도메인, 경로, 쿼리 문자열 등으로 분해한다.https://kimyongjun0129.tistory.com/77 (URL에 대한 자세한 정보) 프로토콜: https도메인: kimyongjun0129.tistory.com경로: /77(2) DNS 조회브라우저는 도메인(example.com)을 실제 IP 주소로 변환하기 위해 DNS 서버에 쿼리를 보낸다.응답을 받아 도메인이 호스팅된 웹.. 더보기 이전 1 다음
