creamymood의 개발 공부 발자취 💭

Project - 트러블슈팅 (한 브랜치에서만 작업 / reset Soft / )

프로젝트가 마무리가 되어 가며, 팀원들과 했던 프로젝트를 문서화 해서 기록에 남겨보자는 제안이 나왔고,시간이 조금 여유로울 때 블로그에 먼저 정리해두기 - ✏️🍰🍑 겪었던 문제 1.한 브랜치에서만 계속 작업함. !!!!! ➰😢 깃에 대한 이해도가 부족했다. 브랜치를 나눠서 작업해야하는 이유를 잘 몰랐고,공통 컴포넌트를 작업하는게 아니고, 내 것만 잘하면 됐기 때문에 굳이 merge를 할 필요가 우선은 없었어서 (팀장님도 따로 말씀 없으셔서 그냥 이렇게 하면 되는 줄.. 물론 팀장님 탓 아니고 100% 내 탓..)그리고 팀장님이나 팀원들 귀찮게 하기 싫어서 (?) 그냥 내꺼 묵묵히 하고 있자고 생각했음...(초보땐 배려 말고 물음표 살인마가 되자..) 프로젝트가 시작된지 약 10일이 지나고 내가 ..

하나 둘 배워가는 재미가 있어.. 리액트 공부하기 - toastify 라이브러리 초보 설명조교님이나 동기분들하고 대화하다보면 좋은 꿀 정보를 많이 얻는다 !그 중 하나 toastify.기존 alert 대신에 사용해볼 수 있어서 흥미로워 보였다 ! 라이브러리라 사용도 간편할 것 같았다 🐰🤍 recreamymood.tistory.com 이렇게 뜨는 alert창을 toastify로 바꿔보자 둑흔 toastify 컴포넌트를 만든 뒤 -> alert 자리에서 import 해와서 사용한다.또는 간단한 제공 함수를 사용한다. 우선 챗지피티 알려준 자세한 설명은 다음과 같다.더보기1. 우선 라이브러리 설치npm install react-toastify 2. toastContainer 전역에서 사용하기 위해 ap..

개인 프로젝트 - 날씨 앱 (1) 현재 위치 받아오기날씨앱 메인페이지에서 구현 할 내용이, 내가 있는 위치의 날씨 정보 이므로, 현재 위치를 우선 알아야 한다.그 과정에 필요한 내용.날씨 앱 말고도 현재 위치로써 활용할 수 있을 내용이 많을creamymood.tistory.com 앞 게시글에서 이어집니다.2. 현재 위치 날씨 호출 하기 현재 위치를 받아왔으니, 해당 정보를 기반으로 날씨도 호출해보자.큰 틀은 다음과 같다. 1. Home.jsx에서 현재 날씨를 호출한다. 2. 받아온 정보에서 필요한 내용들로 아래 내용 처럼 간단한 필요한 구성을 한다. 같이 공부하시는 동기님이 알려주신 날씨 API 사이트더보기 Weather forecast - OpenWeatherMapWe use cookies to per..

혼자서 하는 첫 프로젝트니까 부캠에서 제시해준 구현 단계 없이 시작 하려고 하니.. 시작 하기 앞서, 어떤 방식으로 해야할까 고민이 되었다. 우선 1. 어떤 기능들이 있으면 좋을지 생각해본다. 2. 그에 맞는 구현 단계를 구상해본다. 3. 코드로 작성해본다.챗 지피티의 조언 ↓더보기 실제 프로젝트를 더 수월하게 진행하고, 나중에 수정할 때 덜 힘들게 하려면 약간 더 구체화해두는 게 좋아.일반적인 프론트엔드 프로젝트 진행 단계1. 요구사항 정의 (무엇을 만들 것인가)어떤 기능이 필요한가?누가 사용할 것인가? (사용자 페르소나 간단히라도 생각해보기)플랫폼은? (웹, 모바일 등)예시:사용자 위치 기반 현재 날씨 보여주기도시 검색해서 날씨 확인 가능하게 하기섭씨/화씨 전환 버튼3일 또는 5일 예보 보여주기날씨에..

날씨앱 메인페이지에서 구현 할 내용이, 내가 있는 위치의 날씨 정보 이므로, 현재 위치를 우선 알아야 한다.그 과정에 필요한 내용.날씨 앱 말고도 현재 위치로써 활용할 수 있을 내용이 많을 것 같다!1. 현재 위치 받아오기 구글링 해보니 geoLocation 해당 사이트에서 위치 api 제일 많이 받아오는 것 같았다.날씨 앱 만드시는 분들 중에 왕초보를 위한 설명은 없는 것 같아서 한번 적어보기로.. 일단 geoLocation으로 위치 받아오는 것부터 친절하게 연습해보자 공식 문서만 참고하기엔 아직 어렵기도 해서 구글링 해서 찾아낸 방법공식 문서 언제쯤 읽고 변형해서 코드 찔까나.. 사용자가 동의 하면, 해당 함수로써 api호출! Geolocation.getCurrentPosition()는 위치를..

심화반 수업 엿듣다가 .. 다른 분 포폴에서 예를 들어 제품 갯수가 보이고, 그 위에 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()) ...

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

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

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

앞 4-2단계에서 이어집니다. mini project - 영화 페이지 만들기(4-2단계) - 백엔드 연결 (supabase) 로그인 / 회원가입 구현 /앞 4-1단계에서 이어집니다. 이 단계부터는, 아직 경험이 없기 때문에. 많은 시행착오가 있을 예정.. 차근 차근 해보면 되겠지 ?! mini project - 영화 페이지 만들기(4-1단계) - 백엔드 연결 전 input창creamymood.tistory.com 부캠에서 제시해준 구현단계 네번째 최종 구현 단계는 다음과 같습니다. 1. 기본 이메일 / 비밀번호 기반의 로그인 / 회원가입 과정 (Supabase 백엔드 이용 하는 방식)2. 소셜 로그인 / 회원가입(카카오, 구글, 네이버 등 소셜 연동) 이렇게 두가지 방법으로써 로그인과 회원가..