2025/05/06 6

NOT IN 과 NOT EXISTS 차이

SQL에서 NOT IN과 NOT EXISTS는 서브쿼리에서 특정 조건을 만족하지 않는 데이터를 필터링하는 데 사용되는 연산자이다. 두 연산자는 비슷한 결과를 낼 수 있지만, 동작 방식과 성능, NULL 값 처리에서 차이점을 보인다. 🧩 NOT IN 연산자NOT IN 연산자는 서브쿼리 결과에 없는 값을 가진 행을 선택한다. 즉, 메인 쿼리의 특정 컬럼 값이 서브쿼리 결과 집합에 존재하지 않는 경우에 TRUE를 반환한다.SELECT column1, column2, ...FROM table_nameWHERE column_name NOT IN (subquery); 장점:구문이 간단하고 직관적이다.비교적 작은 데이터 집합에서 사용하기에 적합하다.단점:서브쿼리에 NULL 값이 포함될 경우, 전체 쿼리 결과가 ..

CSS-in-JS

React는 크게 2가지 방식으로 컴포넌트의 스타일을 적용한다.CSS in CSS리액트 컴포넌트 별로 css 파일을 갖는 형식으로 스타일을 관리CSS Module별도의 자바스크립트 전환 필요 없음(속도가 빠름)CSS in JS자바스크립트 내에서 css를 작성하는 방식대표적인 라이브러리로 styled-component, emotion 등이 있음현재 사용중인 스타일만 DOM에 포함시킬 수 있음별도 패키지를 설치하기 때운에 용량이 증가함(스크립트 전환이 필요하여 속도가 다소 느려짐) 🔥 CSS in JS 방식으로 하기위해 Emotion 적용하기yarn add @emotion/react @emotion/styled또는npm install @emotion/react @emotion/styled 설치 완료되면 ..

General/React⚛️ 2025.05.06

reportWebVitals.ts (오류 : Unknown options: extensions, resolvePluginsRelativeTo)

오류 해결 : 아래와 같이 수정 (참고 링크: https://github.com/GoogleChrome/web-vitals/issues/482)import { MetricType } from "web-vitals";const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => { if (onPerfEntry && onPerfEntry instanceof Function) { import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => { onCLS(onPerfEntry); onINP(onPerfEntry); onFCP(onPerfEntry);..

ESLint 설치 방법

ESLintESLint는 ES(ECMAScript)와 Lint의 합성어로, 자바스크립트를 분석하여 오류나 버그를 찾는데 도움을 주는 정적 분석도구 1. 설치 yarn add --dev eslint eslint-config-prettier eslint-config-prettier : eslint에서 prettier와 충돌할 수 있는 rule을 끔 2. ESLint 설정 파일을 생성하고 초기 설정을 도와주는 마법사(wizard) 를 실행npx eslint --init 위의 과정이 끝나고 설치되면 eslint.config.mjs 파일이 만들어짐 3. eslint.config.mjs 파일 설정import js from "@eslint/js";import globals from "globals";import p..

Prettier 설치 방법

PrettierPrettier는 코드 포맷터로 우리가 작성한 코드를 가독성 좋게 만들어주는 확장 도구이 도구를 사용하면 여러 개발자들의 코드 스타일을 통일하여 균일한 코드 품질을 가질 수 있게 만들 수 있다. 1.프리티어 설치yarn add --dev prettier 2. ".prettierrc" 파일 생성 3. prettierrc 파일에 아래와 같이 설정 추가{ "arrowParens": "always", "bracketSameLine": false, "bracketSpacing": true, "embeddedLanguageFormatting": "auto", "htmlWhitespaceSensitivity": "css", "insertPragma": false, "jsxSingleQuo..

yarn 설치 오류 (Internal Error: EPERM: operation not permitted)

yarn 설치후 yarn 명령어 인식 안되어서 해결 방법을 찾아 아래처럼 실행 하였지만corepack enablecorepack prepare yarn@stable --activate Internal Error: EPERM: operation not permitted 에러 발생.. 🔥해결 방법시작 메뉴 > PowerShell 우클릭 > "관리자 권한으로 실행" 클릭.다시 아래 명령어 실행:corepack enablecorepack prepare yarn@stable --activate 이제 yarn -v로 Yarn이 설치됐는지 확인yarn -v

General/React⚛️ 2025.05.06