Next
-
cloudinary API를 통해 이미지 업로드 해보기 (feat. Next.js)FrontEnd/Next.js 2024. 9. 6. 11:26
이미지를 업로드 하기 위해 cloudinary 라는 CDN 을 사용해당 api에서는 위젯과 같은 컴포넌트를 제공하지만 ui가 딱히 예쁘다는 생각이 들진 않아서 따로 사용하지 않고 upload api를 통해서 이미지 파일을 올리기로 함. ( 문서 링크 )end point는 아래와 같음https://api.cloudinary.com/v1_1/:cloud_name/:action이것을 통해 직접 입력한 값은 const endPoint = `https://api.cloudinary.com/v1_1/${process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload`;https://www.postman.com/cloudinaryteam/programmable-media/..
-
next.js 에 kakao map 띄우기 (feat. react-kakao-maps-sdk)FrontEnd/Next.js 2024. 2. 6. 15:31
카카오 개발자 센터에 들어가보면 api key (자바스크립트 키) 를 발급 후 아래 코드를 삽입하라고 한다. "API를 로딩하는 스크립트 태그는 HTML파일안의 head, body 등 어떠한 위치에 넣어도 상관없습니다. 하지만, 반드시 실행 코드보다 먼저 선언되어야 합니다." 리액트 같은 경우에는 intex.html에 작성하면 되고 next.js 같은 경우 layout 같은 곳에 Script 태그를 불러와 삽입하면 된다. 하지만 이 같은 번거로운 작업을 JaeSeoKim 님이 배포하신 라이브러리를 사용하면 비교적 간단하게 처리 할 수 있다. next.js 같은 경우 example에 따르면 .env 에 아래와 같이 작성해두면 script 문을 따로 작성하는 대신 useKakaoLoader를 통해 api 키..
-
[React.js] video 태그에 동적 값 할당FrontEnd/React.js 2022. 12. 29. 17:14
const Clip= (url:string) =>{ return ( ) } 요렇게 선언했는데 이 후 url 값을 업데이트 해주어도 처음 할당된 영상만 보여지는 상황이 생겼다. 하고 싶은건 버튼 클릭시 url 값이 업데이트 되어 보여지는 영상도 바뀌는 것 이에 대한 해결책으로 video 태그에 키 값을 주거나 ref를 주는 것. const Clip= ( url:string ) => { const videoRef = useRef(); useEffect(() => { videoRef.current?.load(); }, [url]); return ( ); } const Clip=( url:string )=> { return ( ); } 참고 : https://stackoverflow.com/questions/4..