TIL Code With Me

워드프레스를 활용한 개발에서는 종종 카테고리의 숫자형 ID가 필요한 경우가 있습니다. 특히 커스텀 쿼리나 특정 템플릿 로직에서 카테고리 슬러그(slug) 또는 이름(name) 을 기준으로 ID를 가져와야 하는 상황이 자주 발생합니다.이번 포스트에서는 워드프레스에서 슬러그 또는 이름을 통해 숫자형 ID를 효율적으로 조회하는 방법을 소개합니다.슬러그를 통해 카테고리 ID 가져오기슬러그는 사람이 읽기 좋은 형태로 URL에 사용되는 짧은 문자열입니다. 다음 코드는 get_category_by_slug() 함수를 활용하여 슬러그로부터 ID를 얻는 방법입니다:function get_category_id_by_slug($slug) { $category = get_category_by_slug($slug); ..

JavaScript를 배우거나 사용할 때 '식별자(Identifier)'라는 개념을 반드시 이해해야 합니다. 식별자는 변수, 함수, 또는 속성의 이름으로, 프로그래밍에서 사용자가 정의하는 이름을 의미합니다. 하지만 식별자는 단순히 아무 문자나 조합한다고 해서 유효하지 않으며, JavaScript에서는 이를 정의하기 위해 몇 가지 규칙이 존재합니다. 이번 포스트에서는 JavaScript에서 식별자를 정의하는 규칙과 유효한 예시 및 오류를 유발할 수 있는 잘못된 예시를 함께 살펴보겠습니다.JavaScript 식별자란?JavaScript 식별자는 대소문자를 구분하며, Unicode 문자, $, _, 그리고 숫자(0-9)를 포함할 수 있습니다. 하지만 숫자로 시작할 수는 없습니다. 중요한 점은, 식별자는 코드의..

안녕하세요, React 개발자 여러분! 이번 주 React 관련 주요 소식을 소개합니다. React와 React Native를 중심으로 한 다양한 업데이트와 유용한 자료를 확인해보세요.React 주요 소식React-Scan 0.2 출시React 앱의 성능 저하 원인을 분석하고 해결책을 제안하는 새로운 툴입니다. 느려진 애플리케이션을 빠르게 개선할 수 있는 크롬 확장 프로그램도 함께 제공됩니다.Next.js 애플리케이션 성능 최적화Preply 사례를 통해 Core Web Vital 지표(INP)를 개선한 방법을 살펴보세요. 데이터 중심 접근법을 활용하여 실질적인 성능 향상을 이뤘습니다.React Router v7의 새로운 기능클라이언트 로더를 활용한 디바운싱 기법과 파일 다운로드 처리 방법 등 유용한 팁이..

안녕하세요, 여러분! 오늘은 XR 개발에 관심이 있는 분들을 위해 흥미로운 내용을 가져왔습니다. 데자이니움에서 엔지니어로 활동 중인 MIZUTANIKIRIN(@mizutanikirin)이 Camera Kit Web을 활용하여 WebAR 애플리케이션을 개발한 경험을 공유했습니다. WebAR은 스마트폰이나 태블릿 브라우저를 통해 AR(증강현실) 경험을 제공하는 기술인데요, 이 기술을 처음 접하는 개발자들이 알아두면 좋을 주의사항을 정리해보았습니다.먼저, Lens Studio를 사용하여 Camera Kit Web을 개발할 때 초보자라면 꼭 알아야 할 몇 가지가 있습니다. 개발 환경을 설정하고 WebAR을 구현하는 과정에서 다양한 기술적 이슈를 겪을 수 있으므로, 이와 관련된 해결책을 미리 숙지하는 것이 중요합..

웹은 단순한 HTML 페이지에서 시작해 오늘날의 동적이고 상호작용적인 애플리케이션으로 크게 발전했습니다. 하지만 기존의 자바스크립트 기반 웹 애플리케이션은 성능 집약적인 작업에서 한계를 보이곤 합니다. 이 한계를 극복하기 위해 등장한 기술이 바로 WebAssembly(WASM)입니다. WASM은 웹 개발의 미래를 열어갈 핵심 기술로 주목받고 있는데요. 그 이유를 함께 살펴보겠습니다.WebAssembly(WASM)란 무엇인가?WASM은 저수준 바이너리 포맷으로, 브라우저에서 고성능 코드를 실행할 수 있도록 설계된 기술입니다. C, C++, Rust 같은 언어를 컴파일하여 실행 속도가 거의 네이티브 애플리케이션 수준에 가까운 퍼포먼스를 제공합니다.WebAssembly가 게임 체인저인 이유거의 네이티브 수준의..

3D 애플리케이션을 개발하는 과정에서 효과적인 구성 파일 시스템을 설계하는 것은 상당히 까다로운 작업입니다. 특히, CesiumJS 라이브러리를 기반으로 한 NGV 프레임워크를 개발하면서 고려해야 할 여러 과제가 있습니다. 이번 포스트에서는 JSON과 TypeScript를 활용하여 구성 파일을 설계하는 방법과 그 장점을 소개합니다.1. JSON의 한계JSON은 간단하고 유연한 데이터 포맷으로 널리 사용되지만, 타입 정보를 포함하지 못하는 한계가 있습니다. JSON 스키마 파일을 추가적으로 사용해 타입을 정의할 수는 있지만, 추가 도구(예: typescript-json-schema 또는 ts-json-schema-generator)가 필요하며, 이는 표준화되지 않았습니다.2. TypeScript를 구성 파..

배움에 대한 열정은 우리를 성장하게 만듭니다. 특히 기술 분야에서 새로운 것을 배우는 데 몰두하는 것은 끝없는 가능성을 열어줍니다. 이번 블로그에서는 한 개발자가 스스로에게 내린 도전, 바로 W3Schools 학습 경로를 100% 완주하겠다는 목표에 대해 이야기해보려 합니다.도전의 배경이 도전은 단순히 몇 가지 기술을 배우는 것이 아닙니다. 이 개발자는 더 큰 목표를 세웠습니다. Bellevue University에서 컴퓨터 과학 학위를 시작하기 전에, W3Schools의 다양한 기술 학습 경로를 완전히 마치겠다는 목표를 설정했습니다. 단순히 '몇 가지' 기술을 배우는 것이 아니라, HTML, CSS, JavaScript 같은 웹 개발 기본부터 AWS 클라우드, 서버리스 기술, 그리고 Python, Ja..

JavaScript에서 배열은 데이터 관리와 조작을 위한 강력한 도구입니다. 그중에서도 sort, map, filter, 그리고 reduce 메서드는 데이터 변환과 처리를 위해 자주 사용되는 핵심 메서드들입니다. 이 글에서는 각 메서드의 사용법과 실전 예제를 통해 그 작동 방식을 자세히 알아보겠습니다.1. Array.prototype.sortsort 메서드는 배열 요소를 특정 순서로 정렬합니다. 기본적으로 문자열을 기준으로 정렬하지만, 사용자 정의 비교 함수를 사용하면 복잡한 정렬 로직도 구현할 수 있습니다.예제: 숫자 오름차순 정렬javascriptconst numbers = [42, 7, 19, 73, 23];numbers.sort((a, b) => a - b);console.log(number..

TypeScript로 프로젝트를 진행하다 보면, 특정 데이터 구조를 처리할 때 유연성과 유지보수성을 동시에 고민하게 되는 경우가 많습니다. 특히, 여러 곳에서 참조되는 타입 정의를 변경해야 할 때, 반복적인 수정과 오류 가능성이 증가하죠. 오늘은 이러한 문제를 해결하기 위한 ‘Map Pattern’을 활용한 설계 개선 방법을 소개합니다.문제점기존의 데이터 구조는 아래와 같았습니다:typescript// FinalResponse.tsexport type FinalResponse = {totalScore: number;reactions: {likes: Reaction;unicorns: Reaction;explodingHeads: Reaction;raisedHands: Reaction;fire: Reactio..

최근 우리는 Node.js(NestJS)를 기반으로 한 애플리케이션의 성능을 최적화하기 위해 Lambda에서 Fargate로 마이그레이션을 진행했습니다. 이 과정에서 다양한 CPU와 메모리 설정(Task Spec)을 실험하며 최적의 구성을 찾는 여정을 겪었는데요. 그 결과를 공유하려 합니다.Lambda와 Fargate의 차이점처음에는 Lambda를 사용했습니다. Lambda는 요청마다 새로운 환경이 생성되므로 리소스 경합이 없고, 짧은 프로세스 처리와 자동 확장 기능에서 효율적이었습니다. 하지만 대량 데이터 처리나 장시간 배치 작업에서는 콜드 스타트 문제와 30초 제한 시간 초과와 같은 한계를 경험했습니다. 그래서 우리는 더 유연한 리소스 관리가 가능한 Fargate로 전환했습니다.Fargate에서의 경..