본문 바로가기

JavaScript5

[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.
[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.
[자바스크립트] javascript sort() 메소드 사용방법 1. sort() 메소드란? Array.prototype.sort() sort()는 배열에서 사용하는 메소드이다. 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다. 일반적인 다른 언어의 sort()함수와는 다르게 자바스크립트는 원소들을 문자열로 만든 뒤 유니코드 값을 기준으로 정렬하기 때문에 sort()함수만 사용한다면 우리가 원하는 정렬이 나오지 않는다. 2. sort() 구문 arr.sort([compareFunction]) sort()의 구문은 다음과 같다. compareFunction을 생략하게 되면 각 요소를 문자열로 변환해 비교한다. 따라서 compareFunction을 생략하면 정렬은 다음과 같이 이루어진다. let arr = [1, 6, 4, 3, 100]; console.log.. 2022. 11. 17.
[자바스크립트] 정규 표현식 기초 자바스크립트 정규 표현식과 사용방법 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.
[자바스크립트] ES6 set, symbol 자료구조 set, symbol은 Javascript ES6에서 새롭게 도입한 데이터 구조 *map() key와 value를 한 쌍으로 묶는다는 점에서 객체(Object)와 비슷하다 1. Set() 특징 1) 배열과 유사하다. 하지만 배열은 중복된 값을 가질 수 있지만 set은 같은 값을 중복해서 가질 수 없다. 2) 중복해서 같은 값을 추가해도 추가되지 않는다. 그래서 이러한 성질을 이용하여 중복을 제거하는 용도로 사용된다. ex) 복권번호(중복되면 안되는 항목에 적용) 3) 파이썬의 set과 유사하다. 사용법 1) 생성 : new let arr1 = new Set(); 2) 추가 : add arr1.add("추가할 값"); 3) 삭제: delete arr1.delete("삭제할 값"); 4) 초기화: clear.. 2022. 11. 8.