TO

HTML 요소는 태그, 속성, 내용으로 구성되며, 각 요소의 역할과 용도를 정확히 이해해야 효율적인 코딩이 가능하다. HTML 요소의 기본 구조HTML 요소는 다음과 같은 구조로 작성된다내용 시작 태그: 로 표시되며 요소의 시작을 나타냄.내용: 태그 사이에 들어가는 텍스트, 다른 태그, 또는 아무것도 없는 빈 내용.종료 태그: 로 표시되며 요소의 끝을 나타냄.예제:Hello, world!  빈 요소 (Self-closing Elements)일부 태그는 닫는 태그 없이도 유효하며, 내용이 없는 요소.예제:  HTML 속성 (Attributes)속성은 태그에 추가적인 정보를 제공하며 시작 태그 내에 작성된다.속성의 기본 형식내용 속성 이름: 소문자 사용 권장.속성 값: 큰따옴표로 묶어서 작성. (값이 없는 ..

HTML 문서 구조는 웹 문서를 올바르게 작성하고, 브라우저가 이를 적절히 해석하도록 돕는 기본적인 규칙이다. HTML 문서 구조는 다음과 같은 계층으로 이루어져 있다. DOCTYPE 선언HTML 문서가 HTML5 형식을 사용한다고 선언.브라우저가 올바른 모드(표준 모드)로 문서를 렌더링하도록 유도. HTML 루트 태그 HTML 문서의 최상위 요소로, 모든 HTML 코드를 감싸는 태그.lang 속성을 통해 문서의 언어를 지정(예: lang="ko"로 한국어 설정). 이는 SEO와 접근성(스크린 리더)에 중요. HEAD 섹션 문서의 메타데이터를 포함하며 브라우저나 검색엔진에 정보를 제공.주요 요소:: 문서 정보를 설정하는 태그.charset: 문자 인코딩 설정(일반적으로 UTF-8 사용).viewport:..

브라우저브라우저는 사용자가 인터넷에 접속해 웹사이트를 탐색하고, 콘텐츠를 표시하는 응용 프로그램이다.예시: Google Chrome, Mozilla Firefox, Microsoft Edge, Safari.주요 기능사용자가 입력한 URL을 통해 원하는 웹 페이지를 서버에 요청.HTML, CSS, JavaScript와 같은 웹 기술을 해석하고 렌더링.다양한 플러그인과 확장 기능 제공.보안 및 개인정보 보호 기능 제공. 브라우저 구성 요소사용자 인터페이스 (User Interface) : 주소창, 북마크, 뒤로 가기 버튼 등 사용자가 직접적으로 상호작용하는 부분.브라우저 엔진 (Browser Engine) : 사용자 인터페이스와 렌더링 엔진 간의 중재자 역할을 한다.렌더링 엔진 (Rendering Engin..

DNS(Domain Name System)는 인터넷에서 사용되는 "주소록" 역할을 하는 시스템으로, 사람이 이해하기 쉬운 도메인 이름(예: www.example.com)을 컴퓨터가 이해할 수 있는 IP 주소(예: 192.168.1.1)로 변환한다. DNS는 인터넷 통신에서 핵심적인 역할을 하며, 프론트엔드 개발자가 반드시 이해해야 할 중요한 개념이다. 역할도메인 이름 변환: 사용자가 입력한 URL(예: www.google.com)을 서버의 IP 주소(예: 142.250.190.14)로 변환.리소스 로드: 웹페이지, API 호출, 이미지 로드 등에서 리소스의 IP를 찾아 통신을 가능하게 함.분산된 데이터베이스: DNS는 전 세계적으로 분산된 서버 네트워크로 구성되어 고속 처리와 안정성을 보장. 구성 요소 ..

호스팅은 웹사이트나 웹 애플리케이션을 인터넷에 공개하기 위해 서버 공간을 제공하는 서비스다. 개발자가 만든 HTML, CSS, JavaScript 파일을 서버에 업로드하면, 다른 사람들이 인터넷을 통해 이 파일에 접근할 수 있다. 구성 요소1. 서버(Server) : 웹사이트가 저장되는 컴퓨터. 클라이언트(브라우저)가 요청하면 데이터를 제공.정적 서버: HTML, CSS, JS 같은 정적 파일만 제공. (Netlify, Vercel, GitHub Page 등)동적 서버: 백엔드 로직과 데이터베이스도 처리.2) 도메인 이름 (Domain Name) : 사용자가 서버에 쉽게 접근하도록 만들어진 URL.3) DNS (Domain Name System) : 도메인 이름을 서버의 IP 주소로 변환. 종류1) 공유..

도메인 이름은 사용자가 인터넷에서 웹사이트에 접근하기 위해 입력하는 주소다. (예: www.google.com)  우리가 사용하는 도메인은 서버의 위치를 나타내는 숫자인 인터넷상의 IP 주소(예: 172.217.3.110)를 사람이 읽기 쉽게 변환한 문자열이다. 도메인 이름은 DNS(Domain Name System)를 통해 IP 주소와 연결된다. 구조도메인은 점(.)으로 구분된 여러 부분으로 구성되며, 계층적 구조를 가진다.a. 최상위 도메인 (TLD, Top-Level Domain) : 도메인의 가장 마지막 부분이다.예: .com, .org, .net, .kr종류:gTLD (Generic Top-Level Domain)일반 도메인: .com, .org, .net특정 목적: .edu(교육), .gov(..

HTTPHTTP(Hyper Text Transfer Protocol)은 클라이언트(웹 브라우저)와 서버 간에 데이터를 주고받기 위한 프로토콜이다. 웹의 핵심 기술 중 하나로, 텍스트나 이미지, 비디오, HTML 문서 등을 전송하는 데 사용된다. 특징1. 무상태성(Stateless) : HTTP는 무상태 프로토콜로, 각 요청 간에 상태를 유지하지 않는다. 예를 들어, 클라이언트가 서버에 두 번 요청을 보내도 서버는 첫 번째 요청과 두 번째 요청의 관계를 알 수 없다. 이를 보완하기 위해 쿠키, 세션 같은 기술을 사용해 상태를 유지한다.2. 클라이언트-서버 구조 : HTTP는 클라이언트와 서버 간의 요청(Request)과 응답(Response)으로 이루어진다. 3. URI(Uniform Resource Id..

인터넷은 전 세계적으로 연결된 컴퓨터와 서버들이 표준화된 프로토콜을 사용해 서로 통신하는 글로벌 네트워크다. 데이터는 패킷이라는 작은 조각으로 나뉘어지고, 여러 단계를 걸쳐 정보가 전달됨으로써 일어난다. 이를 이해하기 위해 클라이언트와 서버 간의 상호작용을 살표보는 것이 중요하다. 사용자의 요청웹 브라우저(클라이언트)는 사용자가 입력한 URL을 기반으로 서버에 요정을 보낸다. 이때 사용자는 도메인 이름 (예: www.example.com ) 을 입력하게 되는데, 이를 실제 IP주소로 변환해야 한다.브라우저는 DNS(Domain Name System) 서버에 요청을 보내 도메인의 IP 주소를 받아온다. (예 www.example.com → 192.0.2.1)  서버 연결(TCP/IP)IP 주소를 얻은 후,..

async와 await은 비동기 작업을 동기 방식처럼 다룰 수 있도록 도와준다. 이를 사용하면 Promise 기반의 비동기 코드를 더 읽기 쉽고 관리하기 쉽게 만들 수 있다. async함수 앞에 붙여 비동기 함수를 선언한다. 항상 Promise를 반환한다.async function fetchData() { return 'Hello, world!';}fetchData().then((data) => console.log(data)); // 출력: Hello, world!fetchData 함수는 async로 선언되었으므로 내부에서 Promise 처리되어 반환된다. awaitasync 함수 안에서 Promise가 해결될 때 까지 코드 실행을 멈추고, 해결되면 결과값을 반환하며 오류가 발생하면 throw로 예..

Redux Slice는 Redux 상태와 관련 로직을 간단하고 효율적으로 관리하기 위한 구조다. Redux Toolkit을 사용할 때 핵심적으로 등장하는 개념으로 상태(state), 액션(action), 리듀서(reducer)를 한 곳에서 정의할 수 있게 도와준다. Redux Slice란?Slice는 전체 Redux 상태의 조각이다. 애플리케이션 상태를 여러 개의 Slice로 나눠서 관리할 수 있다. 구성 요소1. State (상태) : Slice는 해당 조각의 초기 상태를 정의한다. 예: isLoggedIn, userName 같은 상태.2. Reducers (상태 변경 함수) : 상태를 어떻게 업데이트할지 정의하는 함수들. 리듀서는 Action을 처리하고, 새로운 상태를 반환한다.3. Actions (..