[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

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

Today I Learned 최종 프로젝트 시작! [2월 6일] 프로젝트 컨셉 회의록 노션 링크 https://slime-egret-f03.notion.site/2-6-bd0afccb92224f41b5753b37937513c8 회고 오전에는 팀원들과 아이스 브레이킹하는 시간을 가지고 오후에는 내내 컨셉 회의를 했다. 후보를 두 개 정도로 좁히고 최종적으로 결정된 컨셉을 구체화하는 시간을 가졌다. 하루종일 몰아치는 회의에 힘들기도 했지만 팀원들과 정말 멋진 결과물을 만들어 내고 싶다는 욕심도 생겼다.

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

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

Today I Learned Next.js 강의 수강 Programmers 문제 풀기 최종프로젝트 팀 노션 준비하기 Next.js 강의 수강 내용 router.push(url, as, options) router.push( { pathname: `/movies/${id}`, query: { title } }, `/movies/${id}` ) 클라이언트 측 전환을 처리한다. 이 방법은 next/link가 충분하지 않은 경우에 유용하다. url: UrlObject | String: 탐색할 URL as: UrlObject | String: 브라우저 URL 표시줄에 표시될 경로에 대한 선택적 데코레이터이다. getServerSideProps export default function Detail({ params..

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

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

Today I Learend 노마드코더 Next.js 강의 수강 Programmers 문제 풀기 Next.js 강의 수강 내용 Redirects // next.config.js module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, { source: '/old-blog/:path*', destination: '/blog/:path*', permanent: false } ] }, } request 경로를 다른 destination 경로로 Redirect할 수 있다. redirects은 source, destination 및 permanent 속성이 있는 객체를 포함하는 배열..

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

[TIL] 내일배움캠프 React 과정 2023.02.03_Next.js

Today I Learned 스파르타 Next.js 강의 수강 노마드코더 Next.js 강의 수강 Programmers 문제 풀기 스파르타 Next.js 강의 내용 정리 _app.js 와 _document.js _app.js Next.js의 root component에 해당하는 파일. 사용 예시 글로벌 CSS적용 초기값 설정 _document.js HTML 구조를 커스텀할 때 사용. 오직 Server Side에서만 렌더링 됨 CSS와 같은 스타일이 초기 HTML 렌더링 시에 적절하게 적용될 수 있도록 도움 예시) styled-components 사용 시 document.js가 없으면 초기에 깜빡거림. ServerStyleSheet을 사용하는 것으로, styled components로부터 만들어진 styl..

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