본문 바로가기

전체 글

Cloudinary 셋업 pricing 클릭 해 보면 free로 사용하더라도 정말 대규모의 프로젝트 아니면 무난히 돌아가는 것을 확인 구글 계정으로 회원가입. 설정으로 들어오면 뮤료 계정인것과 사용 횟수 제한에 대해서도 확인가능 upload로 들어가서 이미지를 컨트롤 할 때마다 Cloudinary에 로그인 안하도록 설정 (보안을 위해 preset을 사용해야한다.) 하지만 unsigned 할때는 왼쪽에 파란색의 모자이크 처리된 key를 사용해야한다. 또한 Add upload preset을 클릭하면 이미지를 업로드 할 때마다 어떤 trasformaion을 줄지 설정할 수 있다. 좌측과 같이 4종류의 관련 목록이 있다. Add Eager transformation 클릭 위와 같이 이미지의 크기 및 필터를 적용 docs으로 와서 Med.. 더보기
Firebase 셋업 기본적으로 빌드, 배포, 모니터링, 배포스 사용자들의 정보 통계를 활용 가능. docs 로 들어가서 firebase fundamentals클릭하면 좌측에 기본적인 사용법이 나와있다. (엄청 양이 많으니 필요한걸 찾아서 공부하는게 좋다) 기본적으로 사용할 꺼냐 물어보는걸 다 체크 해서 생성. 위와같이 프로젝트가 만들어진걸 확인 프로젝트로 들어가서 사용할 기능 중 하나인 Authentication 선택 다양한 방식의 로그인을 지원한다. 구글을 선택해보자. 그리고 저장 그러면 아래와 같이 왼쪽 사이드바에 Authentication이 추가 된걸 확인할 수 있다. 그리고 사이드바를 더 내려보면 Realtime Database로 들어 가기 데이터 베이스 만들기 클릭 후 나의 장소에서 가장 가까운 나라를 선택해서 셋.. 더보기
YouTube API Key 획득 및 사용법 유튜브 api 공식 홈페이지로 이동하기 https://developers.google.com/youtube/v3 YouTube Data API | Google for Developers 동영상 업로드, 재생목록 만들기 및 관리 등의 YouTube 기능을 애플리케이션에 추가합니다. developers.google.com Developer Console's 클릭 프로젝트 만들기 약 30초 소요 생성된 대시보드로 들어가기 우측 상단에 있는 버튼 눌러 권한 생성 위와 같은 순서로 진행하면 API key 를 얻을 수 있다. 절 때 외부로 노출 시키지 안도록 하자 ! API 사용법 상단의 reference를 누르면 여러 사용 가능한api를 활용할 수 있다. list로 들어가면 여러 사용 정보에 대해 적혀 있어 그것.. 더보기
[CORS ] 응답데이터를 로드할 수 없음 : 프리플라이트 요청에 사용 가능한 콘텐츠 없음 개발을 하던중 요청 url 이 잘 적용되었는지 확인하려고 개발자도구의 네트워크상에서 미리보리를 보려했는데 위와 같은 문구와 함께 볼수가 없었다. 하지만 코드상에서 console.log로 찍어서 하나하나 확인할 수 있어 대수롭지 않게 하나씩 디버깅을 해서 개발을 해도 문제가 없었다. 즉, 서로간의 통신은 잘되지만 특정 프리플라이트 요청 에서는 안되는 것이다. 프리 플라이트 요청이란 ? - 본 요청을 보내기 전에 사전에 물어본다. 클라이언트는 서버에 사전 요청을 보내 확인하고, 서버는 해당 사전 요청에 응답을 한다. 서버가 사전 요청을 허용했다면 다시 본 요청을 보낸다. 총 2번의 통신을 주고 받는다. - 프리플라이트 요청 포맷 Origin: 요청 출처 Access-Control-Request-Method:.. 더보기
상품 디테일 페이지 상품 디테일 페이지 생성하기 UI 완성본 npm install react-image-gallery --save 상세페이지 UI 및 백엔드에서 해당 데이터 가져오기 reactGallery을 사용해서 사진 UI 띄우기 Product Info 컴포넌트 생성하기 productinfo 페이지 컴포넌트 유저관련 데이터는 redux로 상태관리를 하고 있다. 그래서 dispatch를 사용해서 thunk함수를 만들어 갯수에 대한데이터를 받아온다. 카트에 상품이 있던건지 새로 장바구니에 넣은것 인지 확인하고 카트의 객체를 반환한다. 쇼핑 카트 페이지 데이터 가져오기 위와같은 구조를 만들기 위해 쿼리의 키와 벨류를 추가하여 데이터 베이스에 있는 상품들 정보 가져오기 아래와 같이 분기 처리 추가 if (type === "ar.. 더보기
랜딩 페이지 랜딩 페이지 생성하기 완성본 예시 기본적인 UI 완성 state 생성 몽고 DB에 저장되 있는 데이터들 가져오기 ( 아직 백엔드 라우트 안만듬) 상품 데이터 가져오는 Route 생성하기 product 콜렉션에는 writer 에 유저의 id가 있다. populate를 쓰면 그 해당 유저의 모든 정보(객체)를 가져 올 수 있다. 브라우저 새로고침을 하고 개발자 도구의 네트워크를 보니 proudct 콜렉션 의 속성으로 writer가 속성으로 있고 그 writer안에 해당 user id 를 가진 user 콜렉션 정보가 있는것을 확인 가져올 상품 카드의 예시 기본 UI 틀 완성 npm install eact-responsive-carousel 더 보기 기능 생성하기 더보기 버튼 만들기 이전에 더 많은 상품들 넣기.. 더보기
상품 업로드 Shop App을 위한 소스 코드 추가하기 페이지 생성 및 라우트 작성 백엔드 모델 추가 상위 Nabar에 다른 라우트들 추가 상품 업로드 페이지 UI 생성하기 상품 업로드 페이지 기능 생성하기 1. stae 생성 2. 핸들러 함수 생성 3. upload route 생성 업로드하니 데이터베이스에 잘 들어간다 ! 파일 업로드 컴포넌트 생성하기 npm install react-dropzone // 이미지 업로드 편하게 한다. 컴퓨터 파일을 업로드 할수 있고 드래그 앤 드롭기능 가능 fileuplad 컴포넌트를 upload 페이지에 추가 file 업로드 컴포넌트 UI 백엔드로 보내기 위한 handle 함수 Multer를 이용해서 파일 업로드하기 npm install multer 백엔드 product uploa.. 더보기
로그인 로그인 페이지 생성하기 회원가입 페이지와 거의 비슷하기 때문에 대부분의 코드를 복사 붙여넣기 후 로그인에 맞게 수정. 성공시 토큰은 로컬스토리지에 저장. login route 생성하기 로그인 라우트 생성 비밀번호 비교함수 생성 로그인시 토큰이 잘왔고 isAutheh도 true로 잘 나온다. 인증이 되어있는지 체크하기 app.jsx가에서 새로고침을 하고 isAuth가 ture일 이면 dispatch의 auth User가 호출이 되면서 axios를 사용해서 비동기 요청을 한다. const auth = require("../middleware/auth"); auth라우터 생성 그리고 auth 미들 웨어를 작성하고 그걸 이용해서 인증된 유저의 정보를 준다. 미들웨어 코드 작성 userSlice 작성 NotAu.. 더보기

티스토리툴바