본문 바로가기

전체 글376

React - useImperativeHandle 개념 잡기 useImperativeHandle에 대해 알아보자 딱봐서는 어떤 기능을 하는지 짐작하긴 힘들다. Imperative에 대해 사전적 의미부터 살펴보자 Imperative 뜻은 '반드시 해야 하는' , '위엄 있는', '긴요한 것'으로 해석된다. 이런 뜻을 인지하면서 해당 hook이 어떤 기능을 하는지 알아보자 개념 `forwardRef`로 넘어간 ref instance를 이용하여 자식 컴포넌트 내의 기능을 부모 컴포넌트에서 직접 사용하고 싶을 때 사용하는 hook입니다. 예시 App 컴포넌트 App 컴포넌트는 부모 컴포넌트이고 MyInput 컴포넌트는 하위 컴포넌트 입니다. App 컴포넌트에서 ref값을 선언할때 어떤 기능을 담당하는지 Generic Type을 정의합니다. MyInput 컴포넌트에 ref.. 2023. 10. 12.
소백산 비로봉 다녀오기 1박 2일 코스로 소백산 비로봉을 다녀왔어요. 아직 차가 없고, 운전도 잘 못해서 대중교통을 이용해야만 했어요. 거리는 용인 수지부터 단양까지... 그래도 대중교통을 갈 수 있다는 것만으로도 정말 감사해요. 수지에서 청량리 까지 가고, 청량리에서 KTX를 타 단양역까지 도착했어요. KTX 예매가 쉽지 않아 오후 시간 티켓을 구매했고, 그래서 당일에는 등산을 할 수 없기에 비로봉 입구 근처에 위치한 펜션에서 하룻밤 지내고 다음날 등산하기로 했어요 예약한 숙소는 을전 56펜션이고, 하룻밤 보내기 좋았어요. 숙소에서 노을을 볼 수 있어서 오랫만에 노을도 볼 수 있는 여유도 갖을 수 있었어요. 캠프 파이어도 저렴한 가격에 할 수 있어서 예전 수련회가 떠오르며 추억을 떠오르기도 했어요. 침대에 전기장판도 있어서 .. 2023. 9. 28.
web > popstate 개념 세션 기록 탐색으로 인해 현재 활성화된 기록 항목이 바뀔 때 발생 history.pushState()와 history.replaceState() 의해 생성되면, popstate 이벤트의 state속성은 선언한 state의 복사본을 갖게 된다. (별로 중요한 이야기는 아닌거 같다.. 나중에 state object가 하드코딩 되어 있어서 참조값이 같다고 생각할 수 도 있다고 생각이 든다.) history.pushState()와 history.replaceState()는 popstate 이벤트를 발생시키지 않는다. 백 버튼, 앞으로 버튼, history.back() 등을 통해서만 발생된다. 뒤로가고 앞으로 갈 때 선언한 states는 유지되어 개발에 도움이 될거 같다. 예) 진입 경로에 따라 UI가 다르.. 2023. 9. 25.
[nextjs] router.beforePopState 개념 - popstate의 이벤트를 받고 - router가 어떠한 행동을 하기 전에 무언가 하고 싶을 때 문법 router.beforePopState(cb) cb popstate event가 왔을 때 실행 하는 함수 object로 이벤트의 state를 받는다. - url: 새로운 상태를 위한 route. 보통 페이지의 이름이 됨 - as: 브라우저에 보여질 url - options: router.push에서 보내주는 추가적인 옵션 cb가 false를 리턴하면 popstate에 대해 어떠한것도 다루지 않는다. https://nextjs.org/docs/pages/api-reference/functions/use-router#routerbeforepopstate 2023. 9. 25.
CSS > inline, block, inline-block inline 새로운 라인에서 시작하지 않고 내용만큼 너비를 차지 너비와 높이를 설정하더라도 적용되지 않음 margin 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않음 padding은 적용됨 ex) span, a, em See the Pen CSS > Display > inline by Daewoong Kim (@daewoong-kim) on CodePen. block 새로운 라인에서 시작하며 해당 라인에서 최대한 전체 너비를 차지 상위요소의 전체 너비를 차지 width, height, margin, padding 속성 모두 반영 됨 ex) div, p, h1 See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen. inline-block.. 2023. 8. 28.
CSS Specificity 개념 선택자의 우선권 기준 오른쪽에 위치할 수록 우선권을 갖는다 요소 선택자 > 클래스 선택자 > ID 선택자 > 인라인 스타일 > !important See the Pen Untitled by Daewoong Kim (@daewoong-kim) on CodePen. 2023. 8. 26.

티스토리툴바