[TIL] 내일배움캠프 React 과정 2023.03.05_FullCalendar 커스텀 CSS 적용하기

Today I Learned청약캘린더 CSS 작업 FullCalendar 커스텀 CSS 적용하기너무 예뻐진 거 같다 🥰❤️ Overriding PropertiesUse the Chrome DevTools or equivelant to pinpoint the element you want to customize. Then, view its active CSS statements. For example, if you want to customize the day-of-week headers at the top of dayGrid view, you’ll see this CSS:.fc .fc-col-header-cell-cushion { display: inline-block; padding: 2px 4p..

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

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

Today I Learned lighthouse로 성능 개선하기 마이페이지 CSS 수정 styled-components 페이지에 따라 조건부 스타일링하기 관심 카테고리 설정을 할 때 같은 컴포넌트를 재사용하고 있는데 어떤 페이지에서 사용하는지에 따라 스타일링을 다르게 주고 싶었다. 회원가입 페이지의 경우에는 해당 컴포넌트 container의 padding과 box-shadow 값을 없애고 싶었다. 어떻게 할까 고민하다가 router 정보를 props로 전달하고 삼항연산자로 처리하는 방식으로 해결했다. const router = useRouter(); ... 일단 컴포넌트 내에서 Next.js에서 제공하는 useRouter의 pathname 정보를 해당 styled-components에 props로 전달한..

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

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

Today I Learned 로그인 모달, 회원가입 페이지, 마이 페이지 CSS 작업 input 태그 A component is changing a controlled input to be uncontrolled. 에러 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 이 에러는 ..

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

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

Today I Learned 회원탈퇴 기능 구현 NextAuth.js에서 useSession으로 provider 정보 받아오기 Users DB 구조 변경 NextAuth.js에서 useSession으로 provider 정보 받아오기 pages/api/auth/[...nextauth].js 에 서버를 만들어서 로그인 과정을 처리하는데 이 파일에서 callbacks라는 비동기 함수를 이용해서 session에 유저의 정보를 추가할 수 있다. async jwt({ user, token, account }) { if (user && account) { token = { ...token, provider: account.provider }; } return token; }, JWT callback의 파라미터 중 a..

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

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

Today I Learned 아파트 매매 실거래가 데이터 예외 처리 아파트 매매 실거래가 데이터 필터링해서 표 만들기 table 태그로 표 만들기 API로 불러온 아파트 매매 실거래가 데이터를 필터링해서 표로 만들었다. table 태그는 처음 써보는 거였는데 생각보다 어렵지 않았다! : 표를 생성하는 가장 상위 태그 : 표의 제목을 나타내는 태그 : 행을 나타내는 태그 : 열을 나타내는 태그 이렇게 4개의 태그로 표를 만들 수 있다. Warning: validateDOMNesting(...): cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. 그리고 콘솔에 워닝 메시지가 떠..

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

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

Today I Learned 10시 고객 피드백 관련 발제 2시 디자인 회의 4시 원장님과 취업 상담 아파트 매매 실거래가 API 분석 및 기능 구현 아파트매매 실거래 상세 자료 API 분석하기 개발일지 노션 링크 https://fanatical-marigold-762.notion.site/API-a5d47e7734554e34918701f35625dc61 회고 추가 기능으로 아파트 매매 실거래가 API 가져오는 기능을 맡게 됐다. API를 가져와서 분석 후 필터링하는 것은 처음이기 때문에 굉장히 설렌다! (+ 약간의 두려움..?)

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

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

Today I Learned 관리자 페이지 DB 업데이트 로직 수정하기 관리자 페이지 DB 업데이트 로직 수정하기 기존에는 firestore의 DB를 새로 들어온 분양 정보로 전부 교체하는 방식이었는데 이렇게 할 경우 기존에 직접 추가한 좌표나 이미지 데이터까지 삭제되기 때문에 기존 데이터는 유지하면서 새로 들어온 분양 공고 데이터만 넣어주는 방식으로 수정하기로 했다. 일단은 임시로 생성한 데이터로 테스트해서 구현했는데 실제로 새로운 분양 데이터가 들어왔을 때도 정상적으로 작동할지는 지켜봐야 할 거 같다! 관리자 페이지 데이터 업데이트 방식 변경 개발일지 노션 링크 https://citrine-camel-d7e.notion.site/da4b38aa288b4dd6a6396504d1b620e9 TTV & T..

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

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

Today I Learned 기술면접 질문 답변 정리하기 기술면접 질문 답변 정리 노션 링크 https://abrupt-moonflower-b68.notion.site/2-27-4c4521754dfc48ec9dbfdb7d74bb4150 회고 팀원들과 기술면접 질문에 대한 답변을 정리했다. 답변을 작성하기 위해서 자료를 검색해 보기도 하면서 프로젝트에 대해 더 잘 이해할 수 있는 기회가 되었다. +) 일찍 자려다가 갑자기 삘 받아서 이력서 노션 페이지 만들고 이력서 작성법 검색하면서 기본 틀을 잡아놨다. 틈틈이 써 놔야지...

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

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

Today I Learned Next.js 공부하기 회고 튜터님한테 추천받아서 팀원들 모두 구매한 그 도서 ㅋㅋㅋ 오늘은 기능 개발보다는 이 책을 읽으면서 Next.js를 공부하는 시간을 가졌다. 읽으면서 나중에 적용해보고 싶은 부분을 노션에 메모해 놓기도 했다. Next.js를 공부하고 싶은 사람이라면 이 책을 매우 추천함!

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

네이버 소셜 로그인 검수 요청 후 승인 받기

최종 프로젝트에서 네이버 소셜 로그인 기능을 구현했는데 네이버의 경우에는 모든 아이디로 소셜 로그인이 가능하게 하려면 사전에 검수를 요청한 후에 승인을 받아야 한다. 검수 요청 관련해서 검색해 봐도 자료가 별로 없었기 때문에 승인 못 받으면 어쩌나 걱정했었는데 요청 후 2시간 만에 생각보다 수월하게 승인을 받아서 이 내용을 공유해 보려고 한다! '네이버 아이디로 로그인'을 적용하기 위해서는 검수 요청을 통해 승인이 완료 되어야 합니다. 1. 등록 직후에는 애플리케이션 상태가 '개발 중'으로 등록됩니다. '개발 중' 상태일 때에는 로그인 가능한 아이디에 제한이 있습니다.(최대 20개) 테스트용으로 사용할 아이디는 개발자센터 > 내 애플리케이션 > 멤버관리에서 등록 및 관리할 수 있습니다. 2. 개발 완료 ..

• format_list_bulleted 개발 기록장
• · 2023. 2. 25.
• textsms