본문 바로가기

next js

[Next JS] Commerce Project #6 What to do? Google OAuth 회원가입 기능(Sign Up) 만들기 데모 로그인 버튼 클릭 구글 로그인 팝업창이 뜨면, 로그인 로그인 성공 새로고침하면 로그인된걸 볼 수 있음 데이터베이스 실제 정보가 들어간걸 확인 할 수 있음 Flow Google Login Google OAuth를 사용해 credential을 가져옴 View에서 Next JS API 요청 End Point : /api/auth/google-sign-in method : GET parameter : credential Nest JS에서 Spring 서버로 POST request End Point : localhost:8080/api/user/signIn payload : 회원정보 (username/email/imgUrl) .. 더보기
[Next JS] Commerce Project #5 What to do? Google OAuth 구글 Cloud 콘솔 세팅 Sign in 버튼 테스트하기 Google Cloud Console Project 생성하기 사용자 인증 정보 탭 사용자 인증 정보 만들기 버튼 누르기 OAuth Client ID 만들기 선택 OAuth 동의화면 앱 이름, 로고, 개발자 연락처 등 범위 범위 추가 또는 삭제 - 유저 이메일, 프로필 테스트 계정 추가 내 Gmail 계정 추가 사용자 인증정보 탭 OAuth 클라이언트 ID 선택 OAuth 클라이언트 ID 만들기 어플리케이션 유형은 웹 어플리케이션 승인된 자바스크립트 원본에는 http://localhost도 추가해주어야 함. 안하면 GSI_LOGGER]: The given origin is not allowed for th.. 더보기
[Next JS] Commerce Project #4 What to do? 전체 상품목록 화면 2 정렬기능 검색기능 데모 영상 예제데이터 모카루 사이트를 활용해서 예제 데이터 생성 다운 받은 쿼리를 data.sql에 넣어주면, 앱이 실행될 때마다 해당 쿼리가 실행 insert into product (id, name, img_url, category, description, created_at, modified_at, created_by, modified_by, price) values (1, 'Cheese - Mozzarella, Buffalo', 'https://picsum.photos/id/1000/1000/600/', 'ELECTRONICS', '{"blocks":[{"key":"hfme","text":"test edit","type":"unstyl.. 더보기
[Next JS] Commerce Project #3 What to do? 전체 상품목록 화면 Paginiation Category 데모영상 Back End 코드 수정 data.sql mockroo라는 사이트를 활용해 예제 데이터 생성 Spring 앱을 실행할 때 DB에 예제 데이터를 넣도록 data.sql에 insert 쿼리 작성 insert into product (id, name, img_url, category, description, created_at, modified_at, created_by, modified_by, price) values (1, 'Cheese - Mozzarella, Buffalo', 'https://picsum.photos/id/1000/1000/600/', 'ELECTRONICS', '{"blocks":[{"key":".. 더보기
[Next JS] Commerce Project #2 What to do? 상품 목록 상세페이지 및 수정페이지 뼈대 만들기 Carousel 구현하기 상품 조회하기 상품 설명수정하기 데모 영상 Index 페이지 - Carousel 조회 페이지 - 상품 설명 조회 수정 페이지 - 상품 설명 수정 Back-End Project 이전 포스팅에서 Notion API를 사용했었다. 하지만 막상 사용해보니 너무 불편했다;; 그래서 Spring Boot로 간단한 Back-End Project를 만들어보았다. application.yaml Local PC에 My SQL을 설치하고, Commerce라는 데이터 베이스를 미리 생성 해당 데이터 베이스 연결정보를 적음 spring: datasource: url: jdbc:mysql://localhost:3306/commerce .. 더보기
[Next JS] Commerce Project #1 What to do? 프로젝트 생성 및 Notion API 설정 NextJs 프로젝트 생성 Prettier 설정 Huskey 라이브러리를 사용해 Commit 시 코드 Formatting 설정 Notion API 사용을 위한 준비 및 테스트 Create Project yarn create next-app [앱 이름] --typescript tsConfig components 경로를 지정 { "compilerOptions": { ... "paths": { "@components":["components/*"] }, "baseUrl": ".", }, } baseUrl 옵션 때문에 styles 폴더에 있는 모듈이 import 안되서 수정해야 되는 케이스가 있음 Formatting Settings Prettier.. 더보기

티스토리툴바