본문 바로가기
반응형

전체 글75

[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.
[LeetCode] 9. Palindrome Number (Easy) https://leetcode.com/problems/palindrome-number/ Palindrome Number - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com Palindrome Number 란? 회문(回文) 또는 팰린드롬(palindrome)은 거꾸로 읽어도 제대로 읽는 것과 같은 문장이나 낱말, 숫자, 문자열(sequence of characters) 등이다. 보통 낱말 사이에 있는 띄어쓰기나 문장 부호는 무시한다. 문제 Given an integ.. 2022. 9. 8.
[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.
[맛집/와인바] 석촌 송리단길 네추럴 와인바 <볼우물> 네추럴 와인바 안주가 내스타일 간만에 와인좀 먹어보자며 친구랑 만나서 가게된 석촌 맛집. Noz(노즈) 라는 네추럴 와인바도 여러번 가보고 만족했던 터라 새로 생겼다고하는 볼우물도 가보고 싶었다. 석촌하면 늘 사사노하나 글로리식당만 갔었는데 ㅎㅎ 예약은 인스타그램으로 해야했고, 수비드 돼지안심 요리는 미리 주문해둬야(최소 3시간전) 먹을 수 있다. https://www.instagram.com/bolwoomul_bar/ https://naver.me/F7CIxexx 볼우물 : 네이버 방문자리뷰 113 · 블로그리뷰 128 m.place.naver.com 케이퍼와 김부각의 조화가 좋았던 서양식 육회!! 김부각도 추가요금을 내면 리필이 가능하다. 와인 마실 때 브리치즈구이를 꼭 시키곤 하는데... 여긴 견.. 2022. 9. 2.
[Error] NextJS 에러 처리 - Parsing error : Cannot find module 'Next/babel' NextJS 프로젝트 생성 시 'Next/babel' 에러 처리 NomadCoder의 강의를 들으면서 NextJS 프로젝트를 만들었는데 실행은 잘 되지만 js의 모듈 임포트 부분 마다 아래와 같은 에러가 뜨는게 너무 거슬렸다. Parsing error : Cannot find module 'Next/babel' 그래서 찾아보니 다음과 같은 방법으로 없앨 수 있었다. NextJS 프로젝트 폴더의 루트에 .eslintrc.json 파일을 열어 아래와 같이 수정하면 없앨 수 있다. extends에 next/babel을 추가시키면 Parsing error가 사라진 것을 확인할 수 있다. 2022. 9. 1.
[책 추천/리뷰] 역사의 쓸모 - 과거로부터 현재의 문제 해결 법 찾아보기 1. 책 소개 이 책은 그런 저자가 역사에서 찾은 자유롭고 떳떳한 삶을 위한 22가지 통찰을 통해 역사로부터 무엇을 배워야 하는지 친절하게 알려주는 책으로, 한국사와 세계사를 넘나들며 우리 삶에 도움이 되는 키워드를 뽑아내고, 자신만의 궤적을 만들며 삶을 살아간 이들을 멘토로 소환한다. 2. 읽게 된 계기 지인의 추천도서 중 하나로 내 독서리스트에 올라가 있던 책인데 마냥 어렵게만 느껴졌던 인문학 독서의 시작을 끊을 수 있도록 도와줬다. 워낙 평소에도 역사에 관심이 많았고 위인전을 몰아서 읽던 초등학생 시절이 있었는데 언제부턴가 멀리했던 역사를 가볍게 즐길 수 있을 것 같았다. 사실 근래 본 영화 '한산'의 영향도 컸다. 마침 이순신에 대한 이야기도 글에 나오는데 영화를 본 사람들은 한번쯤 읽어봐도 좋을.. 2022. 9. 1.
반응형

티스토리툴바