LEO Devlog LEO Devlog

순서 사용자가 브라우저에 url을 입력한다. url에서 도메인 name 부분을 DNS 서버에서 검색한다. DNS 서버에서 해당 도메인 name에 해당하는 ip 주소를 찾아 url 정보와 함께 전달한다. 웹페이지 url 정보와 전달받은 ip 주소는 http를 사용해 http 요청 메시지를 생성한다. 이제 생성된 http 요청 메시지를 TCP를 이용해 인터넷을 거쳐 ip 주소의 컴퓨터로 전송한다. 도착한 http 요청 메시지는 http 프로토콜을 사용해 http 응답을 만든다. 만들어진 http 메시지는 다시 TCP를 이용해 요청한 컴퓨터로 전송한다. 도착한 http 응답 메시지는 http 프로토콜을 사용해 웹 페이지 데이터로 변환한다. 변환된 웹 페이지의 데이터는 웹 브라우저에 의해 출력된다. 요약 URL..

Ajax란? Asynchronous Javascript and XML의 약자로 간단히 정리하면 XMLHttpRequest를 이용해서 새로고침없이 페이지의 일부를 로드하는 방법이다. 자바스크립트를 사용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다. 비동기 방식 웹페이지를 새로고침하지 않고 데이터를 불러옵니다. Ajax를 통해 서버에 요청을 해도, 프로그램은 멈추지 않고 계속 돌아간다. 비동기 방식을 이용하면 시간 단축의 효과와 더불어 화면을 리로드하는 경우 필요한 부분만 가져오는 장점이 있다. Ajax를 쓰는 이유 단순하게 웹에서 데이터를 조회하고 싶은 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다. 일반적으로 HTTP 프로토콜은 단방향 통신이기 때문에, 클라이언트에서..

SSR (Server Side Rendering) 웹 페이지를 브라우저에서 렌더링하는 대신, 서버에서 렌더링합니다. 브라우저가 서버에 URI로 GET 요청을 보내면, 서버는 정해진 웹 페이지 파일을 브라우저로 전송합니다. 그리고 서버의 웹 페이지가 브라우저에 도착하면 완전히 렌더립됩니다. -> 서버에서 웹 페이지를 브라우저로 보내기 전에, 서버에서 완전히 렌더링했기 때문에 Server Side Rendering이라 합니다. e.g. 웹 페이지의 내용에 데이터베이스의 데이터가 필요한 경우 -> 서버는 데이터베이스의 데이터를 불러와 웹 페이지를 완전히 렌더링한 후 브라우저에게 응답으로 보낸다. i.e. 웹 페이지를 보던 사용자가 브라우저의 다른 경로로 이동한다면 -> 이동할 때마다 서버는 다시 필요한 웹 페..

알고리즘 문제에서 간간히 나오는 진법 변환 😇 자바스크립트에서 지원하는 내용으로 진법 변환에 활용해보자 ! 진법 변환 10진법에서 n진법으로 변환하기 let number = 10; // 10진법 -> 2, 8, 16 진법으로 변환 value.toString(2); // 1010 value.toString(8); // 12 value.toString(16); // a n진법에서 10진법으로 변환하기 let A = 1010, B = 12, C = 'a'; // 2, 8, 16 진법 -> 10진법으로 변환 Number.parseInt(A , 2); // 10 Number.parseInt(B , 8); // 10 Number.parseInt(C , 16); // 10 알고리즘 문제에서 활용하기 - 3진법에서 뒤..

padEnd() 현재 문자열에 다른 문자열을 채워서, 주어진 길이를 만족하는 새로운 문자열을 반환하는 함수 padEnd()는 끝에서부터 채우고, padStart()는 왼쪽부터 채운다 ! 예시 let a = 'Sky'; console.log( a.padEnd(5, '*') ); // "Sky**" let a = '99'; console.log( a.padEnd(4, '0') ); // "9900" 문제 풀이에 사용했던 padEnd() 예시 function solution(new_id) { let answer = new_id .toLowerCase() //1단계 .replace(/[^\w\d-_.]/g, '') //2단계 .replace(/\.{2,}/g, '.') //3단계 .replace(/^\.|\.$..

GIT Branch 🌲 브랜치: 독립적으로 어떤 작업을 진행하기 위한 개념이다. 브랜치의 장점 1. 한 소스 코드에서 동시에 다양한 작업을 할 수 있다. 2. 소스코드의 한 시점과 동일한 상태를 만들고, 브랜치를 넘나들며 작업을 수행할 수 있다. 3. 각각의 브랜치에서 생긴 변화가 다른 브랜치에 영향을 주지 않고 독립적으로 코딩을 진행할 수 있다. Chapter 1. 혼자 작업할 때 김코딩이는 fork한 codestates 깃헙 리파지토리를 본인의 local에서 작업하려고 합니다. 복사한 깃헙 리파지토리 주소는 https://github.com/kimcoding/test.git 입니다. $ git clone https://github.com/kimcoding/test.git local working di..

IP & IP Packet 💥 인터넷 내부에서 클라이언트와 서버가 통신하는 법 IP(인터넷 프로토콜) 주소를 컴퓨터에 부여하여 이를 사용 패킷 단위로 전송을 하면 노드들은 목적지 IP에 도달하기 위해 서로 데이터를 전달 IP 지정한 IP 주소(IP Address)에 패킷(Packet)이라는 통신 단위로 데이터 전달 IP Packet pack + bucket의 합성어 패킷! 우체국 송장처럼 전송 데이터를 무사히 전송하기 위해 출발지 IP, 목적지 IP와 같은 정보가 포함되어 있다. IP의 한계점 비연결성 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송해버린다.. 비신뢰성 중간에 패킷이 사라질 수 있다! 패킷의 순서를 보장할 수 없다. Ex. 전달 데이터의 용량이 큰 경우 패킷 단위로 나눠 전달..

프로세스, 스레드, 멀티 스레드 ✔️ 프로세스 (process) 운영체제에서는 실행 중인 하나의 애플리케이션을 프로세스라고 부른다. 사용자가 애플리케이션을 실행하면, 운영체제로부터 실행에 필요한 메모리를 할당받아 애플리케이션의 코드를 실행한다. 이때 실행되는 애플리케이션을 프로세스라고 부른다. Ex.크롬 브라우저를 두 개 실행하면, 두 개의 프로세스가 생성된다.(하나의 애플리케이션이 여러 프로세스(다중 프로세스)가 되기도함) -> MacOS에서는 활성 상태창, Windows에서는 작업관리자에서 확인 가능 스레드 (Thread) 한 가지 작업을 실행하기 위해 순차적으로 실행한 코드를 실처럼 이어 놓았다고 해서 스레드 라고 부른다. 하나의 스레드는 코드가 실행되는 하나의 흐름이기 때문에, 한 프로세스 내에 ..