HOME
[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..
[Dart] 자바스크립트 개발자의 다트 학습 - Part 2
[Dart] 자바스크립트 개발자의 다트 학습 - Part 2
2024.08.21이전 글: 바스크립트 개발자의 다트 학습 Part 1Dart와 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 : [최소 피로도, 소모 피로도]로 이루어진 던전 목록. 예: [[80,20],[50,40],[30,10]] 최소 피로도와 소모 피로도가 각각 다르기 때문에 방문 순서에 따라 방문할 수 있는 던전의 수가 달라진다. 예를 들어 [[80,20],[50,40],[30,10]] 던전 목록에서 2~3번(i1~i2..
[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축
[DevTools] 리액트 테스트 환경(Vitest, React Testing Library) 및 CI 구축
2024.07.22코드 품질을 보장하고, 기능이 의도한 대로 동작하는지 확인하기 위해 테스트 코드를 작성한다. 특히 기능 추가나 리팩토링을 할 때 테스트 코드가 있으면 기존 기능이 올바르게 작동하는지 쉽게 확인할 수 있고, 심리적인 안정감을 주는 장점도 있다. 프론트엔드 테스트 종류는 크게 단위 테스트, 통합 테스트, E2E 테스트, 정적 테스트로 나뉜다. 테스트 종류설명예시주요 도구단위 테스트(Unit Test)개별 함수, 컴포넌트, 모듈의 동작 검증버튼 클릭 시 특정 함수 호출 여부Jest, Vitest, Mocha, Jasmine 등통합 테스트(Integration Test)여러 모듈이 함께 잘 작동하는지 확인상품 구매 시 잔액 업데이트, 재고 변경Jest, Vitest, React Testing Library 등E..
[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)
[JS] 자바스크립트 정규식으로 천 단위 구분자 추가하기 (단어 경계, 전후방탐색)
2024.07.18큰 숫자를 읽기 쉽게 만들기 위해 일반적으로 천 단위마다 콤마(,) 같은 구분자를 추가한다. 천 단위 구분은 한국을 포함한 많은 국가에서 표준으로 사용하는 숫자 표기법이다. 자바스크립트에선 Number.toLocaleString() 혹은 Intl.NumberFormat 메서드를 이용하면 구분자를 추가할 수 있다. 참고로 이 메서드들은 기본적으로 실행 환경의 로케일 설정을 따르기 때문에 로케일에 따라 결과가 달라질 수도 있다. 예를 들어 독일 로케일(de-DE)은 천 단위 구분자로 온점(.)을 사용하고, 소수점 구분자로 콤마(,)를 사용한다. — 참고 포스팅const number = 123456.789;// 로케일을 지정하지 않으면 기본 로케일(navigator.language)을 따른다Intl.Numbe..
[JS] 자바스크립트 reduce() 메서드 활용 예시 모음
[JS] 자바스크립트 reduce() 메서드 활용 예시 모음
2024.07.07Array.reduce() 메서드는 배열에 있는 각 요소에 콜백 함수를 실행하여 누적된 계산 결과를 하나의 값으로 반환한다. 자바스크립트에서 제공하는 filter(), map() 등의 배열 메서드는 모두 reduce()로 구현할 수 있고, 이 외에도 다양한 활용 방법이 있기 때문에 개인적으로 가장 자주 사용하는 배열 메서드다. reduce() 메서드의 구문은 아래와 같다.reduce(callbackFn, initialValue?) callbackFn 콜백 파라미터accumulator : 이전 callbackFn 반환값초기값 지정 시 콜백을 처음 호출했을 때 값 : initialValue초기값 미지정시 콜백을 처음 호출했을 때 값 : array[0]currentValue : 현재 순회하고 있는 값초기값 지..
[JS] 자바스크립트 Set 객체의 집합 연산 메서드 (교집합, 합집합 등)
[JS] 자바스크립트 Set 객체의 집합 연산 메서드 (교집합, 합집합 등)
2024.07.04TL;DR💡 ES6에 도입된 Set 객체는 중복을 허용하지 않는 고유한 값들을 저장하는 데이터 구조다. Set은 동일한 값을 두 번 저장할 수 없기 때문에 중복된 값을 추가하면 자동으로 무시한다. 또한 삽입 순서를 기억하고, 원시형과 참조형 값을 모두 지원한다 — 참고 포스팅 Firefox 127 버전부터 별도의 폴리필 없이 크롬(Chrome)을 포함한 대부분의 주요 브라우저 엔진에서 교집합, 합집합, 차집합 등 집합 연산을 수행하는 새로운 Set 메서드를 지원한다. 크로스 브라우저에서 지원하는 메서드는 다음과 같다. A.intersection(B) : 두 Set이 공통으로 가지는 요소를 포함한 새로운 Set 반환 — 교집합A.union(B) : 두 Set이 가진 모든 요소를 포함한 새로운 Set 반환..
[Git] RSS 글 발행 시(티스토리 등) GitHub 자동 커밋 방법
[Git] RSS 글 발행 시(티스토리 등) GitHub 자동 커밋 방법
2024.07.03GitHub에서 사용자 이름(username)과 동일한 이름으로 public 레포지토리를 생성하고 README.md 파일을 추가하면 프로필 페이지 상단에 README 내용이 표시된다. 프로필 페이지엔 주로 자신이 소개하고 싶은 프로젝트, 기술 스택 등을 기재한다. 카테고리별로 주목할 만한 프로필 페이지를 모아둔 사이트도 있다. 대부분의 개발자들이 블로그를 운영하고 있어서 그런지 Latest Blog Posts 헤더에 최근 글 목록을 보여주는 프로필이 많다. 이 기능은 rss-parser 같은 라이브러리를 통해 RSS 피드 목록을 불러오고 README.md에 반영하는 방식으로 구현되는데, 이 작업을 GitHub Actions를 통해 정기적으로 수행하도록 만들 수 있다. RSS 설정먼저 자신의 블로그 혹은..