시리즈

💫Ed Sheeran

1.[1일차] 프로젝트 개요

프로젝트 개요 간단한 소개 Ed Sheeran 팬페이지입니다. Ed Sheeran의 노래, 팬들끼리 채팅이 가능하고, 그의 노래를 들을 수 있습니다. 프로젝트 목적 평소 좋아하던 뮤지션인 Ed Sheeran의 팬페이지가 없다는 걸 알고, 팬들끼리 소통이 가능하며 그의

2023년 8월 7일

2.[2일차] 프로젝트 세팅 & 홈화면 구성

디자인 참고 평소 워너뮤직코리아에 있는 Ed Sheeran 페이지가 예쁘다고 생각했던 터라 이 페이지 디자인을 참고로 하기로 했다. (왜 Discography랑 News 섹션은 텅텅 비어있는 것이냐아ㅠ_ㅠ 내가 반드시 채워놓고 말리라)

2023년 8월 8일

3.[3일차] 홈 화면 UI 완성하기

웹 폰트 그동안 웹 폰트는 CDN으로만 해왔는데, 외부 링크로 연결된 파일의 다운로드가 완료되지 않았으면 브라우저가 해당 자원을 사용하는 콘텐츠의 렌더링을 차단할 수 있다고도 한다. 이번 기회에 직접 Local로 다운로드해 폰트파일을 적용해보도록 하자! NanumBa

2023년 8월 9일

4.[4일차] 네이버 이미지 검색 API 연결(feat.CORS 에러)

2023년 8월 10일

5.[5일차] CSS specificity & 이미지 무한스크롤 1편

무한스크롤

2023년 8월 11일

7.[7일차] google o Auth 로그인

google o Authgoogle cloud platform에서 클라이언트ID랑 PW 발급완료!공식문서에 따르면 클라이언트 라이브러리를 로드해야 한다고 하므로, index.html <head>태그 안에 다음과 같이 코드를 작성해줬다.참고사이트: React를 사용

2023년 8월 13일

8.[8일차] 랜덤송 나타내기

메뉴에 들어가면 6가지 노래 중 랜덤으로 보여주는 기능을 만들려고 한다. 따로 API나 내가 만든 진짜 서버는 없기에, json-server 라이브러리를 이용해 간단한 시뮬레이션 정도 할 수 있는 REST API Mock Server를 이용하려고 한다. 공식문서를

2023년 8월 14일

9.[9일차] 이미지 슬라이더 (swiper) & navBar(MUI)

HOME화면에 Discography 섹션에 이미지 슬라이더를 안 만들어놓아서 swiper 라이브러리를 이용해서 구현하기로 했다. 이전에 팀플할 때 한 번 사용해본 적이 있어서 좀 더 친근했기에 시간상 바로 swiper를 이용해보기로 결정했다.Swiper 최신버전 10.

2023년 8월 15일

10.[10일차] 무한스크롤 사진(🛠️~ing)

무한스크롤 사진이 계속 반복된다는 걸 깨달았다. display가 20개씩만 보여주고, 페이지가 넘어가지 않으면서 생기는 문제였다.

2023년 8월 16일

12.[12일차] 스크롤 높이에 따라 헤더 색상 다르게 보여주기(Redux/toolkit)

홈페이지 전역에서 스크롤 높이에 따라 헤더의 색상을 다르게 보여주는 기능을 사용하고 싶었다. 전역 상태관리를 위해 Redux/toolkit을 사용하면서 오늘 다시 한번 정리하는 글! 1. headerSlice 생성 headerSlice에서는 show 라는 불리언 속

2023년 8월 18일

13.[13일차] 회원가입 구현(jwt)

백엔드가 없으면 JWT 가 변조되지 않았는지 확인할 수 없기에 사용자를 완전히 인증하는 것은 불가능하겠지만, 지금은 진짜 서비스라기보다는 사용자 인증을 구현해보려는 것이 목적이기에 json-server-auth 을 사용하기로 했다. 로그인을 구현하는 방법도 여러가지인

2023년 8월 20일

14.[14일차] 자체 로그인/로그아웃 구현& protected router

# Protected Router 로그인한 유저만 접근할 수 있는 protected Router를 구현해보고 싶었다. protected Router를 검색해보니 (내가 찾아봤을 당시는) 많은 사람들이 contextAPI를 통해 AuthProvider를 사용하던데, 그

2023년 8월 23일

15.[15일차] git revert

여담이지만 그냥 너무 귀여워서 자랑하고 싶어서 쓰는 글원래 기존에 쓰던 폰트 하나로만 사이트 내 글꼴 유지하려고 했는데,밋밋한 거 같아서 폰트를 하나 추가하기로 했다. 그리고 너\~~무 마음에 든다!!!!!!!>,<fonts 폴더에 웹폰트를 다운받은 뒤 글로벌 스

2023년 8월 24일

16.[16일차] 로그인 성공시 스낵바 보여주기(mui snackbar)

2023년 8월 27일

17.[17일차] 실시간 인기차트 구현하기(json-server)

Ed Sheeran 명곡들을 유저가 투표할 수 있는 실시간 인기차트 페이지를 구현하려고 한다! 따로 API나 내가 만든 진짜 서버는 없기에, json-server 라이브러리를 이용해 간단한 시뮬레이션 정도 할 수 있는 REST API Mock Server를 이용하려고

2023년 8월 30일

18.[18일차] 카카오 로그인 구현하기

구글 로그인을 구현해보고 나니 카카오 로그인도 구현할 수 있지 않을까 라는 자신감이 들었다. 부트캠프 파이널 프로젝트에서 우리 팀은 자체 회원가입 없이 카카오 로그인을 사용하기로 했었는데, 그 때 무슨 연유에서인지 구현하는 데 있어 담당했던 팀원이 굉장히 애를 먹었던

2023년 9월 1일

19.[19일차] 새로고침해도 좋아요 유지(localStorage)

Ed Sheeran 명곡들을 유저가 투표할 수 있는 실시간 인기차트 페이지를 구현하려고 한다!따로 API나 내가 만든 진짜 서버는 없기에, json-server 라이브러리를 이용해 간단한 시뮬레이션 정도 할 수 있는 REST API Mock Server를 이용하려고 한

2023년 9월 2일

20.[20일차] skeleton, loading spinner 보여주기

서버에서 데이터를 가져오는 동안 사용자가 빈 화면만 보고있는다는 걸 깨달았다. UX 향상을 높이기 위해 Skeleton과 loading spinner를 적용하기로 했다. Mui에서 이미 제공해주고 있는 컴포넌트를 사용해 import 해왔다. 라고 작성하고 TableBody 안에 다음과 같이 집어넣었는데 자꾸만 Warning: validateDOMNes...

2023년 9월 4일