개발 신생아

SPA(Single Page Application) 한개의 페이지로 구성된 어플리케이션 MPA(Multi Page Application) 여러개의 페이지로 구성된 어플리케이션 MPA vs SPA MPA 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링한다. 인터넷 주소창에 주소를 입력하거나, 링크를 클릭하는 등 사용자가 어떤 요청을 하면, 그에 맞는 html, 이미지 등의 파일들이 전부 다운로드 되고 다시 렌더링 된다. SPA 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 한다. 그 이후 새로운 페이지 요청이 있을 경우, 페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다. 어떤 링크를 클릭한다고 해서 그에 관련된 모든 파일을 다운..

웹 프로토콜 웹에서 쓰이는 통신규약으로, 통신규약이란 통신을 할때 "내가 이렇게 할게 너는 이렇게 해줘" 라고 약속하는 것이다. HTTP(Hyper Text Transfer Protocol) HTTP는 브라우저가 웹 서버와 통신하기 위해 사용하는 주요 프로토콜이다. 즉, 인터넷에서 데이터를 주고 받을 수 있는 통신규약 정도로 생각하면 된다. HTTP Method (HTTP request가 의도하는 action을 정의한 것) GET : 문서를 요청, 서버가 클라이언트에 상태 정보와 복제된 문서를 보냄으로 응답을 함.(조회) POST : 데이터를 서버로 송신, 서버는 해당 데이터를 특정 아이템에 덧붙임(생성) PUT : 데이터를 서버로 송신, 서버가 특정 아이템을 완전히 대체한다(수정) DELETE : 데이..

Git 오픈 소스 버전 관리 시스템 로컬에서 버전 관리 소프트웨어 개발 및 소스 코드 관리에 사용 git은 본인의 코드와 그 수정내역을 기록하고 관리하도록 돕는 버전 관리 프로그램이다. 로컬에서 프로젝트의 기록을 스스로 관리할 수 있도록 해준다. git을 통해 브랜치를 생성 및 이전 브랜치로 복구, 삭제, 병합이 가능하다. 하지만 로컬 저장소를 사용하기 때문에 다른 개발자와 실시간으로 작업을 공유할 수 없다. 장점 인터넷이 연결이 되지 않은 곳에서도 개발 진행 가능 분산 버전관리이기 떄문에 중앙 저장소가 삭제되어도 원상복구가 가능 각각의 개발자가 Branch에서 개발한 뒤, 본 프로그램에 합치는 merge방식을 통한 병렬 개발 가능 기본용어 Repository: 저장소, 저장소는 히스토리, 태그, 소스의..

Ajax Asynchronous Javascript and XML(비동기식 자바스크립트와 xml)의 약자이다. 서버와 비동기적으로 데이터 주고받는 JS기술을 의미한다. Ajax를 이해하기 위해선 Server를 알아야한다. 왜? Ajax는 서버랑 통신하는 기술이기 때문이다. Server 유저가 데이터 요청하면 데이터 보내주는 프로그램이라고 생각하면 된다. Ex) 유저가 웹툰주세요. => 네이버 웹툰 서버는 웹툰을 줌 데이터 요청하면 데이터 보내주는 시스템이다. 즉, 서버한테 요구해서 데이터를 가져와 HTML에 보여주면 이걸 웹서비스라 한다. 요청하는 방식 데이터의 정확한 URL을 알아야한다. 그 URL로 GET요청을 날려야 한다. => URL은 서버 개발자한테 물어보면 알려준다. GET요청을 하는 방법 1..

Rest(Representational State Transfer) 로이 필딩의 2000년 박사학위 논문에서 소개된 용어로 "웹에 존재하는 모든 자원(이미지, 동영상, DB 자원)에 고유한 URI를 부여해 활용"하는 것으로, 자원을 정의하고 자원에 대한 주소를 지정하는 방법론을 의미한다. 즉, REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)을 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미한다. REST 구성요소 자원(Resource) : HTTP URI 자원에 대한 행위(Verb) : HTTP Method 자원에 대한 ..

동기처리 현재 실행중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는 것이다. 위에서부터 순서대로 차례대로 진행한다. ex) if문, 반복문(for, while), 함수호출 비동기처리 현재 실행중인 코드가 종료되기 전에 다음줄의 코드를 동시에 실행하는 것이다. ex) callback(), Promise(), 비동기 API, Web API function getName(cb) { setTimeout(() => { cb("Elice"); }, 2000); } function getAge(cb) { setTimeout(() => { cb(20); }, 2000); } function getAddress(cb) { setTimeout(() => { cb("abcd@gmail.com"); }, 2000)..

Cookie vs Session vs Token 보통 서버가 클라이언트 인증을 확인하는 방식은 대표적으로 쿠키, 세션, 토큰 3가지 방식이 있다. JWT를 알아보기 전에 우선 쿠키와 세션의 특징과 장단점 그리고 왜 토큰인증 방식을 사용하는지에 대해 알아보자. 1. Cookie 쿠키는 Key-Value 형식의 문자열 덩어리이다. 클라이언트가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용하고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록정보 파일이다. 각 사용자마다의 브라우저에 정보를 저장하므로 고유 정보 식별이 가능하다. Cookie 방식의 단점 가장 큰 단점은 보안에 취약하다는 것이다. 요청 시 쿠키의 값을 그대로 보내기 때문에 유출 및 조작 당할 위험이 존재한다. 쿠키에는 용량제한이 ..

깊은복사는 원시값을 복사하고, 얕은복사는 객체의 참조값을 복사한다. 원시값 기본자료형(단순한 데이터)를 의미한다. Number, String, Boolean, Null, Undefined 등이 해당한다. 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장된다. 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작된다. 참조값 여러 자료형으로 구성되는 메모리에 저장된 객체 이다. Object, Symbol 등이 해당한다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고, 변수에 저장된 메모리 공간의 참조(위치 값)을 저장하게 된다. 그래서 할당된 변수를 조작하는 것은 사실 객체 자체를 조작하는 것이 아닌, 해당 객체의 참조를 조작하는 것이다. 깊은복사 let num1 = 1;..