frontend16 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. [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. 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. Webstorm에서 tailwindCSS와 clsx를 사용할 때 자동완성이 되지 않는 문제 해결방법 vscode에서는 기본적으로 지원하는 clsx 내부에 tailwindcss 자동완성이 웹스톰에서는 지원되지 않는다.. 돈내고 쓰는것보다 커뮤니티크기가 큰게 더 좋을걸까… 뭐 아무튼 여러가지 해결방법을 찾아 헤맨 끝에 완벽한 방법은 아니더라도 해결할 수 있는 방법을 찾아냈다. 웹스톰 → Settings → Language & Frameworks → Style Sheets → Tailwind CSS 설정으로 접근한다. 설정 항목 중 experimental 부분을 아래와 같이 수정한다. "experimental": { "configFile": null, "classRegex": ["[\"'`]([^\"'`]*).*?[\"'`]"] } 문제는 이렇게 하면 "" '' 와 같이 일반적인 Quotes를 사용할 때도 .. 2024. 4. 9. # 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. 이전 1 2 다음 반응형
