대충공부한거적어두는블로그

클라우드 컴퓨팅과 네트워크의 핵심 개념인 IP, DNS, 포트, VM,그리고 클라우드 서비스 모델인 On-Premise, IaaS, PaaS, SaaS에 대해 자세히 알아봅시다~~ 1. 네트워크의 기초 개념IP(Internet Protocol)인터넷에 연결된 모든 장치에 부여되는 고유한 식별자• IPv4: 일반적으로 사용되는 32비트 주소 체계로, 192.168.0.1과 같은 형태를 가집니다.• IPv6: 주소 공간의 부족을 해결하기 위해 개발된 128비트 주소 체계입니다. DNS(Domain Name System)사람이 이해하기 쉬운 도메인 이름을 컴퓨터가 이해할 수 있는 IP 주소로 변환해주는 시스템• 동작 원리: 사용자가 도메인 이름을 입력하면, DNS 서버가 해당 도메인에 대한 IP 주소를 반환•..

https://github.com/minseo25/likesaju-frontend-seminar GitHub - minseo25/likesaju-frontend-seminar: 2학기 프론트엔드 세미나 12기 공개용 레포2학기 프론트엔드 세미나 12기 공개용 레포. Contribute to minseo25/likesaju-frontend-seminar development by creating an account on GitHub.github.com 1. scroll event 추가   if (textSectionRef.current) { const delayedFactor = Math.max(0, factor2 - 0.2); gsap.to(textSectionRef.current..

Requirements일대일 채팅, 그룹 채팅 모두 가능해야 함.현재 열람중인 채팅방에서 발생하는 채팅 내용들을 실시간으로 확인해야 함.현재 열람 중인 채팅방이 아니더라도 좌측 목록에서 다른 채팅방으로부터의 알림을 실시간으로 받아야 함.채팅 내역은 데이터베이스에 저장되어, 브라우저를 새로 열고 로그인을 다시 해도 이전의 기록들을 보존&열람할 수 있어야 함.인증받은 사람만 채팅이 가능해야 함.Scenario1. A 가 채팅방을 연다.서버로부터 기존 채팅 내역들을 불러온다 (일반적인 HTTP 요청-응답)클라이언트와 서버가 웹소켓으로 연결된다. 2. A가 채팅방에 메세지를 보낸다.A의 클라이언트가 웹소켓을 통해 서버로 메세지를 전송한다.서버는 A가 연결된 웹소켓으로부터 데이터를 받고 핸들러를 호출한다.메세지..

django는 웹 개발 프레임워크일 뿐이지, 웹 서버는 아님물론 django에서는 python manage.py runserver 커맨드를 통해 장고에서 기본적으로 제공하는 개발용 내장 서버 사용할 수 있다=> ssl 등 보안 프로토콜 적용 불가, 여러 프로세스 동시에 처리 불가 then, What's web server?웹 브라우저와 같은 클라이언트로부터 HTTP 요청을 받아들이고, HTML 문서와 같은 웹 페이지를 반환하는 컴퓨터 프로그램클라이언트 요청(주로 HTTP)에 맞는 응답(주로 web page 혹은 api 응답)을 생성 상기 언급한 웹 서버에서는 지정된 경로에 미리 데이터를 준비한 후 요청에 따라 그대로 돌려주는 역할의 정적 콘텐츠 서빙만을 수행 가능함ex) public 폴더에 들어갈만한 이..

우리는 웹소켓 프로토콜을 통해 실시간 양방향 통신을 구현할 예정 How about HTTP Polling?polling = 하나의 프로그램이 다른 프로그램(혹은 장치)의 상태를 주기적으로 검사하여 일정 조건을 만족하면 자료를 처리하는 개념메시지를 원하는 클라이언트는 서버에게 일정 주기로 계속 Request를 전송서버 입장에서 클라이언트가 원하는 이벤트가 준비되었다면(도착했다면) HTTP Response 형태로 이를 반환해주고, 그렇지 않다면 요청은 실패 but,네트워크 리소스 많이 잡아먹음 오버헤드를 줄이기 위해 전송 주기 T를 길게 하면 실시간성이 떨어짐 cf) long polling = 요청 횟수에 따라 서버 부담이 급증하는 Polling 방식을 개선하기 위해 등장* 구체적으로는, 만약 전송할 데이터..

주요 구성 요소- 구매자 (상품 선택하고 결제 진행하는 사용자)- client (프론트엔드 (React), 구매자가 상호작용하는 웹사이트나 앱. 결제 요청을 받고 결제창을 호출하는 인터페이스 역할)- Server (백엔드 (Django), PG사에게 결제 승인을 요청하고, 그에 대한 응답을 받는 상점의 서버)- 페이먼트(PG사) (실제 결제 처리와 승인, 결제 상태 등을 관리하는 결제 대행사) PG(Payment Gateway)사란?PG사는 이커머스 결제 대행 서비스를 진행하는 중개업체Payment Gateway의 준말로, `‘결제를 위한 관문’`이라고 이해PG사는 카드 결제, 간편결제, 계좌이체, 가상계화(무통장입금) 등 다양한 결제 방식을 사용할 수 있게 연결 결제 flow1. 결제창 호출 (결제 준..

상태 관리의 유형은1. 전역 vs 로컬전역 상태 관리전역 상태(global state) 관리는 프로젝트 전체에 영향을 미치는 상태를 관리하는 것로컬 상태 관리로컬 상태(local state) 관리는 특정 기능 또는 컴포넌트 내에서만 사용되는 상태를 관리하는 것 2. 클라이언트 vs 서버클라이언트는 프론트 유저 간 상호작용, 서버는 프론트 백 간 상호작용 느낌으로 이해하자고요 Redux의 원칙1. single source of truthAction → Dispatcher → Store → View의 순서로 데이터 흐름을 단방향으로 제어하기 위한 아키텍처 2. state is read-only 3. Changes are Made with Pure Functionsfunction sampleReducer(..

리엑트에서 상태관리가 왜 필요하냐면요* Props-Drilling 이슈  - 리액트는 단방향 바인딩을 지원함, 즉 부모의 상태를 props로 자식으로 전달할 수는 있지만, 자식의 상태를 부모로 전달할 방법은 없음  - 즉 최상위 컴포넌트의 정의하고 관리하는 props를 계속해서 전달전달 해야함* 복잡한 상태관리 로직  - 특정 state에 대한 상태관리 함수들이 산재해있다면 (여러 컴포넌트에 흩어져있다면) 점검 힘듦, 유지보수/추적이 어려움 => 전역 상태관리를 쉽게 할 수 있는 라이브러리를 쓰자 (ex. Redux) 리액트 상태관리 라이브러리에 뭐가 있냐면요redux, context-api, MobX, Recoil, Zustand, Jotai ... Redux란 뭐냐면요Flux라는 아키텍쳐를 실제로 구..

OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. 장점은 뭐냐면요- 사용자 비밀번호를 직접 전달/저장하지 않기 때문에 자격 정보가 노출될 위험을 줄임- 토큰 기반 인증으로 권한 부여 및 제한이 쉬움- 사용자 경험에서는 로그인 절차가 간소화되고, 동일한 계정으로 여러 서비스 로그인이 가능해져 편함 구성요소는요* 자원(개인정보)을 소유하는 주체인 Resource owner* 가입하고자 하는 서비스의 애플리케이션 서버 (Client)* 접근권한 부여하고 응답을 반환하는 서버 (Authorization Server) 동작 메커니즘은요STEP0. 통..