TIL Code With Me

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의 새로운 기능클라이언트 로더를 활용한 디바운싱 기법과 파일 다운로드 처리 방법 등 유용한 팁이..

웹은 단순한 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를 구성 파..

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..

안녕하세요, 프론트엔드 개발자 여러분! 오늘은 자바스크립트의 핵심 중 하나인 '제어 구조(Control Structures)'에 대해 다뤄보겠습니다. 제어 구조는 프로그램의 흐름을 제어하는 데 사용되며, 조건문, 반복문, 그리고 switch 문과 같은 구문으로 구성됩니다. 이는 우리가 원하는 대로 코드가 실행되도록 만들어주는 중요한 도구입니다.조건문조건문은 특정 조건이 참인지 확인한 후, 해당 조건에 따라 다른 동작을 수행합니다. 대표적으로 if, else if, else 구문이 있습니다. 예를 들어, 사용자의 로그인 상태에 따라 다른 화면을 보여주는 코드를 작성할 때 조건문을 활용합니다.let isLoggedIn = true;if (isLoggedIn) { console.log('환영합니다!');} ..

웹 개발을 하다 보면 재사용 가능한 UI 요소를 구현해야 할 때가 많습니다. 이런 상황에서 웹 컴포넌트(Web Component)는 매우 유용한 도구입니다. 오늘은 간단한 '클릭 버튼'을 만드는 예제를 통해 웹 컴포넌트를 소개하겠습니다.웹 컴포넌트란?웹 컴포넌트는 HTML, CSS, 그리고 JavaScript를 조합해 캡슐화된 재사용 가능한 UI 요소를 만드는 기술입니다. 이 기술을 사용하면 다른 페이지나 프로젝트에서도 손쉽게 가져다 쓸 수 있는 독립적인 컴포넌트를 생성할 수 있습니다.클릭 버튼 구현하기아래는 'ClickButton'이라는 이름의 웹 컴포넌트를 구현하는 두 가지 방법입니다.첫 번째 방법: 클래스를 직접 정의하기class ClickButton extends HTMLElement { con..

안녕하세요, 오늘은 JavaScript를 이용해 로컬 스토리지를 활용한 간단한 메모 앱을 만드는 방법을 소개하려고 합니다. 이 프로젝트는 JavaScript, HTML, CSS의 기본적인 지식을 활용하여 실제로 동작하는 웹 애플리케이션을 만드는 재미를 느낄 수 있는 좋은 예제입니다. 지금부터 코드를 하나씩 살펴보면서 어떻게 구현되는지 알아보겠습니다.1. 로컬 스토리지와 메모 저장 기능로컬 스토리지는 브라우저에 데이터를 저장할 수 있는 기능입니다. 이 프로젝트에서는 사용자가 메모를 작성하고 저장 버튼을 누르면, 해당 메모가 로컬 스토리지에 저장되도록 구현되었습니다. 아래는 주요 JavaScript 코드입니다:saveBtn.onclick = function() { if (text.value == '') {..

해결 방법: 해당 파일을 root 소유로 변경sudo chown root:root /home/dir/Downloads/my-app/node_modules/electron/dist/chrome-sandbox파일의 권한을 4755로 설정sudo chmod 4755 /home/dir/Downloads/my-app/node_modules/electron/dist/chrome-sandbox문제 원인:Electron은 chrome-sandbox를 사용하여 보안 기능을 제공하는데, 이 파일이 루트 소유이며 setuid 비트(4755)를 설정해야 정상적으로 실행됩니다.위 명령어를 실행하면 chrome-sandbox가 루트 사용자 소유가 되고, 일반 사용자도 해당 바이너리를 실행할 수 있습니다.추가 해결 방법 (옵션)만..