본문 바로가기
728x90
반응형

전체 글130

HTTP와 HTTPS의 차이점과 보안 메커니즘 이해하기 HTTPS와 암호화 방식HTTPS란?HTTP over Secure Socket Layer의 약자웹 브라우저와 웹 서버 간 통신을 암호화하는 보안 프로토콜기본 포트: 443 (HTTP는 80)주소창에 "https://" 및 자물쇠 아이콘으로 표시됨SSL/TLS 프로토콜을 사용하여 데이터 암호화필요성중간자 공격(Man-in-the-Middle) 방지데이터 무결성 보장사용자 개인정보 보호웹사이트 신뢰성 검증검색 엔진 순위 향상 (SEO 이점)암호화 방식대칭키 암호화 (Symmetric Key Encryption)암호화와 복호화에 동일한 키 사용특징:빠른 처리 속도적은 컴퓨팅 자원 필요키 교환 문제 존재알고리즘 예: AES, DES, 3DES비대칭키 암호화 (Asymmetric Key Encryption)공개키.. 2025. 5. 12.
네트워크의 기본 구조와 개념 이해하기 네트워크 기초 지식네트워크의 종류LAN (Local Area Network)건물이나 캠퍼스 같은 제한된 지역 내의 네트워크빠른 데이터 전송 속도 (10Mbps~10Gbps)낮은 지연 시간과 높은 안정성대표적 기술: 이더넷, Wi-Fi사용 사례: 가정, 사무실, 학교 네트워크MAN (Metropolitan Area Network)도시 규모의 지역을 커버하는 중간 크기 네트워크여러 LAN을 연결하는 형태LAN보다는 느리지만 WAN보다는 빠른 속도대표적 기술: DQDB, SMDS, ATM사용 사례: 도시 행정망, 케이블 TV 네트워크WAN (Wide Area Network)국가나 대륙처럼 넓은 지역을 연결하는 네트워크다양한 통신 기술과 장비 사용상대적으로 느린 속도와 높은 지연시간대표적 기술: MPLS, Fr.. 2025. 5. 12.
14 Context API란?Context API는 React에서 전역 상태를 관리하기 위한 기능입니다. 여러 컴포넌트에서 동일한 데이터를 공유해야 할 때, props를 통해 일일이 전달하지 않고도 데이터를 쉽게 전달할 수 있게 해줍니다.언제 Context API를 사용하나요?Context API는 다음과 같은 경우에 사용합니다:여러 컴포넌트에서 공유해야 하는 데이터가 있을 때상태 관리 라이브러리 없이 간단한 전역 상태 관리가 필요할 때props drilling(중첩된 컴포넌트에서 props를 계속 전달하는 현상)을 피하고 싶을 때Context API 사용 방법1. createContext로 전역 상태 만들기먼저, createContext를 사용하여 전역 상태를 만듭니다.import React, { creat.. 2025. 4. 21.
React 내부 구현 상태관리 React 내부 구현 상태 관리 및 Context API React 내부 상태 관리 React는 컴포넌트 단위로 상태를 관리합니다. 컴포넌트 내부에서 useState 훅을 사용하여 상태를 선언하고 관리할 수 있습니다. 상위 컴포넌트에서 하위 컴포넌트로 상태를 전달할 수 있으며, 상태 업데이트 시 React는 컴포넌트를 자동으로 re-render 합니다. Context API Context API는 React에서 제공하는 상태 관리 기능입니다. 컴포넌트 트리 전체에 걸쳐 데이터를 공유할 수 있습니다. createContext, useContext 등의 API를 사용하여 구현할 수 있습니다. Context API는 전역 상태 관리를 위한 대안으로 사용할 수 있으며, 상위 컴포넌트에서 하.. 2025. 4. 18.
함수형 컴포넌트 생명주기 1. useEffect의 배열 형태에 따른 실행 시점 차이useEffect는 두 번째 인자로 전달되는 의존성 배열에 따라 다음과 같이 동작합니다.(1) 의존성 배열이 없는 경우실행 시점: 컴포넌트가 마운트된 직후와 리렌더링될 때마다 실행됩니다.예시:javascriptuseEffect(() => { console.log('컴포넌트가 마운트되었거나 리렌더링되었습니다.'); });(2) 의존성 배열이 빈 배열([])인 경우실행 시점: 컴포넌트가 마운트된 직후에만 실행됩니다.예시:javascriptuseEffect(() => { console.log('컴포넌트가 마운트되었습니다.'); }, []);(3) 의존성 배열에 값이 있는 경우실행 시점: 컴포넌트가 마운트된 직후와 의존성 배열의 값이 변경될 때마다 실행됩.. 2025. 4. 10.
클래스형 컴포넌트 생명주기 1. componentDidMount 실행 시점실행 시점: 컴포넌트가 처음으로 DOM에 마운트된 직후 실행됩니다.주요 용도:외부 데이터 요청(API 호출 등)DOM 조작이벤트 리스너 설정타이머 설정예시:javascriptcomponentDidMount() { console.log('컴포넌트가 DOM에 마운트되었습니다.'); this.fetchData(); // API 호출 }2. componentDidUpdate 실행 시점실행 시점: 컴포넌트가 업데이트된 직후 실행됩니다.주로 props나 state가 변경되었을 때 발생합니다.주의사항:setState를 직접 호출하면 무한 루프가 발생할 수 있으므로 조건문으로 제어해야 합니다.주요 용도:props나 state 변경에 따른 추가 작업DOM 업데이트 후의 작업.. 2025. 4. 10.
5일차 React Router 살펴보기React Router는 싱글 페이지 애플리케이션(SPA)에서 페이지 이동처럼 보이는 동작을 가능하게 해주는 라이브러리입니다. react-router-dom 패키지를 설치하여 사용할 수 있습니다.주요 구성 요소BrowserRouter라우팅 기능을 제공하는 최상위 컴포넌트입니다. 라우팅 기능을 사용하려면 앱 전체를 BrowserRouter로 감싸야 합니다.Routes여러 개의 Route를 묶어주는 컨테이너 역할을 합니다.Route특정 URL 경로(path)에 대해 어떤 컴포넌트(element)를 보여줄지 설정합니다. URL과 매칭되는 컴포넌트를 지정하는 구성 요소입니다.Link사용자가 클릭하여 다른 경로로 이동할 수 있도록 해주는 클라이언트 라우팅 전용 링크 컴포넌트입니다. .. 2025. 4. 9.
git 초기화(1) #log 정보 확인 후 커밋 해시 확인 및 복사git log #복사한 커밋 해시를 이용해 reset 명령어와 원하는 옵션을 사용합니다.git reset --hard [커밋 해시]git reset --soft [커밋 해시]git reset --mixed [커밋 해시]#다시 한번 log를 활용해 정상적으로 reset이 되었는지 확인 git log 실수로 reset hard 진행해 사라진 커밋 되돌리기reflog 명령어 사용하기reflog 명령어을 이용하면 reset으로 사라진 커밋을 복구할 수 있습니다.reflog 는 reference(참조)와 log(로그)의 합섭어로 HEAD의 참조 이력을 로그 형태로 출력해 주는 명령어 입니다.REVERT 사용해 커밋 되돌리기#log 정보 확인 후 커밋 해시 확인 및 복.. 2025. 3. 31.
728x90
반응형

티스토리툴바