본문 바로가기

전체 글86

window MutationObserver 알아보기 DOM 변경되어써?! 체크해주는거 new MutationObserver( function callback ) callback: 콜백 함수는 DOM 변경시 마다 호출 인자 1): obj[] 2): MutationObserver MutationObserver 인스턴스함수들 observe(): 특정 노드에서 DOM 변경의 알림을 받을 수 있도록 뮤테이션옵저버 인스턴스 등록 disconnect(): 변경 알림 안받을거야 takeRecords(): 뮤테이션옵저버 인스턴스의 레코드 큐를 비우고 안에 든 것 반 observe(): MutationObserverInit childList: 대상 노드의 자식 요소의 추가 및 제거가 관찰되어야 하는 경우 true로 설정. subtree: 대상 및 대상의 자손에 대한 돌연변.. 2021. 12. 20.
Next.js에서 백그라운드 이미지 적용해서 애니메이션 주기 import image from 'next/image'; const aa = {dkdj:dfjdk, dkjlsjd:skfjslkdf}; return ( ) const Image = styled.div... &>img { &.hover { trasnform: scale(0.2) ... } } ...; 2021. 11. 17.
zustand 사용하기 🚀 스토어 만들기 const useStore = create(set=>({ bears: 0, increasePopulation: () => set(state => ({ bears: state.bears + 1})), removeAllBears: () => set({ bears:0 }); }))set 함수는 state를 병합해주는 함수로써 객체, 함수등을 넣어서 사용할 수 있다. 구성요소 바인딩 provider가 따로 필요하지 않으며 어느 페이지에서나 가져와서 사용하면 된다. 상태를 선택하면 구성 요소가 변경 사항에 따라 다시 렌더링 된다. const BearCounter = () => { const bears = useStore(state => state.bears); return {bears} around.. 2021. 11. 9.
Canvas API - 기본 도형 그리기 직사각형 그리는 3가지 방법 1. clearRect(x, y, width, height) 정의된 사각형의 모든 픽셀을 투명으로 설정하고 이전에 그린 내용을 지운다. 2. fillRect(x, y, width, height) 너비와 높이에 의해 크기가 결정되고 x, y 위치에 채워진 사각형을 그린다. 3. strokeRect(x, y, width, height) strokeStyle 및 기타 컨텍스트 설정에 따라 윤곽선 사각형을 그린다. 텍스트를 그리는 3가지 방법 1. fillText() 2. strokeText() 3. measureText() 측정된 텍스트에 대한 정보(= 너비)를 반환한다. let text = ctx.measureText('Poburi'); console.log(tex.. 2021. 10. 31.
Fetch API 들어가기 Fetch API를 이용하면 요청/응답과 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능합니다. 또한 fetch()메서드를 이용하는 것으로 비동기 네트워크 통신을 쉽게 할 수 있게 도와줍니다. Fetch의 기본스펙이 jQuery.ajax()와 다른 두가지: 1. fetch()로 부터 반환되는 프로미스 객체는 HTTP error 상태를 reject하지 않음. (HTTP Status Code가 404 또는 500을 반환하더라도..! ) 대신, ok상태가 false인 리졸브가 반환되며 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됨. 2. 보통 쿠키를 보내거나 받지 않음. 쿠키를 전송하기 위해서는 자격증명 옵션을 반드시 설정해야함. 2017년 8월 25일 이후 기본.. 2021. 10. 23.
맥처럼 윈도우에서 캡스락(CapsLock)으로 한영전환하는 방법 들어가기 맥처럼 윈도우에서 캡스락(CapsLock)으로 한영전환하는 방법 1. AutoHotKey 프로그램 다운로드 후 설치합니다. 2. 아래 내용을 메모장에 복붙하고 CapsLockKorEng.ahk이라는 이름으로 저장합니다. Windows 10 이하 capslock:: KeyWait, capslock if A_TimeSinceThisHotkey >= 250 ; in milliseconds. SetCapsLockState, % (State:=!State) ? "On" : "Off" else Send, {vk15sc1F2} return Windows 10 일 경우 capslock:: KeyWait, capslock if A_TimeSinceThisHotkey >= 250 ; in milliseconds... 2021. 10. 23.
프런트엔드 개발자로서의 기초지식 프런트엔드 개발자란... HTML, CSS, Javascript를 활용하여 웹 애플리케이션을 만들어내는 개발자. 백엔드 개발자가 만들어준 API를 바탕으로 여러 직군의 사람들과 협업하여 좋은 UI/UX를 만들어내는 걸 목표로 한다. 프론트엔드 개발은 훨씬 더 많은 일을 수행해내야 한다. 웹, 웹, 웹 우리는 프론트엔드 개발자이기 이전에 웹 개발자라는 걸 잊어서는 안된다. 웹 서비스를 만드는 행위에 대한 기초지식을 알고 있어야 한다는 뜻이다. 기초에 대한 생각은 사람에 따라 다를거라 생각되고, 나도 어디까지를 기초라고 말할 지에 대해서는 고민이 된다. 일단 내가 생각하는 기초 지식은 다음과 같은데, 브라우저별 특성을 이해하고 있다. 자바스크립트 언어적 특성을 이해하고 있다. 브라우저 렌더링 방식을 이해하고.. 2021. 10. 23.
historyApiFallback의 역할 리액트는 SPA 방식이어서 URL의 시작 주소(=index.html)만 갖고 있는데, 웹의 history API를 사용해서 여러가지 URL이 있는 것 처럼 가짜주소를 만들어 줄 수 있다. localhost:3090/login coding-heesong.com/beauty/make-up 이런 주소로 이동하거나 새로고침을 하면 프론트로 가지 않고 서버로 가게된다. 그런데 문제는 서버는 오직 시작 주소만 알고 있다. localhost:3090 coding-heesong.com 그래서 webpack.config.ts에서 devServer의 historyApiFallback: true를 줘서 실제로 서버에는 없는 주소를 있는 주소처럼 인식 할 수 있게 해준다. 2021. 10. 17.

티스토리툴바