CS겸 취준까지

더 많은 아키텍처 디자인 패턴은 피그마로 정리하였습니다. Figma Created with FigJam www.figma.com 사전에 알아야 하는 개념 Presentation(프레젠테이션) 로직 실제 눈에 보이는 GUI 화면을 구성하는 코드 비즈니스 로직 데이터를 보여주기 위해서 데이터베이스를 검색하는 코드 및 GUI 화면에서 새롭게 발생된 데이터를 데이터베이스에 저장하는 코드 의존성이 강해지면? 하나의 데이터의 변화가 다른 데이터의 변화를 함께 불러옴 상호간의 연결이 강해진다는 뜻으로 유지 보수하기 어려워진다 MVC 특징 컨트롤러와 뷰는 1:n 관계입니다. 컨트롤러는 뷰를 선택할 뿐 업데이트 하지 않습니다. 업데이트는 (model에서 view로 데이터를 받아올 때 || view가 model을 직접 이..

HTTP 메세지 > HTTP 요청 메세지 > HTTP 응답 메세지 HTTP 메시지에 모든 것을 전송 HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML 거의 모든 형태의 데이터 전송 가능 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 시작라인 요청 메시지 start-line = request-line / status-line request-line = method SP(공백) request-target SP HTTP-version CRLF(엔터) HTTP 메서드 (GET: 조회) 요청 대상 (/search?q=hello&hl=ko) HTTP Version 💫요청 메시지 - HTTP 메서드 종류: GET, POST, PUT, DELETE... 서버가 수행해야 할 동작 지정 GET..

[ REST ] ▶ REST REST(Representational State Transfer)는 웹에서 데이터를 전송하고 처리하는 방법을 정의한 인터페이스 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고 HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미 웹 사이트의 이미지, 텍스트, DB 내용 등의 모든 자원에 고유한 ID인 HTTP URI를 부여함 ▶ CRUD Operation CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)..

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