반응형 Babel5 카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 3일차(24-06-26) 회고📝 tsconfig.jsontsconfig.json을 파일에 관하여, 문제가 생겼을 때 검색해서 나온 대로 설정했을 뿐, 정확히 무엇을 하고 있는지 이해하지 못했다. 🤷♂️tsc 사용하기tsconfig.json을 만들지 않고도 tsc를 사용할 수 있다는 사실을 알았다. tsc 명령어를 통해 원하는 .ts 파일을 .js로 컴파일할 수 있었다.$ tsc hello.ts tsc는 tsconfig.json 파일 없이도 바로 사용할 수 있었다. 그렇다면 왜 tsconfig.json을 설정해야 할까? 🤔 매번 명령어에 옵션을 주는 것이 번거롭고, 프로젝트에서 일정한 설정을 유지하기 위해서였다.vscode는 기본적으로 TypeScript에.. 2024. 7. 1. 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 2일차(24-06-25) 회고📝 Create React AppBabel을 사용하여 트랜스파일링하고, Webpack으로 파일들을 번들링 하는 구조자바스크립트 기반으로, 최근에는 다양한 언어를 이용하여 자바스크립트의 한계를 극복하는 번들러와 트랜스파일러가 등장하고 있다. 자바스크립트는 싱글 스레드 언어로, 프로젝트 규모가 커지면 빌드 시간이 증가하여 개발 생산성이 저하될 수 있다.이러한 문제를 해결하기 위해 새로운 도구들이 등장하였다.번들러 Webpack > Vite개발 단계에서는 esbuild를 통해 빌드하고, 프로덕션에서는 rollup을 통해 번들링 한다. 현재는 rollup을 통해 프로덕션 빌드를 진행하지만, 추후 esbuild가 발전하면 프로덕션 빌드도 e.. 2024. 7. 1. 리액트 네이티브 React Native | React.createElement와 JSX ⭕ 리액트 네이티브 React Native | React.createElement와 JSX 리액트 네이티브에서는 UI를 작성하기 위해 컴포넌트를 사용합니다. 텍스트를 표시하기 위해서는 Text 컴포넌트를 사용합니다. 이 때, React.createElement와 JSX는 컴포넌트를 생성하는 두 가지 주요 방법입니다. ➡️ React.createElement 함수 React.createElement 함수는 가상 DOM 객체를 생성하는 데 사용됩니다. 이 함수는 세 개의 인자를 받습니다. 첫 번째 인자: 컴포넌트의 이름 (예: 'Text') 두 번째 인자: 속성 객체 (props) 세 번째 인자: 컴포넌트의 자식 요소 예를 들어, 다음 코드는 Text 컴포넌트를 생성합니다. const virtualDOM =.. 2024. 3. 20. 리액트 React | JSX와 Babel: JavaScript의 확장된 문법과 변환 도구 ✅ JSX, JavaScript XML JSX는 리액트에서 사용되는 자바스크립트의 확장 문법입니다. 이를 통해 XML과 유사한 형태로 UI를 작성할 수 있습니다. JSX는 리액트 컴포넌트 파일에서 UI를 표현하는 데 주로 사용됩니다. JSX는 XML과 비슷한 구문으로 UI 구성 요소를 작성하며, 자바스크립트 코드 내에서 시각적으로 UI를 표현하는 데 도움을 줍니다. 개발자들은 주로 JSX를 활용하여 UI를 작성하고 유지보수하는 것을 선호합니다. .JSX 코드를 브라우저에서 직접 실행할 수는 없기 때문에, Babel과 같은 도구를 사용하여 JSX 코드를 일반 자바스크립트로 변환해야 합니다. 💡 JSX를 이용한 방법 JSX를 이용하면 HTML과 비슷한 형태로 코드를 작성할 수 있습니다. JSX 코드는 실제로.. 2023. 3. 25. 리액트 React | React 웹 개발 환경 구축: Node.js, npm, npx ✅ React 웹 개발 환경 React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. React를 개발하기 위한 환경을 구축하는 것은 프로젝트를 시작하는 첫 단계입니다. 이러한 환경을 구성하기 위해 다음과 같은 도구들이 사용됩니다. 💡 Node.js Node.js는 Chrome V8 JavaScript 엔진으로 구동되는 오픈소스 자바스크립트 런타임 환경입니다. Node.js는 서버 측 자바스크립트 실행을 위한 플랫폼으로 사용되며, React 개발에서는 바벨(Babel)과 웹팩(Webpack)과 같은 도구들을 사용하기 위해 필요합니다. Node.js는 비동기 이벤트 기반의 입출력 모델을 사용하여 가볍고 효율적인 네트워크 애플리케이션 개발을 가능하게 합니다. Babel: B.. 2023. 3. 7. 이전 1 다음 반응형
