반응형

IT/Front-End 28

디바운싱(debouncing) vs 쓰로틀링(throttling)

디바운싱(Debouncing)과 쓰로틀링(Throttling) 은 사실, 자바스크립트의 개념이라기보다는 프로그래밍 기법 중 하나입니다. 둘 다 디바이스(일반적으로 CPU)의 최적화를 위해 사용되곤 합니다. 이 두 가지 방법 모두 DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트(event)를 제어(제한)하는 프로그래밍 기법입니다. 그렇다면 디바운싱과 쓰로틀링이 각각 무엇을 의미하는지 알아보시죠! 디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용됩니다. 쓰로틀링(Throttling) : 연이어 발생한 이벤트에 대해, 일정한 delay를 포..

IT/Front-End 2022.07.12

OOP(객체 지향 프로그래밍)

📖 객체지향이란? 객체지향 프로그래밍(Object-Oriented Programming)이란 프로그램을 설계하는 개념이자 방법론을 의미합니다. 여기서 나오는 객체라는 단어가 현실에서는 잘 쓰이지 않는 단어라 의미가 안 와닿을 수 있습니다. 이해하기 쉽게 예시로 설명하자면, 주변에 존재하는 모든 사물(자동차, 건물, 옷 등), 생명체(사람, 고양이 등) 하나하나가 다 객체라고 할 수 있습니다. 따라서 객체지향 프로그래밍이란 단어 뜻 그대로, 프로그램을 상태(state)와 행위(behave)로 이루어진 객체라는 기본단위로 나누고, 이 객체들간의 상호작용을 통해 프로그램을 설계하고 개발하는 것 입니다. 💡 객체지향 언어의 특징 4가지 👉 캡슐화(Encapsulation) 한 객체가 특정한 하나의 목적을 위해 ..

IT/Front-End 2022.07.11

[자료구조] - 큐/스택

가장 일반적인 자료구조의 큐와 스택에 대해 알아보고 두 자료구조의 차이점도 알아보려고 합니다. 💡 스택 (STACK)이란? 스택의 개념 스택(stack)이란 쌓아 올린다는 것을 의미합니다. 따라서 스택 자료구조라는 것은 책을 쌓는 것처럼 차곡차곡 쌓아 올린 형태의 자료구조를 말합니다. ✔ 스택의 특징 스택은 위의 사진처럼 같은 구조와 크기의 자료를 정해진 방향으로만 쌓을 수 있고, top으로 정한 곳을 통해서만 접근할 수 있습니다. top에는 가장 위에 있는 자료는 가장 최근에 들어온 자료를 가리키고 있으며, 삽입되는 새 자료는 top이 가리키는 자료의 위에 쌓이게 됩니다. 스택에서 자료를 삭제할 때도 top을 통해서만 가능하며 스택에서 top을 통해 삽입하는 연산을 'push' , top을 통한 삭제하..

IT/Front-End 2022.07.08

Get과 Post의 차이를 아시나요?

주의!⚠️ 본글에서는 독자들이 HTTP method가 무엇인지 안다는 전제 하에 이야기를 진행합니다. Get과 Post는 Http method 중 가장 많이 쓰이는 method가 아닐까 싶습니다. 하지만 이 글을 읽는 당신은 둘의 차이점을 알고 계시나요? TL;DR😡 Get은 가져온다는 개념이고, Post는 수행한다는 개념으로 받아들이면 쉽습니다. 즉, Get은 서버에서 어떤 데이터를 가져와서 보여줄 때 사용합니다. 어떤 값이나 내용, 상태 등을 바꾸지 않는 경우에 사용을 하는 것입니다. 이에 비해, Post는 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다. 게시판으로 예를 들자면, 글의 내용에 대한 목록을 보여주는 경우나, 글의 내용을 보는 경우는 Get에 해당합니다. 그리고 글의 내용을 저장..

IT/Front-End 2022.07.08

메타(meta) 태그 종류 정리

💡 메타태그(meta tag)란 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 합니다. 브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있습니다. 메타태그 속성에는 http-equiv, name, content 3가지 속성이 있습니다. 1) http-equiv ="항목명" 웹 브라우저 서버에 명령을 내리는 속성 name 속성을 대신해 사용할 수 있음 html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을때만 의미를 가짐 content 속성의 정보 / 값을 위한 HTTP header를 제공 html4에서는 문자 설정을 할 때 사용했지만 h..

IT/Front-End 2022.06.16

브라우저의 역할과 스크립트의 로드 시점

브라우저는 어떻게 동작하는가? 이전에도 해당 주제로 글을 쓴적이 있어서 오늘은 간단하게 알아보고 스크립트의 로드 시점에 대해 알아보려 합니다 사용자가 연결된 주소의 서버에 데이터 요청을 하게 되면 서버로부터 데이터를 다운로드 받은 것을 가지고 웹브라우저가 그것을 해석해서 사용자가 보는 UI 를 완성해 주게 됩니다. 📖 웹 브라우저 동작과정 간단히 알아보기 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것입니다. 💡 브라우저의 기본 구조 브라우저의 주요 구성 요소는 다음과 같습니다. [사용자 인터페이스] - 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 [브라우저 엔진] - 사용자 인터페이스와 렌더링 엔진 사이의..

IT/Front-End 2022.06.15

LocalStorage, SessionStorage 그리고 Cookie

💡 WEB STORAGE 웹 스토리지(web storage)에는 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)가 있습니다. HTML5 에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함되어 있습니다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴으로 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념으로 사실 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었습니다..

IT/Front-End 2022.06.15

한글로 코딩하기

토스에서는 한글로 코딩을 하고 있다는 말을 듣고 찾아보게 되었는데 실제로 한글로 코딩을 진행하는 것 같았습니다. 한글로 코딩을 한다는 생각을 해보지 않았던 저로서는 한글로 코딩이 된다고??라는 사실이 더 충격이었던 것 같습니다. 한글 코딩을 찾아보면서 장, 단점을 생각하게 되었는데 어떠한 것이든 장점과 단점이 존재하기 마련이지만 명확한 코딩 컨벤션이 정의되어 있는 상황에서 작업을 진행한다면 단점보다는 장점이 더 많을것 같다고 생각하였습니다. 아래는 토스에서 정의한 세종대왕 프로젝트(한클 코딩 컨벤션) 입니다. 한글 코딩에 관심이 있다면 한번쯤 가벼운 마음으로 읽어봐도 좋을 것 같습니다. 세종대왕 프로젝트 (한글 코딩 컨벤션) 한글 코딩? 어려운 도메인 용어에 대해 변수명을 정할 때, 어색한 영어보다 이해..

IT/Front-End 2022.05.02

유튜브 동영상 관련동영상 노출 설정

Iframe에서 youtube 동영상을 플레이(노출)시킬 때, 해당 영상이 종료되면 여러 광고 영상들이 노출되는데 일반 기업에서는 광고 영상보다는 자신들의 회사 영상같이 기존 영상과 연관되어 있는 동영상이 노출되기를 원하게 됩니다. 그럴 경우 아래처럼 영상 url 뒤에 옵션 인자를 붙여주게 되면 관련 동영상이 노출됩니다. 💡 영상 종료 후 관련 영상이 노출되게 하는 방법 youtube/embed/동영상주소?rel=0 해당 url뒤에 ?rel=0 을 붙여주면 동영상이 종료된 후에 관련 동영상이 변경됩니다. 매개변수 값을 기본값인1로 설정하면 플레이어에 관련 동영상이 표시됩니다. 매개변수 값을0으로 설정하면 플레이어에 관련 동영상이 표시되지 않습니다. 대신rel매개변수를0으로 설정하면 방금 동영상이 재생된 ..

IT/Front-End 2022.04.27

브라우저는 어떻게 동작하는가?

이 글은 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한 "How Browsers Work: Behind the scenes of modern web browsers"를 번역한 글입니다. 탈리 가르시엘은 몇 년간 브라우저 내부와 관련된 공개 자료를 확인하고, C++ 코드 수백만 줄 분량의 WebKit이나 Gecko 같은 오픈소스 렌더링 엔진의 소스 코드를 직접 분석하면서 어떻게 브라우저가 동작하는지 파악했습니다. 📖 소개 브라우저는 아마도 가장 많이 사용하는 소프트웨어입니다. 이 글을 통해 브라우저가 어떻게 동작하는지 이해하고 설명하려고 합니다. 이 글을 읽고 나면, 브라우저 주소 창에 특정 URL을 입력했을 때 어떤 과정을 거쳐 페이지가 화면에 보이게 되는지..

IT/Front-End 2022.01.20
반응형
//