[TIL] 내일배움캠프 React 과정 2023.02.24

Today I Learned 중간발표 진행 중간발표 회고록 작성 및 향후 계획 수립 중간발표 자료 https://slime-egret-f03.notion.site/6a0d85cd0dce4bde8f5a88a65bd3fdf6 3주차 회고록 (기술 멘토링 노트) https://brazen-polish-13e.notion.site/3-80b2653686974c9396cd5c7f96f9a74c 회고 중간발표가 드디어 끝났다!! 다른 팀들의 결과물도 확인할 수 있는 자리라 기대했었는데 다들 너무 완성도 있게 구현해서 놀랐다. 다른 팀들 발표랑 피드백도 들으면서 궁금한 키워드들을 몇 개 적어놨는데 주말 동안 한번 검색해 봐야겠다 ㅋㅋ 어제 발표 끝나자마자 회고록 작성하면서 우리 팀이 추가적으로 구현할 리스트들을 정리..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 25.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.23

Today I Learned 중간발표 준비하기 vercel로 배포하기 README.md 작성 회고 내일 중간 발표를 앞두고 오늘은 기능 개발보다는 프로젝트를 전체적으로 정리하는 시간을 가지며 자잘한 에러나 CSS를 수정하고 코드도 전체적으로 주석이나 콘솔로그를 삭제했다 . 그리고 오늘 로고를 받았기 때문에 로고 이미지까지 넣으니까 프로젝트가 훨씬 완성된 느낌이 들었다! 저녁엔 README.md를 작성했는데 작성하면서 주요 기능 정리도 되고 어렵게만 느껴졌던 README와 친숙해질 수 있는 기회라 재밌었다. 그리고 배포 링크 자랑하기! 모바일로 들어가지 마세요 ㅎㅎ https://bunyang-moeumzip.vercel.app/

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 24.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.22

Today I Learned 마이페이지 프로필 수정 기능 구현 및 전체적인 코드 리팩토링 오전 9시 반 디자이너님과 디자인 회의 저녁 8시에 원장님께 디자인 반영한 버전으로 최종 시연 Next.js에서 로그인 후 이전 페이지로 이동하기 기존에는 로그인을 했을 때 로딩 페이지로 이동 후 최초 로그인 여부에 따라 회원가입 페이지 혹은 메인 페이지로 이동하도록 구현했다. 그런데 헤더에 로그인 버튼을 클릭해서 로그인 모달에서 로그인을 처리하기 때문에 최초 로그인 유저가 아닐 때 무조건 메인으로 이동하는 게 아니라 기존 페이지로 돌아가도록 구현하고 싶었다. const router = useRouter(); router.back(); 그래서 검색을 해봤더니 Next.js에서 친절하게 그런 기능을 제공해주고 있었다!..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 23.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.21

Today I Learned 마이페이지 UI 구현 및 유저의 관심 카테고리 업데이트 기능 구현 recoil duplicate 에러 해결하기 Expectation Violation: Duplicate atom key "{아톰 키}". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement. 콘솔에 자꾸 Recoil 관련된 에러 메시지가 떠서 검색해 봤더니 Next.js와 관련하여 발생하는 문제인 거 같았다. RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false 블로그 링크를 참고하여 .env 파일에 상단의 코..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 23.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.20

Today I Learned 오후 3시에 원장님께 기본 기능 시연하고 피드백받기 로그인 모달, 회원가입 페이지 UI 구현 typescript에서 styled-components에 여러 개의 props를 넘길 경우 처음에는 props의 타입을 이렇게 지정해 줬었는데 CategoryBtn 하단으로 새로운 스타일 컴포넌트를 작성해도 폰트 색상이 원래대로 적용이 안 돼서 뭔가 이상한가 하는 생각에 문제를 찾다가 타입 지정을 뭔가 잘못해 준 거 같다는 것을 발견했다. interface CategoryBtnStyledProps { bg: string; text: string; border: string; } export const CategoryBtn = styled.button` padding: 0 17px; h..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 21.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.19

Today I Learned 북마크 기능 구현 전체적인 코드 리팩토링 로딩 화면에 스피너 추가하기 (next.js) import spinner from '../../../assets/spinner.gif'; import Image from 'next/image'; const LoadingSpinner = () => { return ( ); }; export default LoadingSpinner; 따로 라이브러리를 설치하지 않고 로딩 중 이미지를 gif로 폴더에 넣어준 후 import 해서 src에 넣어주는 방법으로 구현했다. 참고 https://loading.io/ https://anerim.tistory.com/221 next/Image 사용할 때 외부 링크 다중으로 지정하기 /** @type {i..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 20.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.18_FullCalendar

Today I Learned FullCalendar에 DB에서 불러온 이벤트 생성하기 FullCalendar 커스텀 CSS 적용하기 FullCalendar에 이벤트 생성하기 firestore에서 불러 온 분양 정보의 청약 접수 종료일마다 이벤트를 생성해주고 싶었다. var calendar = new Calendar(calendarEl, { events: [ { title: 'The Title', start: '2018-09-01', end: '2018-09-02' } ] }) 일단 공식문서를 살펴보니 event 속성의 요소가 정해져 있고 배열 안에 객체를 넣어주면 되는 거 같아서 기존 분양 정보 데이터를 이렇게 재가공하기로 했다. const array = []; homeList.map((item: any..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 19.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.17

Today I Learned 회원가입 기능 코드 정리해서 PR 넣기 청약캘린더 라이브러리 테스트해 보고 결정하기 캘린더 라이브러리 결정하기 [개발일지] 캘린더 라이브러리 선택하기→FullCalendar https://fanatical-marigold-762.notion.site/FullCalendar-3888f647e7cb4c7c95f24ec6eeba0981 회고 팀원들이 모두 2명 이상의 몫을 해내고 있기 때문에 프로젝트 진행이 순조롭게 이루어지고 있는 거 같다. 나도 빨리 필수 기능 구현을 끝내는 것을 목표로 주말에도 열일하자!

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 18.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.16

Today I Learned 2주차 기술 멘토링 노트 작성 마이페이지 닉네임, 프로필 사진 변경 기능 구현 2주차 기술 멘토링 노트 작성 링크 https://teamsparta.notion.site/2-b2224420ad11483c9b795df9e278c153 Next.js 구동 순서 Next의 구동순서는 _app.js와 _document.js가 제일 처음 실행되며, 두 파일 모두 pages 폴더 안에 있어야 한다. 1. _app.js 최초로 실행되는 파일로, Client에서 띄어지는 전체 컴포넌트의 레이아웃. 공통 레이아웃으로 최초에 실행되어 내부에 들어갈 컴포넌트들을 실행한다. 2. _document.js 그다음에 _document.js가 실행되는데, 이는 _app.js에서 구성한 HTML이 어떤 형..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 17.
• textsms

[TIL] 내일배움캠프 React 과정 2023.02.15

Today I Learned NetAuth.js 공부하기 회원가입 기능 구현 NextAuth의 refetchOnWindowFocus 속성 import { SessionProvider } from "next-auth/react" export default function App({ Component, pageProps: { session, ...pageProps }, }) { return ( ) } 페이지에 포커스가 갈 때마다 유저의 session 정보를 계속해서 볼러 오는 것 때문에 문제 되는 상황이 있었는데 공식 문서를 보다가 SessionProvider에 refetchOnWindowFocus라는 속성이 있다는 것을 발견했다! 항상 공식문서를 잘 확인해야겠다는 생각이 또 들었다. 공식문서 https:/..

• format_list_bulleted 스파르타코딩클럽/내일배움캠프
• · 2023. 2. 15.
• textsms