행복을 담는 블로그

끝나지 않을 것만 같은 내일배움캠프가 드디어 최종 프로젝트만을 남겨두고 있다... 최종 프로젝트에서는 디자이너분도 함께 진행을 하게 되었고, 디자이너분께서 기본적인 와이어프레임, 컬러, 디자인과 관련한 부분들에 대해서 도움을 주신다고...! 디자인에 대해서 일도 감각이 없는 개발자로서.. 진짜 쓸만한 프로젝트가 나올 수 있을 듯 하다ㅋㅋ 오늘 결정된 주제도 디자이너분께서 키워드를 던져주셨는데 완전 팀원 모두가 긍정적으로 반응하여 최종 주제로 발탁되었다!! 우리가 결정한 주제는 바로 "원데이 클래스 예약 사이트"이다! 이번 프로젝트를 통해 해보고 싶었던 기능 구현으로는 크게 두가지였다. - 지도 api를 불러와서 위치를 찍어보고, 지도 api 기능을 많이 활용해보자. - 실시간 채팅 기능을 구현해보자. 캠..

이번 프로젝트를 진행하면서 로그인 기능을 처음 맡게 되었는데, 이부분을 해결하기 위해 상태 유지를 하는 등 많은 우여곡절이 있었던 것 같다. 그 중에서도 상태유지를 하면서 로그인한 정보를 불러와 로그인한 정보가 존재하면, 로그인 상태로 유지하고, 로그인한 정보가 없을 경우 로그아웃 된 상태로 유지하는 hooks을 만들어 사용하였다. // _hooks > useLoggedIn hook import { getLoginUserInfo } from "../_components/authComponents/authInfo-api"; export const useLoggedIn = () => { const { setIsLoggedIn } = useAuthStore(); const isLoggedIn = useAuth..

supabase를 이용해서 로그인 기능을 구현했는데, 로그인할 때 등록한 user의 email, nickname, profileImage 를 다른 팀원분들도 사용할 수 있게 전역상태로 관리하기로 했다. 전역 상태 관리로 zustand를 사용하였다. zustand 공식문서 확인 https://zustand-demo.pmnd.rs/ 1. store를 생성하여 전역으로 관리할 데이터를 설정해준다. /* app > _store > authStore.tsx */ export const useUserInfoStore = create()((set) => ({ email: null, nickname: null, profileImage: null, setUser: (userInfo) => set(userInfo), })..

새로운 방법도 시도해보자! yarn berry : yarn의 업그레이드 버전 pnpm : npm의 업그레이드 버전 import alias (@/) : customizing 할거냐 물어보는 것! next.js 프레임워크 설치 시, supabase를 함께 설치하기 yarn create-next-app -e with supabase redirect : useRoute 에서 사용가능 / id가 아닌 다른 값을 넣었을 때 home으로 가는 기능 가능 🚨Supabase Error 429 : Too Many Request supabase로 로그인/회원가입 기능을 구현하다가 이메일을 사용하는데 계속해서 429 error가 났다. firebase 처럼 할당량이 있어서 api key 문제인가 싶었는데, 처음에는 내가 계속..

전역 상태 관리 최근 몇 년 사이 많은 회사에서 redux와 redux-toolkit으로 전역상태 관리를 하였는데, 최근 더 쉬운 방법 중 하나인 Zustand가 급부상을 하고 있다. npm trend npm trend 분석을 해보면, 최근에 zustand의 사용량이 redux-toolkit 과 비슷하게 급부상 중이며, 그 뒤로 recoil, jotai, valtio 등이 있다고 한다. 그렇다면 zustand는 어떤 장점때문에 많은 유저들이 redux에서 zustand로 바꾸고 있는걸까? Zustand https://zustand-demo.pmnd.rs/ 공식문서를 확인해보자. Zustand는 redux와 같은 flux 아키텍처로 동작한다. 즉, redux에서 했던 기능들이 zustand에서 가능하다고 ..

내일 발표를 앞두고 있는 아웃소싱 팀 프로젝트가 거의 마무리가 되어 가고 있다... 내일 발표 준비를 위해 피그마에 각자 구현한 기능들을 정리해 보았는데 블로그에도 기록해보고자 한다. 아 일단 이번 프로젝트가 어떤 프로젝트인지 먼저 간단히 소개를 하자면, 한마디로 " 유튜버 광고 분석 서비스 " 이다. 즉, 광고주가 제품을 유튜버에게 제공하기 위해서 어떤 유튜버를 고를 것인가에 대해서 고민을 할텐데, 이 서비스를 통해 유튜버의 구독자수, 최근 영상의 조회수, 댓글수, 좋아요수 등을 한 눈에 보기 쉽게 분석할 수 있는 서비스이다! 내가 이번 프로젝트에 맡은 부분은 채널 분석을 할 수 있는 디테일 페이지를 만드는 부분이었다. 원래는 그래프 부분에서 방사형 그래프로 분석을 하면 보다 효과적으로 분석 정보를 나..

이번 아웃소싱 프로젝트를 진행하기 위해서는 youtube api를 불러와서 사용해야하는데, 이를 위해서는 api key가 필수로 필요하다. 하루에 불러올 수 있는 할당량이 정해져있기 때문에, 할당량이 다 차면 하루가 지난 후 받을 수 있다. 1. 구글 계정을 생성하고 로그인한다. https://cloud.google.com/ 구글 클라우드 사이트로 들어간다. 2. 새 프로젝트를 시작한다. 프로젝트 명을 적고 새 프로젝트를 만든다. 3. 검색창에 youtube data api를 치고 Youtube Data API v3를 선택한다. 4. Youtube Data API v3 사용을 클릭한다. 5. 아래 순서와 같이 API 키 생성을 한다. 6. 이렇게 키 생성이 완료 된 것을 확인 할 수 있다. 7. API ..

📌 Axios란? : node.js와 브라우저를 위한 Promise 기반 http 클라이언트 쉽게 말해, http를 사용하여 서버와 통신하기 위해 사용하는 패키지이다. Axios 설치하기 yarn add axios Json-server 설정하기 db.json 파일을 만들고, 기본 데이터를 설정한다. yarn json-server db.json --port 4001 ▶️ 기존 서버가 아닌 db를 확인 할 수 있는 새로운 포트를 열겠다. 4000 포트를 여는 명령어가 너무 길기 때문에, package.json 파일에서 "serve" 라는 새로운 명령어를 지정해준다. "scripts": { "serve": "json-server db.json --port 4001" } yarn serve ▶️ 4000 포트를..