개발 신생아

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;..

용어 정리 파싱 어떤 페이지(문서, html 등)에서 내가 원하는 데이터를 특정 패턴이나 순서로 추출해 가공하는 것을 말한다. 렌더링 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 크게 2단계를 거쳐 이뤄진다. 1) DOM 요소와 스타일에 기반을 둔 레이아웃 계산 2) 계산된 요소의 화면 표현 일반적인 전체 흐름은 브라우저에 문서가 로딩됨에 따라 DOM트리의 구성이 진행되면 레이아웃을 계산한 후 문서에 요소를 그린다. 렌더링이 진행되는 과정 1. 브라우저는 HTML, CSS, JS, 이미지, 폰트 등 리소스를 서버에 요청하고, 응답으로 받아온다. 2. 브라우저 렌더링 엔진은 받아온 HTML, CSS를 파싱해 DOM, CSSOM을 생성하고, 이들을 결합해 렌..

this란? 자신을 가리키는 참조 변수 this는 자바스크립트 엔진에 의해 암묵적으로 생성되어, 코드 어디서든 참조 가능 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. JS의 호출방식 (일반)함수 호출 메서드 호출 생성자 함수 호출(객체 생성 함수) apply / call / bind 호출 1. 함수 호출 const test = function(){ console.log(this); } test(); // window 일반 함수는 다음과 같이 가장 간단한 방법으로 호출할 수 있으며, 이때, this는 전역객체를 가리키게 된다. 2. 메소드 호출 var person = { name: 'Sung', printName: function() { console.log(this.name); } } ..