HOME
[JS] 자바스크립트 코드 최적화 기법 모음
[JS] 자바스크립트 코드 최적화 기법 모음
2024.12.07"Optimizing Javascript for fun and for profit"라는 자바스크립트 최적화 관련 글의 영어 원문과 번역본을 바탕으로, 부가적인 설명을 추가하고 이해하기 쉬운 언어로 정리해 봤다. 예시 코드도 조금 더 다듬어서 개선했다. 문자열 비교 피하기 Avoid string comparisons문자열 비교는 각 문자를 순차적으로 비교해야 하므로 O(n) 시간복잡도를 갖는다. 특히 문자열 enum을 사용하는 것은 성능 최적화 관점에서 피해야 할 패턴 중 하나다. 자바스크립트 엔진에서 정수(Integer)는 일반적으로 값으로 전달되며, 비교 연산 시 바로 값을 확인할 수 있어 빠르게 처리할 수 있다. 반면 문자열은 메모리에 저장된 위치(포인터)를 참조해 값을 가져온 후 비교하기 때문에 ..
[시놀로지 Nas] 나스 메인 하드디스크 교체하기
[시놀로지 Nas] 나스 메인 하드디스크 교체하기
2024.11.13얼마 전 6년간 사용했던 Western Digital 하드디스크가 사망했다. 처음엔 볼륨 충돌 관련 메시지가 뜨더니, 결국 인식조차 안 되는 상태에 이르렀다. 다행히 메인 하드디스크(1번 드라이브 베이)가 아니라서 DSM은 문제없이 사용할 수 있었다. 메인 하드디스크 용량은 4TB 밖에 안 돼서 항상 부족하다고 느꼈었는데, 이 참에 훨씬 큰 용량의 하드디스크로 바꿔줬다. DSM 설정, 파일 등 기존 데이터는 그대로 유지하면서 하드디스크를 교체하려면 하드디스크 복사기(HDD 도킹스테이션)를 이용한 방법이 가장 깔끔하다. 하드디스크 복사기는 2~3만원이면 구매할 수 있고 복사 과정도 버튼 한 번만 누르면 되는 정도로 쉽다. 오늘은 DSM 메인 하드디스크 교체 과정을 소개해보려고 한다. 하드디스크 복사?..
[Algorithm] 슬라이딩 윈도우 Sliding Window 알고리즘 톺아보기
[Algorithm] 슬라이딩 윈도우 Sliding Window 알고리즘 톺아보기
2024.11.11슬라이딩 윈도우 알고리즘 개념슬라이딩 윈도우 알고리즘(Sliding Window Algorithm)은 배열과 같은 선형 자료구조에서 연속된 구간 내의 데이터를 효율적으로 처리하기 위해 사용하는 기법이다. 특히 배열 내 연속된 요소의 합, 최댓값, 최솟값 등을 계산할 때 유용하다. 슬라이딩 윈도우는 이름 그대로 고정/가변 크기의 범위(윈도우)를 이동(슬라이드) 시키면서 필요한 계산을 반복하는 방식이다. 이때 전체 배열을 한 번만 순회하면 되기 때문에 중복 연산을 피하고 시간 복잡도를 개선할 수 있다. 일반적으로 슬라이딩 윈도우 기법을 사용하면 O(n)의 시간 복잡도로 문제를 해결할 수 있다.// 주어진 배열에서 연속된 k개 요소의 최대 합을 찾는 함수function maxSumSubarray(arr, k)..
[React] 리액트 코드를 개선할 수 있는 4가지 팁
[React] 리액트 코드를 개선할 수 있는 4가지 팁
2024.10.28TLDR이벤트 핸들러에 커링 활용컴포넌트 책임 분리조건문 대신 객체 map 사용React 라이프사이클 외부에 독립적인 변수 배치 4 React Tips1. 커링 활용user 상태는 name, surname, address 3개 속성을 가지며, 이에 대응하는 3개의 input 필드가 필요하다. 아래 코드에선 각 필드를 처리하기 위해 별도의 핸들러를 각각 만들어서 사용하고 있지만, 이 핸들러들은 value가 할달될 속성 이름만 다를 뿐 나머지 로직이 동일하기 때문에 코드 중복이 발생하고 있다.export default function App() { const [user, setUser] = useState({ name: "", surname: "", address: "", }); co..
[Flutter] 플러터 기초 내용 정리 - Part 2
[Flutter] 플러터 기초 내용 정리 - Part 2
2024.10.13💡 아래는 Part 1에서 이어지는 내용 Data Fetching객체지향 언어인 Dart는 거의 대부분이 클래스 기반으로 구성된다. API 호출, 응답 데이터 타입 정의, 데이터 처리 역시 모두 클래스 내부에서 이루어진다. 먼저 응답 데이터를 나타내는 모델 클래스를 정의한다. 일반적으로 fromJson 이라는 이름 있는 생성자를 사용하여 JSON 데이터를 인스턴스화 시킨다. 아래 예시에선 JSON 객체를 인자로 받기 때문에 초기화 리스트를 사용하여 클래스 필드에 할당하고 있다.// lib/models/webtoon_model.dartclass WebtoonModel { final String id, title, thumb; WebtoonModel.fromJson(Map json) : tit..
[Flutter] 플러터 기초 내용 정리 - Part 1
[Flutter] 플러터 기초 내용 정리 - Part 1
2024.10.05배경 지식Flutter 구조💡 Dart는 Just-In-Time(JIT) 컴파일과 Ahead-Of-Time(AOT) 컴파일을 모두 지원한다. JIT 컴파일은 개발 모드에 사용돼서 Hot Reload 같은 빠른 피드백 루프를 제공한다. AOT 컴파일은 배포 모드에 사용돼서 컴파일된 코드가 기기에 더 최적화된 상태로 실행할 수 있게 만든다. 네이티브 개발에선 운영체제(OS)와 직접 상호작용하여 버튼, 텍스트 같은 UI 요소를 생성한다.Flutter는 네이티브 플랫폼의 위젯을 사용하지 않고 자체적으로 UI를 렌더링 한다. 이는 비디오 게임 엔진의 작동 방식과 유사하다.Dart로 작성된 코드는 Flutter 프레임워크를 사용하여 UI를 정의하고, 실제 화면에 렌더링 하는 작업은 C++로 작성된 Flutter ..
[TS] 타입스크립트 브랜디드 타입
[TS] 타입스크립트 브랜디드 타입
2024.09.26Branded Type타입스크립트를 사용하다 보면 서로 다른 두 객체의 특정 속성이 동일한 타입을 가질 때가 많다. 이로 인해 타입 시스템에서 오류가 발생하지 않더라도 논리적 오류나 타입 안전성 문제를 야기할 수 있다.type User = { id: string; name: string;};type Post = { id: string; ownerId: string; comments: Comments[];};type Comments = { id: string; timestamp: string; body: string; authorId: string;}; 위 예시에서 User.id, Post.id, Comments.id는 모두 string 타입이다. 첫 번째 인자 postId, 두 번째 인자..
도커(Docker)와 쿠버네티스(Kubernetes) 기본 개념
도커(Docker)와 쿠버네티스(Kubernetes) 기본 개념
2024.09.17들어가며과거에는 애플리케이션을 배포할 때 다양한 환경에서 발생하는 호환성 문제를 해결하는 데 많은 노력이 필요했다. 그러나 이제는 컨테이너 기술의 도입으로 이를 표준화하고 자동화할 수 있게 되었다. 특히 소프트웨어 개발을 하다 보면 컨테이너 관리 도구와 관련한 용어를 자주 접하게 된다. 그래서 도커, 쿠버네티스 그리고 다중 클러스터에 대한 기본 개념을 정리해 봤다. 도커 (Docker) 쿠버네티스를 이해하기 위해선 먼저 도커(Docker)에 대해 알아야 한다. 2013년에 탄생한 도커는 소프트웨어 애플리케이션의 실행 환경과 소스 코드를 함께 패키징하여 하나의 컨테이너 이미지로 만드는 혁신적인 방식을 제안했다. 컨테이너 이미지는 그 자체가 바이너리 파일이기 때문에 바로 배포할 수 있는 장점이 있다. 즉,..
[Flutter] 플러터 개발 환경 구축 for macOS
[Flutter] 플러터 개발 환경 구축 for macOS
2024.09.03Android Studio❶ Android Studio 설치 (JetBrains ToolBox로도 설치 가능)brew install android-studio ❷ Android Studio 실행 - Setup Wizard - Install Type에서 Standard 선택 후 설치. Standard 선택 시 안드로이드 개발에 필요한 SDK, 빌드 툴, 에뮬레이터가 자동으로 설치된다. Setup Wizard는 Android Studio를 처음 실행했을 때 나온다.❸ Settings(⌘ ,) - Android SDK 메뉴 - SDK Tools 탭 - Android SDK Command-line Tools 체크.❹ Flutter, Dart 플러그인 설치 Flutter / Dart SDK💡 Flutter SD..
[Dart] 자바스크립트 개발자의 다트 학습 - Part 2
[Dart] 자바스크립트 개발자의 다트 학습 - Part 2
2024.08.21Dart와 JavaScript는 많은 개념을 공유한다. Dart 역시 이벤트 루프에서 실행되고, 비동기 프로그래밍을 위한 Future라는 개념이 존재한다. Future는 자바스크립트의 Promise와 비슷하다. Dart는 정적 타입 언어이기 때문에 타입스크립트를 사용한 경험이 있다면 Dart를 더 쉽게 배울 수 있다. Dart와 JavaScript의 다른 점과 비슷한 점을 Learning Dart as a JavaScript developer 페이지에 자세히 설명돼 있어서 정리해봤다. 💡 아래는 Part 1에서 이어지는 Part 2 내용. Asynchrony자바스크립트와 마찬가지로 Dart 가상머신(VM)은 단일 이벤트 루프를 사용하여 코드를 실행한다. 모든 코드는 동기적으로 실행되지만, 비동기 도구..
[Dart] 자바스크립트 개발자의 다트 학습 - Part 1
[Dart] 자바스크립트 개발자의 다트 학습 - Part 1
2024.08.21Dart와 JavaScript는 많은 개념을 공유한다. Dart 역시 이벤트 루프에서 실행되고, 비동기 프로그래밍을 위한 Future라는 개념이 존재한다. Future는 자바스크립트의 Promise와 비슷하다. Dart는 정적 타입 언어이기 때문에 타입스크립트를 사용한 경험이 있다면 Dart를 더 쉽게 배울 수 있다. Dart와 JavaScript의 다른 점과 비슷한 점을 Learning Dart as a JavaScript developer 페이지에 자세히 설명돼 있어서 정리해봤다. Conventions and lintingDart 팀에서 공식적으로 코드 스타일 가이드와 Lint 도구를 제공한다.dart fix를 통해 코드 이슈를 발견하고 수정할 수 있다.dart format을 통해 코드를 포매팅할 ..
[Algorithm] 프로그래머스 - 피로도 / 백트래킹으로 모든 부분집합 찾기
[Algorithm] 프로그래머스 - 피로도 / 백트래킹으로 모든 부분집합 찾기
2024.07.29프로그래머스 레벨 2 피로도 문제는 던전 목록과 HP가 주어졌을 때 방문할 수 있는 최대 던전의 수를 반환해야 한다. 각 던전은 최소 피로도와 소모 피로도를 가진다. 최소 피로도는 해당 던전을 방문하기 위해 필요한 최소 HP를 의미하고, 소모 피로도는 말 그대로 해당 던전을 방문했을 때 소모되는 HP를 나타낸다. 문제에서 주어지는 매개변수는 아래와 같다. k : 시작 HP. e.g., 80dungeons : [최소 피로도, 소모 피로도]로 이루어진 던전 목록. e.g., [[80,20],[50,40],[30,10]] 최소 피로도와 소모 피로도가 각각 다르기 때문에 방문 순서에 따라 방문할 수 있는 던전의 수가 달라진다. 예를 들어 [[80,20],[50,40],[30,10]] 던전 목록에서 2~3번(i1..