본문 바로가기

분류 전체보기542

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.
[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.
[NextJS 시작하기] npx create-next-app@latest 생성하고싶은 경로에서 npx create-next-app@latest (.)점은 현재경로에 설치하겠다. 라는 의미 프로젝트 명 작성후 추가적 옵션을 선택하면된다. 13버전 이후 도입된 app router 기능을 사용하기위해 app router 옵션을 선택해준다. 13버전 이전 - page router 13버전 이후 - app router 😎개발 서버실행 실행 명령어 npm run dev 기본적으로 :3000 포트에 실행된다 😎 배포서버 npm run build 하면 .next 폴더에 배포버전이 만들어진다. 2023. 10. 24.
[대시보드] amcharts 라이브러리 사용 리액트 누적 막대 그래프 만들기 어렵지 않게 누적 막대그래프 만드는 코드 입니다. amcharts 라이브러리를 임포트 해줍니다. import * as am5 from "@amcharts/amcharts5"; import * as am5xy from "@amcharts/amcharts5/xy"; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; 데이터 구조는 이러합니다. Arr가 아닌 Obj 구조 var data = [ {"date": "2023-10-01","A": 5,"B": 2,"C": 0,"D": 1,"F": 1,"G": 1}, {"date": "2023-10-02","A": 12,"B": 13,"C": 0,"D": 1,"F": 1,"G": 1}, {"da.. 2023. 10. 17.
728x90
반응형

티스토리툴바