Minch13r

CDN(Content Delivery Network, 콘텐츠 전송 네트워크)이란? 웹 콘텐츠를 세계 곳곳에 있는 여러 서버에 분산하여 저장하는 분산 서버 네트워크 시스템쓰는 이유?전 세계 어디에 있든지 이미지, 영상 등 웹 콘텐츠를 사용자에게 빠르게 전달 가능서버와 최종 사용자의 물리적 거리를 줄여서 웹 서비스의 성능, 속도, 신뢰성을 향상시키고 서버의 부하를 최소화하는 것동작방식초기 설정 과정원본 서버 연결 : 웹사이트 소유자가 CDN 서비스에 가입하고 오리진 서버에 CDN 연결DNS 설정 변경 : 웹사이트의 DNS 설정을 수정해 트래픽을 CDN으로 라우팅컨텐츠 복제 : CDN은 원본 서버의 정적 컨텐츠(이미지, CSS, JS 파일 등)를 전세계 엣지 서버에 복사사용자 요청 처리 과정사용자 요청 발생 ..

1. 기본 구문 차이클래스형 컴포넌트import React, { Component } from 'react';class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({ count: this.state.count + 1 }); } render() { return ( Count: {this.state.count} 증가 ); }}함수형 컴포넌트import Re..

1. State의 기본 개념 🧩State란 무엇인가?컴포넌트 내부에서 관리되는 변경 가능한 데이터 저장소컴포넌트의 "메모리" 역할을 하는 객체props와 달리 컴포넌트가 직접 제어하고 수정 가능상태가 변경되면 React는 해당 컴포넌트를 자동으로 다시 렌더링State가 필요한 경우시간이 지남에 따라 변경되는 데이터사용자 입력에 반응해야 하는 값API 호출 결과를 저장할 때UI 상태(토글, 폼 입력값, 로딩 상태 등) 관리State vs PropsState: 컴포넌트 내부에서 관리, 변경 가능Props: 부모로부터 전달받음, 읽기 전용State는 종종 자식 컴포넌트에 props로 전달됨2. 함수형 컴포넌트의 useState Hook 🪝useState 기본 문법import React, { useState..

1. 컴포넌트 (Components) 🧩컴포넌트의 개념UI를 독립적이고 재사용 가능한 조각으로 분리한 것각 컴포넌트는 자체 로직과 렌더링 방식을 가짐JavaScript 함수나 클래스로 구현됨함수형 컴포넌트간결하고 이해하기 쉬운 문법React 16.8 이후 Hooks를 통해 상태 관리 가능최신 React 개발에서 권장되는 방식function Welcome(props) { return 안녕하세요, {props.name}님!;}클래스형 컴포넌트React.Component를 상속받아 구현render() 메서드 필수생명주기 메서드 활용 가능class Welcome extends React.Component { render() { return 안녕하세요, {this.props.name}님!; }}컴포넌..

1. JSX의 개념 🔍정의: JavaScript XML의 약자로, JavaScript 내에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법적 확장탄생 배경: Facebook에서 React를 개발하며 UI 컴포넌트를 더 직관적으로 표현하기 위해 도입목적: 마크업과 로직을 분리하는 대신, 둘 다 포함하는 '컴포넌트'라는 단위로 관심사를 분리2. JSX 기본 문법과 특징 📝기본 형태: HTML과 유사하지만 JavaScript 내부에서 사용확장자: .jsx 또는 .js 파일에서 사용 가능트랜스파일링: Babel과 같은 도구를 통해 일반 JavaScript로 변환됨React.createElement() 변환: JSX는 최종적으로 React.createElement() 함수 호출로 변환// JSX 코드..

1. jQuery 소개1.1 jQuery란?jQuery는 2006년 존 레식(John Resig)이 개발한 자바스크립트 라이브러리로, "적게 쓰고 많은 일을 한다(Write less, do more)"라는 철학을 바탕으로 만들어졌습니다. 복잡한 자바스크립트 코드를 간결하게 작성할 수 있게 해주며, 다양한 브라우저 간의 호환성 문제를 해결해 줍니다.1.2 jQuery의 주요 특징간결한 문법: 복잡한 자바스크립트 코드를 짧고 이해하기 쉽게 작성할 수 있습니다.크로스 브라우저 호환성: IE, Firefox, Chrome, Safari, Opera 등 다양한 브라우저에서 일관되게 동작합니다.DOM 조작 간소화: HTML 문서의 요소를 쉽게 선택하고 수정할 수 있습니다.이벤트 처리 간소화: 사용자 상호작용에 대한..

보통 var 형태를 썼었는데 const라는 변수 선언 방식을 알게 되었다. 이 const는 어디서, 왜 쓰이는 것인지 알아보겠다. 코드 예시를 보자면 다음과 같다.// 페이지 로드 시 전화번호 입력 하이픈 추가document.addEventListener('DOMContentLoaded', function() { // 전화번호 입력 필드 가져오기 - 이름 수정 const phoneNumberField = document.querySelector('input[name="m_phone"]'); if(phoneNumberField) { // null 체크 추가 // 전화번호 입력 필드에 input 이벤트 리스너 추가 phoneNumberField.addEventList..

https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css  1. 레이아웃 관련 클래스1. 컨테이너 클래스    - `.container`: 반응형 고정 너비 컨테이너    - `.container-fluid`: 전체 너비 컨테이너    - `.container-{breakpoint}`: 특정 중단점까지 전체 너비 2. 그리드 시스템    - `.row`: 행을 만드는 클래스    - `.col`: 기본 열    - `.col-{size}`: 특정 크기의 열 (1-12)    - `.col-{breakpoint}-{size}`: 반응형 열 2. 컴포넌트 스타일1. 버튼 클래스    - `.btn`: 기본 버튼    - `.btn-pri..

{} (중괄호) => 블록(Block)코드는 중괄호로 묶을 수 있는데, 이렇게 묶인 코드를 코드 블록(Block)이라고 한다.{ 실행코드} 함수 블록과 조건문/반복문 등의 블록은 다른 성질의 블록함수 블록 내에 선언된 변수는 함수 밖에서 사용할 수 없다!스코프(Scope)스코프는 변수를 선언할 때 그 변수를 어디서 접근 가능한지를 정의하는 영역을 의미전역 스코프 : 블록 바깥에 그냥 선언된 변수지역 스코프 : 블록 내부에 선언된 변수블록 스코드 : 일반적인 블록(조건문, 반복문 등)에 선언된 변수함수 스코프 : 함수 내부에 선언되 변수 스코프 범위전역  스코프에 선언된 변수모든 스코프에서 사용 가능블록 스코프에 선언된 변수var로 선언 시 : 모든 스코프에서 사용 가능let로 선언 시 : 선언된 블록 또..

반복문특정 코드를 반복해서 실행하고 싶을 때 사용하는 구문이다.for 문while 문for문조건식을 만족하는 한 계속해서 코드를 반복 실행한다. 매 반복 실행 마다 마지막에 증감식을 실행시킨다.for (초기식; 조건식; 증감식) { 반복 실행될 코드}while문조건식을 만족하는 한 계속해서 코드를 반복 실행한다.while(조건식){ 반복 실행될 코드} for문과 whlie문 중 어떤 거를 선택해야 할지 모르겠을 때, while문은 언제까지 반복할지 모를 때 사용하는거고 for문은 반복횟수를 명확히 알 때 사용하는 것이다.반복문으로 피보나치 수열 구하기피보나치 수열이란?첫 번째와 두 번째 숫자가 1이고, 그 다음부터는 바로 앞의 두 숫자를 더한 값이 되는 수열입니다.예: 1, 1, 2, 3, 5, 8, 1..