TS4 [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. [Develog] 타입스크립트 기초 1. 타입스크립트란? 자바스크립트에 타입이 추가된 문법이다. 자바스크립트는 자료형이 동적이기 때문에 프로젝트 실행 전에는 어떤 오류가 있을지 파악하기 어렵기 때문에 유지보수가 어렵지만 타입스크립트는 자료형을 정적으로 할당하기 때문에 IDE에서 컴파일 타임에 에러를 빨간 줄로 미리 알려줄 수 있다. TypeScript : 변수의 타입이 컴파일 타임에 결정됨 JavaScript: 변수의 타입이 런타임에 결정됨 *컴파일 타임: 작성한 소스코드가 (js, binary 등으로) 변환되는 과정 *런타임: 프로그램이 실행되는 과정 2. 타입스크립트를 사용하는 이유 장점 단점 TypeScript 1. Microsoft에서 만들었고 꾸준히 업데이트한다. 2. 생태계가 크다. 3. Microsoft에서 개발한 vscode.. 2023. 1. 17. 이전 1 다음
