본문 바로가기
  • 삽질하는 자의 블로그
10. [오류] 배포와 Oauth 배포를 했더니 Oauth 가 먹히지 않는다. 또다시 401 오류다. 문제는 둘중 하나일것이다. 1. 구글 어카운트에서 URI 등록을 하지 않았거나 2. 환경변수 세팅이 잘못되어, 등록된 Oauth 에 승인된 클라이언트 ID, PASSWORD 가 잘못되었던가 URI 는 분명 등록 했으니 1번은 제외 그렇다면 환경변수의 문제가 있겠다. 현재 이 프로젝트는 .env 를 통해, 환경변수를 등록하고 사용했다. 하지만 분명히 기억하건데, next.config.js 를 통해 환경변수를 등록하는 것이 가장 올바른 길 임을 알고있다. 결국 .env 를 버리고 next.config.js 에 적절한 phase 를 넣어 코드를 집어넣었다. const { PHASE_DEVELOPMENT_SERVER } = require("ne.. 2023. 2. 9.
9. 이번 프로젝트의 전체적인 로직에 관하여 이번 프로젝트는 1. 심리검사 2. 검사후 결과보기버튼 을 누른다. 3. 결과보기버튼은 URL 에 "결과ID" 를 담아 동적페이지인 [Result] 페이지로 이동한다. 4. Result 페이지는 "동적페이지"로, URL 정보에 "결과ID" 를 담아, 쿼리로 받을 수 있다. 5. 쿼리로 받은 "결과ID" 를 통해, 결과가 담겨있는 "DB에 API 요청"을 통해 테스트결과를 가져온다. 6. 결과를 확인했다면, "저장 후 개 페이지로 이동" 버튼을 누를 수 있다. (로그인되어있다면) 7. 버튼을 누르면, DB에 결과값을 저장과 동시에 "로컬스토리지" 에 값이 저장되고, 개 페이지로 이동한다. 8. 개 페이지 에서는 로컬스토리지에 담긴, 유저의 TEST결과값을 토대로 개의 성격을 매치시켜준다. 9. 매치된 개들.. 2023. 2. 6.
8. MongDB의 쿼리조건 : [ 특정 string 포함 조건], [ or 과 and 의 조건] MongDB 에 접근해 값을 가져올것이다. 1. 특정 string 이 포함되어 있는 조건 2. 여러개의 특정 stiring 들 이 하나라도 포함되어 있다면 가져오는 조건 3. 특정 string 이 전부 포함되어야만 가져오는 조건 MongDB 의 매뉴얼을 보자 https://www.mongodb.com/docs/manual/reference/operator/query/regex/ $regex — MongoDB Manual Docs Home → MongoDB Manual This page describes regular expression search capabilities for self-managed (non-Atlas) deployments. For data hosted on MongoDB Atlas,.. 2023. 2. 3.
7. useCallback 을 이용한 fetch ( 비동기함수 ) 사용하기, useEffect 초기 렌더시 내부함수 사용 금지하기 useCallback 은 memoization 을 통해, 의존성 배열이 바뀌지 않는다면, 새 함수를 생성하지 않고, 기존 함수를 다시쓰는 최적화 기능을 제공한다. 물론, memoization 에도 비용이 발생하기 때문에, 복잡하지 않은 함수의 경우 썩 큰 효과를 누리지는 못한다.(고한다.) 일단 연습겸, fetch 를 하는 함수에 사용해보았다. 1. useCallback Hook을 통한, 비동기함수의 생성 const getDogsDataHanlder = useCallback(async () => { const fitDogs = await fetch("/api/dogs", { method: "POST", body: JSON.stringify({ personality: fitArray, size: size .. 2023. 2. 3.
6. SASS, @for 과 @if 를 활용한, 스타일링 지정 테스트 페이지를 작성할때 const TestNumberTesting = () => { const allNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"]; const numberTestCards = allNumbers.map((selected) => ( {selected} // 각 값마다 다른 style ... 처럼 각 값마다 className = { styles.number__1 } className = { styles.number__2 } className = { styles.number__3 } className = { styles.number__4 } ... 처럼 다른 스타일을 지정해야 했다. 참고 : "string" 으로 되어있는 값을 s.. 2023. 2. 3.
5. POST 를 이용한 데이터 가져오기, 로컬스토리지에 저장하기 2023년 02월 15일 수정 나는 정말로 멍청이다. Dynamic API Routes (동적 API 라우트) 가 있는데 굳이 클라이언트에서 POST 요청을 해서 값을 받으려했다. https://nextjs.org/docs/api-routes/dynamic-api-routes API Routes: Dynamic API Routes | Next.js You can add the dynamic routes used for pages to API Routes too. Learn how it works here. nextjs.org API 라우트를 동적으로 만들어서 해당되는 값을 export default function handler(req, res) { const { pid } = req.query res... 2023. 2. 3.
4. Redux-toolkit을 사용해 "비동기함수(fetch)" 를 이용한 DB 의 값 받아와서 넣기 + Thunk 생성자 + action.ts 클라이언트는 서버(api) 에게 요청을 하고, 서버(api) 는 DB의 값을 받아 응답한다. 좋다. 클라이언트는 그 값을 받을 수 있다. 문제는 매번, 필요할때마다, 모든 페이지에서 서버에게 요청해 그 값을 받아올 것인가? 아니면 받아놓고, 열심히 props 전달을 통해 그 값을 앱 전역에 퍼뜨릴 것인가? 둘다 정답은 아닐 것이다. 그것이 내가 전에 했던 크나큰 실수이자, 엄청나게 느려진 반응속도를 낳게한 주범이었다. 이번에는 서버로부터 응답받은 그 값을 Redux-toolkit 의 store 에 넣고, 앱 전역에서 사용할 것이다. React 를 사용하면서 Redux-toolkit 의 action 생성자를 통해 비동기함수를 다루어보았다. 정확히는 비동기함수를 사용가능하게 하는 action 을 통해 Fir.. 2023. 1. 29.
3. DB의 데이터를 fetch - "API" 를 통한 GET 과 "사전 데이터페칭"을 통한 GET Next.js 는 ServerSide 에서 사용 가능한 Code 를 제공한다. 클라이언트 측에서는 할 수 없는 DB 와 소통하는 코드가 아주 대표적이다. 서버측코드는 일반 클라이언트측 자바스크립트 코드와는 다르게 유저들에게 노출되어있지 않다. 기본적으로 유저들에게 숨겨져있으며 따로 볼 수 없다. 사전 데이터 페칭을 제공하는 getStaticProps 나 getServerSideProps 를 통해, 코드 내에서 직접적으로 서버측 코드를 사용 할 수 있고, pages 의 api 폴더 내에, 자신이 직접 서버측 코드를 만들어 클라이언트측에서 fetch 를 통해 서버에 요청 할 수도 있다. 기본적으로 REST API 를 하기 위해, 독립적으로 node(서버) 와 react(클라이언트) 를 운영하지만 Nextjs.. 2023. 1. 28.
2. MongoDB 연결과 API 를 통한 fetch(1) - MongoDB 연결 데이터베이스를 연결해보자 1. MongoDB Atlas 에서 데이터베이스를 만든다. 2. Project 를 생성하고 3. DataBase Access 를 세팅해준다. 유저를 만들었다면, 그 id 와 비밀번호를 반드시 저장해두자. 나중에 MongoDB 에 접근할때, 필요한 아이디와 비밀번호가 될 것이다. 4. Access 할 수 있는 유저를 만들었다면, 해당 유저의 권한을 세팅해준다. admin 유저로 만들수도, Read and Write 가 가능하게 할 수도, Read 만 가능하게 할 수도 있다. 5. 이제 Network Access 로가서, 어떤 IP 주소에서만 접속 할 수 있는지 설정한다. 0.0.0.0/0 은 모든 IP 주소에서 접근 가능하게 만들어준다. 6. 마지막으로 connect 를 들어가서,.. 2023. 1. 28.
1. Google OAuth 구현하기 [TypeScript + Next.js + Next-auth] 매번 OAuth 를 사용하지 않고, 이메일, 비밀번호 로그인을 주로 사용해보았다. 남들 다하는 OAuth 도 해보고 싶어서, 간편하기도 하고 보안성도 더 좋아보여 도전해본다. 하나씩 하나씩 기록해가며 해보자. 1. TypeScript + Next.js 의 구성 https://nextjs.org/docs/basic-features/typescript#create-next-app-support Basic Features: TypeScript | Next.js Next.js supports TypeScript by default and has built-in types for pages and the API. You can get started with TypeScript in Next.js here. nex.. 2023. 1. 27.
0. 프로젝트를 시작해보자! 이번 프로젝트의 목적은 1. SASS 를 사용해보고 ** 2. Next.js 에 TypeScript 와 Redux-Toolkit 을 사용해 볼 것이며! 3. 개 정보 API 를 활용하여, 개 정보를 받아와보고 4. OAuth 를 통해, 구글 로그인을 구현해볼 것이다! 5. MongoDB 를 이용해 DB와의 연동도 해볼 것이다! 6. 애니메이션을 기깔나게 해볼것이다! 7. CSS 패턴(BEM)과 MVVM 패턴을 생각하며 만들어 볼 것이다! 이번 프로젝트는 언어는 TypeScript 를 사용하고 DB 는 MongoDB 라이브러리는 Next.js 를 사용해본다! 이번 프로젝트의 구현하고자 하는 목표는 심리 검사(personality behavior test) 를 통해 성격유형을 알아내고 그에 따른 강아지를 추.. 2023. 1. 27.

티스토리툴바