탐구하는 취르미

[Javascript] null, undefined, ‘’ 뭐가 다를까? API 데이터 처리하면서 제대로 이해하기

개발하다 보면 값이 없는 것 같은데 실제로는 서로 다르게 동작하는 값들이 있다.바로 null, undefined, ''이다.처음에는 셋 다 그냥 "값이 없는 상태 아닌가?" 싶었는데, 실제로 API 데이터를 받고 props로 넘기거나 이미지 경로, 클래스명을 동적으로 처리하다 보면 이 차이가 꽤 중요하게 느껴졌다.이번 글에서는 null, undefined, ''의 차이를 정리해보려 한다. 1. null, undefined, ’’는 뭐가 다를까?먼저 간단하게 정리하면 다음과 같다.값 의미undefined값이 아직 정의되지 않았거나 전달되지 않음null값이 없다는 것을 의도적으로 명시함''문자열 값은 존재하지만 내용이 비어 있음겉으로 보면 모두 값이 없는 것처럼 보이지만, JavaScript에서는 서로 다른..

가끔은 브랜치 전체를 합치고 싶진 않지만, 특정 파일의 변경사항만 다른 브랜치에도 적용하고 싶을 때가 있습니다. 해당 방법에 대해서 알아보겠습니다.대상 브랜치로 이동하기👇 변경사항을 반영할 브랜치로 체크아웃합니다.git checkout feature-b브랜치 간 파일 차이 추출하기feature-a 브랜치에서 product.module.scss 파일을 수정했는데 이 변경을 feature-b 브랜치에도 반영하고 싶은 경우입니다.이럴 땐 Patch 파일을 만들어 적용하는 방법을 쓸 수 있습니다.👇 두 브랜치 간의 특정 파일 변경사항을 추출합니다.앞에 오는 브랜치 = 기준점(현재 상태)뒤에 오는 브랜치 = 가져오고 싶은 변경사항 쪽git diff feature-b feature-a -- src/path/to..

UI 작업하다 보면 이런 경험 있으실 거예요.텍스트 옆에 작은 뱃지나 아이콘을 붙이고 싶은데, 으로 만들면 수직 중앙이 애매하게 어긋납니다.타이틀 영역입니다 뱃지strong { display: inline-block; color: #131518; font-size: 16px; font-style: normal; font-weight: 700; line-height: 22px; word-break: keep-all; >span { margin-left: 5px; color: #99A1A8; font-size: 13px; font-style: italic; font-weight: 400; line-height: ..

모바일 웹을 개발하다 보면 간혹 예상치 못한 터치 이슈를 만납니다. 특히 iPhone 15 Pro Max와 같은 최신 디바이스에서, 버튼을 눌렀을 때 터치 하이라이트가 엉뚱한 위치에 표시되는 문제를 겪은 적 없으신가요?이번 포스팅에서는 그런 문제를 겪었을 때, CSS 속성 touch-action: manipulation;이 어떻게 해결책이 되었는지 공유해 보려 합니다.어떤 문제에 효과적인가?1. 더블탭 확대 방지모바일 Safari 등에서 버튼이나 링크를 두 번 탭할 때 화면이 자동으로 확대되는 현상을 막습니다.2. 터치 반응 지연 제거 (300ms 딜레이)과거 모바일 브라우저는 더블탭 확대를 구분하기 위해 클릭 반응에 300ms 지연을 뒀습니다. touch-action: manipulation;으로 즉시..

Midjourney를 사용하다 보면 이런 고민을 하게 됩니다."내가 만든 이미지, 다른 사람들이 보는 거 싫은데...?" 특히 공식 Midjourney 디스코드 서버에서는 내가 프롬프트를 입력할 때마다 수많은 유저들과 함께 작업하다 보니, 내 이미지 생성 과정이 전부 공개됩니다. 그럼 어떻게 해야 할까요? 바로 서버 추가를 통해 해결할 수 있습니다.미드저니 서버를 추가하는 이유Midjourney에서 서버를 추가하는 이유는 크게 세 가지입니다.개인 작업 공간 확보공식 서버가 아닌, 나만의 서버를 만들어서 쓸 수 있습니다.내가 생성하는 이미지가 공용 채널에 노출되지 않습니다.초대한 사람만 접근 가능새로 만든 서버는 초대된 사람만 들어올 수 있습니다.원하는 사람만 초대해서 함께 Midjourney를 사용할 수..

리액트 컴포넌트를 작성하다 보면 반복되는 코드가 참 많습니다. 특히 className 처리, 인라인 스타일 작성, SCSS 모듈과 함께 컴포넌트를 구성하는 기본 템플릿까지~ 매번 복붙 하거나 타이핑하기엔 너무 번거롭죠. 저는 이런 반복 작업을 줄이기 위해 VS Code 사용자 스니펫(User Snippets)을 설정해서 사용하고 있는데요, 오늘은 제가 실무에서 자주 쓰는 스니펫 3가지를 소개해드리겠습니다. 설정 파일 위치먼저 스니펫을 설정하려면 아래 경로의 파일을 열어야 해요.Ctrl + Shift + P (맥은 Cmd + Shift + P) > Preferences: Configure User Snippets > typescriptreact 선택 후 JSON 파일에 코드를 추가하면 됩니다. 1. ..