본문 바로가기
반응형

프로그래밍109

[DeepDive] 1장 - 자바스크립트: 데이터 타입과 함수 자바스크립트 데이터 타입 원시타입 : 객체가 아닌 모든 타입 boolean number string null undefined symbol : 중복되지 않는 고유한 값을 나타내기 위함 bigint : ES2020에 나온 값으로 기존 number 최대 값보다 더큰 숫자를 저장 객체타입 : 원시타입 이외 모든 타입 object null 과 undefined 차이점은? undefined: 선언됐지만 할당되지 않는 값 null: 명시적으로 비어있음을 나타내는 값 자바스크립트의 또 다른 비교, Object.is ES6 에서 등장한 문법으로 두개의 인수를 받으며 동일한지 확인하고 반환하는 메서드이다. 좀 더 개발자가 기대하는 방향으로 동작한다는 점에서 == 와 === 와 다른 차이점이 존재한다. 자세한 차이점은 아.. 2024. 3. 11.
gatsby의 이미지 컴포넌트 비교(StaticImage, GatsbyImage) 당신이 인용한 내용은 이미지를 다룰 때 Gatsby에서 사용되는 두 가지 주요 이미지 컴포넌트인 `StaticImage`와 `GatsbyImage`에 대한 설명입니다. 1. StaticImage - `StaticImage`는 이미지가 컴포넌트를 사용할 때마다 항상 동일한 경우에 사용됩니다. - 예를 들어, 사이트 로고나 인덱스 페이지의 주요 이미지 같이 변경되지 않는 이미지에 적합합니다. - 이 컴포넌트를 사용하면 Gatsby는 이미지를 최적화하고 필요한 포맷 및 크기로 변환합니다. 이는 성능을 향상시키고 페이지 로딩 시간을 줄일 수 있습니다. // ⚠️ 이렇게 Props로 내려서 사용할 수 없습니다 export function Logo({ logo }) { // You can't use a prop p.. 2023. 8. 8.
React로 크롬 익스텐션(extension) 만들기 (1) 튜토리얼 크롬 익스텐션이란? 크롬 익스텐션은 구글 크롬 브라우저에 추가 기능을 제공하는 작은 소프트웨어 프로그램입니다. 사용자가 웹 브라우징 경험을 향상시키거나 웹 페이지에 기능을 추가하는 데 사용됩니다. 익스텐션은 크롬 웹 스토어에서 다운로드하고 쉽게 설치할 수 있으며 개발자들이 자신의 익스텐션을 만들고 배포할 수 있습니다. 만들고자 하는것이 브라우저를 사용하면 크롬 익스텐션이 활용도가 높은것 같습니다. 간단하게 만들고 배포하기 좋기 때문에 이번에 크롬 익스텐션을 공부하면서 개발하려고 합니다. 여기서 원래라면 기존 바닐라 코드로 만들려고 했었는데 이번에는 가장 익숙한 리액트로 해보려고 합니다. 개발하기 전에 워밍업겸 튜토리얼을 먼저 공부해보려고 합니다 튜토리얼의 원문은 구글 developer에서 확인하실 수 있.. 2023. 7. 31.
emotion/css 와 emotion/react의 css사용 차이는 뭘까? 리액트의 공통 라이브러리 만드는 중에 CSS In JS중 emotion을 사용하고 있었습니다. 기존 프로젝트에서 emotion/css와 emotion/react 2개의 라이브러리를 import하여 사용하고 있었는데 이 두개의 차이점이 궁금해져서 제가 찾은 내용을 공유해보려고 합니다. 먼저 라이브러리 비교를 하자면 아래와 같습니다 1. emotion/react emotion/react는 Emotion 라이브러리의 React용 기능을 포함합니다. 이 패키지를 사용하면 React 애플리케이션에서 Emotion의 강력한 CSS-in-JS 기능을 사용할 수 있습니다. Emotion의 styled API를 활용하여 React 컴포넌트를 스타일링하는 데 주로 사용됩니다. styled API를 사용하면 컴포넌트를 정의.. 2023. 7. 23.
반응형