JavaScript 4

[React] JSX 문법과 컴포넌트들 알아보기

React의 JSX 문법이란?JSX는 리액트를 사용하면서 처음 접하게 된다. JSX를 사용하면 JS 문법을 마치 HTTP 태그처럼 사용할 수 있는데, 이는 페이스북(현 메타)에서 소개한 문법이다. JSX는 ECMAScript의 일부가 아니기 때문에, 꼭 트랜스파일링 도구를 사용해 트랜스파일을 거쳐야 자바스크립트로 변환되어 자바스크립트 엔진이 이해할 수 있다. JSX는 기본적으로 JSXElement, JSXAttributes, JSXChildren, JSXStrings라는 4가지 컴포넌트를 기반으로 이루어져있다고 한다.JSXElementJSXElement는 HTML의 element와 비슷한 역할을 하는데,  다음과 같은 세 형태로 사용할 수 있다. 이때 빈 태그는 JSXFragment라고 부른다. 그..

React 2025.02.18

[JavaScript] 자바스크립트 클로저란?

만약에 면접에서 '클로저란 무엇인가요?' 라는 질문이 온다면, 뭐라고 답할까?최근 프론트엔드 스터디를 하게 되면서, 면접용 대답과 실제 개념을 정리하고 발표하고 이를 깃북에 올려 공유하게 되었다. 이러한 작업이 많은 프론트엔드 개발자들에게 도움이 되었으면 하는 바람이다.앞으로 이런 글이 깃북과 깃허브에 계속 올라갈 예정이니, 필요한 분들은 star를 눌러주시면 감사하겠습니다 ! 😇 FE-Tech-Interview | FE-CITYR0CK[JavaScript] 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요?fe-cityr0ck.gitbook.io GitHub - FE-CITYR0CK/FE-Tech-InterviewContribute to FE-CITYR0CK/FE-Tech-Interview de..

frontend 2025.02.07

[JavaScript] task queue와 micro task queue

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [react] task queue 와 micro task queue'모던 리액트 Deep Dive'를 읽고!기본적으로 자바스크립트는 싱글 스레드를 가지고 있어 한번에 여러 일을 처리하기 어렵다. 즉, 비동기 처리가 어렵다. (멀티 스레드를 사용하면 같은 메모리를 이velog.io  '모던 리액트 Deep Dive'를 읽다가 정리한 글.기본적으로 자바스크립트는 싱글 스레드를 가지고 있어 한번에 여러 일을 처리하기 어렵다. 즉, 비동기 처리가 어렵다. (멀티 스레드를 사용하면 같은 메모리를 이용해 여러가지 일을 동시에 처리할 수 있다. 하지만 이는 같은 메모리를 이용하기 때문에 동시에 같은 자원에 접근할 시 DOM 표시에 문제를 일으킬 수..

frontend 2024.11.01

[CSS] px, em, rem 차이와 rem이 유연한 페이지에 유리한 이유

절대 단위와 상대 단위처음 프론트엔드 개발을 시작하면 무조건 px이라는 단위를 사용하게 된다. 이는 원래 일상에서도 많이 쓰는 단위이기에 익숙하기도 하고, ‘절대 단위’이기 때문에 원하는 길이를 정확히 지정할 수 있기 때문이다. 여기서 ‘절대 단위’란 말 그대로 어떤 상황에서도 변하지 않는 상수같은 절대적인 길이를 유지하는 단위이다. 그렇다면 ‘상대 단위’란 무엇일까? 절대 단위와 다르게 항상 같은 길이를 유지하는게 아니라 상대적으로 변하는 단위이다. 이러한 ‘상대 단위’에 해당하는 것이 em, rem이다. 상대적으로 변하기 위해서는 그 기준이 필요할텐데, em과 rem의 기준은 무엇이며 둘의 차이점이 무엇인지 정리해보려한다.  em과 remem과 rem이 어떤 기준에 따라 상대적으로 결정된다면, 결국 ..

frontend 2024.09.30