Seondalgorithm

Next-Auth 를 이용하면 소셜로그인을 5분만에 구현할 수 있다고 ? 구글, 깃허브, 애플, 트위터는 물론 카카오와 네이버 소셜로그인까지 지원하는 Next Auth를 쉽게 사용해보자. +) 세션에 저장되기 때문에 기기에서 자동로그인까지 일타이피 ! 💬 Kakao Developers 세팅 Kakao Developers 에서 앱을 등록하자 카카오 로그인 기능을 사용하기 위해 동의항목을 설정해준 뒤, 본격적으로 next-auth 를 사용하기 위해 세팅을 한다 1. REST API 키 내 애플리케이션 > 앱 설정 > 요약정보 REST API 키를 복붙해서 저장한다 // .env KAKAO_CLIENT_ID=복붙 깃허브등에 API키들이 노출되지 않도록 .env 파일에 저장해서 .gitignore 에 추가하는걸..

npm install react-router-dom 평화로운 유튜브 클론코딩... 평소처럼 라우터를 이용해서 페이지를 구성하기로 마음먹고 라우팅을 했는데.. Error: A is only ever to be used as the child of element 당황스러운 오류가 떴다. Route 를 Routes 로 감싸라고 한다.. 찾아보니 Router가 버전6으로 업데이트 되면서 사용법이 바뀐모양 그래서 에러가 친절하게 설명하는대로 태그를 감싸줬다. (물론 임포트도 새로 했다) import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; //... function App() { return ( ); } 근데.. Error: useR..

호버링이란.. 말그대로 마우스를 특정 요소 위에 올렸을 때 해당 요소가 바뀌게 해주는 그런 기능? 이다 const Barogagi = styled.div` &:hover { background-color: rgb(0, 0, 0, 0.5); color: rgb(255, 255, 255, 100); } `; 이런식으로 styled-component나 css를 이용하여 호버링 기능을 쉽게 구현할 수 있지만 이제.. 이걸로는 외부의 컴포넌트를 호버할때마다 전혀 다른 컴포넌트에게 영향을 끼치게 만드는게 안되어서 속상했다 useState 를 이용한 hover 기능 구현 그러다가 알게된 onMouseOver 과 onMouseOut.. 그리하여 리액트의 useState()를 이용하여 메인함수 내부에 호버링을 구현했다!..

Firebase를 React 프로젝트에서 사용하려는데 생기는 무시무시한 오류들... " 나 맞게 했는데??? " -> 버전 9부터 사용법이 아예 바뀌었습니다 ^^ 오류 해결을 찾아 공식문서를 항해하며 알게된 새로운 사용법들을 정리했습니다. 다른분들은 고생하지 마세요 공식문서 의 소중함을 느끼게 된 이야기.. START 1. Firebase 인증 모듈 사용 import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { ... }; firebase.initializeApp(firebaseConfig); export const authService = fierbase.auth(); 분명 똑같이 쳤는데 발생하는 오류.. ..

🖼 Outline Why - 교내웹개발동아리에서 겨울방학 토이프로젝트로 진행 What - 유튜브 웹사이트 클론코딩 Who - spring을 사용하시는 두명의 백엔드 분들과 협업하였으며 나는 프론트를 맡았다 How - React 기반 When - 약 한 달(2021년 11월 08일 ~ 2021년 12월 4일)간 진행했다 ✨ Main Features 1. 반응형 2학기에 집중적으로 공부한 반응형을 본 프로젝트 곳곳에서 구현하려 노력했다. 당연하지만? 미디어 쿼리를 이용하여 css 스타일을 적용하였고 const Wrapper = styled.div` display: flex; flex-direction: column; gap: 20px; width: 70vw; @media (max-width: 1300px) ..