FrontEnd71 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. [Hoisting] let, const로 선언한 변수도 호이스팅이 될까? 결론부터 말하자면 let과 const 키워드로 선언된 변수도 호이스팅(hoisting)이 됩니다. 그러나 var와는 다른 방식으로 동작합니다.호이스팅이란?호이스팅이란, JavaScript의 기본 동작 방식 중 하나로, 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 것처럼 동작하는 것을 말합니다. 이로 인해, 코드에서 변수를 선언하기 전에 해당 변수를 참조할 수 있습니다.let과 const의 호이스팅호이스팅 방식: let과 const로 선언된 변수는 호이스팅이 되지만, **"Temporal Dead Zone (TDZ)"**이라고 불리는 구간이 있어, 실제로 변수가 선언되기 전까지는 접근할 수 없습니다.TDZ (Temporal Dead Zone): 코드 블록 내에서 let 또는 const로 선언된 변수.. 2024. 8. 29. [브라우저 렌더링] 초 간단 요약 1. HTML 파싱 (Parsing)HTML 다운로드: 서버에서 HTML 파일을 다운로드합니다.DOM 생성: 브라우저는 HTML을 파싱하여 **Document Object Model (DOM)**을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현합니다.2. CSS 파싱CSS 다운로드: 브라우저는 HTML 문서에서 참조된 CSS 파일을 다운로드합니다.CSSOM 생성: 브라우저는 CSS를 파싱하여 **CSS Object Model (CSSOM)**을 생성합니다. CSSOM은 스타일 규칙을 트리 형태로 표현합니다.3. Render Tree 생성스타일 적용: 브라우저는 DOM과 CSSOM을 결합하여 Render Tree를 생성합니다. Render Tree는 화면에 표시할 요소와 그 스타일을 포함합.. 2024. 8. 28. [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. HTML 텍스트 스타일링 태그 HTML에서는 텍스트의 스타일과 의미를 명확하게 전달하기 위해 다양한 태그를 제공합니다.웹 페이지를 구성할 때 텍스트의 가독성과 표현력을 높이는 텍스트 스타일링을 할 때 주로 사용하는 HTML 태그들을 알아보겠습니다. 1. strong 태그: 강한 강조strong 태그는 텍스트를 강하게 강조할 때 사용됩니다. 이 태그로 감싸진 텍스트는 대부분의 브라우저에서 굵게 표시되지만, 시맨틱적으로 중요한 내용을 강조한다는 의미를 가집니다. 예를 들어, 경고 메시지나 중요한 사실을 표현할 때 사용합니다.이 제품은 절대 먹어서는 안 됩니다.이 태그는 아래와 같이 표현됩니다. 더 굵게 보이는 텍스트를 보세요이 제품은 절대 먹어서는 안 됩니다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 이.. 2024. 8. 21. React Query의 처리중 상태 구분하기 React Query에서 isFetching, isLoading, isPending, isRefetching의 차이점과 활용법React Query는 서버 상태를 효율적으로 관리할 수 있는 강력한 라이브러리입니다. 서버에서 데이터를 가져오거나 캐싱하는 작업을 단순화해 주며, 이 과정에서 발생하는 다양한 상태를 쉽게 관리할 수 있도록 여러 상태 플래그를 제공합니다. 이번 글에서는 React Query의 중요한 상태 플래그인 isFetching, isLoading, isPending, isRefetching에 대해 자세히 알아보겠습니다. 1. isFetching: 데이터 갱신 상태를 확인isFetching은 쿼리가 백그라운드에서 데이터를 갱신 중인지 여부를 나타내는 플래그입니다. 예를 들어, 이미 캐시된 데이.. 2024. 8. 16. ty vs got: 어떤 라이브러리를 선택할까? 자바스크립트에서 ty 라이브러리와 got 라이브러리는 모두 HTTP 요청을 처리하는 데 사용될 수 있는 도구들입니다. 하지만 이 두 라이브러리는 목적과 기능 면에서 차이가 있습니다. 이번 블로그 글에서는 ty와 got의 주요 기능, 사용 사례, 장단점을 비교하여 어떤 상황에서 어떤 라이브러리를 사용하는 것이 좋을지에 대해 알아보겠습니다.1. ty 라이브러리란?개요ty는 주로 API와의 상호작용을 위한 라이브러리로, 특히 TypeScript 개발자들을 위한 라이브러리입니다. ty는 TypeScript의 타입 시스템을 최대한 활용하여 안전한 API 호출을 가능하게 합니다. API와의 통신 과정에서 타입 안전성을 유지하며, 자동으로 타입을 추론해주는 기능이 특징입니다. 주요 기능타입 안전성: API 요청과 응.. 2024. 8. 12. 이전 1 2 3 4 ··· 8 다음 반응형