[JavaScript] null과 undefined

서론JavaScript를 다루다 보면 null, undefined 그리고 return: false, return: true 같은 값들을 자주 마주치게 된다.이들은 겉보기에는 비슷해 보이지만, 엄연히 다른 의미와 동작 방식을 가진다.이번 글에서는 각각의 차이점과 실제 코드에서의 활용법을 정리해보겠다.1. null 과 undefined의 의미(1) null이란?null은 의도적으로 "값이 없음"을 표현하는 값이다.개발자가 명시적으로 "여기에는 값이 없다"라는 것을 나타낼 때 사용한다.let a = null;console.log(a); // null특징개발자가 직접 할당하여 비어 있음을 나타냄typeof null은 "object" → JavaScript의 오래된 버그지만 여전히 유지됨메모리를 확보했지만 값이 ..

• format_list_bulleted Javascript
• · 2025. 2. 26.

[React] <Link>와 <a> 태그의 차이와 동작 원리

서론React에서 페이지 이동을 처리하는 방법으로 와 태그가 있다.둘 다 사용자의 클릭을 통해 다른 페이지로 이동하는 역할을 하지만, 동작 방식에는 큰 차이가 있다.이번 글에서는 React의 와 태그의 차이점과, 의 내부 동작 원리를 분석해보겠다. 1. 태그와 의 차이(1) 태그란?HTML에서 태그는 기본적인 하이퍼링크(hyperlink) 역할을 한다.클릭하면 전체 페이지를 새로고침(F5)하며 이동한다.Example 페이지로 이동장점단점브라우저의 기본 기능을 그대로 사용React 애플리케이션에서는 전체 페이지가 새로고침됨 → SPA 성능 저하서버 측에서 렌더링(SSR)되는 페이지에서는 유용상태(state)가 초기화됨 → 애플리케이션이 비효율적으로 동작(2) 태그란?import { Link } ..

• format_list_bulleted React
• · 2025. 2. 19.

[CS] 싱글 스레드

서론실무에서 웹캠과 Google AI 라이브러리인 MediaPipe를 이용해 객체(사용자) 인식을 수행하고, 이를 백엔드로 전송하는 작업을 진행했다.Mac OS 환경에서는 문제없이 실행되었지만, 키오스크(Windows) 환경에서는 심각한 스레드 부하가 발생했다.이로 인해 연산이 수행되는 동안 버튼이 클릭되지 않는 현상이 나타났다.경량화된 라이브러리를 사용해 최적화를 시도했지만, 여전히 동일한 문제가 발생했다.Lighthouse를 통해 키오스크 성능을 분석한 결과, Performance 점수가 27점에 불과했고, CPU 사용량이 거의 100%에 도달하는 것을 확인할 수 있었다.이 경험을 통해 컴퓨터 사양에 따라 최적화 방법이 달라질 수밖에 없다는 점을 실감했고, 이에 따라 스레드 부하를 줄이는 방법을 고민..

• format_list_bulleted CS
• · 2025. 2. 11.

[용어] 딥시크 (DeepSeek)

딥시크(DeepSeek)란?딥시크는 중국 스타트업 '딥시크'가 개발한 생성형 인공지능(AI) 서비스로 챗CPT와 비슷한 성능을 가지고 있지만 최대 10분의 1비용으로 개발에 성공해 많은 충격을 주고 있다. 또한 선보였던 모델인 R1을 MIT 라이선스 하에 완전 공개했다. 적은 비용으로 AI 서비스가 가능해 엔비디아 주가가 하루에 17% 하락하는 사태도 일어났다. 어떻게 이러한 기술을 선보일 수 있었는지 알아보자.특징지식 증류 방식 사용규모의 법칙1. 지식 증류(Knowledge Distillation)란?"대형 AI 모델이 배운 중요한 정보만을 추출해 작은 모델에 전수하는 방식"으로 대형 모델(Teacher)이 작은 모델(Student)에게 중요한 지식을 전수하는 방식이다. 지식 증류 방식의 핵심 과정대..

• format_list_bulleted 용어
• · 2025. 2. 9.

[React] CRA, CRACO, 캐시 무효화(Cache Busting)

CRACO를 이용하여 배포 시 캐싱 무효화실무 작업 중 업데이트 이후 관리자 분들에게 캐시 삭제 후 새로 고침을 요청하는 일이 잦아져서 따로 개발할 필요가 있어 기록HOTFIX시에는 오류를 낸 상황이여서 굉장히 말씀드리기가 껄그러운 상황이 있다. (캐시 새로고침 설명 드리고.. 이미지로 설명 드리고..)CRACO로 빌드까지 성공한 것은 별도로 작성 예정 1. CRA(Create React App)란?CRA(Create React App)는 리액트 애플리케이션을 빠르게 설정할 수 있도록 돕는 공식 도구다. 웹팩(Webpack), Babel, ESLint 등의 복잡한 설정 없이 바로 프로젝트를 시작할 수 있도록 해준다.특징빠른 프로젝트 초기화: 별도의 설정 없이 리액트 프로젝트를 생성할 수 있다.내장된 웹팩..

• format_list_bulleted React
• · 2025. 2. 5.

[CS] SEO 최적화와 SPA vs SSR: 검색 엔진 친화적인 웹을 만드는 법

SEO란 무엇인가?SEO(Search Engine Optimization, 검색 엔진 최적화)는 웹사이트가 검색 엔진에서 더 높은 순위를 차지하도록 최적화하는 과정이다. 검색 엔진의 알고리즘이 점점 정교해지면서, 단순한 키워드 삽입을 넘어 콘텐츠의 질, 사용자 경험, 페이지 로딩 속도, 사이트 구조 등이 중요한 요소로 자리 잡았다. 1. SEO 최적화의 핵심 요소SEO 최적화를 위해 고려해야 할 주요 요소들은 다음과 같다. (1) 온페이지 SEO키워드 최적화: 제목, 메타 설명, 본문, URL 등에 키워드를 자연스럽게 포함해야 한다.콘텐츠 품질: 검색 엔진은 긴 체류 시간을 유도하는 유용한 콘텐츠를 선호한다.내부 링크 구조: 페이지 간의 연결성을 강화하면 검색 엔진이 사이트를 더 쉽게 크롤링할 수 있다...

• format_list_bulleted CS
• · 2025. 2. 4.