728x90
카카오 로그인 토큰 받기 문제 카카오 로그인 중 2단계에 해당하는 토큰을 받아오는 과정에서 axios로는 정상적으로 받아오는데 fetch로는 받아오지 못하는 문제가 발생했다. 처음에 fetch를 사용했던 방법은 const url = `https://kauth.kakao.com/oauth/token` const body = { grant_type: 'authorization_code', client_id: process.env.REST_API as string, redirect_uri: process.env.REDIRECT as string, code, } const result = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'applic..
목차 1. 브라우저와 노드의 통신 2. 화면 구성 3. 코드 작성하기 이전 코드 https://github.com/100space/2304/tree/main/0504 GitHub - 100space/2304 Contribute to 100space/2304 development by creating an account on GitHub. github.com 1. 브라우저와 노드의 통신 브라우저와 노드 1개인 상황에서의 통신을 구현하는 코드를 작성할 것이다. 간단한 흐름을 보기 위한 코드이기 때문에 nunjucks를 이용해서 화면을 구성할 예정이고, CSS는 제외했다. 디렉토리 구조도 잘 나누어야 하지만, wallet_front 디렉토리를 이용하여 front 서버를 이용해서 화면을 그릴 것이다. 브라우저는..
GitHub https://github.com/100space/friday_local GitHub - 100space/friday_local Contribute to 100space/friday_local development by creating an account on GitHub. github.com STEP 1. 회원가입 및 로그인 구현하는 목표가 주어졌고, 협업을 위한 기본 라우터를 설계하고 문서화하는 작업을 함. 라우터를 설계하면서 DB 테이블도 설계한 후에 문서로 남겨놓았다. 흔히 api document 라고 하는 것을 해보려 했는데 처음해보는 거라 어떻게 얼마나 적어둬야 하는 몰라서 간단하게만 적어봤다. 나는 front-end 영역을 맡았다. STEP 2. 메인페이지 구성 및 gnb를 만들..
jQuery를 이용하지 않음. 오늘 내가 배운 것 1. 비동기방식 통신이란? 2. 프론트엔드에서 데이터 요청하기 AJAX fetch axios 비동기방식 통신이란? 동기식 방식은 요청을 보낸 후 응답을 받아야 다음 작업을 할 수 있지만 비동기 방식은 요청을 보내고 응답을 기다리지 않고 다른 일을 할 수 있는 상태이다. 그래서 이를 이용하면 웹 페이지를 새로고침 없이 원하는 데이터를 이용하여 웹 페이지의 구성을 바꿔 줄 수 있다. 프론트엔드에서 데이터 요청하기 지금 코드는 front 서버와 back 서버를 분리한 상태이고, MySQL을 이용하여 데이터베이스를 만든 후 데이터가 있는 상태에서 그 값을 back 서버의 라우터를 이용하여 불러오는 과정이다. front와 back 서버가 분리되어 있기 때문에 co..