몽땅뚝딱 개발자

쿠키(Cookie) ◽ 쿠키란? 이름은 동화 '헨젤과 그레텔'에서 쿠키를 뿌려두고 간 것에서 유래했으며, 사용자의 정보를 잃어버리지 않기 위한 방법이다. 클라이언트 로컬에 저장되는 키(key)와 값(value)이 들어있는 파일이다. 사용 예로는 로그인 시 아이디와 비밀번호를 저장할 때나 쇼핑몰 장바구니에서 사용할 수 있다. ◽ 구성 요소 - 쿠키의 이름(name) - 쿠키의 값(value) - 쿠키의 만료시간(Expires) - 쿠키를 전송할 도메인 이름(Domain) - 쿠키를 전송할 경로(Path) - 보안 연결 여부(Secure) - HttpOnly 여부(HttpOnly) 세션(Session) ◽ 세션이란? 일정 시간 동안 같은 브라우저로부터 들어오는 요청을 하나의 상태로 보고 그 상태를 유지하는 ..

◽ Vue의 생애 Vue 인스턴스는 생성(create) > 부착(mount) > 업데이트(update) > 해체(destroy) 4가지 과정을 거친다. ◽ 라이프사이클 Hook이란? 사용자가 특정단계에서 자신의 코드를 추가할 수 있는 함수같은 것이다. 공식문서에서도 Hook을 설명하며 Type을 따로 명시했는데 모두 function으로 정의되어 있다. 주요 HOOK ◽ Step 1. 생성단계 라이프사이클 중에서 가장 처음 실행된다. 이 단계는 컴포넌트가 DOM에 추가되기 전이므로 *this.$el을 사용할 수 없고 돔에 접근할 수 없다. * $el: Vue 인스턴스가 관리하는 컴포넌트 인스턴스인 루트 DOM 요소 beforeCreate data와 events가 세팅되지 않은 시점이기때문에 접근할 수 없다..

◽ Sass(Syntactically Awesome Style Sheets)란? - 대표적인 CSS 전처리기 중 하나이다. - CSS가 동작하기 전에 사용하는 기능으로 CSS Preprocessor라고 부른다. - CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문 등을 사용하여 더 편리하게 작성할 수 있다. - 웹에서는 직접 동작하지 않으므로 전처리기로 작성 후 CSS로 컴파일하는 방식으로 사용한다. ◽ SCSS(Sassy CSS)란? - Sass의 3버전에서 새롭게 등장한 것으로, CSS와 거의 같은 문법으로 Sass 기능을 지원한다. - {}(중괄호)와 ;(세미콜론)을 사용하는 점이 두드러진 차이이다. ◽ CSS로 컴파일하는 도구 - Webpack: 모듈 번들러 - Gulp: 빌드 자동화 도..

◽ 렌더링이란 렌더링이란 HTML, CSS, JavaScript 등을 브라우저에서 출력하는 과정이다. ◽ 렌더린 엔진의 종류 렌더링 엔진은 브라우저마다 다르다. 크롬은 블링크(Blink)를 사파리는 웹킷(Webkit)을 파이어폭스는 게코엔진(Gecko)을 사용한다. ◽ 렌더링 과정 1. HTML과 CSS를 Object Model로 만든다. 여기서 HTML을 파싱하여 DOM(Document Object Model)으로 만들며, 파싱 중 CSS파일을 만나면 CSSOM(CSS Object Model)을 만든다. 2. DOM + CSSOM을 사용하여 Renter Tree를 구성한다. 3. Render Tree를 사용하여 각 노드들의 정확한 위치와 크기를 계산하여 레이아웃을 구성한다. 4. 계산이 완료되면 요소들..

수도 없이 사용했던 document.ready, getElementById, location.href .. '이런 접근은 어떻게 가능한 것일까?'를 한번도 생각해 본 적이 없었던 나를 반성하며 정리하는 글 DOM ◽ DOM(Document Object Model) - 단어 그대로 '도큐먼트를 객체로 표현하는 모델', 문서 객체을 의미한다. - 문서 객체란 HTML 문서의 태그들을 JavaScript가 읽을 수 있는 객체(object)로 만든 것이다. - HTML, XML 문서의 프로그래밍 인터페이스이다. - DOM은 수정사항이 있을 때 처음부터 렌더링을 거치는데, 스케일이 커질수록 노드가 증가하여 브라우저의 속도가 느려진다. ◽ DOM에 접근하기 document 객체를 통하여 접근할 수 있다. - get..

◽ 선택자(Selector)란? 스타일에서 중괄호({ })가 나오기 전의 부분 모두가 선택자이다. HTML 안의 특정한 element를 적어준다. ◽ 선택자(Selector)의 종류 - 전체 선택자(Universal Seletor): * /* CSS */ * { background-color: black; } - 태그 선택자(Type Selector): p, div, ul 등의 태그의 이름으로 작성 /* CSS */ p { background-color: black; } div { background-color: black; } - 클래스 선택자(Class Selector): 태그에 클래스를 직접 지정한 경우로 앞에 .을 붙여 작성 /* CSS */ .className { margin: 0; } - ID..

◽ null과 undefined의 차이 - undefined 변수를 선언하고, 값을 할당하지 않은 상태이다. 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당된다. let a; - null 변수를 선언하고, 빈 값을 할당한 상태이다. 어떤 값이 의도적으로 비어있음을 표현한다. let a = null; ◽ 검출하는 방법 - typeOf의 사용 typeof null // "object" => null은 객체로 취급된다. typeof undefined // "undefined" - 비교연산자: 동등연산자(==)와 일치연산자(===)의 사용 // ==는 자료형이 다른 경우 강제 형변환을 하여 비교 // ===는 엄격한 비교로 값 뿐만 아니라 자료형까지 비교 null === und..

◽ 스택(Stack) - 차곡차곡 쌓는 것. 자료가 시간 순서에 따라 층층이 겹쳐 쌓인다. - 후입선출(LIFO, Last-In-First-Out) 구조로 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다. - top 한 곳에서 삽입, 삭제가 이루어진다. - 삽입하는 연산을 'Push', 삭제하는 연산을 'Pop'이라고 한다. - 비어있는 스택에서 원소를 추출하는 경우 stack underflow, 스택이 넘치는 경우 stack overflow라 한다. 예시) 웹 브라우저의 방문기록(뒤로 가기), 역순 문자열 만들기, 실행 취소 등 ◽ 큐(Queue) - 줄을 서서 기다리는 것. 시간 순서대로 처리해야하는 경우에 사용한다. - 선입선출(FIFO, First-In-Fisrt-Out) 구조로 가장 먼저 삽입된..

예전 프로젝트에서 배포하기 전에 직렬화를 사용해야한다고해서 명확히 무엇인지 모르고 사용했었다. 당시에는 어플리케이션을 사용하는 동안 계속 그 객체를 사용해야하기 때문이라고 들었다. '왜 객체를 계속 사용하기 위해서 직렬화를 해야하지?'하는 생각이 들었지만.. 이후로는 너무 바빠서 제쳐두었다. 이제서야 정리해본다. (😭) ◽ 직렬화(Serialize)란? 직렬화에서 직렬이란 단어는 직렬/병렬할 때의 그 직렬이며, 영어로는 Serial이다. 직렬화, 역직렬화를 모두 포괄하여 직렬화라고 한다. 직렬화의 정의는 이렇다. - 어떤 환경의 데이터 구조를 다른 환경에 전송/저장하기 위하여 바이트(Byte) 포맷으로 변환하는 과정이다. - 반대의 개념인 역직렬화는 바이트 포맷으로부터 데이터 구조를 추출하는 것이다. -..

내가 정의해 본 REST API는 단순하게 말해서 'HTTP를 활용하여 CRUD를 실행하는 API'이다. 지금껏 REST API라고 생각하며 코드를 완성해왔지만 'REST API가 뭔가요?'라고 물었을 때 잘 대답하지 못할 것 같았다. 다시 한 번 정리를 해보는 시간을 가져본다. ◽ API(Application Programming Interface)란? 인터페이스는 어떤 장치끼리 정보를 교환하기위한 수단이나 방법이다. 응용프로그램 프로그래밍 인터페이스, 말 그대로 프로그램을 위한 인터페이스이다. 즉, API는 클라이언트나 서버같은 다른 프로그램끼리 데이터를 주고받는 방법, 규격이라고 정의내릴 수 있다. ◽ REST API란? REST API는 일종의 아키텍쳐이며, 웹을 위한 네트워크 기반 아키텍쳐라 할..