반응형 개발 Study49 [GraphQL] GraphQL 사용법 - (4) ThunderClient로 API 테스트하기 ThunderClient API Test 1. ThunderClient API를 보다 쉽게 테스트하기 위해 VSCode에 Extension으로 추천하는 ThunderClient를 설치한다. 기존에 Postman을 썼었는데 cloud에 공유되는게 꺼려지고, 뭔가 무겁기때문에 따로 프로그램을 키거나 접속하지 않아도 로컬에서 쉽게 보낼 수 있는 방법을 찾게되었다. RestAPI 뿐만 아니라 GraphQL도 보낼 수 있어서 Collection을 만들고 그 하위에 폴더를 생성하여 관련 모델 별로 분류하여 API Request를 만들었다. 2. 사용법 2-1. 환경 변수 설정 Env를 클릭한 후 filter 우측에 Menu를 클릭한다. 새 환경 메뉴를 선택 후 환경 이름을 작성한다. (Ex.SsamJob) 환경 변.. 2022. 10. 4. [GraphQL] GraphQL 사용법 - (3) Sequelize 사용하기(1:1, ForeignKey, Join) Sequelize 테이블 연결 및 외래키 사용 1. Sequelize 테이블 관계 테이블 관계는 1:1, 1:N, M:N 이 있는데 foreignkey를 이용하여 서로 관계를 맺으며 join을 통해 연결된 테이블의 정보까지 불러올 수 있다. 참조 : https://sequelize.org/docs/v6/core-concepts/assocs/ Associations | Sequelize Sequelize supports the standard associations: One-To-One, One-To-Many and Many-To-Many. sequelize.org A.hasOne(B, { /* options */ }); // A는 한 개의 B를 갖는다. A : B = 1 : 1 A.belongsTo(B,.. 2022. 9. 30. [GraphQL] GraphQL 사용법 - (2) Sequelize + MSSQL 연동 Sequelize + MSSQL 1. Sequelize란? Node 에서 자주 사용되는 ORM 라이브러리다. ORM(Object-Relational Mapping)이란 관계형 데이터베이스와 자바스크립트 객체를 서로 연결해주는 도구로 좀 더 DB작업을 쉽게 처리할 수 있도록 도와준다. 타입스크립트를 이용하여 구현할 거기 때문에 sequelize-typescript를 설치한다. $npm install sequelize-typescript 2. sequelize 연결 설정 DB 정보를 저장할 .env파일을 root에 생성하고 DB_HOST, DB_PORT 등 사용할 변수들을 선언해 놓고 값을 입력해 놓으면, process.env.[변수명] 으로 접근 가능하다. 여러 파일들 에서도 하나의 instance에 접근.. 2022. 9. 29. [GraphQL] GraphQL 사용법 - (1) Schema 생성 후 ApolloServer 연동하기 GraphQL + ApolloServer 1. GraphQL 타입 선언 (Schema 만들기) 1-1. Query 타입 Query 타입은 보통 fetch data를 하여 원하는 정보를 얻어올 때 쓰인다. schema.graphql을 만든 후 Schema에 Query 타입을 선언 하고 사용할 resolver들을 선언해준다. 상단에 #import를 이용하여 다른 graphql 파일로 부터 선언된 타입들을 불러올 수 있다. 전체 멤버를 불러오는 allMembers와 id를 이용하여 해당 멤버를 불러오는 getMemberById를 선언하였다. #import Member from "member.graphql" #import MemberResponse from "response.graphql" type Query .. 2022. 9. 27. [GraphQL] GraphQL과 REST GraphQL을 사용하는 이유 1. GraphQL이란? GraphQL은 2012년도에 페이스북에 의해 고안된 API용 쿼리 언어이자 쿼리를 수행하기 위한 런타임이다. 2015년에 오픈소스로 공개되었다. GraphQL은 REST 및 웹서비스 아키텍처를 대체할 수 있다. 클라이언트가 필요한 데이터를 명확하게 요청할 수 있는 기능을 제공하며, 클라이언트의 요청 구조에 맞게 서버 측에서도 같은 구조로 응답한다. 이러한 구조는 기존에 REST API가 지녔던 OverFetching(불필요한 데이터를 받는 것)과 UnderFetching(필요한 데이터를 받지 못하는 것)의 단점을 보완할 수 있다. 2. GraphQL 구성 요소 2-1. Server측 구성 요소 Query(쿼리) : 쿼리는 GraphQL 서버와 통신.. 2022. 9. 21. [Next.js/Typescript] Next-auth 소셜 로그인 연동하기 소셜 로그인 연동(Kakao버전) 1. Next-auth 설치하기 session 관리를 위해서 next-auth라는 라이브러리로 쉽게 소셜 로그인을 구현할 수 있다고 한다. $npm install --save next-auth https://next-auth.js.org/getting-started/typescript TypeScript | NextAuth.js NextAuth.js has its own type definitions to use in your TypeScript projects safely. Even if you don't use TypeScript, IDEs like VSCode will pick this up to provide you with a better developer ex.. 2022. 9. 15. [Next.js] Kakao 로그인 API 발급 받기 Kakao 로그인 API 발급 받는 법 1. 가입하기 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 위 developers 사이트에 들어가서 kakao 계정으로 가입한다. 2. 웹 어플리케이션 추가 내 어플리케이션을 클릭한 후 웹 어플리케이션 추가하기를 클릭한다. 앱이름 입력하고 사업자명에는 그냥 내이름을 입력한 후 저장했다. 생성된 내 앱을 클릭해서 들어간다. 3. 앱 설정하기 요약 정보를 보면 내 애플리케이션에 할당된 키 값 들을 볼 수 있다. 플랫폼에 웹 사이트 도메인을 추가한다. 로그.. 2022. 9. 14. [React/NextJS] NextJS 시작하기 (2) - fetch, redirect/rewrite, router NextJS 시작하기 Fetch Data API통신을 통해서 무료 movie data 사이트로 부터 정보를 json 값으로 얻어 온다. 얻어온 값으 각각의 카드 형태로 만들어 보여주는 예제다. CSR(Client-Side-Rendering) 버전 const API_KEY = "10923b261ba94d897ac6b81148314a3f"; export default function Home() { const [movies, setMovies] = useState(); useEffect(() => { (async () => { const { results } = await ( await fetch( `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY.. 2022. 9. 6. [React/NextJS] NextJS 시작하기 (1) - NextJS vs ReactJS / CSR vs SSR NextJS 시작하기 NextJS란? NextJS란 React 프레임워크 중 하나로 React의 CSR(Client-Side-Rendering) 의 단점을 보완하여 SSR(Server-Side-Rendering)도 가능하게 만들었다. 기본 원리로는 브라우저로 서버에서 렌더링된 html을 먼저 보내서 SEO(검색 엔진 최적화)에 용이하게 한 후, JS를 다운로드하여 기존 React처럼 사용가능하게 한다. 사용자 측에선 렌더링된 html 화면까지는 바로 보이고 그 다음 동작하는 JS 관련 부분은 다운로드 후 사용할 수 있게 된다. 따라서 로딩이 길 경우 빈 화면만 보이는 (CSR)방식과는 달리 HTML이 렌더링된 화면 만으로도 사용자는 미리 정보를 확인할 수 있다. Next에는 React에서 기존에 만들어 .. 2022. 9. 5. 이전 1 2 3 4 5 6 다음 반응형
