본문 바로가기
728x90

분류 전체보기537

Ref - React Hooks 언제 사용해야할까? React Hooks > 함수형 방식 > useRef hook DOM요소에 접근하기 위해 사용한다. useState를 사용하지 않고, Ref만을 사용하여 로직을 구성 할수있다. Ref 는 - 값의 변경이나 상태관리가 이루어질 필요가 없을때, - Dom 요소로 값을 단순히 읽을 경우 에 사용한다. 2024. 3. 15.
집에 있는데도 집에 가고 싶죠~ 오 ~ ↘오~ 슈퍼 내향형 인간으로써 소신발언하겠다. 하루에 4시간만 일했으면 좋겠다. 누가 하루 8시간으로 지정한거냐 나한테 의견 물어봤냐? 일중독자새끼들 2024. 3. 14.
[Nextjs] client side 에서 useEffect 가 2번 실행 (?) Next.js에서 useEffect가 두 번 실행되는 이유는 React의 strictMode 때문일 수 있다. strictMode는 기본적으로 true로 설정되어 있다. next.config 파일 설정을 변경해줘야한다. const nextConfig = { reactStrictMode: false, } reactStrictMode 란 ? 우리가 만드는 application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다. 2024. 3. 14.
VS Code에서 한국어 언어팩 설정하는 방법 커맨드 팔레트를 통해 언어 설정 가능하다. Ctrl + Shift + P로 커맨드 팔레트 실행 후 language로 검색하면 Configure Display Langage가 나온다. ko(한국어)를 선택하면된다. ko가 없다면 Install Additional Languages.. ko 다운로드 2024. 1. 4.
React를 자바스크립트, 타입스크립트 중 무엇으로 사용하는게 좋을까? 리액트(React)를 사용할 때 자바스크립트 또는 타입스크립트를 선택하는 것은 프로젝트의 요구 사항 및 팀의 선호도에 따라 다를 수 있다. 여러 가지 요소를 고려하여 결정할 수 있다. ✔자바스크립트를 사용하는 경우: 간편성과 빠른 개발 자바스크립트는 타입스크립트에 비해 문법이 더 자유롭고 유연하며, 초기 설정이 간단합니다. 더 빠른 개발을 원하는 경우 선택할 수 있습니다. 생태계와 문서화 많은 라이브러리와 프레임워크들이 자바스크립트로 작성되어 있고, 관련 문서도 풍부합니다. 이는 문제 해결 시 도움이 될 수 있습니다. ✔ 타입스크립트를 사용하는 경우: 타입 안정성 타입스크립트는 정적 타이핑을 지원하므로 개발자가 코드를 작성할 때 더 높은 수준의 타입 안정성을 확보할 수 있습니다. 이는 런타임 오류를 줄이.. 2023. 12. 22.
[중화동 맛집] '찌개달인' 동네에 김치찌개집 도장깨기 중화동 맛집 김치찌개 맛집 찌개달인 중화점 사람이 꽉차있는건 아니지만, 늘 손님이있다 = 맛이 평균이상이다. 돼지고기김치찌개가 근본일꺼같아서 주문했다 + 계란말이 밑반찬들.. 집밥느낌 너무좋다. 김치찌개가 나왔다.메인 메뉴다.. 고기도 통으로 김치도 통으로 직접 잘라야한다. 까라면 까야지 어카겠는가 난 고작 손님일뿐 저 손잡이를 얕잡아봤다가..큰일 날뻔했다. 손가락이 데어버렸다. 나란인간 다음날 보니 물집에 잡혔다 ㅠㅠ 계란말이다 큼직하다 최소 계란 5개 라면사리는 국룰이다. 한번쯤 가볼만 하지만 다시 생각나는 슈퍼 맛집은 아니다. 그래서 말이 적었다. 2023. 11. 1.
[React] 'react-player/lazy' 라이브러리 사용 연속 재생 가능한 비디오 플레이어 만들기 react-player/lazy 라이브러리 사용하여 연속 재생 및 옵션들 추가한 비디오 플레이어를 생성했다. 매우 간단 간결한 코드로 구현 가능하다. 😎구현 화면 😎구현 코드 npm i react-player/lazy import React, {useEffect, useState} from "react"; import ReactPlayer from 'react-player/lazy'; const Video = ({title, vodPlaylistId}) => { const [playIndex, setPlayIndex] = useState(0); const playList = [ {index:1, url: 'https://https://www.youtube.com/watch?v=UVRUKtHuZh0'}, .. 2023. 10. 31.
axios와 fetch의 차이, 장점, 단점 axios와 fetch는 둘 다 JavaScript에서 네트워크 요청을 처리하는 방법 중 하나로, 각각의 장점과 단점이 있습니다. axios: 장점 간편한 에러 핸들링: axios는 HTTP 요청 중에 발생하는 에러를 쉽게 처리할 수 있도록 해줍니다. 예를 들어, 요청 실패, 타임아웃, 네트워크 에러 등에 대한 처리가 간단합니다. 요청과 응답 인터셉터: axios는 요청과 응답을 가로채고 변형시키는 데 사용할 수 있는 인터셉터(Interceptor)를 제공합니다. 이를 통해 요청과 응답의 전/후 처리를 커스터마이즈할 수 있습니다. 자주 사용되는 설정: axios는 기본적인 설정을 가지고 있으며, JSON 파싱, 쿠키 설정, 헤더 설정 등을 쉽게 할 수 있습니다. 크로스 브라우징: axios는 다양한 브라.. 2023. 10. 31.
[PIP 모드 키기] 리액트로 Picture In Picture 창 켜보기 라이브러리 사용 PIP 모드란? 오른쪽 하단 작은 창을 의미한다. PIP = Picture In Picture (사진 속 사진?) 리액트에서 라이브러리 사용하여 간단히 구현 가능하다. 😎 install npm i react-use-pip 😎 import import usePictureInPicture from 'react-use-pip' 😎Script const videoRef = useRef(null) const { isPictureInPictureActive, //PIP 모드가 활성인지 비활성인지 여부 isPictureInPictureAvailable, //PIP 모드가 지원되고 활성화되었는지 여부 togglePictureInPicture, } = usePictureInPicture(videoRef) 😎HTML { .. 2023. 10. 31.
728x90