CS겸 취준까지

1. 비동기 방식 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 생할하는 특성을 말한다. 기다리는 동안 다른 함수를 호출할 수 있다. 2. 동기적 방식 작업이 끝날 때까지 다른 작업을 할 수 없다. 위 그림과 같이 비동기적과 동기적을 나타낼 수 있다. 동기적은 위그림과 같이 1번 작업이 끝나고 2번 그리고 2번 끝나면 3번 이러한 순서로 진행이 된다. 하지만 비동기적은 1번이 끝나기 전에 2번 코드를 실행 그리고 3번 4번 이러하게 진행이 가능하다. 비동기적에서 대표적인 함수는 setTimeout()가 있다. 이 코드는 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다. 아래와 같이 예시가 있다. function test() { console.log('첫번째')..

선요약 map은 리턴 값을 받을 수 있지만, forEach는 리턴 값을 받을 수 없으며 리턴 값은 항상 undefined이다. 공통점 1. Array 관련 메서드들로 ES5 부터 등장하였다. 2. 세 개의 인자를 가지고 호출된다. - currentValue (배열 원소의 값) - index (현재 요소의 인덱스) - array (현재 배열) 차이점 forEach()가 배열 요소마다 한 번씩 주어진 콜백함수를 실행 -> 새로운 배열 X map()은 배열 내의 모든 요소 각각에 대하여 주어진 콜백함수를 호출한 결과를 모아 새로운 배열을 반환한다 Array.prototype.forEach forEach() 메서드는 for문을 대체할 수 있는 함수다. forEach 메서드는 자신의 내부에서 반복문을 실행한다. ..

HTTP HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 데이터를 주고 받는 통신 규칙 또는 프로토콜이다. 풀어서 설명하면 하이퍼텍스트(HyperText)를 전송(Transfer)하기 위해 사용되는 통신 규약(Protocol)이다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었으며, 전통적인 클라이언트-서버 아키텍처 모델에서 클라이언트가 HTTP 메시지 양식에 맞춰 요청을 보내면, 이에 서버는 HTTP 메시지 양식에 맞춰 응답을 한다. HTTP는 특정 상태를 유지하지 않는 무상태성(Stateless)이 특징이다. IP (인터넷 프로토콜)의 역할 *지정한 IP주소에 데이터 전달 *패킷(Packet)_규칙이라는 통신 단위로 데이터 전달 IP패킷에는..

1. 객체 지향 프로그래밍(Object-Oriented Programming, OOP) 이란? 객체 지향 프로그래밍이 있기 전 절차 지향 프로그램이라는 것이 있었다. 이는 프로그램을 순차적인 절차로 구성하는 방식인데, 작은 문제를 해결하기 위해 절차를 정의하고, 그 절차들을 조합하여 큰 문제를 해결하는 방식이다. 하지만 프로그램이 커지고 복잡해지면서 코드의 유지보수와 디버깅이 어려워지는 문제가 생겼다. 그리고 데이터와 그 데이터를 조작하는 함수들이 분리되어 있어 코드의 응집성이 떨어졌다. 이를 보완하기에 나온게 객체 지향 프로그래밍이다. 객체지향 프로그래밍은 객체라는 단위로 구성하는 방식이다. 객체는 데이터와 데이터를 조작하는 함수들을 하나의 단위로 묶어서 관리한다. 이를 통해 코드의 응집성을 높이며, ..

JWT의 등장 배경 과거 - 쿠키와 세션으로 가득 했던 인증 체계 로그인 유지의 문제 ➡️ 데이터베이스에 저장된 사용자 계정의 해시값 등등을 꺼내옴 → 사용자의 암호를 복잡한 알고리즘으로 계산한 값과 일치하는 지 확인 이 과정을 매 요청마다 하기에는 무겁고 복잡한 과정이라 부담스럽다. 매 요청마다 아이디와 패스워드가 이동하면 보안상으로 위험하다. 쿠키 : 브라우저에서 저장되는 키와 같이 사이트가 사용하게 되는 일련의 작은 기록 파일 특정 정보를 저장하기 위해 사용했다. 매번 요청 할 때마다 사용자가 로그인 시도를 하지 않게 쿠키의 단점 노출되었을 때, 민감 정보까지 다 노출되어 보안이 좋지 않음 조작 당해서 들어올 가능성이 있다. 웹 브라우저마다 쿠키에 대한 지원 형태가 달라 다른 브라우저간의 공유가 불..

▶ 브라우저 저장소가 필요한 이유 웹에서 클라이언트와 서버가 통신할 때 HTTP의 중요한 특징 중 하나로 비연결성이 있음 더보기 비연결성이란 실제로 요청을 주고 받을때만 연결을 유지해 응답을 주고 응답을 주고나면 TCP/IP 연결을 끊음 최소한의 자원으로 서버를 유지 이는 통신을 계속해서 유지하지 않기 때문에 자원 낭비를 줄일 수 있다는 장점이 있지만 통신을 할 때마다 새로운 연결이 계속해서 필요하다는 단점이 있음. 예를 들면 처음 웹 사이트에 방문해서 로그인을 했어도 페이지를 이동할 때마다 새롭게 로그인을 해야하는 문제 등. 이런 경우 개발자는 브라우저 저장소를 이용해서 문제를 해결할 수 있음 ▶ 브라우저 저장소의 종류 1. 쿠키(Cookie) 웹사이트 접속시 개인장치에 다운로드 되고 브라우저에 저장되..

브라우저 렌더링의 원리를 알아보기 전 브라우저에 대해 알아보자. Web browser 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램으로 우리가 일상생활에서 인터넷을 통해 검색을 할 때 주로 네이버나 다음과 같은 사이트에 접속하여 필요한 정보를 검색하게 되는데, 이 때 사이트에 접속할 수 있는 도구를 바로 '브라우저' 혹은 '웹 브라우저' 라고 부른다. 브라우저는 제어판과 같이 컴퓨터에 설치되어 있는 하나의 프로그램으로, 이 프로그램을 다운받고 실행하게되면 주소창을 입력할 수 있는 도구가 나타나게 되는것이다. 브라우저의 주요 기능은 사용자가 참조하고 싶은 웹페이지를 서버에 요청하고, 서버의 응답을 받아 브라우저에 보여주는 것이다. 흔히 사용하는 크롬, 인터넷 익..

호이스팅 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. (코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니며, 끌어 올려진 것 같은 현상을 말한다. 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화는 없다.) 이 호..

호이스팅이란? 호이스팅은 변수나 함수 선언을 코드 상단으로 끌어올리는 동작을 말한다. case 1. 변수 호이스팅 Var vs Let & Const Var var는 선언과 초기화가 동시에 일어나면서(선언과 초기화가 분리되지 못하기 때문) 호이스팅이 발생한다. 함수에 쓰인 것 말고도 for + if문에 쓰인 것도 올라간다. var a 로 선언할 때 undefind로 기본값이 초기화 된다. console.log(호이스팅); // undefind console.log(i); // undefind var 호이스팅 = '호이스팅' console.log(호이스팅); // 호이스팅 for (var i = 0; i < 10; i++) {...} let & const 선언에는 호이스팅이 발생하지만 초기화는 호이스팅이 되..

아래의 글은 여러 좋은 글들을 발췌해 모아 편집한 내용입니다. 발췌의 출처는 제일 하단에 모아놓았습니다. 렌더링 엔진 렌더링 엔진은 HTML, XML, 이미지 등 요청받은 내용을 브라우저 화면에 표시하는 엔진이다. 브라우저는 서버로부터 HTML 문서를 응답받으면 렌더링 엔진의 HTML 파서와 CSS 파서에 의해 파싱되어 DOM, CSSOM 트리로 변환되고 렌더 트리로 결합한다. 이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹 페이지를 나타낸다. ➕ 웹킷(WebKit)이란? 브라우저 렌더링 엔진의 일종. 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크. 각 브라우저마다 렌더링 엔진이 다르기 때문에 같은 페이지가 다르게 보이는 경우가 있다. 접두어로 붙는 css속성으로 브라우저..