programing/Web
-
[web] Intersection Observer API와 활용programing/Web 2021. 5. 16. 14:39
Intersection Observer API 🚨 글을 작성하는 현재 시점에선 해당 API는 실험적인 기능임을 명심하자! 특정 DOM 요소(이하 타겟 요소)와 그 상위 요소, 혹은 최상위 도큐먼트인 viewport(이하 루트 요소)와의 교챠영역에 대한 변화를 비동기적으로 감지할 수 있는 API. 보통 스크롤이 어느 위치에 도달했을 때, 애니메이션 혹은 특정 로직을 트리거하기 위한 장치로 많이 사용한다. new IntersectionObserver 로 생성된 IntersectionObserver 인스턴스 객체는 설정된 비율 만큼의 가시성을 계속 감시한다. 이 생성자 함수는 다음과 같은 세가지 옵션을 설정할 수 있다. root 디폴트는 viewport. 교챠영역의 기준이 되는 요소. rootMargin 디폴..
-
[CSS] column-count를 이용하여 masonry layout 구현하기programing/Web 2021. 2. 28. 15:57
Masonry Layout masonry는 석조라는 단어라고 합니다. 즉 벽돌을 적조하는 것에서 착안한 레이아웃이라고 합니다. 대표적으로는 핀터레스트가 있죠. 보통 이미지를 나열해서 보여줄 때 유용한 레이아웃이며, 특징은 각 이미지의 너비가 동일하다는 것입니다. column-count 위와 같은 레이아웃은 column-count 속성으로 간편하게 구현할 수 있습니다. ... .masonry-container { column-count: 4; column-gap: 1em; } .masonry-item { display: inline-flex; width: 100%; margin-bottom: 1rem; border-radius: 10px; overflow: hidden; &:hover: { transfor..
-
[React] Styled-Components를 이용한 애니메이션programing/Web 2021. 1. 30. 21:47
발단 이상형 월드컵을 구현하다가, 각 아이템을 선택했을 때 밋밋하게 사진이 바뀌는 것이 마음에 안들어서, 애니메이션 효과를 주려고 했다. 권장하는 방법 styled-components에서 특정 이벤트 시 애니메이션을 트리거 하는 방법은 안나와 있었다. 다만, 구글링을 해보니 다들 상태 기반 애니메이션을 사용하는 듯 했다. const ItemContainer = styled.div` ... ${(props) => (props.isFadeOut ? fadeOutAnimation : null)}; `; 나의 구현 상태 기반으로 애니메이션을 트리거하기 위해, useState로 상태를 추가했다. export function ShowWindow(props: ShowWindowProps) { const [isFade..
-
[Web] Web Storage에 대하여programing/Web 2020. 12. 26. 21:46
Web Storage API 개념 HTML에 정의된 명세인 Web Storage API는 Storage API에 속한 개념이며, 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다. 키와 값은 모두 String 형입니다. window.sessionStorage 및 window.localStorage 는 Storage 인스턴스이며, 이 인스턴스를 통해 Web Storage API를 사용할 수 있습니다. 이 Storage 인스턴스는 일반적인 객체처럼 다룰 수 있지만, pitfall 관련 이슈를 방지하기 위해서 제공되는 메소드를 통해 다루는 것을 권장합니다. 제공하는 속성 Web Storage API는 window 에 다음과 같은 속성을 제공합니다. sessionStorage ..
-
[Web] JSON Web Tokenprograming/Web 2020. 12. 3. 10:28
JWT JSON Web Token은 IETF(Internet Engineering Task Force)의 RFC(Request for Comment) 7519로 제안된 기술이다. (인터넷 표준은 특별한 RFC 또는 RFC의 집합을 가리킨다.) 해당 RFC는 현재 Proposed Standard 로써, 표준으로 채택된 듯 하다. 해당 RFC를 보면, JWT에 대해 이렇게 설명하고 있다. JWT은 두 당사자 간 전송될 클레임을 나타내는 간결하고 URL-안전한 방법이다. 소개 JWT은 HTTP 요청 헤더나 URI 쿼리 파라미터와 같이, 제한된 환경을 가진 공간에서 사용하기 위한 간결한 클레임 표현 방법이다. 조금 더 쉽게 말하자면, 두 기기 간에 정보를 JSON 형태로 교환하는 간결하고 자가수용적인 방법이다...
-
[React, Redux] 내가 리덕스를 쓰지 않는 이유programing/Web 2020. 7. 18. 15:34
안녕하세요, Einere입니다. (광고차단 기능을 꺼주시면 감사하겠습니다.) 해당 포스트는 Why I Stopped Using Redux를 번역한 글입니다. 리덕스는 리액트 환경에서 혁신적인 기술입니다. 리덕스는 불변 데이터와 전역 저장소를 통해 컴포넌트 트리에서 prop-drilling(특정 데이터 prop을 통해 깊이 보내는 것)을 방지할 수 있습니다. 앱 내에서 불변 값을 공유하는 상황에서, 리덕스는 최고의 툴입니다. 하지만 왜 전역 저장소를 둬야 할까요? FE는 정말로 그렇게 복잡한가요? 우리는 왜 리덕스로 너무 많은 일을 하려고 하는 것인가요? SPA의 문제점 리액트와 같은 SPASingle Page Application의 장점은 웹앱 개발의 많은 변화를 가져다주었습니다. FE 코드에서 BE코드..
-
[CSS] media query에 대해 알아보자programing/Web 2020. 6. 16. 17:01
안녕하세요, Einere입니다. (광고 차단 기능을 꺼주시면 감사하겠습니다.) 이번 포스트에서는 CSS에서 사용하는 media query(이하 미디어 쿼리)에 대해 알아보도록 하겠습니다. 미디어 쿼리란? 미디어 쿼리는 CSS의 문법 중 하나이며, 반응형 디자인을 사용할 수 있도록 해줍니다. 자세한 정보는 W3C Recommendation에 나와있습니다. 문법 미디어 쿼리는 다음의 문법을 가지고 있습니다. @media and (media feature) { /*...*/ } 시작은 at-rule이라고 불리는 @media 키워드로 시작해야 하며, 괄호로 쌓인 media feature는 0개 이상이어야 하며, 꺾쇠 안에 스타일을 정의하면 됩니다. (media type은 옵션입니다.) media type 정의된..