creamymood의 개발 공부 발자취 💭

1. 이런 문제가 있더라.로그인 한 유저가 url에 login이나, join 이런걸 입력 할 경우 접근 가능한.. 해결 하는 방법은, 로그인 하지 않은 유저가 mypage에 접근 하는걸 막는 원리랑 같다.역으로 로직을 이해하면 된다. 더보기정확해!! 👏👏너무 잘 이해했어.**는 일종의 "역방향 ProtectedRoute"**라고 보면 돼.🔐 일반적인 ProtectedRoute로그인 안 한 사람은 못 들어오게 막는 거야.const ProtectedRoute = ({ children }) => { const { loggedIn } = useUser(); if (!loggedIn) { return ; } return children;};이건 예: 마이페이지, 유저 설정 페이지 같은 데 쓰이..

훅이란?아래 블로그에서 자세히 읽어볼 수 있다. 리액트 공부하기 - custom hooks? 그냥 함수 차이?custom hooks를 공부하며 헷갈리게 된 또 기본 개념- 다시 짚고 갑시다.우선 훅(hook)이 뭘까. 리액트(React)에서 **훅(Hook)**은 함수형 컴포넌트에서 **상태(state)**나 라이프사이클(lifecycle) 같은 리액트creamymood.tistory.com결론:더보기React는 훅 호출 순서에 따라 상태를 기억해요. 만약 훅 호출이 조건이나 반복문 안에서 바뀌면, React가 어떤 훅이 어느 상태인지 헷갈려서 오류가 생길 수 있기 때문에 함부로 쓰지 못하니까 “리턴 값을 이용한다”훅은 함수이지만, 훅을 호출해서 리턴받은 값(함수나 상태 변수 등)을 변수에 저장해서 나..

되게 간단할 것 같지만.. 또 어떤 것들이 도사리고 있을까 .. ? 하지만.. 그 또한 재밌는거야 ~요구 조건은 다음과 같습니다.네브바에서, 로그인 하면 썸네일이 보이도록 기능과 UI를 구현해두었다 앞 단계에서 url에 /mypage 라고 직접 치면 접근 로그인이 안된 상태나, 로그아웃 뒤에도 접근 할 수 있던 문제가 있었는데이번 단계 진행 하고 나면 해결 되겠지 (두근) 로직은 아래 처럼 했다. 더보기1. 로그인 여부를 확인한다고 했으니, 앞에서 로그인 유무를 전역으로 관리한 상태인 useUser() 호출해서 {loggedIn}을 꺼내 쓰면 될 예정이다. loggedIn이 true면, 값이 있으면, /mypage 접근 가능.아니라면 로그인 요구 메세지와 /login 페이지로 리다이렉트. 2. ..

프로젝트를 하면서 비동기로 데이터를 받아오는 작업을 많이 했는데, 그 때 활용하면 좋을 로딩 관련그러니까, 로그인 관련한 로딩 패치 받는 것에 관련한 로딩 우선 영화 페이지에서는 크게 이렇게 있을 것 같은데(이 두가지는 분야가 아예 다르기 때문에, 전역 상태도 따로 관리하면 좋을 것 같다.) 비슷한 부류끼리 공통 로딩 컴포넌트 만들거나, 그 때 그 때 만들어주면 좋을 것 같다. 챗 지피티가 설명해준 그 외에 추가로 로딩 로직 넣으면 좋을 곳 ↓더보기로그인, 데이터 패치 외에 로딩 스피너나 로딩 상태 표시를 적용하면 좋은 곳 몇 가지 추천해드릴게요.1. 로그인 관련 로딩로그인 요청 중일 때: 서버에 로그인 요..

프로젝트 하면서 로그인 구현하고 ~ 그러다보니, 접근할 수 있는 페이지만 따로 분리 하는 것에 대한 필요성.자주 쓰일거니까, 보기 쉽게 정리 해두어야겠다고 느낌 리액트 라우터(React Router)에서 Protected Route(보호된 라우트)를 설정하는 방법은 "인증된 사용자만 특정 페이지에 접근할 수 있게 하는 기능"예를 들어 로그인하지 않은 사용자는 /dashboard 같은 페이지에 접근하지 못하도록 막고, /login으로 리다이렉트시키는 것. 기본 개념 설명Protected Route는 React 컴포넌트를 하나 만들어서, Route를 감싸는 방식으로 만듬. 이 컴포넌트는 사용자의 로그인 여부를 확인하고:* 감싸는 방식이란, 결국 고정 문법이나 라이브러리는 없기 때문에, 사용자 정의 컴포넌트..

try...catch 기본 개념try { // 시도할 코드 (문제가 생길 수도 있음)} catch (error) { // 에러가 발생했을 때 실행할 코드} 예를 들어, 어떤 API 요청을 해서 데이터를 가져올 때 문제가 생길 수도 있잖아? 그럴 때 이렇게 써:import React, { useEffect, useState } from 'react';function UserProfile() { const [user, setUser] = useState(null); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { try { const response = aw..

음. 정말 기초라고 생각했고, 쓸 때 그냥 대충 휘릭 ~ 썼는데프로젝트 하면서 막 컴포넌트 분리하고, 가져다 쓰고 하니까 여간 헷갈리는게 아니더라!아주 기초 내용이니 두고 두고 볼 수 있을 것 같아서 탄탄히 정리하기. export란?모듈(파일)에서 변수, 함수, 컴포넌트 등을 다른 파일에서 사용할 수 있도록 내보내는 것. export 종류 1-1. Named Export (이름을 붙여서 내보내기)export const Jane = () => { return Hi Jane; }; 또는const Jane = () => { return Hi Jane; };export { Jane }; 이 방식은 여러 개를 한 파일에서 내보낼 수 있다. 사용법 (가져올 때)import { Jane } from './MyCo..