프론트엔드
-
html - DOCTYPEfrontend/html 2022. 4. 21. 12:36
오늘은 프론트엔드 면접 기출 문제이자 아주 간단한 내용인 DOCTYPE에 대해서 알아보도록 하겠습니다. 우리가 보통 front end 개발을 할 때 HTML의 최상단에 작성하는 이 DOCTYPE의 용도는 아주 간단합니다. DOCTYPE 브라우저가 HTML문서를 렌더링 할 때 어떤 스펙으로 렌더링 할지 정의 하기 위함 브라우저는 렌더링을 하기위해 두가지 방식 중 하나의 방식을 선택하게 됩니다. W3C에서 정의한 standard mode ( 스탠다드 모드 )와 quirks mode ( 브라우저별 호환모드 ) 입니다. 기본적으로 을 지정하지 않으면 default로 quirks mode로 렌더링 하게 됩니다. 또한, 을 통해 html5 뿐만 아니라 과거의 html 표준으로도 선언할 수 있습니다. 최신 html5..
-
[JSP] JSP 실무 프로젝트 셋팅과 활용frontend/고전 2022. 3. 21. 15:29
오늘은 JSP의 실무 프로젝트에서 활용에 대해서 적어 보겠습니다. JSP라고 하면 프론트엔드에서는 클래식이라고 볼 수 있을 것 같습니다. React, Vue, Angular, Svelte, Solid 등이 프론트엔드 춘추전국시대를 만들기 전에 아주 많이 사용했었습니다. 물론, 중소 SI쪽에서는 아직도 사용하는 곳이 많은 걸로 알고 있습니다. 혹시나 아직 수요가 있을가 하는 마음에 JSP의 효율적인 실무 셋팅에 대해서 글을 써보겠습니다. 글 마지막에 소스코드 템플릿 만들어서 공유 해두었습니다. 1. 스프링 설정 // application.yml spring: mvc: view: prefix: /WEB-INF/views/ suffix: .jsp // application.properties spring.mv..
-
이벤트 위임 - 캡처링/버블링 (Event Delegation - Captruring / Bubbling)frontend/javascript&web 2022. 2. 21. 19:45
쉽게 이해하는 이벤트 위임(Event Delegation) 이벤트 특정 행위시 발생하는 사건 브라우저는 이벤트를 감지할 수 있고 이벤트 발생 시 알려줄수 있으며 이를 통해 웹 페이지와 상호작용가능하며 핸들러를 통해 원하는 함수와 연결해 사용할 수 있습니다. 이벤트 타입 마우스 click(클릭), dbclick(더블 클릭), mouserover(마우스 오버), mouseout(마우스 아웃), mousedown(마우스 눌림), mouseup(마우스 뗌), mousemove(마우스 움직임), contextmenu(오른쪽 마우스) 키보드 keydown(키 눌림), keyup(키 뗌), keypress(키 눌린상태) 폼 focus(포커스 인), blur(포커스 아웃), change(값 변경), submit(제출)..
-
브라우저 저장소( 로컬 스토리지, 세션 스토리지, 쿠키 )frontend/javascript&web 2022. 2. 17. 16:45
이론편 : 브라우저 저장소 ( Theory of Browser Storage ) 브라우저 저장소 분류 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소. 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 웹 스토리지 ( Web Storage) 웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소 이며, 웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage ) 로 나눌 수 있습니다. 로컬 스토리지와 세션 스토리지의 차이점은 영구성과 범위에 있어서 크게 차이가 납니다. 먼저, 로컬 스토리지 ( Local Storage ) ..
-
프로토타입(Prototype)frontend/javascript&web 2022. 2. 16. 08:49
Concept By 프로토타입 (Concept By Prototype) 프로토타입 자바스크립트는 프로토타입 기반의 언어, 객체 원형인 프로토타입을 이용하여 새로운 객체를 생성 자바스크립트는 프로토타입이라는 특수한 객체를 가지고 있으며, 이는 말그대로 다른 객체의 원형이 되는 객체 입니다. 새로운 객체를 만들어 낼 때 객체의 원형인 프로토 타입을 이용하며, 이를 통해 객체를 확장하고 객체 지향적인 프로그래밍을 할 수 있도록 도와줍니다. 예시 let fn = { // (1) getName() { return this.name }, getAge() { return this.age } }; function Person(name){ // (2) let newPerson = {}; Object.setPrototyp..
-
이벤트 루프(Event Loop)frontend/javascript&web 2022. 2. 15. 00:03
Concept By 이벤트 루프(Concept By Event Loop) 이벤트 루프(Event Loop) 코드 실행, 이벤트 수집, 이벤트 처리, 큐에 놓인 하위 테스크 실행을 담당 자바스크립트는 단일 스레드 프로그래밍 언어이고, 하나의 콜 스택을 기반으로 동작하는 언어입니다. 근데 실제 환경에서는 많은 작ㅇ버들이 동시에 처리되고 있는 것을 볼 수 있습니다. 예를 들어, 애니메이션 효과를 보여주면서 마우스 입력을 받아서 처리하고, NodeJS 기반 웹서버에서는 동시에 여러개의 http 요청으 처리하기도 합니다. 아니 스레드가 하나인데 어떻게 동시에 하고 있었지? 동시성을 어떻게 지원하는 것일까?에 대한 해답을 이벤트 루프에서 찾아볼 수 있습니다. 아래 그림은 이해를 돕기 위한 간단한 이벤트 루프 관계에..
-
스코프(Scope)frontend/javascript&web 2022. 2. 9. 19:47
Concept By 스코프(Concept By Scope) 스코프(Scope) 현재 접근할 수 있는 변수들의 범위 쉽게 말해 실행 컨텍스트에서 접근 가능한 변수라고 생각하면 됩니다. 스코프에는 총 3가지 개념이 있습니다. 함수 스코프 렉시컬 스코프 블록 스코프 우리는 이미 렉시컬 스코프를 클로저에서 만나보았습니다. 사실 함수와 블록 스코프도 이미 호이스팅에서 맛은 보았다고 볼 수 있습니다. 먼저, 함수 스코프를 기반으로 설명해드리겠습니다. 예시 var ratio = 1.6; // (1) function getIncreaseSalary(salary){ // (2) var total = salary * ratio; return total; } var nextYearMySalary = getIncreaseSa..