HJ

[React] React 기초 1

ReactUI를 구성하기 위한 자바스크립트 라이브러리컴포넌트를 기반으로 화면을 효율적으로 재사용/관리 할 수 있도록 설계된 프론트엔드 기술전통적인 DOM을 직접 조작하는 대신, 가상 DOM(Virtual Dom)을 통해 변경된 부분만 최소 비용으로 업데이트 함SPA 개발을 넘어 next.js 같은 프레임워크와 함께 SSR/CSR/SSG/ISR 등 다양한 렌더링 젼략을 지원하는 기술SPA (Single Page Application)하나의 HTML 페이지에서 모든 화면 전환을 처리하는 웹 애플리케이션 방식기본 MPA(Multi Page Application)처럼 페이지 이동 때마다 서버에서 HTML 재요청을 하지 않고, 처음 한 번만 HTML, CSS, JavaScript를 받아오고 이후 화면 전환은 자바..

[Node.js] Node.js 기초 2

ExpressNode.js 환경에서 가장 널리 사용되는 웹 애플리케이션 프레임워크로, 서버를 쉽고 빠르게 구축할 수 있도록 다양한 기능을 제공한다.기본적인 HTTP 모듈보다 훨씬 간단하게 라우팅 처리, 요청/응답 객체 관리, 미들웨어 설정, 정적 파일 제공, 템플릿 엔진 연결 등을 할 수 있어 개발 생산성을 크게 높여준다.라우팅클라이언트가 어떤 URL과 HTTP 메서드(GET, POST)로 요청을 보냈을 때 그 요청을 어떤 코드가 처리할지 연결해주는 규칙이다.미들웨어요청(request)과 응답(response) 사이에서 중간에 실행되는 함수로, 클라이언트의 요청을 직접 처리하기보다는 가공 / 검사 / 추가 작업을 담당하는 역할을 한다.요청 로그를 남기거나, JSON 데이터를 파싱하거나, 로그인 여부를 검..

[MongoDB] MongoDB

1. MongoDB란NoSQL 데이터베이스 시스템 중 하나로, 문서 지향 데이터베이스관계형 데이터베이스와는 다르게 데이터를 테이블이 아니라 JSON 스타일의 BSON(Binary JSON)형식의 문서로 저장개발자가 유연하게 데이터를 저장하고 쿼리할 수 있도록 목적으로 만들어짐.1-1. 문서 지향 데이터베이스데이터를 BSON형식의 문서로 저장. 이 문서는 키-값 쌍으로 이루어져 있으며, 여러 종류의 데이터 유형을 포함할 수 있다.1-2. 스키마가 없다.관계형 데이터베이스와 달리 MongoDB는 데이터베이스의 스키마를 명시적으로 정의하지 않는다.동적인 스키마를 사용하여 데이터 모델을 유연하게 변경할 수 있도록 했다.{"no":1, "userid":"apple", "userpw":"1111"}{"no":2, ..

WebRTC란?Web Real-Time Communication의 약자로, 브라우저나 앱에서 실시간 음성, 영상, 화면 공유, 파일/데이터 전송을 구현할 수 있게 해주는 기술을 말한다. Zoom, Google Meet, Discord 음성/영상 통화 같은 기능을 웹에서 만들 수 있게 해주는 기술이라 생각하면 된다.WebRTC의 기능기능예시화상 통화1:1 영상 통화, 온라인 수업음성 통화브라우저 기반 전화, 음성 채팅화면 공유회의 화면 공유, 원격 지원실시간 데이터 전송채팅, 파일 전송, 게임 상태 동기화AI 서비스 연동웹캠 영상 기반 자세 분석, 손 인식, 얼굴 인식WebRTC의 핵심 개념mediaStream카메라, 마이크, 화면 공유 같은 미디어 데이터 흐름을 말한다.navigator.mediaDevi..

Node.js란?브라우저 밖에서도 자바스크립트를 실행할 수 있도록 만든 서버 측 자바스크립트 실행 환경이다.구글의 V8 엔진을 기반으로 동작하며, 웹 서버, API 서버, 실시간 채팅, 스트리밍 서비스 등에서 활용된다.npm (Node Package Manager)을 통해 수많은 오픈소스 패키지를 쉽게 사용할 수 있어 빠른 개발이 가능하다.프론트엔드와 동일한 언어(JavaScript)를 사용한다는 점에서 풀스택 개발에 매우 유리한 환경이다.프론트엔드와 백엔드프론트엔드사용자가 직접 보고 상호작용하는 화면(UI)을 구현하는 영역.HTML / CSS / JavaScript를 사용해 버튼, 입력창, 화면 레이아웃, 애니메이션 등 사용자 경험을 담당함.백엔드사용자의 요청을 받아 데이터를 처리하고, 데이터베이스와 ..

크롤링이란?크롤링(Crawling)은 웹사이트의 HTML 문서나 API 데이터를 자동으로 수집하여 원하는 정보를 추출하는 기술이다.사람이 직접 웹페이지를 열어 뉴스, 상품 정보, 댓글, 주가, 날씨 등을 확인하는 과정을 프로그램이 대신 수행한다고 생각하면 된다.RequestsRequests는 Python에서 웹 서버에 HTTP 요청을 보내고 응답을 받아오기 위해 사용하는 대표적인 라이브러리이다.웹 브라우저가 사이트에 접속할 때처럼 Python 코드에서도 웹페이지, 이미지, JSON 데이터 등을 서버로부터 가져올 수 있게 해주며, 웹 크롤링과 API 연동에서 가장 많이 사용되는 기본 도구 중 하나이다.requests.get()으로 웹페이지를 요청하거나, requests.post()로 데이터를 서버에 전송할..

Promise자바스크립트에서 비동기 작업의 결과를 미래의 값으로 표현하는 객체로, 시간이 걸리는 작업이 성공적으로 완료되었는지 또는 실패했는지를 나중에 알려주기 위해 사용한다. 콜백 지옥콜백 지옥은 자바스크립트에서 비동기 작업을 콜백 함수로 계속 중첩해 처리하다 보니 코드가 오른쪽으로 깊게 들여 쓰기 되며 복잡해지고, 흐름을 한눈에 이해하기 어려워지는 문제를 말한다.const promise = new Promise((resolve, reject) => { if(성공){ resolve(결과값) // 작업 성공 시 호출 }else{ reject(에러) // 작업 실패 시 호출 }})promise.then(result => { console.log("성공..

localStorage브라우저가 제공하는 웹 스토리지 기능 중 하나로, 자바스크립트를 통해 키/값 형태의 데이터를 브라우저에 영구적으로 저장할 수 있는 저장소.브라우저별로 약 5MB 내외 저장 제한이 있음문자열만 저장 가능같은 도메인에서만 접근 가능민감한 정보(비밀번호, 토큰 등)는 저장하면 안됨데이터 저장하는 방법localStorage.setItem("key", "value")데이터 불러오는 방법const value = localStorage.getItem("key")데이터 삭제하는 방법 / 모든 데이터 삭제하는 방법localStorage.removeItem("key")localStorage.clear()localStorage를 이용한 테마 변경테마 변경현재 테마: sessionStorage브라우저..

최단 경로 알고리즘이란?최단 경로 알고리즘은 그래프 상에서 특정 정점에서 다른 정점까지 가장 적은 비용(거리, 시간 등)으로 도달할 수 있는 경로를 찾는 알고리즘을 말한다. 일반적으로 네비게이션과 같은 길찾기에 적용된다.다익스트라 알고리즘의 동작 원리다익스트라 알고리즘은 "하나의 시작점에서 다른 모든 정점으로 가는 최단 경로"를 구하는 알고리즘이다. 음수의 가중치가 없을 때만 사용할 수 있으며, 기본적으로 그리디 알고리즘과 다이나믹 프로그래밍의 원리가 섞여있다.초기화 : 출발 정점의 거리는 0, 나머지 모든 정점의 거리는 무한대로 설정한다.정점 선택 : 아직 방문하지 않은 정점 중 최단 거리가 가장 짧은 정점을 선택한다.거리 갱신 : 선택한 정점을 거쳐서 인접한 다른 정점으로 이동하는 거리가, 기존에 기..

그리디 알고리즘이란?최적의 값을 구해야 하는 상황에서 사용되는 근시안적인 방법론으로 '각 단계에서 최적이라고 생각되는 것을 선택'해 나가는 방식으로 진행하여 최종적인 해답에 도달하는 알고리즘이다.이때, 항성 최적의 값을 보장하는 것이 아니라 최적의 값의 '근사한 값'을 목표로 한다.주로 문제를 분할 가능한 문제들로 분할한 뒤, 각 문제들에 대한 최적해를 구한 뒤 이를 결합하여 전체 문제의 최적해를 구하는 경우에 주로 사용된다.그리디 알고리즘의 동작 방식선택 절차(Selection Procedure) : 현재 상태에서의 최적의 해답을 선택한다.적절성 검사(Feasibility Check) : 선택된 해가 문제의 조건을 만족하는지 검사한다.해답 검사(Solution Check) : 원래의 문제가 해결되었는지..