HOME
[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..
[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.Number..
[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 반환..