티스토리

Daily Front_Minhhk

검색하기

블로그 홈

Daily Front_Minhhk

minhhk.tistory.com/m

개발일지_> Front 관련 내용이 올라올거에요🫥

구독자: 1

방명록 방문하기

주요 글 목록

[firebase] storage 설정 (+ 파일 업로드, 다운로드) 빌드에서 Storage 를 눌러 생성! 스토리지 위치는 당연 서울! 공식문서를 살펴보자 (Storage) firebase.js 파일에서 const storage = getStorage(app) import { initializeApp } from "firebase/app"; import { getStorage } from "firebase/storage"; // TODO: Replace the following with your app's Firebase project configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... storageBucket: ''.. 공감수 0 댓글수 0 2023. 5. 10.
[firebase] 이메일,비밀번호 로그인 & 구글로그인 & 로그아웃 이메일, 비밀번호 기반 로그인 우선 이메일과 비밀번호를 통한 로그인을 할려면 signInWithEmailAndPassword 를 사용하자! 공식문서를 참조하면서 import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.mes.. 공감수 0 댓글수 0 2023. 5. 8.
[firebase] 실시간 데이터베이스 쓰기 빌드 / 실시간 데이터베이스 에서 새로만들기 클릭! 위치는 싱가포르 asia 서버로 두고, 생성한다. 예제는 이렇다!! getDatabase() 가져오는 것과, set(ref()) 이부분만 잘 적용 하면 된다. import { getDatabase, ref, set } from "firebase/database"; function writeUserData(userId, name, email, imageUrl) { const db = getDatabase(); set(ref(db, 'users/' + userId), { username: name, email: email, profile_picture : imageUrl }); } by 공식문서 참조 웹에서 데이터 읽기 및 쓰기 | Firebase 실시간 .. 공감수 0 댓글수 0 2023. 5. 8.
[firebase] 회원가입 (createUserWithEmailAndPassword, updateProfile ) 1. 파이어베이스 회원가입 (이메일 & 패스워드) 공식문서 예제는 이렇다. getAuth 는 firebase.js 에서 export 한 값을 사용 했다. signInWithEmailAndPassword 과 updateProfile 을 사용하여 우선 가입의 사이클을 완성 해 보았다. 비동기로 import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch(.. 공감수 0 댓글수 0 2023. 5. 7.
react-hook-form / 가입폼, 유효성 검사 (라이브러리) 공식문서는 이렇다. Example에서 일단 복사 해서 수정 했다. https://react-hook-form.com/get-started#Quickstart import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); console.log(watch("example")); // watch input value by passing the name of it return ( /* "handleSubmit" will valid.. 공감수 0 댓글수 0 2023. 5. 7.
React & openAI API (Examples) 활용하여 이름생성기 만들기 + API 사용은 결제하자! 1. openAI 홈페이지 / Developers / example 에 들어가서 사용하고 싶은 것 중 선택하면 된다. 2. 여기서 이름 생성기를 사용해보겠다. 클릭하면 상세 페이지가 뜨는데 이제 curl 과 node.js 선택하면 소스코드가 뜬다. 이것을 활용하여 만들었다. await 비동기로 받아와서 작성 함수에 async 달아주기!! https://~ ,, post 요청 보낼 주소 값 -H ,, 헤더에 넣어 줄 값 -d ,, data로 body에 넣어 줄 값 1. .env 파일 생성하여 작성한다. REACT_APP_OPENAI_API_KEY="API 키" 2. const dataBody = { model: "text-davinci-003", prompt: `suggest three pet names .. 공감수 0 댓글수 0 2023. 5. 2.
반려동물 쇼핑몰 모두댕냥[mainProject] 회고 🙌🏻 드디어 짧지만 길었다면 길었던 메인프로젝트가 끝났다!! 🙌🏻 프론트 개발자로서의 다가온 한 걸음!! 개요 배포링크 : http://modudogcat.shop 모두댕냥 modudogcat.shop 깃허브 : https://github.com/Min-hh-k/modudangnyang GitHub - Min-hh-k/modudangnyang: 모두댕냥_메인프로젝트 모두댕냥_메인프로젝트. Contribute to Min-hh-k/modudangnyang development by creating an account on GitHub. github.com 팀 구성 👀 프로젝트에 앞서 이것 또한 중요한!! 먼저 팀을 짜고 싶은 인원들은 팀원 구성 후 제출하고, 나머지는 랜덤으로 프론트,백엔드 매칭해서 팀을 .. 공감수 0 댓글수 0 2023. 4. 11.
[axios] React 장바구니 기능구현 / CRUD 1. 장바구니 CREATE (post) 백엔드 분이 생성하신 장바구니 명세서에 따라 현 프로젝트에선 리액트 쿠키를 이용해서 로그인 한 구매자만 장바구니 담기를 하기 위해 헤더에 Authorization: cookies.accessToken 을 넣어주고 보낸다. /carts/products/(각각의 상품의 아이디 값) 을 useParams 를 이용하여 아이디를 설정해줬다. const productId = useParams().productId; ++ ( 구매자만 장바구니에 담을 수 있도록 하기 위해 로그인 할 때 받는 롤 값을 redux를 이용하여 store 에 저장한 뒤 SELLER 나 ADMIN 일 땐 담지 못하도록 설정 ) ProductInfo.jsx // axios.post 를 이용하여 장바구니db.. 공감수 0 댓글수 0 2023. 4. 2.
[React]react-router-dom/ useNavigate() 값 전달 && useLocation() 값 가져오기 1. 값을 전달 할 페이지에서 useNavigate()를 import 해온다. import { useNavigate } from "react-router-dom" 2. 값을 보낼 컴포넌트 안에 지정해준다. const navigate = useNavigate(); 그리고 첫번째 app.js 에 route 된 페이지 파라미터, 두번째 {state : 값 } 형태로 보내준다. onClick={ } 함수 만들어서 하거나, 현재 프로젝트에서는 axios 로 post로 값을 보내면서, 다음 페이지에 전달하기 위해 사용 했다. navigate("/보낼페이지" , {state : { key : value , key : value ...}}) ex) 보낼 페이지 pay/btnGtp.jsx navigate("/payCom.. 공감수 0 댓글수 0 2023. 4. 2.
Redux 데이터 초기화로 인한 해결하기 [redux-persist @reduxjs/toolkit] 로그인을 하여 토큰을 받아 오는 것을 확인 하였고, redux를 이용하여 axios로 post 할 때 dispatch 해주어 isLogin 상태를 true 로 만들어 주었다. dispatch({ type: "USER_ISLOGIN" }); 아래는 redux 파일이다 src/Redux/index.js import { combineReducers } from 'redux'; import userReducer from "./userReducer"; const rootReducer = combineReducers({ // 쓰실 리듀서 페이지 만드셔서 key 랑 값 하시면 될 거 같아요 user: userReducer, }); export default rootReducer; src/Redux/userRedux... 공감수 0 댓글수 0 2023. 3. 26.
[몇분만 투자하자~] react-slick 사용하기(리액트 슬라이드,캐러셀) 메인페이지의 캐러셀 구성을 위하여 react-bootstrap 을 적용 해보았지만,, 기존 css 와 전체적으로 다 충돌이 일어났다ㅠ 그래서 찾아 보던 중 💡 react-slick 을 발견했다!! 1. 우선 두가지 패키지를 설치를 해주자!! npm install react-slick npm install slick-carousel 그리고 최상단에 import! // 캐러셀 적용 컴포넌트 import Slider from "react-slick"; // 캐러셀 적용 css 이것도 꼭 import! import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 2. 제일 기본으로 제공하는 캐러셀 예시에서 div 대.. 공감수 0 댓글수 0 2023. 3. 21.
react-cookie 를 활용한 로그인,로그아웃(json-server-auth로 test) 로그인 → 우선 리액트-쿠키를 설치 npm i react-cookie 그리고 app.js 나 index.js 에서 CookiesProvider 로 감싸준다. import { CookiesProvider } from 'react-cookie'; export default function Root() { return ( ); } 로그인 폼에다가 셋팅 *import* { useCookies } *from* "react-cookie"; export default function LoginForm() { const [cookies, setCookie, removeCookie] = useCookies(['accessToken']); ... } cookies : 쿠키 가져오는 것 setCookie : 말그대로 쿠키 .. 공감수 0 댓글수 0 2023. 3. 16.
header 상단 고정, footer 하단 고정 항상 하면서 헷갈리고 기억이 나지가 않아 기록을 했다. 기본적인 구성 하는 헤더와 푸터의 고정법,,, 알아보자! 🙌🏻 header 상단 고정 export default function Header() { return ( ... 내용생략 ); } const Wrapper = styled.div` position: sticky; top: 0; ` Header 를 구성하는 전체를 감싸는에 position: sticky; top: 0; >> 적용해주면 헤더가 고정하며 아래 내용만 움직이는 걸 볼 수 있다. footer 하단 고정 App.js const Wrapper = styled.div` min-height: 100%; padding-bottom: 200px; `; 헤더와 푸터를 제외한 나머지 보여지는 페이지.. 공감수 0 댓글수 0 2023. 3. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.