본문 바로가기

Web/HTML, CSS, Javascript

(16)
[Javascript] RxJS - Overview 번역 Observable 객체를 다루는데 필수(?)적인 RxJS!! rxjs 공식사이트 번역을 해봤습니다. ( https://rxjs.dev/guide/overview ) 기분탓인지 모르겠지만 다른 개발문서들보다 어렵게(?) 쓰여있는거 같아서 의역도 좀 포함되어있습니다. 그렇지만.. 영어 실력이 부족해 오역이 있을 수 있습니다. (발견시, 알려주시면 감사하겠습니다.) 소개 RxJS는 Observable 시퀀스를 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기위한 라이브러리입니다. Observable, 위성 타입(Observer, Scheduler, Subjects), 그리고 Array#extras (map, filter, reduce, every 등)의 연산자, 이 셋 중 하나의 핵심 유형을 제공하여 비동..
script 속성 async / defer javascript를 불러올때, DOM이 구성되는 것을 기다리기 위해 태그 제일 아래에서 script를 가져오기도 합니다. 하지만 async, defer 속성을 줘서 간편하게 이를 해결할 수 있습니다. 만약 DOM과 크게 상관이 없다거나 다른 script와의 연관성이 없다면, 그리고 js파일이 작아서 DOM이 화면에 보이는 시간이 얼마 안걸린다면 굳이 저 두 속성을 넣을 필요는 없어보입니다. 이게 무슨말인지는 아래 수행 순서를 먼저 보고 오도록 하겠습니다. 방향 -----> [head안 속성X] [body맨 아래 속성X] [async] [defer] 정리하자면, 1. 속성 없을때 script를 만나면 불러오고 실행까지 시킨 후에 나머지 작업을 합니다. 위에 보이는 것처럼 head 안에 있다면 HTML 파..
[CSS] position (static, absolute, relative, sticky, fixed) static absolute relative fixed 이렇게 네가지의 position이 존재합니다. 저도 어설프게는 알고 있었지만 정확히 어떻게 활용해야 하는지 매번 헷갈려서 정리해봤습니다. [static] 태그들의 default 값입니다. 빈공간에 차례대로 들어가게 됩니다. 위->아래 / 왼->오 기본적으로 div 태그는 display: block이라 위->아래 입니다. 그래서 inline-block으로 일렬로~ See the Pen position-static by steadev (@steadev) on CodePen. [absolute] static이 아닌 부모를 기준으로 위치 조절이 가능합니다. 전부다 static이라면 body가 기준이 됩니다. 예제에서, 두번째 박스만 absolute로 했고,..
[Javascript] requestAnimationFrame requestAnimationFrame은(이하 raf) 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이전에는 setInterval을 사용했지만, 프레임 유실이 있을 수 있고 모바일에서 배터리 절약이 안되는 문제가 있다고 합니다. raf는 초당 60번을 수행하지만, 컴퓨터 상황 등에 따라 유동적이라고 합니다. 그만큼 최적화해서 애니메이션을 부드럽게 해줄 수 있는 기술이라 애니메이션에서 매우 자주쓰이고 canvas에 많이 활용된다고 합니다. [사용방법] 우선, 아래 코드처럼 재귀형식으로 활용하면 됩니다. pageYOffset은 스크롤된 값을 의미하는데, 스크롤 값만큼 left를 움직여주는 코드입니다. 하지만 아래 gi..
[CSS] 단위 (rem/em, vh/vw, vmin/vmax) 제목에서의 단위 말고도 많은 것들이 있지만, 반응형을 생각했을때 가장 많이 쓰이고 중요하다 생각되는 것만 담아봤습니다. 아래 베이스 코드로 진행하도록 하겠습니다. /* --- HTML --- */ /* --- CSS --- */ html { font-size: 16px; } .item { background-color: lightcoral; } [ rem과 em ] 1rem - 최상위 태그의 font-size (r = root) 1em - 현재 태그의 font-size 최상위의 font-size: 16px 이라고 가정하고 예를 들어보겠습니다. .item { font-size: 2rem; height: 5em; width: 10em; } font-size --> 16 * 2 = 32 (root의 font-..
[Javascript] 배열 다루기(map, filter, find, every, some, reduce, forEach) Javascript에서 참 유용하게 사용할 수 있는 배열 함수들 입니다. 처음 접했을 때는 뭔가 사용법도 어려워 보이고 복잡해보였지만... 알고나면 이렇게 편할수가 없는..!! [map] map은 말 그대로 매핑 시켜준다고 생각하면 편합니다. 배열의 원소들을 입맛에 맞게 바꿔줄 수 있습니다. 배열을 loop 돌면서 바꿔줍니다. 간단한 예로 1~10까지의 배열이 있고 1을 더해주는 코드 입니다. 하지만 저렇게 한다고 arr 변수가 바뀌는 것은 아니므로 주의해야 합니다. let arr = [1,2,3,4,5,6,7,8,9,10]; arr.map(item => item + 1); > 결과 조금 더 복잡한 경우를 본다면 각 원소와 함께 인덱스도 가져올 수 있습니다. 그리고 단순 연산이 아닌, 다른 형태로도 바꿀..
[CSS] Grid 2차 배열 형태의 레이아웃 설정을 도와주는 속성입니다. bootstrap이나 프레임워크에서 제공하는 것을 주로 활용했었는데, css만으로도 충분히 그에 뒤지지 않게 해낼 수 있습니다. 1 2 3 4 5 6 7 위 html을 바탕으로 테스트 했고, 아래 속성들은 item-layout에 적용했습니다. [display] display: grid; display가 grid로 되어있어야 이하 grid 관련 속성들을 이용할 수 있습니다. [grid-gap, grid-column-gap, grid-row-gap] 각 column과 row 사이의 간격을 정의합니다. grid-gap은 둘 다의 간격이고 나머지는 각각 column, row의 간격입니다. [grid-template-rows, grid-template-col..
[CSS] stroke-dasharray, stroke-dashoffset 활용하여 animation 만들기 stroke-dasharray와 stroke-dashoffset은 svg를 가지고 animation을 만드는데 활용되곤 합니다. 여기서 다뤄볼 것은 css로만 하는 방법과 javascript로 하는 방법입니다. 먼저, stroke-dasharray와 stroke-dashoffset에 대한 개념부터 확인하고 가겠습니다. - stroke-dasharray는 점선을 만들어주는 놈이고 - stroke-dashoffset은 어디부터 시작할 것인지 정해주는 놈입니다. 위 circle을 예로 봐보겠습니다. 원의 전체 길이(둘레)는 1359.7597... 입니다. 그리고 시작점은 시계방향 90도 지점부터 입니다. 그리고 이 원은 stroke-dasharray: 100 입니다. 그러므로 dasharray 값은 점선을 만..