[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

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

Today I Learned NextAuth.js 공부하기 카카오 소셜 로그인 기능 구현하기 구글과 페이스북은 firebase authentication에서 소셜 로그인 기능을 제공해 주지만 카카오와 네이버는 직접 구현해야 했기에 고민이 많았다. 그래서 구글링을 이것저것 하다가 Next.js에서 제공하는 NextAuth.js라는 녀석을 발견했다! Next-auth로 카카오 소셜 로그인 5분만에 구현하기 👻 구글, 깃허브, 애플, 트위터는 물론 카카오와 네이버 소셜로그인까지 지원하는 Next Auth를 쉽게 사용해보자. +) 세션에 저장되기 velog.io 이 글을 통해 처음 알게 되었는데 정말 글 제목 그대로 5분 만에 카카..

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

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

Today I Learned Firebase Authentication으로 구글, 페이스북 로그인 구현하기 Firebase Authentication Facebook 연결하기 Mata for Developers에 앱을 생성해서 firebase authentication가 연결을 했는데도 "URL을 읽어 들일 수 없습니다"라는 에러가 발생했다. 검색해 보니 firebase 정책 상 https만 지원하는데 개발 단계에서는 http://localhost:3000/를 사용해서 발생한 문제 같았다. 테스트 앱을 추가로 생성하면 localhost에서도 작업할 수 있다길래 기존에 생성한 앱과 연결된 테스트 앱을 만들었다. 이때 주의할 점은 firebase authentication에서 앱 ID와 비밀번호를 테스트 앱..

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

[TIL] 내일배움캠프 React 과정 2023.02.10_인증/인가, 쿠키/세션/토큰

Today I Learned 로그인, 회원가입 시 인증, 인가 관련 강의 수강 인증/인가 강의 내용 정리 인증(Authentication) vs. 인가(Authorization) 인증(Authentication): 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차. 인가(Authorization): 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차. (유저 권한, 회원 등급에 따른 권한) Quiz: 유저가 마이페이지에서 서버에 API 요청으로 개인정보를 받아오는 요청을 할 때, 서버는 클라이언트에게 인증을 해주나요 아니면 인가를 해주나요? -> 인가 http 프로토콜 통신의 특징 2가지 무상태 (Stateless) : 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에..

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

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

Today I Learned 와이어 프레임 재작성 기능 개발 시작! [2월 9일] 프로젝트 기초 작업 및 디자이너님 회의 노션 링크 https://slime-egret-f03.notion.site/2-9-282709cf29ee466eb40e14d4c7d6a594 회고 디자이너님에게 우리의 기획 방향이나 의도를 더욱 명확하게 전달해 드리기 위해서 와이어프레임을 처음부터 새로 만들었다. 와이어프레임 외에도 유저 플로우와 메뉴 구조도까지 만들어서 전달해 드렸다! 이렇게 새로 와이어프레임을 짜는 데 시간이 소요되긴 했지만 하나하나 만들어 나가면서 여기는 어떻게 보여주면 좋을까, 이렇게 보여주려면 어떤 식으로 구현할 수 있을까 팀원들과 더욱 상세하게 아이디어를 잡아나갈 수 있는 좋은 기회이기도 했다. 그리고 저녁..

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

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

Today I Learned 분양 정보 관련 API 분석하기 [2월 8일] 프로젝트 API 및 S.A 피드백 분석 노션 링크 회고 오늘 진짜 하루종일 API 분석만 했다.... 진전이 없는 느낌에 오후 동안 좀 멘탈이 나갈 뻔했지만 저녁엔 API를 실제로 가져오는 것을 테스트해 보면서 고민 됐던 문제를 해결하는 방법을 찾아서 뿌듯하게 하루를 마무리할 수 있었다! 그 과정은 바로 여기에... 여러 API로 받은 데이터 재가공하기

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

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

Today I Learned 최종프로젝트 컨셉 다시 짜기 [2월 7일] 프로젝트 기획 회의록 노션 링크 https://slime-egret-f03.notion.site/2-7-2c7c8d07cc2740b8b3d3420808254fe5 회고 오전에 튜터님이 우리 팀에 찾아오셔서 피드백을 주셨는데 우리 팀의 컨셉이 아쉽다는 의견을 주셨다. 우리의 조합으로 더욱 멋진 결과물을 만들어 낼 수 있을 텐데 특색 없이 너무 안정적인 주제를 선택했고, CRUD의 틀에서 벗어나지 못해서 프로젝트의 방향성을 다시 생각해보면 좋을 거 같다는 의견을 주셨다. 피드백을 듣고 나니 우리가 너무 심심한 주제를 선택했고 기존 서비스와 비교해도 특색이 없었나 하는 생각이 들어서 팀원들과 상의 후에 과감하게 기존의 주제를 버리고 새로 ..

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