728x90 반응형 Front-end100 12 - 3.63 의 비밀을 알고 싶다. 크롬 F12 console에서 12 - 3.63을 계산하면 왜 때문에 8.370000000000001 값이 나올까 알고 싶다. 2024. 4. 19. Ref - React Hooks 언제 사용해야할까? React Hooks > 함수형 방식 > useRef hook DOM요소에 접근하기 위해 사용한다. useState를 사용하지 않고, Ref만을 사용하여 로직을 구성 할수있다. Ref 는 - 값의 변경이나 상태관리가 이루어질 필요가 없을때, - Dom 요소로 값을 단순히 읽을 경우 에 사용한다. 2024. 3. 15. [Nextjs] client side 에서 useEffect 가 2번 실행 (?) Next.js에서 useEffect가 두 번 실행되는 이유는 React의 strictMode 때문일 수 있다. strictMode는 기본적으로 true로 설정되어 있다. next.config 파일 설정을 변경해줘야한다. const nextConfig = { reactStrictMode: false, } reactStrictMode 란 ? 우리가 만드는 application 내에서 문제가 일어날 수 있는 부분에 대한 경고를 알려주는 기능이다. 2024. 3. 14. React를 자바스크립트, 타입스크립트 중 무엇으로 사용하는게 좋을까? 리액트(React)를 사용할 때 자바스크립트 또는 타입스크립트를 선택하는 것은 프로젝트의 요구 사항 및 팀의 선호도에 따라 다를 수 있다. 여러 가지 요소를 고려하여 결정할 수 있다. ✔자바스크립트를 사용하는 경우: 간편성과 빠른 개발 자바스크립트는 타입스크립트에 비해 문법이 더 자유롭고 유연하며, 초기 설정이 간단합니다. 더 빠른 개발을 원하는 경우 선택할 수 있습니다. 생태계와 문서화 많은 라이브러리와 프레임워크들이 자바스크립트로 작성되어 있고, 관련 문서도 풍부합니다. 이는 문제 해결 시 도움이 될 수 있습니다. ✔ 타입스크립트를 사용하는 경우: 타입 안정성 타입스크립트는 정적 타이핑을 지원하므로 개발자가 코드를 작성할 때 더 높은 수준의 타입 안정성을 확보할 수 있습니다. 이는 런타임 오류를 줄이.. 2023. 12. 22. [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. [NextJs 시작하기] URL 생성 규칙 ✔ 컴포넌트의 기본 구조 export default function Home(){ return 'home'; } ✔ 기억해야할 규칙 component 를 export default 해야한다는것 (단 component 의 이름은 중요하지 않다.) URL 의 이름은 파일명이 된다. React 를 Import 할 필요없다.* (useState useEfftect같은 react method 를 쓰고 싶다면 임포트 해야한다.) 2023. 10. 24. [NextJS 시작하기] 오토 라우팅 (?) version 13이후 라우팅 앱을 생성했을때, 기본적인 폴더 구조는 이러하다. (pages 폴더 제외) 자동 라우팅 가능은 pages 폴더에 생성하면 된다고 공홈에서 설명해주었으나 local:3000에서 라우팅 되지않았다. ✔ 폴더구조 2023년 6월 기준 NextJS 13부터는 pages 폴더가 자동생성 되지 않고, app 폴더가 생성된다. 이전 버전 : root/pages/about.js => /about 13부터 : root/app/about/page.js => /about 13버전 이후부터는 위처럼 라우팅 할수있다. 1. pages폴더 내에 있는 파일이름이 접속할 수 있는 URL의 이름이 된다. 2. pages폴더 내에 있는 파일에는 반드시 export default가 있어야 한다. 3. 404 error page를 next.. 2023. 10. 24. 이전 1 2 3 4 ··· 12 다음 728x90 반응형
