console.log

1. 브라우저 동작 원리 사이트 주소 입력 HTML 파싱 → DOM 트리 생성 HTML → HTML Parser → DOM Tree CSS 파싱 → CSSOM 생성 CSS → CSS Parser → CSSOM Tree 렌더 트리 생성 DOM Tree + CSSOM Tree → Render Tree 레이아웃 (리플로우) Render Tree 배치 (position, display, float … 크기나 좌표와 관련된 작업) 페인트 (리페인트) Render Tree 그리기 (background, box-shadow, color … 시각적인 작업) Composite 나뉘어져 있던 Layer를 하나로 합성해 페이지 완성 💡 리플로우와 리페인트가 반드시 순차적으로 실행되는 것은 아니다 레이아웃의 영향이 없는 변경..

1. HTTP Protocol GET Header에 url 담아서 전송 url 뒤에 ? 를 붙여 파라미터 전달 https://yeahzzz.tistory.com?key1=value1&key2=value2 url에 파라미터 그대로 노출됨 → 보안에 취약 데이터를 받아올 때 주로 사용 POST Body에 데이터 담아서 전송 값의 변경, 추가에 주로 사용 2. UDP (User Datagram Protocol, 사용자 데이터그램 프로토콜) 비연결형 프로토콜 → 연결 설정, 해제, 흐름 제어, 혼잡 제어 X 데이터그램 (패킷) 단위로 데이터를 처리하는 프로토콜 → 크기 초과시 잘라서 전송 서버와 클라이언트 자유롭게 연결 각각의 패킷은 독립적인 관계를 지니게 됨 → 독립적으로 처리 특징 신호절차를 걸치지 않음 U..

1. JavaScript Engine JavaScript로 작성한 코드를 해석하고 실행하는 인터프리터 2. Rendering Engine HTML, CSS로 작성된 마크업 관련 코드를 웹 페이지에 렌더링 3. Event Loop Task queue에 들어가는 task 관리 Call Stack 자바스크립트는 단 하나의 Call Stack 만을 사용 하나의 함수가 실행되면 끝날 때까지 기다림 요청이 들어올 때마다 Call Stack에 담아 순차적 처리 Heap 동적 생성된 객체는 Heap에 할당 구조화되지 않은 더미 메모리 영역을 지칭 Task Queue (Event Queue) 런타임 환경에서 Task들의 임시 대기 큐 FIFO 비동기로 호출되는 함수들은 Call Stack에 쌓이지 않고 바로 Task Q..

1. OOP (객체지향프로그래밍) SRP (단일 책임 원칙) 클래스는 단 하나의 책임을 가져야 한다. OCP (개방-페쇄 원칙) 확장에는 열려 있고 변경에는 닫혀 있어야 한다. LSP (리스코프 치환 원칙) 상위 객체를 하위 객체로 치환해도 상위 프로그램은 정상 동작 해야 한다. ISP (인터페이스 분리 원칙) 인터페이스를 사용하는 클라이언트 기준으로 분리해야 한다. DIP (의존 역전 원칙) 저수준 모듈의 구현에 의존해서는 안된다. 2. RESTfulAPI 자원 중심의 API 설계, HTTP Method를 통해 자원을 처리하도록 설계 URL - 리소스 HTTP Method - 행위 (GET 조회, POST 생성, PUT 전체 변경, PATCH 부분 변경 DELETE 삭제) header - API 버전 ..

“ 누락된 요구사항은 가장 수정하기 힘든 오류다. ” • Robert L. Glass 유명한 미국 소프트웨어 엔지니어 및 작가 구분 주 기능 상세 기능 설명 0. 공통 페이지 이동 Top Top 버튼을 클릭하면 상단으로 이동 1. 회원 관리 로그인 소셜 로그인 카카오 소셜 로그인 로그아웃 로그아웃 2. 상점 관리 포인트 포인트 조회 포인트 포인트 내역 도전 과제 도전 과제 목록 • 주단위 ◦ 3회 - 10p ◦ 5회 - 20p ◦ 7회 - 30p • 연속 작성 ◦ 한달 빠짐없이 모두 작성 - 100p 캐릭터 설정 캐릭터 목록 • 캐러셀 ( X ) ◦ 고양이(기본 캐릭터) ◦ 판다 ◦ 다람쥐 캐릭터 설정 캐릭터 구매 • 포인트로 캐릭터 구매 ◦ 고양이(기본 캐릭터) ◦ 판다 - 100p ◦ 다람쥐 - 50..

https://www.acmicpc.net/problem/12904 12904번: A와 B 수빈이는 A와 B로만 이루어진 영어 단어가 존재한다는 사실에 놀랐다. 대표적인 예로 AB (Abdominal의 약자), BAA (양의 울음 소리), AA (용암의 종류), ABBA (스웨덴 팝 그룹)이 있다. 이런 사실에 놀란 수 www.acmicpc.net 메모리 : 13260 kb 실행시간 : 144 ms 문제분석 S를 T로 만드는게 아니라 T를 S로 만들어보자 ! 걸린시간 30분 ⏱️ 풀이방법 t를 s로 만든다 1. t의 끝이 A일 경우 A만 삭제 2. t의 끝이 B일 경우 B삭제 후 문자 뒤집기 3. 역으로 계산하며 마지막에 t와 s가 같으면 result = 1 포인트 보통 이런 문제는 초기 상태에서 시작하..

아키텍처 OpenVidu Deployment 실시간 오디오 및 비디오 스트리밍에 필요한 인프라 제공 Application Server OpenVidu Deployment에서 제공하는 REST API 사용 세션과 연결 생성 화상 통화 관리 Application Client openvidu-browser.js SDK를 사용 하여 OpenVidu Deployment 와 통신 화상 통화 관리 기본 개념 세션(Session) 사용자가 연결하여 오디오 및 비디오 스트림을 보내고 받을 수 있는 가상 공간 동일한 세션에 연결된 참가자들끼리만 통신 가능 연결(Connection) 세션에 연결하는 각 참가자의 자리 세션에 연결하기 위해 Application Server에서 Application Client로 ****Tok..

Signaling Server Channel Server + Session Server Channel Server Offer&Answer를 중계하기 위한 Websocket 서버 Websocket 서버는 nginx로 로드 밸런싱 불가능 → 세션서버를 사용해 로드 밸런싱 한 채널서버에 여러 개의 방이 있을 수 있음 Session Server HTTP 서버 역할 사용자 요청 시 방 정보 알려주기 사용자가 어떤 채널서버로 접속할지 결정 (Load Balancing) Load Balancing - 최소 연결 방식 채널 분산처리 맵 필요 연결 수가 아닌 등급 정보를 저장하면 Update 수 ↓ ex) 연결 수 100명이면 등급 4로 대체 채널 서버 이름 연결 수 채널 A 100 채널 B 50 채널 C 80 방 생성..