728x90 Frontend36 TypeScript의 등장 | tsconfig.json TypeScript2012년 마이크로소프트가 발표한 JavaScript를 기반으로 타입 관련 기능을 추가한 프로그래밍 언어JavaScript언어 + 타입 시스템, 컴파일러 등 기능 제공목표 : 자바스크립트 언어를 그대로 사용하되, 더 안전하게 사용할 수 있게 안정성을 높히다. // javascriptlet a = 1;let b = 2;console.log(a+b);// typescriptlet a:number = 1;let b:number = 2;console.log(a+b);TypeScript 배경1. 자바스크립트 한계점동적 타입 시스템은 유연하고, 빠르고, 간결하게 코드를 작성한다는 장점이 있지만, 런타임 시에 예상치 못한 문제를 발생하게 될 수 있다.타입 시스템정적 타입 시스템 : 코드 실행 이전에.. 2024. 4. 12. JavaScript는 어떻게 동작할까? | 컴파일러, 런타임 개요프론트엔드 개발을 시작하면 가장 먼저 마주하는 언어가 JavaScript입니다. 브라우저만 있으면 실행되니, “인터프리터 언어구나~” 하고 넘어가곤 하죠. 하지만 최근 JavaScript 개발 환경은 매우 복잡해졌습니다.typeScript 코드가 컴파일이 되고, React와 Virtual DOM 같은 프레임워크와 트랜스파일러 기반의 언어들이 등장하며 Babel 같은 트랜스파일러가 등장하고, Webpack, Vite 같은 번들러가 무언가를 만들어냅니다.이번 포스팅에서는 JavaScript는 어떻게 돌아가는지 그리고 왜 이런 도구들이 생겨났는지 알아보겠습니다. 자바스크립트의 동작 원리인터프리터 vs 컴파일러과거 JavaScript는 브라우저 가 코드를 한 줄씩 읽고, 그때그때 실행되는 인터프리터 언.. 2024. 4. 11. [ERROR] Create React App requires Node 14 or higher.Please update your version of Node. 오류 내용Create React App requires Node 14 or higher.Please update your version of Node. 오류 화면 오류 확인 결과- 24-04-08기준 create-react-app은 node 14버전 이상 시 프로젝트 생성이 가능하다.특정 npm 라이브러리 중 14이상이 필요한 라이브러리가 있다고 생각하면 된다.- nvm 을 사용해서 14버전 이상으로 로컨 노드 버전을 설정해주면 된다. 결과 2024. 4. 8. React 컴포넌트 생명주기, 렌더링 | LifeCycle(render) 개요React는 상태가 변경될 때마다 전체 UI를 Virtual DOM에 렌더링한다.React의 Reconciliation 알고리즘이 Virtual DOM과 실제 DOM 간의 차이를 비교하여 필요한 부분만 실제 DOM에 업데이트합니다. 리액트 생명주기 메서드생명주기 메서드에는 componentDidMount, componentDidUpdate, componentWillUnmount가 포함됩니다. 이러한 메서드를 사용하면 컴포넌트의 생명주기 특정 시점에 코드를 실행할 수 있습니다. 리액트 생명주기1. 초기 렌더링초기 렌더링은 컴포넌트가 처음 DOM에 삽입될 때 발생하며, 이후 상태나 속성이 변경될 때마다 업데이트 렌더링이 이루어진다.constructor(): 컴포넌트 인스턴스가 생성되고 초기 state가.. 2024. 4. 5. [Error] Cannot find module 'stream/promises' 오류 메시지- Cannot find module 'stream/promises'- 'stream/promise' 모듈의 경로를 확인할 수 없습니다. 오류 화면 오류 원인- create-next-app 프로젝트를 생성하면서 작성되는 import 식에서 해당 모듈을 가져오지 못해서 발생한다.- node:stream/promises>=15.x 해당 모듈은 노드 버전이 15이상만 지원되기 때문에 노드 버전 업이 필요하다. 해결 방법- nvm 을 사용한다면 노드 버전 15이상을 설치한 뒤 변경한다.- 노드 버전은 메이저 버전을 짝수로 사용하는 것을 권장한다.- 나는 10버전으로 셋팅 되어 있었고 18버전으로 변경해 주었다.nvm install 18.19.0nvm use 18.19.0 결과 2024. 3. 27. 생산성있는 Javascript 코드 작성 | longhand, shorthand 개요개발에서 longhand(긴 형식)과 shorthand(짧은 형식)는 같은 작업을 수행하지만 코드 길이나 표현 방식이 다릅니다. shorthand는 더 간결한 코드 스타일을 의미하며, 특히 CSS, JavaScript, 객체 표현 등에서 많이 사용됩니다. 1. 조건문 (Control Statements)if 문longhandif (likeJavaScript == true)var a;if ( a != true ) {// do something...} shorthandif (likeJavaScript)var a;if ( !a ) {// do something...} if else 문longhandvar big;if (x > 10) { big = true;}else { big = false;} .. 2024. 3. 4. React 버전 정책 및 주버전(V16, 17, 18, 19) 특징 주의해당 문서는 React 18에 대해 설명하고 있습니다. React 17은 아래를 살펴봐 주세요. https://17.reactjs.org. 개요2022-03-29에 React 18 버전(18.0.0)이 처음 배포되었습니다. 2024-04-25에 18.3.0이 출시되기까지 약 2년 동안 18.2.0이 최신 버전으로 유지되었습니다.이후 18.2.0과 동일한 기능을 유지하면서도 React 19에 맞는 변경 사항이 추가된 버전 18.3.0이 배포 2024-12-05에 React 19(19.0)가 정식 배포되었습니다.이제 최신 버전과 가장 많이 사용되는 버전을 확인하고, 버전별 변경 사항을 살펴보는 시간을 가지려고 합니다. 리액트 변경 로그https://github.com/facebook/react/bl.. 2024. 2. 2. React 기반 웹 애플리케이션 개발 가이드 프로젝트 생성 및 환경 설정1. create react app- bundler : webpack- transfiler : babelnpx create-react-app my-appCreate React App (create-react-app.dev) Create React AppSet up a modern web app by running one command.create-react-app.dev 2. create vite app- bundler : vite- transfiler : babelnpm create vite@latest my-vue-app -- --template vueGetting Started | Vite (vitejs.dev) ViteNext Generation Frontend Too.. 2024. 1. 26. Jaml: JavaScript 기반 선언형 HTML 생성 도구 | JAML.js 개요아키텍처 기술 조사 중 JAML webSite 라는 단어를 보았다.May 20, 2021 자료 중 일부 였는데 JAML를 구글에 검색했을때 정리된 자료가 별로 없었다.그래서 간단하게 정리해보려고 하는 포스팅이다. JAMLJAML은 때때로 "JavaScript-based Markup Language"의 약어로 사용되며, XML이나 HTML처럼 구조화된 마크업을 JavaScript 스타일로 작성하려는 시도에서 나온 개념입니다. 예전에는 JAML.js라는 JavaScript 라이브러리가 있었고, 이는 WPF(XAML) 스타일의 UI를 웹에서 구현하려는 프로젝트였습니다.Jaml은 Ruby의 Haml 라이브러리를 에뮬레이트하여 JavaScript 프로젝트에서 HTML 렌더링을 간소화하도록 설계된 JavaSc.. 2024. 1. 12. 이전 1 2 3 4 다음 728x90
