1. 네이버 개발자 센터 네이버 개발자 센터에서 앱 등록 후 Client 정보를 발급 받는다. NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 1-1) 애플리케이션 등록 상단 탭 Application > 애플리케이션 등록 클릭 웹 서비스 url이 아직 없는 경우 localhost를 등록한다. 1-2) Client 정보 등록 후 애플리케이션 정보로 자동으로 이동하게 되는데 해당 ID, Secret은 네이버 API를 사용하기 위해 필요하다. 2. 네이버 뉴스 API 검색 > 뉴스 - S..

IFrame Player API 유튜브 동영상을 재생하기 위해서는 유튜브에서 제공하는 Iframe을 사용해야 한다. IFrame API를 사용하면 동영상 플레이어를 직접 제어할 수 있다. * 공식 문서 iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube IFrame Player API | Google Developers Embed a YouTube player in your application. developers.google.com YoTube 동영상 데이터 불러오기 가져온 데이터의 id값으로 동영상을 재생 2023.01.11 - [React] - [Youtube API] 유튜브 API 동영상 데이터 가져오는 방법 1. 라이브러리 설치 공식 문서를 보고 사용해도 되..

유튜브 영상을 가져오기 위해서는 유튜브 API를 사용해야 한다. 1. Google Cloud Platform 프로젝트 등록 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 1-1) 프로젝트 생성 1-2) YouTube Data API v3 사용 검색 > YouTube Data API v3 클릭 > 사용 클릭 1-3) API Key 생성 사용자 인증 정보 > 사용자 인증 정보 만들기 > API 키 1-4) API Key 제한 설정 (선택) 무단 사용 방지를 위해 Key 수정 키제한 > YouTube Data API v3 선택 2. YouTube API 통해 동영상 리스트 가져오기 Videos: list | YouTube Data API | Goo..

NextJS에서는 기본적으로 라우트 설정이 되어있지 않는 페이지에 대해 서버사이드 랜더링을 하지 않게 아래와 같은 404 오류 페이지를 보여주도록 되어있다. * 공식 문서 * https://nextjs.org/docs/advanced-features/custom-error-page 1. 404 페이지 커스텀 방법 기존 오류 페이지를 사용하지 않기 위해서는 pages폴더에 404 파일을 생성한다. ( 404.tsx ) export default function NotFound(){ return "What are u doing here" } 원하는 화면으로 커스텀 404 파일은 기본적으로 빌드 타임에 만들어 지기 때문에 데이터를 불러오는 작업이 있다면 getStaticProps를 통해 가져와야한다. 2. 5..

NextJS에서는 img태그가 아닌 next에서 import 해 온 next/image의 Image태그를 사용해야 한다. NextJS에서 이미지를 최적화시켜주기 때문이다. * 공식 문서 * https://nextjs.org/docs/api-reference/next/image 1. 장점 Loader을 통해서 커스터마이징 가능 자동으로 Lazy Loading을 통해 이미지 최적화를 지원해주지만, pre loading을 원하는 경우 취소 가능 자동 스켈레톤 UI(placeholder 통해서), CLS 방지도 가능 이미지 캐싱도 자동으로 해주고 expiration time 설정도 가능 next.config.js를 통해 지정된 곳에서만 이미지를 받아오며 악의적인 유저로부터 앱을 보호 가능 2. 사용 방법 2-1..

EVN 란? 개발자만 알아야 하는 민감한 정보(Port, DB, API KEY 등)나 Git, 오픈소스에 올리면 안 되는 값들이 있다. 이때 환경변수 파일을 외부에 만들어 저장시켜 소스코드 내에 하드 코딩하지 않고 사용할 수 있다. 1. EVN 파일 사용 방법 1-1) 최상위 경로(root)에서 .evn 파일 생성 환경 변수로 지정할 값 작성 리액트(create-react-app)일 경우 변수명 REACT_APP_으로 시작한다. ( ex) REACT_APP_API_KEY ) NextJS의 경우 NEXT_PUBLIC_으로 시작한다. 1-2) .gitignore 설정 추가 .evn파일을 등록해주어야 Git에 Push 할 때, 파일이 올라가지 않는다. 1-3) 환경 변수 사용 const API_KEY = pr..

데이터가 유효할 때만 화면이 보이는 게 좋은가 또는 Loading화면을 보여준 다음에 데이터가 받는 게 좋을지 선택하여 SSR 방법을 사용할지 redirect, rewrites을 사용할지 선택하면 된다. * Source Code * https://github.com/kangilbin/React.js/blob/master/nextjs-study/next.config.js 1. redirect 사용 방법 요청 URL을 임의의 URL 변경시켜 준다. parameter 값은 확인 가능하다. ( next.config.js ) const { redirect } = require("next/dist/server/api-utils"); const nextConfig = { reactStrictMode: true, sw..

1. Style JSX 스타일을 꾸미는 방법 import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } 컴포넌트에 CSS를 적용시켜준다. global : 모든 컴포넌트에 CSS 적용한다. - NextJS는 하나의 큰 앱이 아니라 각각의 나누어진 페이지이기 때문에 하나의 페이지에 작성한 global CSS는 다른 페이지에 영향일 끼칠 수 없지만, 컴포넌트로 하위에 넣게 되면 적용된다. ( _app.tsx에 넣어서 전체 페이지에 적용) 2. Custom App Component ( 템플..

* NextJS 프로젝트 설치 및 실행 * https://cocococo.tistory.com/42 * Source Code * https://github.com/kangilbin/React.js/tree/master/nextjs-study 1. Routes pages 폴더 안에 새로운 page 파일을 넣게 되면 자동으로 이동할 수 있다. ( about.tsx ) export default function Potato() { return "about"; } export default로 만들어 주어야한다. 함수명은 상관없다. 파일 이름이 그대로 url로 들어간다. index 파일은 메인 홈페이와 연결되어있다. http://localhost:3000 => index 페이지 2. Routing import L..

NextJS Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다 * Pre-Rendering, SSR, CSR 개념 * https://cocococo.tistory.com/41 1. NextJS 실행 과정 1) reactJS를 백엔드에서 동작시켜서 페이지를 미리 만들어 컴포넌트들을 렌더링 시킨다. 2) 렌더링이 끝났을 때 HTML이 되고 HTML를 페이지 소스 코드에 넣어준다. 3) 사용자는 자바스크립트와 reactJS가 로딩되지 않더라도 콘텐츠를 볼 수 있다. 4) react가 로딩이 끝났을 때 기본적으로 존재하는 것들과 연결시켜주어 react ..