쑥쑥자라기🌱

HTTP: 서버와 클라이언트가 서로 소통할 때 지켜야 할 규약 HTTP는 먼저 클라이언트가 서버에게 request를 보내고 서버는 클라이언트에게 request에 대한 response를 보내고 접속을 종료합니다. 그리고 통신이 끝나면 상태(예를 들면 인증에 쓰이는 상태 정보)를 유지하지 않는다는 특징이 있습니다. 이런 특징으로 계속해서 통신 연결을 하지 않기 때문에 자원 낭비가 줄어드는 것은 장점이지만 통신을 할 때마다 새로 연결을 해줘야 해서 클라이언트는 그때마다 인증을 해주어야 된다는 단점이 있습니다. 예를 들면 웹사이트에서 로그인을 해도 페이지를 이동할 때마다 로그인을 해주어야 합니다. 이런 경우 유저가 굉장히 불편함을 느낄 수 있습니다. 로그인한 정보를 어딘가에 저장해두면 문제를 쉽게 해결할 수 있..

유저가 브라우저에서 접속하려는 주소를 입력하면, 어떤 과정을 거쳐 페이지가 로딩되는지 컴퓨터와 컴퓨터 사이의 약속에 대해 알아볼까요? 사람도 대화할 때 언어와 환경이 맞아야 원활하게 이야기할 수 있듯이 컴퓨터도 마찬가지로 데이터 형식이나 통신 순서 등을 미리 약속해야만 통신이 가능합니다. 이 네트워크 통신 규약을 프로토콜이라고 부릅니다. 대표적인 프로토콜에는 인터넷에서 사용하는 TCP(Transmission Control Protocol)와 IP(internet Protocol), 웹에서 사용하는 HTTP(HyperText Transfer Protocol), 파일을 주고받을 때 사용되는 FTP(File Transfer Protocol) 등이 있습니다. 네이버에 접속하려면 브라우저에 네이버 주소를 치면 들..

브라우저에는 익스플로러, 파이어폭스, 사파리, 크롬, 오페라 등 여러 가지가 있습니다. 브라우저의 주요 기능은 사용자가 요청한 HTML 페이지, PDF, 이미지 등을 서버에서 요청해 보여주는 것인데요. 브라우저가 화면에 나타나는 요소를 렌더링할 때 파이어폭스는 게코, 사파리는 웹킷, 크롬은 블링크라는 렌더링 엔진을 사용합니다, 이 렌더링 엔진이 사용자가 선택한 콘텐츠를 표시해줍니다. 예를 들어 HTML 페이지를 요청하면 HTML과 CSS를 파싱해서 화면에 표시해 주는 것이죠. 파싱이란 브라우저가 코드를 이해하고 사용하기 쉬운 구조로 변환하는 것을 말합니다. 파싱의 결과는 노드 트리 또는 DOM 트리로 표현됩니다. #1.DOM 트리 구축 DOM 트리는 HTML 페이지를 구조화해서 계층으로 표현한 개념입니다..

복합 할당 연산자 할당 연산자와 결합해서 자주 쓰이는 표현을 더 간략하게 쓸 수 있게 해주는 연산자를 복합 할당 연산자(Compound assignment operators)라고 합니다. // 다음 두 줄은 같습니다 x = x + 1; x += 1; // 다음 두 줄은 같습니다 x = x + 2; x += 2; // 다음 두 줄은 같습니다 x = x * 2; x *= 2; // 다음 두 줄은 같습니다 x = x - 3; x -= 3; // 다음 두 줄은 같습니다 x = x / 2; x /= 2; // 다음 두 줄은 같습니다 x = x % 7; x %= 7; 앞으로 x += 1과 같은 문법을 보게 되면, 당황하지 마시고 이 복합 할당 연산자를 떠올리시길 바랍니다 :) 증가(increment), 감소(dec..

// 할당 연산자 (Assigment operators) let name = '코드잇'; let x = 5; x = x - 2; console.log(x);

자바스크립의 자료형(Data type)에는 숫자, 문자, 불린 외에도 null과 undefined라는 특별한 자료형이 있다. 이 자료형이 특별한 이유는 둘 다 자바스크립트에서 '값이 없다'라는 의미를 가지고 있는 자료형이다. 같은 의미의 자료형이 두 개나 있는 이유는 자료형의 쓰임에 미묘한 차이가 있기 때문이다. 간단하게 이 두 가지의 차이를 설명하자면 null은 '값이 없다'는 것을 의도적으로 표현할 때 사용하고 undefined는 우리가 직접 값을 표현하기보다 코드를 실행하면서 '값이 없다'라는 것을 확인할 수 있는 것이라고 생각하면 된다. 자바스크립트로 프로그래밍을 하다 보면 이 둘을 생각보다 자주 보게 되는데 그 의미가 비슷해서 헷갈리기도 쉽고 실제로 이 둘을 명확하게 구분하지 못하면 코드를 이해..

// 템플릿 문자열(template strings) // template: 일정한 틀, 형식 let year = 2018; let month = 3; let day = 11; console.log('생년월일은' + year + '년' + month + '월' + day + '일 입니다.') console.log(`생년월일은 ${year}년 ${month}월 ${day}일 입니다.`) let myNumber = 3; function getTwice(x){ return x * 2; } console.log(`${myNumber}의 두배는 ${getTwice(myNumber)}입니다.`);

// 형 변환(Type Conversion) // String, Number, Boolean console.log(Number('10') + Number('5')); // 15 console.log(String(10) + String(5)); // 105 // 숫자 → 문자 let x = 123; // 123 console.log(String(x)); // 123 console.log(typeof x); // number console.log(typeof String(x)); // string console.log(''); // 불린 → 문자 let y = true; // true console.log(String(y)); // true console.log(typeof y); // boolean con..