본문 바로가기

매일 해내는 개발102

[React] Next.js란 무엇이고 왜 사용하는가 Overview Next.js는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크로, 리액트에는 없는 **서버 사이드 렌더링server-side rendering(SSR), 정적 사이트 생성static site generation(SSG), 증분 정적 재생성incremental static regeneration(ISR)**과 같은 다양하고 풍부한 기능을 제공합니다. 서버사이드 렌더링(SSR)을 함으로써 얻는 이득은? 로딩- 클라이언트 사이드 렌더링(CSR)의 경우 모든 js 파일을 로드하고 사용자는 웹을 보게되는데 이때까지 사용자는 많은 시간을 대기해야 하는데, 서버사이드 렌더링은 서버에서 자바스크립트를 로딩함으로 클라이언트 측에서는 자바스크립트를 로딩하는 시간이 줄어들게 됨 SEO- 클라이언트 .. 2023. 2. 7.
[Develog] 최종프로젝트 S.A 프로젝트 S.A 1. 팀 소개 팀 이름 Detto (Develop Together) 팀원 성효진 (L) 이상원 이유정 (VL) 이정은 배성완 위하연 (D) 2. 그라운드 룰 소통 채팅 - Discord / 프로젝트 관리 - Notion 상호 존댓말 사용하기. 노션 게시글에 댓글 달아주기. Discord 이모지 반응 남기기. ✅👍👀👏 질문이 있을 때, Discord 옥상/진실의방 허들 사용하기. 시간표 ✨ 자율 출퇴근 제도 ✨ 지각비 1000원 / 30분 💸 재택근무🏠 가능 데일리 일정 ~10:00 자율 출근 10:00 데일리 스크럼 (특이사항, 일정 공유, 논의가 필요한 사항) 12:30~14:00 점심 18:00~19:30 저녁 21:00~ 마무리 인사, 자율 퇴근 주기적인 일정 코드 리뷰 - 월,수,.. 2023. 2. 7.
[Error] vecel로 배포 후 파이어베이스 구글 로그인 안됨 The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (gnd-project.vercel.app) to the OAuth redirect domains list in the Firebase console -> Authentication -> Settings -> Authorized domains tab. 난 이런 오류가 떴고 파이어베이스 Authentication -> Settings 에서 승인된 도메인에 저 오류에 있던 도메인을 넣어줬더니 .. 2023. 2. 4.
[Develog] js와 jsx, ts와 tsx의 차이 / jsx를 js로 변환하는 과정 JS와 JSX의 차이 JavaScript(JS)와 JSX는 React 프로젝트에서 사용되는 두 가지 파일 형식이다. JSX는 JavaScript XML의 약자로, React에서 UI를 구성하는 데 사용된다. JS 파일은 일반적인 JavaScript 코드를 포함한다. 함수, 변수, 제어문 및 객체와 같은 JavaScript의 모든 구성 요소를 사용하여 구성된 파일이다. JS 파일은 React에서 UI를 구현하는 데 사용될 수 있지만, JSX를 사용하는 것이 일반적이다. JSX 파일은 HTML과 JavaScript를 혼합한 문서이다. JSX 파일에는 JavaScript 코드가 포함되어 있지만, HTML 요소와 유사한 구문을 사용하여 React에서 UI를 구성하는 데 사용된다. 예를 들어, JSX에서는 HTM.. 2023. 2. 3.
[Develog] Throttling & Debouncing Throttling 개념: 짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것 예) 무한스크롤 Type1 Leading Edge 처음 이벤트 핸들러만 호출 // Leading Edge Throttling const throttle: ControlDelay = (delay) => { if (timerId) { // timerId가 있으면 바로 함수 종료 return; } console.log(`API요청 실행! ${delay}ms 동안 추가요청 안받음`); timerId = setTimeout(() => { console.log(`${delay}ms 지남 추가요청 받음`); // alert("Home / 쓰로틀링 쪽 A.. 2023. 1. 31.
[Develog] 유튜브 API 요청 후 파이어베이스에 저장하는 방법2 1탄 [Develog] 타입스크립트 + 유튜브 API로 데이터 요청 후 파이어베이스로 저장하는 방법 첫 번째로 했던 작업은 타입스크립트로 유튜브 API를 요청하고 요청한 데이터를 가공해서 파이어베이스에 저장하는 방법이었다. 이 때는 API 사용법이 아직 익숙하지 않아 플레이리스트를 요청 subtlething.tistory.com 저번시간에 유튜브 API를 이용해 데이터를 받아 오는 것 까진 했는데 생각해보니 우리 프로젝트에서는 플레이리스트가 필요했다. 우리가 짠 와이어 프레임 상 대시보드 페이지에 아래처럼 강의 리스트를 보여줘야 하기 때문이다.. 근데 이미 데이터를 단일 데이터로 넣었는뎅...... 힝 대시보드 없애버릴까 싶었지만 개발자로서 그럴 쑨 없쥐 플레이리스트 가져오기? 그게 왜 안되겠어. 바로 .. 2023. 1. 29.
[Error] 타입스크립트 라우터 오류 'Page'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise<Element>'은(는) 유효한 JSX 요소가 아닙니다. Promise값 리스트로 변환하기 오류내용 'Page'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise'은(는) 유효한 JSX 요소가 아닙니다. 'Promise' 형식에 'ReactElement' 형식의 type, props, key 속성이 없습니다. 타입스크립트 라우터에서 발생하는 오류메세지이다. 트러블 슈팅 순서 문제 정의 사실 수집 원인 추론 조치 및 방안 검토 결과관찰 (만약 문제가 다시발생한다면 4번으로 다시) 1. 문제 정의 난 이 페이지에서 자바스크립트처럼 비동기 async / await를 쓰고 싶어서 아래 이미지 처럼 async 키워드를 써주면 Router페이지에서 이렇게 오류가 빵빵 터진다. 2. 사실 수집 오류 메세지를 잘 살펴보자. 'DashboardPage'은(는) JSX 구성 요소로.. 2023. 1. 28.
[Develog] 타입스크립트 + 유튜브 API로 데이터 요청 후 파이어베이스로 저장하는 방법 첫 번째로 했던 작업은 타입스크립트로 유튜브 API를 요청하고 요청한 데이터를 가공해서 파이어베이스에 저장하는 방법이었다. 이 때는 API 사용법이 아직 익숙하지 않아 플레이리스트를 요청하는 방법을 몰랐고 videoId가 있는 단일 영상 데이터만 받았다. 코드 설명 1. API 요청 axios .get( `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=5&q=자바스크립트&order=relevance&key=${구글APIkey}` ) .then((res) => { console.log(res); setPlaylist(res.data.items); }) .catch((err) => { console.log(err); }); axio.. 2023. 1. 25.
[develog] React 아웃소싱 프로젝트 S.A https://slash-quiver-80f.notion.site/React-S-A-e47d9765fa854a98add99c778a6f2df1 React 아웃소싱 프로젝트 S.A 1. 프로젝트 소개 slash-quiver-80f.notion.site 팀 그라운드 룰 개발 일정을 못 맞출 것 같을 땐 팀원들에게 꼭 미리 말해주기 주기적으로 진행 상황 공유하기 시간 약속 잘 지키기(늦을 것 같을 땐 미리 양해 구하기) 코드 컨벤션 tapSize 2 Auto Create Quotes : false Quote Style : single or double Prettier : Single Quote True 커밋 컨벤션 feat : 새로운 기능, 페이지 추가 fix : 버그 수정, 코드 내용 변경 docs : 문서.. 2023. 1. 25.

티스토리툴바