본문 바로가기
  • 삽질하는 자의 블로그
13. [ AWS 배포준비] - 바보같이 하나의 Repo 에 모든 것을 넣었다. 배포를 하려니 Git-Hub Repo 가 필요했다. 당연하게도 불안해하며 했던 것을 무시했던것이 잘못이었다. 클라이언트와 서버의 repo를 분리하여 따로따로 넣어 작업해야겠다. 2023. 3. 7.
12. [클라이언트] 서버와 통신하기 (2) Axios 의 적용 1. 폴더를 리팩토링하자. api 폴더에는 실제로 적용될 함수가 util 폴더에는 기본 axios 세팅이 들어갈 것이다. 2. axios 기본세팅 config 종류들은 이렇게나 많다. https://axios-http.com/kr/docs/req_config 요청 Config | Axios Docs 요청 Config 다음은 요청을 만드는 데 사용할 수 있는 config 옵션들 입니다. 오직 url만 필수입니다. method를 지정하지 않으면 GET방식이 기본값 입니다. { url: '/user', method: 'get', baseURL: 'https://some-domain. axios-http.com 기본적으로 필요한 것만 세팅한다. import axios from.. 2023. 3. 2.
11. [클라이언트] 서버와 통신하기 (1) Axios 의 설명 https://dive-into-frontend.tistory.com/200 8.[클라이언트] - Redux-Toolkit ( Typescript )을 이용해, DB의 값 가져오기 (Thunk 액션 생성자 ) DB 에 있는 값을, Store 로 직접 가져오는 Thunk 액션 생성자를 사용해본다. 준비물 typescript react-redux redux-toolkit 데이터베이스 서버 서버 1. Slice 의 생성 store 폴더 안에 slice 를 생성한다. < store / user-di dive-into-frontend.tistory.com Get 요청은 Action 생성자에서 사용해보았다. 현재 바꿔야 할 것은 두가지이다. 1. fetch 대신 Axios 를 사용해본다. 2. apis 폴더를 만들.. 2023. 3. 2.
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.
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.
4.[클라이언트] 캘린더 라이브러리, 풀 캘린더 사용하기 [ Fullcalendar ] https://github.com/fullcalendar/fullcalendar-examples/tree/main/react-typescript GitHub - fullcalendar/fullcalendar-examples: Simple example projects for FullCalendar Simple example projects for FullCalendar. Contribute to fullcalendar/fullcalendar-examples development by creating an account on GitHub. github.com 풀캘린더의 DOCS 를 들어가, React-Typescript 의 example 코드를 확인한다. DemoApp (풀캘린더 모든 무료기능 기본) ev.. 2023. 2. 14.
3.[클라이언트] 레이아웃 애니메이션 만들기 [ React-Transition-Group + 오류 ] 레이아웃에 애니메이션을 적용시킨다. 사용 import { CSSTransition } from "react-transition-group"; const LayoutHeader = () => { const [diaryDropdown, setDiaryDropdown] = useState(false); const toggleDiary = () => { setDiaryDropdown((prev) => !prev); }; return ( ... ... // 애니메이션 스타일링 .slide-top-to-bottom-enter { transform: scale(1, 0) translate(0, -150%); } .slide-top-to-bottom-e.. 2023. 2. 14.
2.[클라이언트] 마우스를 올릴 때 마다, 움직이는 버튼 [ animated.css ] 원리 1. state 를 마우스올릴때, 내릴때 변경시킨다. 2. state 에 따라, 삼항연산자로 애니메이션 스타일을 추가했다, 삭제했다 하며 변경한다. 필요 1. `${ }` 를 사용하여 모듈 css 스타일 넣기 2. `${ }` 를 사용하여, 글로벌 css 스타일 넣기 import "animate.css"; const HomePageMain = () => { const [bounce, setBounce] = useState(false); let bouncStyle = `${styles.diary__lock} ${bounce ? "animate__animated animate__jello" : ""}`;// 바운스스타일 return ( ... setBounce(true)}// 마우스 올리면 state .. 2023. 2. 14.

티스토리툴바