본문 바로가기
  • 삽질하는 자의 블로그
10. [ Oauth, Node.js, React] Naver Oauth 로 로그인하기 - (2) 코드 0. 서버에 라우터 작업 만들때, CallbackURL 을 지정했다. 해당 하는 URL 이 정상적으로 받아질 수 있도록 서버에 라우터를 설정한다. 같은 위치에 받기 위해서 라우터를 설정했다. 1. 네이버 Node.js 연결방법 확인 및 버튼 구현 https://developers.naver.com/docs/login/api/api.md#node-js 네이버 로그인 API 명세 - LOGIN 네이버 로그인 API 명세 네이버 로그인 API는 네이버 로그인 인증 요청 API, 접근 토큰 발급/갱신/삭제 요청API로 구성되어 있습니다. 네이버 로그인 인증 요청 API는 여러분의 웹 또는 앱에 네이버 developers.naver.com 예제를 토대로 코드를 만들어본다. 1. 클라이언트 ID 와 PASSWORD.. 2023. 2. 24.
9. [ Oauth, Node.js, React] Naver Oauth 로 로그인하기 - (1) 이론 앞서서 Next.js 의 next-auth 라이브러리를 이용하여, 구글 OAuth 를 진행해보았다. 사실 너무나 간단히 따라하는 것 만으로도 구성할 수 있어서 너무나 편했다. 하지만 그에 따라 Oauth 가 어떻게 돌아가는지, 인증 방식이 어떻게 처리되는 것인지, 인증이 어떻게 처리되고 쿠키에 어떤 방식으로 넣는 것인지 전혀 알지 못하는 상태로 구현했다. 이번 Node.js 와 React를 사용한 OAuth를 구현해보며 OAuth의 구동 방식에 대하여 조금 더 자세히 알고 처리 할 수 있는 계기가 되었다. 1. OAuth 의 작동 방식에 대하여 사실 이게 가장 핵심이다. 1. 클라이언트는 Oauth 로 허가 코드를 요청한다. 2. Oauth 는 허가 코드를 Redirect URI 를 통해 응답한다. 이때.. 2023. 2. 23.
3. 깃허브의 버젼관리, 히스토리관리 with. gitinore 이제야 깃허브의 히스토리 관리의 중요성과 커밋메시지의 중요성을 깨달았다. 항상 마스터에만 커밋메시지를 대충대충 적으며, 히스토리는 신경쓰지 않았다. 이게 전부 나의 행보라는 것을 깨닫고, 히스토리 관리를 하기 시작했다. 0. git bash 의 사용 cmd 로 하기보단 git bash 를 이용하는 편이 편하다는 생각이 들었다. 더 자세하고 보기도 좋다. 1. 서브 브랜치의 생성 git branch -m progress progress 라는 이름의 서브 브랜치를 생성했다. 앞으로는 이곳에서 작업을 하고, 커밋메시지를 작성하고 PR 을 우선 날릴것이다. 커밋은 자주자주 할 수록 좋다. 대신 커밋 메시지를 잘 작성하여, 내가 어떤 작업을 했는지 분명하게 적도록 한다. "FIX" , "update" 처럼 적지 .. 2023. 2. 22.
8.[클라이언트] - Redux-Toolkit ( Typescript )을 이용해, DB의 값 가져오기 (Thunk 액션 생성자 ) DB 에 있는 값을, Store 로 직접 가져오는 Thunk 액션 생성자를 사용해본다. 준비물 typescript react-redux redux-toolkit 데이터베이스 서버 서버 1. Slice 의 생성 store 폴더 안에 slice 를 생성한다. import { createSlice, PayloadAction } from "@reduxjs/toolkit"; export interface TypeUserDiary {// 타입 지정 _id: string; // mongodb 자동 userEmail: string; diaryTitle: string; diaryContent: string; feeling: number; date: string; .. 2023. 2. 21.
7. [서버] 서버설정 (2) - Validation 아웃소싱과 DB 연결, 사용까지 https://dive-into-frontend.tistory.com/192 6. Validation 아웃소싱 기본적으로 Validation 은 서버의 전유물이다. 유저로부터 로직을 숨길수도, 함부로 유저가 코드를 만질 수 도 없으며, 최종적으로 요청을 받고 응답을 보내는 곳도 바로 서버이기 때문이다. Validati dive-into-frontend.tistory.com https://dive-into-frontend.tistory.com/193 7. module.exports 와 exports 하나의 메인 함수를 exports 할때, module.exports 를 사용했다. ex) module.exports = router; 파일 안에 여러개의 함수를 exports 하고 싶을때 하나씩 exports .. 2023. 2. 21.
6. [서버] 서버설정 (1) - 기본부터 라우터와 컨트롤러, 오류처리까지 https://dive-into-frontend.tistory.com/188 2. 기본 서버 환경 구성하기 시작하기에 앞서 필요한 여러가지 라이브러리를 설치해본다. 1. nodemon 설치 ( npm i nodemon ) 서버를 시작하고, 코드를 변경했을때 새로고쳐진 코드를 즉각적으로 반영해주는 라이브러리이다. nodemon dive-into-frontend.tistory.com https://dive-into-frontend.tistory.com/189 3. 라우터를 사용하여, 미들웨어를 설정하기 라우터는 express 의 핵심 기능중 하나이다. 라우터를 사용하여 클라이언트에서 요청하는 특정 URL 을 바탕으로, "필요한 미들웨어를 아웃소싱하고 하나로 뭉쳐" 기능적으로 유사한 미들웨어들을 dive-in.. 2023. 2. 21.
5.[클라이언트] - WEB SPEECH API 기반, 음성 인식 라이브러리 사용하기 react-speech-recognition 음성인식 라이브러리를 사용한다. install : npm i react-speech-recognition ts install : npm install --save @types/react-speech-recognition 기본 readme : https://www.npmjs.com/package/react-speech-recognition codepan example : https://codesandbox.io/s/react-speech-recognition-3tjwt?file=/src/Dictaphone.tsx:460-486 나는 타입스크립트이므로, 타입스크립트용을 설치한다. 구성 목표 1. [보이스모드, 일반 모드] 를 만든다. 2. [보이스모드.. 2023. 2. 21.
10. 클라이언트에서 서버에 요청하기 ( 클라이언트와 서버의 연결 ) Database 와 서버를 연결하고, Postman 을 통하여 확인했다. 1. 이제 실제로 클라이언트에서 요청하고 확인하도록 하자. 2. 리액트로 클라이언트를 생성해두었다. 클라이언트 측에서 fetch 로 요청을 해보았다. 정상적으로 GET 요청이 되는 것을 확인했다. 2023. 2. 18.
9. DB 연결 ( mongoDB ), 환경변수의 사용 Feat. POSTMAN,dotenv 이제 실제로 DB 를 연결해보도록하자. 우선 DB 에 연결하기 전에, DB에 연결하는 API Key 를 숨기기 위하여, .env 에 설정하여 코드를 숨기도록 하자. 1. env 설정 2. database 를 연결할 함수, 실제로 데이터교환을 할 함수를 생성한다. dotenv 를 통해, 환경변수를 사용하여 URL 을 가져오고, 해당 URL 로 연결한다. const { MongoClient } = require("mongodb"); require("dotenv").config();// dotenv 를 사용할 수 있도록 require 한다. const url = process.env.MONGODB_URL;// 환경변수에서 온 URL let database; co.. 2023. 2. 18.
8. bodyparser 의 파싱과, 컨트롤러에서 GET 과 POST 에 대한 응답로직 결과적으로 node.js 로 들어오는 요청과 응답이 어떻게 이루어지는지 확인해보자. 1. index.js 1) 들어오는 요청이, 다른 오리진이라도 상호작용 할 수 있게, cors 를 미들웨어로 추가한다. 2) 들어오는 요청에 대해 bodyparser 미들웨어를 통해 자바스크립트코드로 변환한다. 3) 들어오는 요청에 알맞는 경로의 라우터의 미들웨어로 연결시켜준다. 4) 잘못된 요청에 대해 경로 오류와, 에러에 대해 처리하는 미들웨어에 의해 처리된다. const express = require("express"); const cors = require("cors"); const bodyParser = require("body-parser"); const diaryRouter = req.. 2023. 2. 18.
7. module.exports 와 exports 하나의 메인 함수를 exports 할때, module.exports 를 사용했다. ex) module.exports = router; 파일 안에 여러개의 함수를 exports 하고 싶을때 하나씩 exports 를 써서 export 했다. ex) exports.diaryValidation = diaryValidation exports.postUserDiary = postUserDiary exports.getUserDiary = getUserDiary ... 1. "사실, 여러개의 각각 export 도 module.exports 를 사용 할 수 있고 이게 훨씬 깔끔하다." module.exports = { diaryValidation:diaryValidation, postUserDiary:postUserDi.. 2023. 2. 18.
6. Validation 아웃소싱 기본적으로 Validation 은 서버의 전유물이다. 유저로부터 로직을 숨길수도, 함부로 유저가 코드를 만질 수 도 없으며, 최종적으로 요청을 받고 응답을 보내는 곳도 바로 서버이기 때문이다. Validation 로직을 처리하기 위해서는 라이브러리와 미들웨어를 사용하거나 자체 로직을 컨트롤러의 로직에 넣어서 사용하는 경우가 있다. 나는 후자를 선호한다. 따라서, Valiadation 로직을 작성해 아웃소싱하고, 컨트롤러의 로직에 넣어 사용해보도록 하자. 1. helper 폴더를 만들어, validation 코드를 만든다. const diaryValidation = (userInput) => { if ( !userInput.userEmail.inc.. 2023. 2. 18.

티스토리툴바