JS10 [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] 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] 유튜브 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. [React] 리액트로 todo리스트 만들기 컴포넌트: Todo, Button 추가기능: 가로스크롤 id를 Date.now()로 지정해 id 겹침현상 제거 완료된 모습 App.js import React, { useState } from 'react'; import './App.css'; import Todo from './components/Todo'; import CustomBtn from './components/CustomBtn'; function App() { const [todo, setTodo] = useState([ { id: Date.now(), title: 'todotest', contents: '리액트기초를 공부해봅시다.', }, { id: Date.now() + 1, title: 'todotest222', contents: '.. 2022. 12. 7. [React] 리액트 기초 개념 컴포넌트/JSX/Props/State 리액트를 공부하는 첫 날이다! 기대된다. 1. 컴포넌트란? 재사용할수 있는 조립 블록. 화면에 나타나는 UI 요소라고 생각하면 이해하기 쉽다. 단순히 UI 역할 뿐만 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트는 데이터와 UI 요소의 집합체라고 할 수 있는 컴포넌트를 이용하여 화면을 구성하게 된다. 2. JSX 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. JSX는 가독성이 높고 작성하기도 쉬우며 XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다는 장점이 있다. *JSX에서 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야한다. 위와 같이 작.. 2022. 12. 5. [Develog] 자바스크립트 새로 고침해도 로그인 유지하는 방법 localStorage와 sessionStorage 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다. sessionStorage는 새로고침해도 데이터가 사라지지 않게하고 localStorage는 브라우저를 다시 실행하도 데이터가 사라지지 않고 남아있다. 쿠키를 사용해도 되는데 왜 웹 스토리지 객체를 사용할까? 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않기 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 부라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해준다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다. 쿠키와 또 다른 점은 서버가 HTTP .. 2022. 11. 27. [자바스크립트] 정규 표현식 기초 자바스크립트 정규 표현식과 사용방법 1. 정규 표현식 만들기 const re = /a/ //a 한글자 const re2 = /abc/ //abc 세글자 정규 표현식은 다음과 같이 슬래시로 패턴을 감싸서 작성 const re = new RegExp('a') // == /a/ const re2 = new RegExp('abc') // == /abc/ 이는 RegExp 생성자 함수를 사용해서 다음과 같이 표현할 수 있다. 바뀔 수 있는 패턴이나, 사용자 입력과 같이 외부 출처에서 가져오는 패턴의 경우 생성자 함수를 사용하면 좋다. (Using the constructor function provides runtime compilation of the regular expression) 2. 정규 표현식 사용법.. 2022. 11. 15. 이전 1 2 다음
