혜르미온느

scroll을 smoth하게 올라가는 기능이 사파리에서 지원된다고 한다. 관련해서 정리해보려고 한다. ✔️ 스크롤을 부드럽게 움직이기 https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo Window.scrollTo() - Web APIs | MDN Window.scrollTo() scrolls to a particular set of coordinates in the document. developer.mozilla.org 상단 MDN을 참고하여 보면 원하는 스크롤로 움직이기 위해서는 다음과 같은 형식으로 스크롤 위치를 지정하여주면 된다. // window.scrollTo(X, Y); window.scrollTo(0, 1000); windo..

https://velog.io/@ansrjsdn/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%B6%94%EC%B2%9C-%EC%9E%90%EB%A3%8C-%EB%AA%A8%EC%9D%8C 프론트엔드 추천 자료 모음 사이트 MDN - 가장 유명한 MDN 모던 javascript 튜토리얼 - JS 튜토리얼로 정말 좋음. 타입스크립트 핸드북 - TS 공식문서 번역 본 웹팩 핸드북 - 캡틴판교님의 웹팩 핸드북 fontawesome - 다양한 ICON을 가져 velog.io 더보기 관심있는것 https://typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io htt..

코드를 작성하던 중 갑자기 onClick 처리의 늪에 빠져버렸다. 그래서 알아보는 시간 onClick에 화살표 함수를 사용해야하는 이유. 하단과 같은 형식으로 onClick 이후 화살표함수 없이 함수를 소환하게 된다면 button이 로드 되며, click 여부와 상관없이 해당 함수가 실행된다. // 잘못된 방법 버튼 따라서 onClick 사용의 올바른 방법은 다음과 같다 // 올바른 방법 {함수명()}}>버튼 버튼 onClick으로 변수 넘겨주기 구글에서 보던 중 생각보다 이 부분에 대한 질문을 많이 발견하였다. 결론적으로 말하면 onClick으로 변수를 넘겨주려면 화살표 함수를 사용하여 함수 호출 시 넘겨주어야 정상 동작한다. // 잘못된 방법 버튼 // 올바른 방법 {함수명('인자')}}>버튼 // ..

clone fork original repository를 내 컴퓨터(지역 저장소)로 가지고 오는 것 내 계정(원격 저장소)으로 가지고 오는 것 새로운 commit 등으로 original repository가 변경되었을 경우, 해당 변경 사항을 반영할 수 없다. 변경 사항을 fetch나 pull 등을 통하여 반영 할 수 있음 내 수정사항은 기본적으로 나에게만 적용되어 있으며, 권한이 없다면 original repository에 push도 불가능하다. original repository에 반영하기 위해서는 Pull Request 과정을 거쳐야함 [참고사항] gitlab에서 MR(merge Request)은 github에서 PR(pull Request)로 불리우며, 동일한 개념이다. 둘 다 전체 reposit..

useMemo는 변수에 사용되고, useCallback은 함수에만 사용되는줄 알았던 나는 useCallback을 사용한 곳에 useMemo를 사용하라는 코멘트를 받게된다...! 뭐야 함수라서 useCallback을 사용했는데, useMemo가 더 잘 어울린다니. 이게 더 다른게 있는거야?!?! 라고 하여 생각한 심화학습- react는 초기 useMemo를 먼저 만들고, 추후에 함수 전용으로 useMemo를 카피한 useCallback을 만든것이기 때문에 useMemo에서도 함수를 사용할 수 있다. 다만, useMemo는 함수를 실행시킨 후, 리턴값을 저장하는 구조이기 때문에 함수 실행 시점 자체를 뒤로 미루는 것을 추가한게 useCallback. 고로 useMemo가 변수 전용은 아니며, 변수/함수 둘 ..

보통 html에서 스타일을 적용하기 위한 class 추가는 다음과 같은 형식으로 사용한다. 리액트에서는 JSX문법을 사용함으로써, class 대신 className을 사용하여 클래스명을 지정해준다. return ; 여러개의 class를 사용할 때에도 그냥 나열하면 쉽다. return ; className는 react에서 조건부로 스타일이 필요한 경우 className에서 손쉽게 사용하도록 도와주는 모듈이다. https://www.npmjs.com/package/classnames classnames A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. S..

web api에는 history라는 개념이 있다. 이를 MDN에서는 다음과 같이 정의하고 있다. History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다. 즉, 사용자가 브라우저에서 활동한 세션을 기록하고, 이 기록을 조작할 수 있는 방법을 제공한다는 의미이다. history의 속성과 메서드는 그 어떤 것도 상속하지 않으며, 종류는 다음과 같다. 속성 (property) history.length : 현재 페이지 포함, 세션 기록의 길이 (read only) history.scrollRestoration : 기록 탐색 시, 스크롤 위치 복원 여부 명시 history.state : 스택 최상단의 스테이트 값 반환. popst..

우연히 아티클을 하나 보았는데, useState와 useRef를 비교하는 글이었다. 두 개념이 다른데 비교가 될 수 있는 것인가? 라는 생각에 아티클을 읽던 중 충분히 비교함직한 내용이었고, 이를 기반으로 구글에 검색하여보니 이미 많은 분들이 두 개에 대한 차이를 고민하며 글을 올려두었다. 내가 두 개념이 다르다고 단정지었던 부분은 useRef가 DOM에 관련하여서만 사용되는 줄 알았기 때문인데, 나름대로 공부한 것을 정리해보고자 한다. useState란 먼저 useState란 변수를 동적으로 수정하고, 이에따라 dom을 리랜더링시키기 위하여 사용되는 react hook 중 하나이다. useState는 다음과 같이 상태값(count)과 그 값을 갱신하는 함수(setCount)를 반환하도록 구성되어있다. ..

한때 뷰쟁이었던 나는 작년을 기점으로 vue를 청산했다. 하지만 vue로 작업한 세월이 아직은 더 길어서인지 주변 지인들은 모두 뷰쟁이이다. 오랜만에 만난 그들과의 대화 중에 가장 화두가 된건 vue3. vue3를 직접 다룬적은 없지만 알음알음 들었던 것과 지인들의 이야기를 듣다보니 한 번 정리해보면 좋겠다는 생각이 들었다. (..만! 이미 너무 정리를 잘 해주신 분들이 많으시고, 나는 vue를 기본 지식 정도로만 체크하려고 했기 때문에 링크만 첨부하였다) ✔️ 참고링크 https://joshua1988.github.io/web-development/vuejs/vue3-as-default/ Vue 3, 기본 버전이 되다 22년 초에 일어난 Vue.js 진영의 큰 변화를 살펴봅니다. 라이브러리 기본 버전이..

create portal은 정말 도움이 될까? create portal을 사용하는 가장 특징, 이유는 특정 컴포넌트를 부모 노드 밖에 존재하는 노드에서 랜더링하기 위함이다. 이를 통한 가장 큰 이점은 DOM 트리를 정리할 수 있다는 점이다. DOM 트리를 왜 정리해야할까? 네크워크 효율성 및 성능 부하 많은 노드를 필요로 하는 DOM트리는 사용자가 페이지를 처음 로드 할 때, 필요로 하지 않는 트리까지 그려야하기 때문에 많은 데이터 비용을 필요로 하여 결과적으로 로드 시간이 증가한다. 런타임 성능 사용자와 스크립트가 상호 작용을 할 때는 노드의 위치와 스타일을 지속적으로 계산한다. 따라서 복잡한 트리를 가지고 있으면 체크해야 하는 노드가 많아지고 이는 결과적으로 렌더링 속도의 저하가 된다. 메모리 성능 ..