jamie-study

흐름 * REDIRECT_URL : 프론트 쪽으로 지정(localstorage:3000/auth/kakao) 프론트 : 카카오 서버에서 인가코드 받기 (/oauth/authorize) => window.location.href 이용 프론트 : REDIRECT_URL 통해 인가코드를 받으면 react-router-dom 이용하여 카카오 로그인 처리용 컴포넌트(KakaoAuthHandle)로 이동 => 백엔드로 인가코드와 함께 JwtToken 요청 백엔드 : 카카오 서버에서 액세스 토큰 받기 (/oauth/token) 백엔드 : 액세스 토큰으로 카카오 유저 정보 받기 (/v2/user/me) => DB 조회 후 프론트에 JWT Token 전송 (회원 아닐 경우 가입 처리) 프론트 : JWT Token 받아 ..

useMediaQuery 이용 여러 파일에서 사용해야하기 때문에 글로벌하게 사용할 수 있도록 따로 파일을 만들었다 다른 파일에서 컴포넌트처럼 사용하면 된다 childeren에 의해 컴포넌트 내에 있는 코드들을 return한다 //mediaQuery.js import { useMediaQuery } from "react-responsive"; const Mobile = ({ children }) => { const isMobile = useMediaQuery({ maxWidth: 1024 }) return { isMobile && children } } const Pc = ({ children }) => { const isPc = useMediaQuery({ minWidth: 1025 }) return {..

컴포넌트가 2개인 경우 삼항연산자를 이용하면 되지만 그보다 많을 경우에는 삼항연산자 대신 아래처럼 사용하면 된다 { { 1: , 2: , 3: }[id] } 오브젝트 부분을 변수로 만들어서 사용해도 됨 const object = { 1: , 2: , 3: } {object[id]} 참고사이트 https://velog.io/@ksung1889/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%9E%90%EC%A3%BC-%EC%93%B0%EB%8A%94-if%EB%AC%B8-%EC%9E%91%EC%84%B1%ED%8C%A8%ED%84%B4-5%EA%B0%9C

const [isModalShow, setIsModalShow] = useState(false) const clickButton = () => { setIsModalShow(current => !current) }

// Layout.js const [isModalShow, setIsModalShow] = useState(false) useEffect(() => { // toggle(token: string, force?: boolean): boolean; // 모달창 Show 상태일 때(isModalShow = true) => body의 클래스명에 "unscrollable" 추가 document.body.classList.toggle("unscrollable", isModalShow) }, [isModalShow]) /* index.css */ body { width: var(--app-width); margin: 0 auto; } .unscrollable { overflow: hidden; } 참고 사이트 htt..

상황 아이콘을 이미지로 불러오느라고 많은 이미지를 불러와야 하는 상황 import icon1 from "../../assets/icons/theme/icon1.png" import icon2 from "../../assets/icons/theme/icon2.png" import icon3 from "../../assets/icons/theme/icon3.png" import icon4 from "../../assets/icons/theme/icon4.png" ... 하나의 파일에서 사용하는 아이콘이 12개인데, 이렇게 12줄을 추가해야 했다 개선 원하는 경로에 index.js 파일을 만들고 그 파일 내에서 모두 import한 후 export 사용할 곳에서 한 번에 import /assets/icons/i..

css를 적용하는 방법엔 여러가지가 있다 인라인 방식은 유지보수가 힘들고 가독성이 좋지 않아서 피하고 있다 원래는 css 파일을 따로 만들고 바로 import 하는 방식을 사용했다 이 방식은 css가 import 한 곳에 한정되지 않고, 전체 모듈에 적용된다 클래스명이 중복되면 안된다는 뜻 (A.js 에서 A.css를 import 하고, B.js에서 B.css를 import 했다고 해도 각각 적용되지 않고 공유된다) 페이지 수가 적은 프로젝트에선 괜찮았는데, 페이지가 조금만 많아져도 꼬였다 ㅠ_ㅠ 클래스명 앞에 파일 이름을 붙이거나 부모선택자를 꼭 작성해줘서 중복을 피했지만, 클래스명이 길어지거나 코드가 길어져 좋지 않은 방법 같았다 css-module을 사용하기로 했다 클래스명에 hash 값을 붙여 고..

Layout 만들기 // Layout.js function Layout() { return ( // --> 여기에 콘텐츠가 들어갈 예정 ); } Layout 모든 페이지에 적용하기 // App.js function App() { return ( // --> 여기에 추가 ); } 원하는 루트에 추가하면 된다 나는 NotFound 페이지를 제외하고 Layout을 적용했다! 에 props 전달하려면 다른 것과 같이 아래처럼 작성했더니 동작하지 않았다 이 때 useOutletContext를 이용하면 된다! // Outlet을 사용하는 부모 컴포넌트 function Parent() { const [count, setCount] = useState(0); return ; // context ={} 사용 } // 자..