JavaScript31 JSX? 그게 뭔데? 1. JSX의 정의JSX는 JavaScript XML의 줄임말로, JavaScript 안에서 HTML 같은 문법을 사용할 수 있게 해주는 문법 확장입니다. JSX는 React 컴포넌트에서 UI를 정의하는데 매우 유용하며, 보다 직관적으로 UI 구조를 작성할 수 있습니다.쉽게 말해, JSX는 JavaScript 코드를 작성하면서 HTML 태그를 넣을 수 있도록 도와주는 도구입니다. 이를 통해 HTML 요소들을 함수형 컴포넌트 내부에서 정의하고 조작할 수 있습니다. JSX의 기본 문법:const element = Hello, world!;위 코드는 JavaScript로 작성되어 있지만, HTML 요소를 포함하고 있는 것을 볼 수 있습니다. JSX를 사용하지 않으면 UI를 JavaScript 코드로 아래와 같.. 2024. 9. 10. [REGEX] 저장했던거 설명해드릴게요 자바스크립트 정규식 직전에 쓴 글을 확장해보겠습니다.2024.09.06 - [FrontEnd/Java Script] - [REGEX] 저장해두고 사용하세요 자바스크립트 정규식 [REGEX] 저장해두고 사용하세요 자바스크립트 정규식실속있게 내용만 접수 1. 생년월일/^[0-9]{2}\.(0[1-9]|1[0-2])\.(0[1-9]|[12][0-9]|3[01])$/2. 이메일/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/3. 전화번호/^01([016789])-?([0-9]{3,4})-?([0-9]{4})$/4. 아이디/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/5fathory.tistory.com이전 글에서 소개했던 자주 쓰는 정규식을 자세하게 뜯어보겠습니다.1. YY.MM.DD 형식의 생.. 2024. 9. 6. [REGEX] 저장해두고 사용하세요 자바스크립트 정규식 실속있게 내용만 접수 1. 생년월일/^[0-9]{2}\.(0[1-9]|1[0-2])\.(0[1-9]|[12][0-9]|3[01])$/2. 이메일/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/3. 전화번호/^01([016789])-?([0-9]{3,4})-?([0-9]{4})$/4. 아이디/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/5. 카드번호/^(?:4\d{3}[- ]?\d{4}[- ]?\d{4}[- ]?\d{4}|5[1-5]\d{2}[- ]?\d{4}[- ]?\d{4}[- ]?\d{4}|2(?:2[2-9]\d|[3-6]\d{2}|7(?:[01]\d|20))[- ]?\d{3}[- ]?\d{3}[- ]?\d{4}|3[47]\d{2}[- ]?\d{6}[- ]?\d{5.. 2024. 9. 6. [this] 5년만에 다시보는 자바스크립트의 this 개요많은 시간이 지나고 나는 this가 지칠하는게 뭔지 잘 알고있는가에 대해서 물어봤을때 잘 모르는게 맞다! 라는 판단이 들었다.그 이유는 면접에서 털렸기때문이다 예제를 보다 구체적으로 알아보면서 컨텍스트에 따라서 this가 어떤 객체를 가리키는가에 대해서 한번 더 알아보고자 한다. 1. 글로벌 컨텍스트 글로벌 컨텍스트에서 this는 전역 객체를 가리킵니다.브라우저 환경에서는 window 객체를, Node.js 환경에서는 global 객체를 참조합니다. // 글로벌 컨텍스트console.log(this); // 브라우저에서는 'window' 객체, Node.js에서는 'global' 객체const person = { name: 'Alice', greet: function() { console.l.. 2024. 8. 28. ty vs got: 어떤 라이브러리를 선택할까? 자바스크립트에서 ty 라이브러리와 got 라이브러리는 모두 HTTP 요청을 처리하는 데 사용될 수 있는 도구들입니다. 하지만 이 두 라이브러리는 목적과 기능 면에서 차이가 있습니다. 이번 블로그 글에서는 ty와 got의 주요 기능, 사용 사례, 장단점을 비교하여 어떤 상황에서 어떤 라이브러리를 사용하는 것이 좋을지에 대해 알아보겠습니다.1. ty 라이브러리란?개요ty는 주로 API와의 상호작용을 위한 라이브러리로, 특히 TypeScript 개발자들을 위한 라이브러리입니다. ty는 TypeScript의 타입 시스템을 최대한 활용하여 안전한 API 호출을 가능하게 합니다. API와의 통신 과정에서 타입 안전성을 유지하며, 자동으로 타입을 추론해주는 기능이 특징입니다. 주요 기능타입 안전성: API 요청과 응.. 2024. 8. 12. Missing Suspense boundary with useSearchParams 발단React로 웹 개발을 하다보면 url searchParams를 활용해서 데이터를 처리해야 하는 경우가 생기는데, IDE에서 이와 같은 에러를 내밀었습니다.React는 비동기 작업을 처리하면서 사용자에게 일관된 경험을 제공하기 위해 Suspense 경계를 사용합니다 왜? useSearchParams는 React Router의 훅 중 하나로, URL의 쿼리 파라미터를 읽고 설정하는 데 사용됩니다. 이 훅을 사용할 때, React는 비동기적으로 쿼리 파라미터를 처리하므로 Suspense boundary를 설정하지 않으면 "Missing Suspense boundary" 오류가 발생할 수 있습니다. 비동기 작업을 처리하는 동안, React는 사용자가 비동기 처리가 완료될 때까지 기다리도록 하는 기본적인.. 2024. 7. 19. # Worklet Worklet Worklet이란 Worklet 인터페이스는 Web Workers의 경량 버전이며 개발자가 렌더링 파이프 라인의 하위 수준에 접근할 수 있도록 해준다. Worklet을 사용하면 JavaScript 및 WebAssembly 코드를 실행하여 고성능이 필요한 경우 그래픽 렌더링 또는 오디오 처리를 수행 할 수 있다. - MDN 기본적으로 Worker는 한 Thread에 하나가 생성이 가능하지만, Worklet은 한 Thread에 여러 개 생성이 가능합니다. 메인 Thread에서 만들 수 있습니다. 독립적인 GlobalScope와 Event loop를 가집니다. Worklet Type PaintWorklet LayoutWorklet AnimationWorklet AudioWorklet 그리고 Ty.. 2023. 7. 15. React Native와 함께 사용하는 TypeScript의 이점 및 사용 방법 React Native와 함께 사용하는 TypeScript의 이점 및 사용 방법 소개 React Native는 JavaScript를 사용하여 모바일 애플리케이션을 개발하기 위한 인기있는 프레임워크입니다. 그러나 JavaScript는 동적 타입 언어이기 때문에 개발자가 실수를 할 수 있는 여지가 있습니다. 이러한 문제를 해결하기 위해 TypeScript를 React Native와 함께 사용하는 것이 좋습니다. TypeScript는 정적 타입 언어로, 개발자가 코드를 작성하는 동안 타입 오류를 사전에 감지할 수 있습니다. 이번 블로그 포스트에서는 React Native와 함께 사용하는 TypeScript의 이점과 사용 방법에 대해 자세히 알아보겠습니다. 본문 1. TypeScript의 이점 TypeScrip.. 2023. 7. 11. Node.js BackEnd framework 종류와 특징 소개 Node.js는 개발자들이 확장 가능하고 효율적인 서버 사이드 애플리케이션을 구축할 수 있는 인기있는 JavaScript 런타임입니다. Node.js의 주요 장점 중 하나는 저지연성과 동시 연결 처리 능력입니다. 개발 과정을 보다 쉽고 효율적으로 만들기 위해 다양한 Node.js 백엔드 프레임워크가 개발되었습니다. 이러한 프레임워크는 개발자들이 견고하고 유지보수 가능한 서버 사이드 애플리케이션을 구축하는 데 도움이 되는 도구, 라이브러리 및 규칙 세트를 제공합니다. 1. Express.js Express.js는 가장 인기 있는 Node.js 백엔드 프레임워크 중 하나입니다. 이는 웹 애플리케이션 및 API를 구축하기 위한 간단하고 직관적인 API를 제공하는 최소한의 유연성을 가진 프레임워크입니다. .. 2023. 7. 1. 이전 1 2 3 4 다음 반응형
