creamymood의 개발 공부 발자취 💭

심화반 수업 엿듣다가 .. 다른 분 포폴에서 예를 들어 제품 갯수가 보이고, 그 위에 results: 20개이런식으로 나오더라. 이 기능도 공부해보면 좋을 것 같아서 오프라인 모임때 동기분께 여쭤보니받아온 api에서 length길이로 보이게 하면 된다고 하셨다 ! 간단하지만 알아두면 좋을 것 같아서 간단히 공부해봤당 로직은 매우 간단스..api 받아오는 걸 개발자 도구로 확인 해보면이런식으로 객체 형태로 받아오고 있고 length 20개가 뜬다 ~ 우선 내가 생각했던 로직은fetch('https://api.themoviedb.org/3/movie/popular?language=en-US&page=1', options) .then(res => res.json()) ...

context API는 익혔으니 뭔가 실무적으로 사용할 만 한 전역 상태관리를 공부 해보려고 하는데리덕스.. 는 쳐다만 봐도 동기를 잃어서,,, 조교님이 추천해주시기도 하고, 요즘 핫하다는 zustand 공부하기 진짜 공부해보니까 정~말 간단하고 좋으네욥. 우선 공식 문서 읽어보기 ! GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React🐻 Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.github.com똑똑한 곰돌이.Zustand는 정말 배우기 쉬운 ..

간단하게 전역으로 상태를 관리할 수 있는간단하고도 쉬운 context API 다시 공부하기 ! 개념은 이해가 됐었는데 왜 사용하는 부분(useContext)를 custom hook으로 만들어 만드는지 어려웠는데 해당 게시글에서 자세히 다뤄봤다 ✨ 해당 게시글은 context API 개념 리액트 공부하기 - 전역 상태 관리 context API후.. 여행 후, 현생 복귀란 쉽지 않네요하지만,, 다시 제 자리에서 집중 ! 상태관리에서 createContext, Provider, useContext 이런 것들은 React에서 컴포넌트끼리 데이터를 공유하기 위해 사용하는 도구🐰creamymood.tistory.com 핵심 개념 정리1. createContext()컨텍스트를 생성하는 함수.보통 null이나 {..

지금 내 영화 페이지에서, 로딩 관련해서 구현해보고 싶은데api로 데이터 받아올 때, 살짝 늦을 때를 대비해서. 어떤 로직으로 해야할까 ? 고민해봤다. 또 컴포넌트 분리는 어떻게 해야할지도..짜잔~생각한 구현 로직은 크게 다음과 같다. 1. 로딩 공통 컴포넌트 따로 만든다.2. api 호출 하는 부분에, 로딩 상태 만들어서, 호출 함수 전에 우선 로딩중 (데이터 받는중~) 이 상태의 초기값을 true로써 상태 만들어준다.3. jsx return 부분에서도 조건부 렌더링으로 로딩중이라면 > 로딩중 보여주고, 데이터 다 받아왔다면 > 영화 보여주는 걸 한다.구현 단계 중 1. 로딩 공통 컴포넌트 따로 만든다. Loading.jsx (폴더는 컴포넌트 폴더)import React from "react";con..

모야.. 실무에서 쓰려니까 뭐 더 많이 알아야 하잖아?프로젝트에서 페이지는 아주 많아질테니.. 라우터 추가 공부 필요하겠잖아 ? 라우터의 기초 내용은 아래 링크에서 볼 수 있다. 리액트 공부하기 - React Router 리액트 라우터1. 리액트 라우터란?2. 리액트 라우터 사용하는 법3. 궁금증 두가지. (왜 설치를 따로해야하는가? 주소를 이동하는건데 새로고침이 안된다고 ?!)4. 리액트 라우터 주요 컴포넌트5. 리액트 라우터 주creamymood.tistory.com 1. useNavigate() 이런 훅을 쓸 때, 바로 쓰진 못하고 변수에 할당에서 쓰더라.이유는 ? ↓더보기useNavigate() 같은 훅을 바로 호출해서 못 쓰고 변수에 할당해서 쓰는 이유는?const navigate = useN..

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를 감싸는 방식으로 만듬. 이 컴포넌트는 사용자의 로그인 여부를 확인하고:* 감싸는 방식이란, 결국 고정 문법이나 라이브러리는 없기 때문에, 사용자 정의 컴포넌트..