분류 전체보기
-
모듈 번들러Front-end 2023. 4. 4. 13:11
웹 어플리케이션을 구성하는 자원 (HTML, CSS, JavaScript, Image 등등)을 각각의 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구. 웹팩 (Webpack) 최신 FE에서 많이 사용된다. 엔트리 포인트를 시작으로 연결되어 있는 모듈을 하나로 합쳐 결과물을 만드는 것이 웹팩의 역할이다. JavaScript 모듈 뿐만 아니라 스타일 시트, 이미지 파일까지도 모듈로 제공해줘 일관적으로 개발할 수 있다. 모듈 Module 파일 하나하나, 특정 기능을 갖는 작은 코드 단위이다. 개발을 하며 규모가 커지면 파일을 여러 개로 분리해야하는데, 이때 분리된 파일 각각을 모듈이라고 한다. 목적에 따라 기능별로 여러 개의 파일로 분리해서 관리할 수 있으며 모듈로 분리하는 과정을 모듈화라고 한다..
-
인증 방식 (세션, 토큰)JavaScript 2023. 4. 4. 02:33
세션 전통적인 방식으로 쿠키를 사용한다. 사용자가 서버에 로그인 요청을 보내면, 서버는 세션에 저장하고 브라우저에 세션ID를 보낸다. 브라우저는 세션ID를 쿠키에 저장하고, 브라우저는 서버에 요청 보낼때마다 쿠키를 함께 보낸다. 서버는 쿠키에 있는 세션ID가 서버에 저정되어 있다면 응답 보내준다. 토큰 세션 방식은 서버에서 데이터를 저장하기 때문에 동시접속자가 많으면 관리 어렵다. 이러한 문제 해결하는 것이 토큰 방식. 대표적으로 JWT(JSON Web Tokens)가 있다. 사용자가 로그인 요청을 보내면 서버는 JWT를 브라우저에 보낸다. JWT는 Header, Payload, Signature로 구성된다. 브라우저는 JWT를 LocalStorage에 저장하고, 사용자가 요청을 보낼 때마다 Header..
-
패럴랙스 스크롤링HTML 2023. 4. 4. 02:25
웹사이트에서 사용되는 기술로 스크롤에 따라 오브젝트와 배경 이미지가 시간차를 두고 변하는 기법. 패럭렉스 스크롤링의 장점 콘텐츠 탐색 간편하게 해줄 수 있다. 스크롤에 따라 3D효과와 깊이감을 제공해 사용자 인터렉션을 높이고 호기심 자극해 사이트에 머무는 시간을 늘린다. 느리고 무거운 플래시 대체해 HTML5, CSS3를 활용해 제작 가능하다. 패럭렉스 스크롤링 적용 팁 모바일 환경 고려. (각 디바이스에서 활용 가능한 반응형 웹 구축) 패럭렉스 스크롤링이 사이트 제작 동기가 되어서는 안된다. (사용자에게 색다른 경험을 제공하는 한가지 요소일 뿐이다.) 재미있게 만들자. 스토리를 만들자. (주로 회사, 제품 연혁을 웹사이트에 담고자 할 때 사용하는 방식, 콘텐츠의 타임라인이나 스토리 경험하게 할 수 있다..
-
newJavaScript 2023. 4. 4. 02:17
JavaScript에서 new 연산자를 통해 함수를 생성자로 호출할 수 있고 새로운 객체를 생성할 수 있다. 빈 객체 생성 [[Prototype]] 속성을 생성자 호출할 함수의 prototype 속성으로 지정 (함수의 prototype 속성이 원시값이라면 Object.prototype으로 지정) 객체 생성하고 이 객체 this로 지정 함수 호출하고 해당 함수의 this로 위에서 지정한 객체 사용 함수의 리턴값이 원시값이라면 새로 만들어진 객체가 리턴되며, 리턴값이 객체라면 해당 객체가 리턴.
-
프로토타입 (Prototype)JavaScript 2023. 4. 4. 02:13
JavaScript의 모든 객체는 자신의 Prototype(원형)이 되는 객체를 가지며 이를 프로토타입이라고 한다. 보이지 않는 속성인 [[Prototype]]이 자신의 프로토타입 객체를 참조한다. 이를 _proto_라는 속성으로 참조할 수 있으나, 이는 비표준이며 모든 브라우저에서 동작하는 것이 아니기 때문에 실제 사용은 피해야한다. .prototype 그리고 [[Prototype]] 모든 객체는 은닉 속성인 [[Prototype]]를 갖는데 특별히 함수 객체는 접근할 수 있는 속성인 prototype을 갖는다. [[Prototype]] : 자신의 프로토타입 객체를 참조하는 속성. .prototype : new연산자로 자신을 생성자 함수로 사용한 경우, 그걸로 만들어진 새로운 객체의 [[Prototyp..
-
스코프JavaScript 2023. 4. 4. 01:39
JavaScript 엔진이 참조의 대상이 되는 식별자를 검색할 때 사용하는 규칙의 집합. 어떤 변수를 사용하거나 함수를 호출하려고 할때 해당하는 식별자로 사용하는데, 그 식별자를 검색하는 메커니즘이다. 렉시컬 스코프 (Lexical Scope) 코드를 짤 때, 변수 및 함수/블록 스코프를 어디에 작성했는지에 따라 정해지는 스코프. 스코프 체인 현재 스코프에서 식별자를 검색할 때 상위 스코프를 연쇄적으로 찾아나가는 방식. 실행 컨택스트에서 생성될 때마다 Lexical Environment가 만들어지고 그 안에 outer 참조 값이 있는데, 이 outer참조 값이 상위 스코프의 Lexical Environment를 가리키기 때문에 이를 통해 체인처럼 연결되는 것이다. 스코프 체인 검사 과정 현재 실행 컨텍스..
-
실행 컨텍스트(Execution Context)JavaScript 2023. 4. 4. 01:07
코드 실행환경에 대한 여러가지 정보를 담고 있는 개념. JavaScript 엔진에 의해 만들어지고 사용되는 코드 정보를 담은 객체의 집합. 실행 컨텍스트 종류 JavaScript코드는 세가지 종류로 이루어진다. 이 각각의 코드는 자신만의 실행 컨텍스트를 생성한다. 글로벌 스코프에서 실행하는 글로벌 코드. 함수 스코프에서 실행하는 함수 코드. eval()로 실행되는 코드가 있다. 엔진이 스크립트 파일을 실행하기 전, 글로벌 실행 컨텍스트(Global Execution Context)가 생성되고 함수를 호출할 때마다 함수 실행 컨텍스트(Function Execution Context)가 생성된다. 이때 글로벌의 경우, 실행 이전에 생성되지만 함수의 경우 호출할 때 생성된다. 실행 컨텍스트 스택 (Execut..
-
이벤트 Event (이벤트 버블링, 이벤트 캡쳐링, 이벤트 위임)JavaScript 2023. 4. 3. 22:43
이벤트 등록 addEventListener로 이벤트 등록할 수 있다. 같은 요소 같은 이벤트에 여러 개의 이벤트 리스너를 등록할 수 있다. 이벤트 제거 removeEventListener로 이미 등록한 이벤트 리스너 중 동일한 인자를 받는 이벤트 리스너를 삭제한다. 이벤트 제거를 위해 세가지 값이 필요하다. 제거할 element 요소 click, keypress등의 이벤트 타입 제거할 이벤트 콜백 함수 브라우저가 이벤트 감지하는 방식 이벤트 버블링 하위 element에서 상위 element로 이벤트가 전파되는 특성을 말한다. JavaScript코드에서 기본 동작은 이벤트 버블링이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때, 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다. 이벤트..
-
이벤트 루프 (콜 스택과 힙, 콜백 큐)JavaScript 2023. 4. 3. 22:18
JavaScript는 단일 스레드 기반 언어로, JavaScript 엔진이 단일 콜 스택을 갖는다. 비동기 요청은 어떻게 진행될까?? 비동기 요청은 JavaScript 실행 환경인 브라우저, Node.js가 담당한다. 이 때 JavaScript 엔진과 실행 환경을 상호 연동시켜주는 장치가 Event Loop이다. 따라서 Event Loop는 JavaScript 엔진에 있지 않고 그 환경에 속한다. (한번에 하나의 함수만 처리할 수 있지만 이벤트 루프에 기반한 동시성 모델을 지원한다.) Call Stack, Callback Queue의 상태를 체크하며 Call Stack이 빈 상태가 되면 Callback Queue의 첫 번째 콜백 함수를 Call Stack에 넣는다. 이러한 행위를 반복해 루프라고 한다. ..
-
GitFront-end 2023. 4. 3. 18:03
Git은 매우 기능이 많은 버전관리 도구이다. 오픈소스에 기여를 하거나, 여러 사람과 공동 작업을 하기 위해 꼭 필요하다. 개발된 이유 빠른 속도 단순한 구조 비선형적인 개발 (수천 개의 동시 다발적인 branch) 완벽한 분산(DVCS) 원격 저장소와 로컬을 분리함으로써 여러 개발자가 분산 작업을 원활하게 할 수 있다. Linux커널 같은 대형 프로젝트에도 유용 (속도, 데이터 크기 면에서) 데이터 무결성 보장 (모든 커밋에 대해 Hash을 만든다.) 다양한 전략 strategy Git flow feature, develop, release, hotfix, master 5가지 branch를 갖는다. 여러 branch 존재하고 분류되어 있지만, 이렇게 많은 branch가 흐름을 더 복잡하게 만들기도 한다..