본문 바로가기

전체 글105

[Develog] 번들러 Webpack은 무엇이고 Webpack을 사용하는 이유는?(+ vite와 차이점) Summary 자바스크립트 파일을 기능 단위로 모듈화하고 이것을 하나로 묶어 관리할 방법이 필요하게되면서 번들러의 역할도 중요해졌다. 번들러를 사용하면 소스 코드를 모듈별로 작성할 수 있고 모듈간 또는 외부 라이브러리의 의존성도 쉽게 관리할 수 있다. -모듈: 프로그램을 구성하는 구성요소로 관련된 데이터와 함수를 하나로 묶은 단위 -번들러: 의존성이 있는 모듈 코드를 하나 또는 여러개의 파일로 만들어주는 도구 -webpack: 모듈 번들러 -vite: 빠르고 간결한 개발 경험에 초점을 맞춘 번들러 모듈 프로그램을 구성하는 구성요소로 관련된 데이터와 함수를 하나로 묶은 단위로 모듈은 번들러가 등장하게 된 결정적 요소이다. 전통적인 자바스크립트 개발 방식은 기능별 또는 페이지별로 자바스크립트 파일을 분리하고.. 2023. 2. 8.
[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] npm / npx / yarn 의 차이 npm / npx / yarn은 모두 node 프로젝트에서 설치되는 패키지들을 관리해주는 툴이라고 할 수 있다. 1. npm 자바스크립트 런타임 환경 Node.js의 기본 패키지 관리자 npm은 node package manager 라는 말 그대로 노드에서의 패키지 관리자이다. 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치하라는 Getting Started가 많고, 사용빈도가 높다. 2. npx npx는 execute npm package binaries의 줄임말로, npm에 속해 있는 npm 패키지 실행 도구이다. 여기서 npx가 패키지 실행 도구 라는 것이 npm과의 큰 차이점이자 장점이다. npx는 해당 패키지를 실행만 되게 해 주기 때문에 가볍게 쓸 수 있다. 예로, 다른 사람의.. 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.

티스토리툴바