Per ardua ad astra.

.jsx 파일 사용 하는 방법들어가며리액트 네이티브(React Native) 프로젝트에서 .jsx 파일을 사용하는 방법을 간단하게 정리해본다.일반적으로 리액트 네이티브에서는 .js 파일만 인식하며, .jsx 파일을 사용하려고 할 경우 에러가 발생한다. 방법현재 리액트 네이티브 프로젝트의 expo-cli 버전에 따라 방법 ① 또는 방법 ②의 방법을 따라한다. 방법 ① : metro.config.js 파일에 확장자 추가하기프로젝트 최상단 경로(/)의 메트로 설정 파일(metro.config.js)에 다음과 같이 코드를 추가한다.만약 해당 파일이 없을 경우 새로 생성해준다. /metro.config.jsmodule.exports = { resolver: { sourceExts: [..

.js 파일에서 Uncaught SyntaxError: Unexpected token '들어가며.js 파일에서 Uncaught SyntaxError: Unexpected token '이 문제는 Vite로 만든 프로젝트에 발생하는 문제이다.  문제 발생 상황/src/utils/links.js 파일에서 컴포넌트(Component)가 value로 들어 있는 key가 들어 있는 객체를 외부 컴포넌트에서 import 하여 사용하려고 할 때, 다음과 같은 오류가 발생하였다. /src/utils/links.jsicon 키의 값을 외부 컴포넌트에서 불러올 때 위와 같은 오류가 발생하였다.const links = [ { id: 1, text: 'stats', path: '/', ..

컴포넌트를 생성하는 방법 2가지 (JSX, React.createElement)들어가며리액트(React.js)에서 컴포넌트를 생성하는 방법 2가지를 정리해본다. 컴포넌트 생성 방법① 함수형 컴포넌트function Greeting() { return ( hello world );} 함수형 컴포넌트는 자바스크립트 함수로 정의되며, JSX(JavaScript XML) 문법을 사용하여 UI를 반환한다.와 태그를 사용하여 UI를 정의한다.JSX는 Babel 같은 컴파일러를 통해 React.createElement 호출로 변환된다.코드가 더 직관적이고 읽기 쉬우며, 컴포넌트를 작성할 때 HTML과 유사한 문법을 사용할 수 있다. ② React.createElementimp..

비주얼 스튜디오 코드(VS Code)에서 JSX 자동 완성 기능 켜는 방법들어가며비주얼 스튜디오 코드(VS Code)에서 return 문 안에 JSX를 작성할 때, 자동 완성 기능(Auto Complete)을 사용하는 방법을 알아보자. 방법이 방법을 위해서는 VS Code 설정을 따로 해줘야 한다.우선, Ctrl(Cmd) + ,를 눌러서 VS Code 설정 페이지를 연다. 그리고 상단의 [Open Settings (JSON)] 아이콘을 클릭한다.그리고 아래의 코드를 settings.json 코드 안에 넣어준다.{ ... "emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.syntaxProfiles"..