프론트엔드

브라우저 History API 를 활용하는 방법

History API 로 작업하기 (History API 활용 방법) History API 를 이용하면, 브라우저의 세션 기록과 상호작용할 수 있다. 세션 기록이란, 브라우저에서 사용자가 방문했던 페이지를 기록한 것을 말한다. 일반 사용자는 앞으로 가기, 뒤로 가기 버튼을 통해 세션 기록을 이용한다. History API 제공 메서드 페이지를 이동하는 메서드는 직관적으로 이해가 쉬우나, 기록된 페이지를 수정하는 메서드들은 잘 활용하기 위해 약간의 학습이 필요하다. 이 API 의 주요 목적은 fetch() 같은 메서드를 통해 업데이트 되는 SPA(Single Page Application)와 같은 웹사이트를 지원하기 위한 것이다. 기록된 페이지로 이동 History.back() History.forward..

브라우저 라우팅과 해시 라우팅의 차이 (Browser Routing 과 Hash Routing 의 차이)

브라우저 라우터 (Browser Router) 모던 웹브라우저에서 제공하는 히스토리 API 를 활용하여 히스토리 스택을 조작한다. 히스토리 스택에는 브라우저 탭이나 창에서 방문한 URL 이 들어있다. 해시 라우팅과 비교하면 해시(#)가 없는 깔끔한 URL 을 사용할 수 있다. 장점 깔끔한 URL: URL 이 깔끔해진다. SEO 친화적: URL 이 깔끔하여 SEO 에 친화적이다. SSR 지원: 서버가 미리 렌더링된 초기 페이지를 반환할 수 있어서 SEO 를 용이하게 하고 처음 방문하는 방문자의 로딩 시간을 개선한다. 단점 서버 구성: 서버에서 모든 요청을 index.html 로 라우팅되도록 해야 SPA 라우팅이 올바른 뷰를 렌더링 할 수 있다. 브라우저 호환성: 일부 구형 브라우저는 히스토리 API 를 지..

디바운싱(Debouncing) 과 쓰로틀링(Throttling) 이란?

Debounce 와 Throttling 의 필요성 검색엔진들은 자음 하나로도 많은 검색어 추천 결과를 제공한다. 사용자가 현재까지 입력한 검색어에 따라 검색어를 추천해주는 것이다. 사실 내부적으로는 서버에 검색어를 보내고 그에 따른 추천 검색어를 받는 과정을 거친다. 그런데 이 과정에서 너무 많은 글자를 썼다 지웠다 한다면? 서버는 너무 많은 요청을 처리해야 한다. 이를 최적화 하기 위해 '사용자의 글자 입력이 잠시 끊긴 시점'에만 요청을 보내려면 어떻게 해야 할까? 여기에 디바운스라는 최적화 기법이 이용되는 것이다. Debounce (디바운스) 와 Throttling (쓰로틀링) 이란? 함수가 너무 많이 실행되지 않도록 제어하는 테크닉이다. 성능 최적화와 리소스 관리에 많이 이용된다. D..

CSS transition 속성이란? (feat. 애니메이션 부여)

CSS transition 속성이란? 아래 4개의 속성을 한번에 정의할 수 있는 약식 표기(shorthand property) 속성이다. transition-property: transition 이 적용될 CSS 속성을 정의 transition-duration: transition 애니메이션이 얼마만큼의 시간을 거쳐 일어날지에 대한 속성을 정의 transition-timing-function: transition 애니메이션이 어떠한 형태로 일어날지에 대한 속성을 정의 transition-delay: 얼마만큼 기다렸다 transition 애니메이션이 일어날지 정의 예제 /* 필요한 만큼 속성을 이용하면 된다. */ /* property name | duration */ transition: margin-r..

CSS 접두사 (CSS Prefix, webkit, moz, ms, o) 가 의미하는 것은?

CSS 접두어 (CSS prefix) CSS 접두어에는 -webkit-, -moz-, -ms-, -o- 등이 존재한다. CSS 속성이 여러 브라우저에서 작동하도록 하는데 이용된다. 각 브라우저에는 CSS 를 해석하고 웹페이지를 렌더링하는 엔진이 있다. 모든 엔진이 CSS 를 같은 방식으로 해석하지는 않는다. 특히 실험적인 기능이나 새로 등장하는 기능들에 대해서는 더 그렇지 않은데, CSS 접두어는 이러한 경우에 중요한 역할을 한다. 각 접두어에 매칭되는 브라우저 이름 -webkit-: 크롬, 사파리, 새 버전의 오페라 브라우저에 대한 접두어이다. iOS 환경에서의 거의 모든 브라우저에 대해서도 해당한다. -moz-: 파이어폭스에 쓰이는 접두어이다. -ms-: 마이크로소프트의 브라우저에 쓰이는 접두어이다...

HTML 메타 태그 중 Pragma 지시어 (Pragma directives) 란?

Pragma directives (Pragma 지시어) 란? 웹 브라우저에 특정 HTTP 헤더를 관리하는 방법에 대한 "지침(directives, instructions)" 을 제공하는데 사용된다. Pragma 지시문은 태그에서 http-equiv 속성을 사용한다. 웹페이지 동작에 상당한 영향을 미친다. Pragma 지시어를 이용한 캐싱 제어 예제 살펴보기 Pragma 지시어를 통해 클라이언트측 캐싱을 활성화 혹은 비활성화 할 수 있다. 개요 Pragma 의 내용을 "캐시 없음(no-cache)" 으로 설정하면 브라우저는 웹페이지를 캐시하지 않는다. 페이지에 액세스할 때마다 서버에서 페이지의 새 버전을 검색한다. HTML 에 Pragma 지시어 입력하기 HTML 의 섹션에 위와 같은 태그를 추가할 수 있..

스스로 닫히는, 닫지 않아도 되는 태그들 (self-closing tags)

스스로 닫히는, 닫지 않아도 되는 태그들 (self-closing tags) 명시적으로 형태로 닫을 필요가 없는 태그를 self-closing tags 라고 한다. empty tags, singleton tags 모두 같은 의미를 갖는다. 태그 내부에 텍스트나 컨텐츠를 갖지 않는 태그들이다. 자체적으로 닫아줘도 되지만, 브라우저는 동일하게 해석한다. 과 은 브라우저에겐 동일하게 보인다. 단, XHTML 에서는 self-closing tag 를 닫아주는 것이 규칙이다. self-closing tags 의 종류 여기 없는 것들은 deprecated 된 것들이다. : 줄넘김을 할 때 사용한다. : 이미지를 넣을 때 사용한다. : 입력창을 넣을 때 사용한다. : 메타 데이터를 넣을 때 사용한다. : 스타일시트나..

시멘틱 HTML (Semantic HTML, 의미론적 HTML, Semantic Markup) 이란?

시멘틱 HTML (Semantic HTML) 이란? 시멘틱 마크업 (Semantic markup) 이라고도 한다. 의미론적인 것에 좀 더 집중한 HTML 을 말한다. 단순히 눈에 보이는 것을 만들어놓는 것이 아니라, HTML 이 갖는 의미까지 고려한 HTML 이다. 웹페이지의 컨텐츠를 기계와 인간이 더욱 읽기 쉽게 만들어주는 HTML 작성 방식이다. 시멘틱 HTML을 구성해서 얻는 이득 검색엔진 최적화 (SEO, Search Engine Optimization) 를 해준다. 검색엔진 봇이 인식하는 HTML 태그의 퀄리티를 높여 로봇의 페이지 이해를 돕는다. 스크린 리더에 더 잘 읽힌다. 접근성이 더 좋아진다. 유지보수성이 좋아진다. 명확한 태그 이름을 통해 의도한 구조와 의미를 더 명확하게 만든다. 시멘..

리액트 공식문서 요약, 퀵 스타트 (Quick Start)

목차 리액트 컴포넌트 마크업과 스타일 추가 방법 JS 내부 데이터 이용하는 방법 조건부 렌더링 방법 리스트 렌더링 방법 이벤트 응답 방법 훅스 사용 방법 화면 업데이트 방법 컴포넌트간 데이터 공유 방법 리액트 컴포넌트 컴포넌트란? 리액트 구성요소 로직과 모양을 가진 UI 단위 작은 버튼부터 전체 페이지까지 다 하나의 컴포넌트로 취급할 수 있다. 코드상에서는 마크업을 반환하는 JS 함수 컴포넌트의 예: MyButton 컴포넌트 이름은 대문자로 시작 HTML 태그는 소문자로 시작하는 것과 상반된다. function MyButton() { return I'm a button; } export default function MyApp() { return ( Welcome to my app ); } JSX..

이벤트 캡처링 (Event Capturing) 이란?

이벤트 캡처링이란? 이벤트 버블링 전에 일어나는 단계이다. 이벤트 캡처링 개념을 알기 위해서 이벤트 버블링부터 공부하는 것이 좋다. 캡처링 -> 타겟 -> 버블링 순으로 이벤트가 흘러간다. 엘리먼트에 캡처링 이벤트를 등록하는 방법 element.addEventListener("click", () => {}, true); 위와 같이 코딩하면, 캡처링 이벤트를 등록할 수 있다. 캡처링, 버블링 결과 예측해보기 HELLO 위의 코드를 실행하면, 순서대로 어떤 것이 로그에 찍히는지 예상할 수 있으면, 캡처링과 버블링을 명확히 이해한 것이다. 헷갈린다면 버블링은 바닥에서부터 거품이 뽀글뽀글 올라오는 이미지라고 생각해보자. 정답은 아래의 순서로 로깅된다. capturing div capturing span bubb..

event.target 과 event.currentTarget 의 차이

event.target 과 event.currentTarget event.target 과 event.currentTarget 은 비슷한 이름을 가졌지만, 다른 결과를 낸다. event.target HELLO div 의 onclick 은 event.target 을 띄운다. 자식 엘리먼트인 span 을 클릭하면, alert 에 표출되는 내용은 [object HTMLSpanElement] 이다. 즉 span 을 클릭하면, div 에 이벤트를 걸어도 event.target 은 span 이다. div 만 정확하게 클릭하면 출력 내용은 [object HTMLDivElement] 이다. event.target 은 내가 실제로 클릭한 요소를 나타낸다. event.currentTarget HELLO event.curre..

이벤트 버블링 (Event Bubbling) 이란?

이벤트 버블링이란? 간단하게 설명하면, 이벤트가 자식에서 부모로 올라가는 현상을 말한다. hello 위와 같은 내용의 html 태그가 존재할 때, span 을 클릭하면 div 의 onclick 이벤트까지 같이 호출되는 현상을 말한다. 사실 이 현상은 document 객체를 만날 때까지 올라간다. 정리하자면, 자식 엘리먼트의 이벤트가 호출된 이후에 자동으로 부모 엘리먼트의 이벤트도 호출된다. 마치 물 아래서 기포가 올라가는 모양과 같다고 하여 버블링이라고 한다. 버블링 되는 이벤트의 종류 거의 모든 이벤트이다. 몇가지 예외로 focus 와 같은 이벤트는 버블링되지 않는다. 버블링을 중단하는 방법 (event.stopPropagation()) HELLO 이렇게 자식 엘리먼트에서 event.stopPropag..