Programming

Google Drive API란? Google 드라이브의 저장공간을, 나의 앱에서 활용할 수 있도록 해주는 API Google Drive 사용자의 데이터를 저장할 하드웨어 공간을 빌려주는 Google 서비스 Google Drive API 나의 앱에서 Google Drive의 저장공간을 활용할 수 있게 해주는 REST API Google Drive App API를 이용해, Google Drive의 저장공간을 다루는 나의 앱 OAuth2.0 Google Drive API가 사람들에게 데이터를 활용할 동의를 구하고, ( 권한 요청 ) 동의 여부에 따라, 나의 앱에서 사람들의 데이터를 활용할 수 있게 해주는 기능 Google Drive API의 기능 드라이브 파일 다운로드 드라이브에 파일 업로드 드라이브에 저장..

프로토콜이란? 우리가 데이터를 주고 받는데 사용되는 규칙

next-auth란? next.js에서, 소셜 로그인 기능을 쉽게 추가해주는 Node.js 라이브러리 NextAuth.js Authentication for Next.js next-auth.js.org next-auth 사용법 // Next.js 프로젝트의 pages/api/auth/[...nextauth].js import NextAuth from 'next-auth' import AppleProvider from 'next-auth/providers/apple' import FacebookProvider from 'next-auth/providers/facebook' import GoogleProvider from 'next-auth/providers/google' import EmailProvide..

스트림이란? 데이터의 흐름 ( 계속 들어오는 데이터 ) 필요성 데이터가 전부 받아질때까지 기다리지않고, 먼저 들어온 데이터부터 관리할 수 있도록 할 수 있다. createReadStream ( 읽기스트림 - EventEmitter ) 이벤트 종류 data 파일의 일부를 반환 end 읽기가 완료되었을때 호출 error 에러가 발생되었을때 호출 var fs = require('fs'); var stream = fs.createReadStream('./bigfile'); stream

ref에 기능추가하기 // useRef const idRef = useRef(null); const { ref, ...rest } = register("id"); // 기능추가 useEffect(() => { if (idRef.current !== null) { console.log(idRef.current) } }, [idRef]); // Html { ref(e); idRef.current = e; }} /> tab키 인식해서, 다음 input focus하기 // setFocus const { register, setFocus, ...생략 } = useForm(); const handleOnKey = (e) => { if(e.key === "Tab"){ // 기존 tab기능 제거 e.preventDef..

degit 이란? npm으로 git 저장소를 쉽게 다운로드 받을 수 있도록 만든 Node.js 패키지 degit 설치 npm i degit degit 사용법 // 설치없이 간단 사용 npx degit // 유저와, 저장소이름으로 받아오기 degit /

Google People API 구글 사용자 정보를 가져와주는 API Google OAuth 2.0 자신의 정보에 대한 접근 권한을 주고 받는 프로토콜 [ OAuth ] 지정된 사용자를 대신해, API를 호출하는 방식 사용자는 앱을 방문해, 자신의 Google 계정으로 로그인하고, 특정 정보에 접근 할 수 있도록 승인해줌 [ API KEY ] API키를 사용하여, 클라이언트 or 서버에서 서비스에 접근할 수 있다. 제한된 범위의 서비스에서만 사용할 수 있다 [ Application default credentials ] 로컬 개발용 Google Cloud SDK 또는, Google Cloud Platform에 배포된 앱용 GCE 메타데이터 서버를 사용하여 Google API에 접근할 수 있다. [ Ser..

Next.js는 데이터를 불러오는 타이밍을 다양하게 지정할 수 있다. Next.js는 기본적으로 React.js 위에서 작동하는 프레임워크 이므로, 따로 지정하지 않는다면 CSR(Client Side Rendering) 방식으로 작동한다. 아래의 함수를 Next.js의 컴포넌트 아래에 작성해주면, 데이터를 불러오는 타이밍을 바꿀 수 있다! getServerSideProps - 서버측에서 데이터를 불러온 다음, 클라이언트(브라우저)에 전달한다. getStaticProps - Next.js에서 정적 사이트를 만든후, 클라이언트에 전달한다. getServerSideProps [ 필요성 ] Next.js의 page가 렌더링 되기 전에, 미리 데이터를 완벽하게 불러오고 싶을때 [ 작동방식 ] Next.js의 페이..

서버, 클라이언트란? 서버 - 서비스를 요청받아, 제공하는 역할을 하는 부분 클라이언트 - 서비스를 요청하고, 제공받는 역할을 하는 부분 서버와 클라이언트 나누어 보기 MySQL - GraphQL - React - 사용자 1. 사용자가 React에게 데이터 요청 - ( C : 사용자, S : React ) 2. React가 사용자 요청에 맞춰 GraphQL 데이터 요청 - ( C : React, S : GraphQL ) 3. GraphQL이 React 요청에 맞춰 MySQL 데이터 요청 - ( C : GraphQL, S : MySQL ) 위의 경우에서 알 수 있듯이, 서버와 클라이언트는 상대적인 개념으로 어떤 데이터 송수신을 기준으로 잡느냐에 따라 달라진다. ( 서버없이 클라이언트가 존재할 수 없고, 클..