Per ardua ad astra.

Tailing Comma 적용 방법들어가며Visual Studio Code 같은 IDE에서 Dart를 사용할 때, 쉼표(,)로 줄바꿈을 하는 Trailing Comma를 적용하는 방법을 간단하게 정리해본다. 방법Flutter 프로젝트 최상단 경로(@/@)에 있는 @analysis_options.yaml@ 파일에 다음과 같은 @formatter@를 추가해준다.Flutter SDK 3.7.0 버전부터 Trailing Comma 포맷팅이 기본적으로 적용되지 않는데, 다음과 같이 수동으로 적용될 수 있도록 설정할 수 있다. /analysis_options.yaml# This file configures the analyzer, which statically analyzes Dart code to# check f..

제목들어가며Dart에서 @var@, @const@, @final@ 자료형의 차이점을 간단하게 정리해본다. 자료형① var특징타입 추론 가능값 변경 가능재할당(Reassignment) 가능컴파일(Compile) 시점에 타입 확정런타임(Runtime) 시점에 메모리에 값 할당보통 상태 값이나 변경되는 데이터에서 사용한다.// 사용 예 1 : 재할당 가능var a = 10;a = 20; // 가능// 사용 예 2 : 타입 추론var b = 10; // int로 타입 추론 (컴파일 타임에 확정, 런타임에 메모리에 할당)b = "hello"; // 불가능 (컴파일 에러) ② final특징딱 한번만 값 할당런타임(Runtime) 시점에 값 결정 가능객체의 참조는 고정, 내부 값은 변경 가능Flutter에서 ..

제목들어가며Dart에서 사용하는 함수 파라미터(Parameter/Argument)에 대해 간단하게 정리해본다. 함수 파라미터(Argument/Parameter)개념함수에 값을 전달하기 위해 사용하는 핵심 개념전달된 값은 화면에 표시, 계산, 다른 함수 호출 등에 사용됨Dart에서는 2가지 파라미터 방식이 존재한다. 입력값은 함수 정의 시에는 매개변수(parameters), 함수 호출 시에는 인자(arguments)라고 부른다. 종류① Positional Parameter (위치 기반 파라미터)전달한 순서(position)로 어떤 파라미터에 값이 들어갈지를 결정한다.기본적으로 필수(required)이며 생략할 수 없다.void add(a, b) { // a, b는 positional parameter ..

AWS CLI(Command Line Interface) 설치하기들어가며PC에 AWS CLI(Command Line Interface)를 설치하는 방법을 간단하게 정리해본다. 방법서맃하기아래 링크에서 자신의 OS에 맞는 설치법을 따라 진행한다. AWS CLI 버전 2의 이전 릴리스 설치 - AWS Command Line Interface설치 관리자의 아무 위치에서나 Cmd+L을 눌러 설치에 대한 디버그 로그를 볼 수 있습니다. 이렇게 하면 로그를 필터링하고 저장할 수 있는 로그 창이 열립니다. 로그 파일도 /var/log/install.log에 자docs.aws.amazon.com 설치 확인터미널에 아래 명령을 실행하여 설치되어 있는지 확인한다.$ aws --version (참고) Git Bash에서 사..

Azure App Services 403 오류 임시 해결 방법들어가며Azure App Services에 배포한 웹 애플리케이션에 익명 POST 요청을 할 때, 원인을 알 수 없는 403 Forbidden 오류가 발생할 때 대처하는 방법을 정리해본다. 방법명령어를 이용하여 Azure App Services 인증(Authentication) 끄기나의 경우, 아래 명령을 이용하여 인증(Authentication) 기능을 @disable@ 하여 문제를 해결하였다.$ az webapp auth update \ --resource-group \ --name \ --enabled false 상태 확인$ az webapp auth show \ --resource-group \ --name 이 방법은 A..

Console Error Attempting to parse an unsupported color function "lab" 문제 해결 방법 (html2canvas)들어가며Next.js와 TailwindCSS를 이용하여 개발할 때, @html2canvas@ 라이브러리를 이용하여 웹피이지를 이미지 파일로 저장하는 기능을 구현하려고 할 때, 다음과 같이 @lab()@ 관련 오류가 발생할 수 있다.Console Error Attempting to parse an unsupported color function "lab" Call Stack 10 Show 10 ignore-listed frame(s)이때 이 문제를 해결하는 방법을 간단하게 정리해본다. 해결 방법이 문제는 TailwindCSS / PostCSS..

Zustand들어가며전역 상태 라이브러리 중 하나인 Zustand에 대해 간단하게 정리해본다. Zustand개념독일어로 상태(Status)라는 뜻리액트 앱에서 전역 상태 관리를 해주는 아주 가볍고 단순한 라이브러리Redux의 복잡한 구조(Action, Reducer, Dispatch)를 사용하지 않고, Hooks 기반의 간단한 API 제공"minimal, fast, scalable"을 목표로 만들어졌다. 비교Redux와 비교Redux는 boilerplate한 코드가 많다.@action@, @reducer@, @slice@를 작성해야 한다.// Redux Toolkitconst slice = createSlice({ name: "counter", initialState: { count: 0 }, re..

AsyncStorage들어가며리액트 네이티브(React Native)에서 로컬에 간단한 데이터를 저장할 수 있는 비동기 저장소인 AsyncStorage에 대해 간단하게 정리해본다. AsyncStorage개념로컬에 간단한 데이터를 키-값(Key-Value) 쌍으로 저장하고 불러오는 비동기 저장소모바일 기기 내부에 데이터를 영구 저장하는 공간웹의 localStorage와 비슷하지만, 비동기 방식이며, 네이티브에 최적화되어 있다.앱 재실행 후에도 데이터를 유지할 수 있다.용량이 크지 않은 간단한 데이터 저장에 적합하다. (예: 토큰, 사용자 설정, 간단한 캐시 등) 설치리액트 네이티브 0.60 이상에서는 공식 패키지 @＠react-native-async-storage/async-storage@를 사용한다.$..

navigate와 replace 메서드의 차이 (react-navigation)들어가며리액트 네비게이션(React Navigation)에서 @navigate@ 메서드와 @replace@ 메서드의 차이를 간단하게 정리해본다. 차이navigate 메서드기능새로운 화면을 스택(Stack)에 추가한다.현재 화면 위에 다른 화면을 쌓는(push) 방식이다. 결과이전 화면으로 뒤로 가기(back) 할 수 있다.뒤로 가기 버튼(←)이 자동으로 생긴다. (Stack Navigator 기준) 사용 예시navigation.navigate('Signup'); replace 메서드기능현재 화면을 새 화면으로 교체(replace)한다.이전 화면을 스택에서 제거하고, 새 화면으로 바꾼다. 결과이전 화면으로 뒤로 가기 할 수 없다..

Azure App Services 프로젝트 배포 후, Cannot find module 오류 해결법들어가며Azure App Services를 이용하여 프로젝트 배포 후, @Cannot find module@ 관련 오류가 발생할 경우 빠르게 해결하는 방법을 정리해본다. 방법방법 ① : Kudu Console 이용하기 (수동 설치)애저 포털에서 자신이 배포한 App Service 리소스 페이지에 들어간다.왼쪽 메뉴에서 [고급 도구(Advanced Tools)] → [이동(Go)] 을 클릭하여 Kudu 페이지에 접속한다. Kudu 페이지 상단의 @[SSH]@ 탭을 클릭한다. 터미널에서 아래의 명령을 순서대로 실행해준다.$ cd site/wwwroot$ npm install --production Azure ..

Azure Cosmos DB for MongoDB (RU) 연동하기들어가며Azure Cosmos DB for MongoDB (RU) 연동하는 방법을 간단하게 정리해본다.Next.js 15를 이용하였다. 방법Azure Cosmos DB for MongoDB (RU) 생성하기애저 포털에서 Azure Cosmos DB for MongoDB (RU) 리소스를 생성한다. 코드 작성하기Next.js 15를 기준으로 다음과 같은 코드를 작성한다. /.env.local (환경 변수)Azure Cosmos DB For MongoDB (RU) 리소스를 생성하면 URI를 확인할 수 있다.AZURE_COSMOS_MONGO_URI="YOUR_URI"AZURE_COSMOS_MONGO_DB_NAME="YOUR_DB_NAME" /a..

Google Sheets API 연동 방법들어가며Next.js에서 Google Sheets API를 연동하는 방법을 간단하게 정리해본다. 방법① Google Cloud Console에서 새로운 프로젝트 생성하기아래의 Google Cloud Console에 접속한다.구글 계정으로 로그인해야 하고, Google Cloud Console 가입을 해야할 수도 있다. Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com 그리고 새로운 프로젝트를 생성한다.새로운 프로젝트는 페이지 상단 왼쪽의 사각형 버튼을 클릭하여 생성할 수 있다.이전에 프로젝트를 생성하지 않았을 경우, 임의의 프로젝트 이름이 생성되어 있다. 알림창에서 프로젝트 생성 여부를 확인할 수 있다. @..

Prettier 적용하기들어가며Tailwind CSS에 Prettier를 적용하는 방법을 간단하게 정리해본다. Prettier개념Prettier는 코드 포맷터(Code Formatter)로, 기본적으로 CSS, HTML, JS 파일의 코드를 포맷팅해준다.Tailwind CSS 또한 Prettier를 이용하여 클래스 이름을 알파벳 순서대로 정렬하거나, 보기 좋게 묶어주도록 할 수 있다.대표적인 Tailwind CSS Prettier 플러그인으로 @prettier-plugin-tailwindcss@가 있다. 방법라이브러리 설치하기터미널에 아래 명령을 실행하여 @prettier@과 @prettier-plugin-tailwindcss@ 라이브러리를 설치해준다.$ npm install -D prettier pre..

같은 네트워크 망에 연결된 다른 컴퓨터에서 테스트 하는 방법들어가며Next.js 로컬 개발 서버를 같은 네트워크 망에 연결된 다른 컴퓨터(또는 스마트폰 등)에서 테스트하는 방법을 간단하게 정리해본다. 방법(1) 서버를 로컬 IP로 바인딩하기기본적으로 @next dev@는 localhost (127.0.0.1)에서만 실행되어 외부에서 접근할 수 없다.외부 기기에서 접근하려면 로컬 IP에 바인딩해야 한다.아래와 같이 터미널에서 명령을 실행하여 로컬 서버를 실행하거나 @package.json@ 파일의 @scripts@ 부분을 다음과 같이 수정해준다.$ next dev -H 0.0.0.0 /package.json"scripts": { "dev": "next dev -H 0.0.0.0"} (2) 로컬 IP 확인..

로딩 스피너(Loading Spinner) 만들기들어가며리액트 네이티브(React Native) 개발 중, 간단하게 로딩 스피너(Loading Spinner)를 만드는 방법을 정리해본다. 방법ActivityIndicator 이용하기리액트 네이티브 자체적으로 제공하는 @ActivityIndicator@를 이용하여 간단하게 로딩 스피너를 만들 수 있다. ① 로딩 스피너 컴포넌트 만들기로딩 스피너는 @ActivityIndicator@ 컴포넌트를 이용하여 만들 수 있다.import { View, ActivityIndicator, StyleSheet } from 'react-native';function LoadingOverlay() { return ( );}export default..

Three.js들어가며웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있게 해주는 라이브러리인 Three.js에 대해 간단하게 정리해본다. Three.js개념웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 JavaScript 라이브러리웹에서 3D 콘텐츠를 보여주기 위해 거의 필수로 사용되는 도구 Three.js – JavaScript 3D Library threejs.org 핵심 개념① Scene (장면)모든 3D 객체가 배치되는 무대 공간나무, 빛, 카메라 등 모든 객체는 이 @scene@에 추가되어야 화면에 렌더링된다.여러 객체를 그룹화하거나 배경색, 안개 효과 등을 설정할 수 있다.const scene = new THREE.Scene();// 배경색을 검정색으로 설정scene.backg..

App Services에 Next.js 15 배포하기 (VS Code, LocalGit)들어가며애저(Azure)의 App Services에 Next.js 15 프로젝트를 배포 완료 후, 배포했던 과정을 정리해본다.포트 관련 문제로 여러번의 배포 실패 작업 후, 오랫동안 구글링을 통해 해결 방법을 찾아보다가 성공한 방법을 정리해본다. 방법우선, 내가 진행했던 프로젝트의 배포 환경은 다음과 같다.Next.js v15.3.2TailwindCSS, JavaScript, TypeScriptNode v20.19.1비주얼 스튜디오 코드(VS Code)의 Azure 확장을 이용하여 배포를 진행하였다. (LocalGit)GitHub Actions을 이용하여 배포를 진행할 수도 있으나, 이 방법은 차후에 포스팅 해보려고 ..

BlurView들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 블러 효과를 주는 BlurView 컴포넌트에 대해 간단히 정리해본다. BlurView개념Expo에서 제공하는 화면의 일부분에 블러(Blur, 흐림 효과)를 적용할 수 있게 해주는 시각적 컴포넌트React Native에서는 iOS와 Android의 네이티브 블러 효과를 직접 구현하는 것이 번거롭기 때문에, Expo는 이러한 블러 효과를 쉽게 적용할 수 있도록 @expo-blur@ 패키지를 제공한다. 사용 방법@BlurView@는 배경 이미지나 비디오 위에 올려야 효과가 명확하게 보인다.iOS에서는 기본적으로 잘 지원되며, Android는 일부 기기에서 제한될 수 있음에 주의한다.React Navigation 라이..

NVM(Node Version Manager)들어가며노드(Node.js) 버전 관리자인 NVM(Node Version Manager)에 대해 간단히 정리해본다. NVM(Node Version Manager)개념Node.js 버전을 손쉽게 관리할 수 있는 명령줄(CLI) 도구Node.js는 자바스크립트 런타임이기 때문에, 프로젝트마다 다른 버전의 Node.js가 필요할 수 있다.이때 nvm을 사용하면 손쉽게 다음의 기능을 수행할 수 있다.여러 Node.js 버전 설치하기원하는 Node.js 버전으로 전환하기프로젝트에 맞는 버전만 사용할 수 있도록 제한하기 종류@nvm@의 종류에는 플랫폼에 따라 다음과 같이 2가지가 존재한다.플랫폼이름레포지토리 (설치 방법)MacOS / Linux@nvm@https://g..

useLayoutEffect 훅들어가며리액트(React.js)의 @useLayoutEffect@ 훅에 대해 간단히 정리해본다. useLayoutEffect 훅개념컴포넌트가 렌더링되기 직전, 즉 브라우저가 화면을 그리기 전에 실행되는 훅화면에 변화가 나타나기 전에 어떠한 처리를 하고 싶을 때 사용한다. 사용 방법import { useLayoutEffect } from 'react';useLayoutEffect(() => { // 레이아웃 관련 변경, 동기적 DOM 조작 등에 사용한다.}, [dependencies]); useEffect 훅과 비교하기항목useEffect 훅useLayoutEffect 훅실행 시점컴포넌트 렌더링 후, 브라우저가 화면을 그린 뒤컴포넌트 렌더링 직후, 브라우저가 화면을 그리기 ..

화면 간 데이터 전달하기 (React Navigation)들어가며리액트 네이티브(React Native) 프로젝트에서 React Navigation 라이브러리를 이용하여 화면 간 이동(Navigation) 기능을 구현할 때, 화면 간 데이터를 전달하는 방법을 간단하게 정리해본다. 방법데이터 전달하기@navigate()@ 메서드를 사용할 때, 두 번째 인자로 객체를 전달하면 해당 데이터를 다음 화면에 보낼 수 있다.navigation.navigate('MealsOverview', { categoryId: itemData.item.id,}); ⇒ 첫 번째 인자: 이동할 화면 이름⇒ 두 번째 인자 : @params@ 객체 (원하는 데이터 포함) 데이터 추출하기방법 ① : route prop 사용하기@Meal..

React Navigation 라이브러리들어가며리액트 네이티브(React Native) 앱에서 화면 간의 전환을 쉽게 구현할 수 있도록 도와주는 라이브러리인 React Navigation에 대해 간단하게 정리해본다. React Navigation개념React Native 앱에서 화면 간의 전환(네비게이션)을 쉽게 구현할 수 있도록 도와주는 오픈소스 라이브러리React Native 앱에 다양한 네비게이션 패턴(스택, 탭, 드로어 등)을 추가할 수 있게 해준다.웹의 라우팅(@react-router@)과 비슷하지만, 모바일 환경에 맞춘 기능(스와이프, 제스처, 헤더 애니메이션 등)을 제공한다. 주요 기능기능설명스택 네비게이션(Stack Navigation)- A 화면 → B 화면 이동 및 뒤로가기를 할 수 있..

뒤로가기 기능 막는 방법들어가며리액트 네이티브(React Native)를 이용하여 만든 앱에서 특정 스크린에서 뒤로가기 기능을 막는 방법을 간단하게 정리해본다. 방법방법 ① : BackHandler API 이용하기 (Android)@react-native@ 패키지의 @BackHandler@ API를 사용해서 뒤로가기 이벤트를 무시하도록 설정할 수 있다.이 방법은 안드로이드(Android)에서 물리적인 뒤로가기 기능을 막아준다.iOS에서는 물리적인 뒤로가기 버튼이 없기 때문에 별도로 처리해주지 않아도 된다.import { useEffect } from 'react';import { BackHandler } from 'react-native';function myApp() { useEffect(() => ..

.jsx 파일 사용 하는 방법들어가며리액트 네이티브(React Native) 프로젝트에서 @.jsx@ 파일을 사용하는 방법을 간단하게 정리해본다.일반적으로 리액트 네이티브에서는 @.js@ 파일만 인식하며, @.jsx@ 파일을 사용하려고 할 경우 에러가 발생한다. 방법현재 리액트 네이티브 프로젝트의 @expo-cli@ 버전에 따라 방법 ① 또는 방법 ②의 방법을 따라한다. 방법 ① : metro.config.js 파일에 확장자 추가하기프로젝트 최상단 경로(@/@)의 메트로 설정 파일(@metro.config.js@)에 다음과 같이 코드를 추가한다.만약 해당 파일이 없을 경우 새로 생성해준다. /metro.config.jsmodule.exports = { resolver: { sourceExts: [..

StatusBar (react-native, expo-status-bar)들어가며리액트 네이티브(React Native)의 @StatusBar@와 엑스포(Expo)의 @expo-status-bar@에  대해 간단히 정리해본다. StatusBar (React Native)개념상단 상태 표시줄(시간, 배터리, 신호 등)의 스타일, 배경색, 표시 여부 등을 제어할 수 있는 React Native 내장 컴포넌트 사용 방법import { StatusBar } from 'react-native';export default function App() { return ( );} 주요 속성속성설명플랫폼@barStyle@- 텍스트 색상 설정▶ @default@ : 플랫폼별 기본 색상 (iOS ..

Platform API들어가며리액트 네이티브(React Native)의 Platform API에 대해 간단히 정리해 본다. Platform API개념리액트 네이티브에서 앱이 실행되고 있는 플랫폼(iOS, Android, Web 등)을 감지하고, 플랫폼별로 다른 동작이나 스타일을 구현할 수 있게 해주는 유틸리티 사용 방법불러오기import { Platform } from 'react-native'; ① Platform.OS현재 실행 중인 플랫폼을 문자열로 반환해 준다.@android@, @ios@, @web@, @windows@, @macos@const platform = Platform.OS;if (platform === 'android') { console.log('Running on Android'..

ScrollView들어가며리액트 네이티브(React Native)의 @ScrollView@ 컴포넌트에 대해 간단하게 정리해본다. ScrollView개념스크롤 가능한 컨테이너로, 자식 컴포넌트가 화면의 크기를 넘어설 때 스크롤(Scroll)을 통해 볼 수 있게 해주는 컴포넌트자식 요소들이 많거나 화면보다 커질 경우, 사용자가 스크롤해서 볼 수 있도록 만들어준다. 주요 속성속성타입설명@horizontal@@boolean@@true@로 설정 시, 가로 스크롤 가능 (기본 : 세로)@contentContainerStyle@@style@내부 콘텐츠 전체에 적용할 스타일@showsVerticalScrollIndicator@@boolean@세로 스크롤바 표시 여부@showsHorizontalScrollIndicato..

KeyboardAvoidingView들어가며리액트 네이티브(React Native)의 @KeyboardAvoidingView@ 컴포넌트에 대해 간단히 정리해 본다. KeyboardAvoidingView개념키보드가 화면에 나타날 때 입력 필드 등의 UI가 가려지는 문제를 해결하기 위해 사용되는 컴포넌트키보드 레이아웃이 표시될 때, 자식 요소를 위로 올려서 입력창을 가리지 않도록 해준다.Android에서는 기본적으로 잘 처리되나, iOS에서는 그렇지 않아 이 컴포넌트를 이용하면 유용하다. 주요 속성behavior키보드가 나타날 때의 동작 방식을 조절할 수 있다.플랫폼에 따라 동작이 다를 수 있기 때문에 @Platform.OS@를 통해 조건 분기해서 쓰는 것이 일반적이다.옵션설명@padding@키보드의 높이만..

에뮬레이터 디바이스 자동 회전 기능 켜는 방법 (Expo)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트를 에뮬레이터로 실행할 때, 디바이스 자동 회전 기능을 켜는 방법을 간단히 정리해본다. 방법(1) 애플리케이션 설정 파일(app.json) orientation 키 값 변경하기프로젝트 최상단 경로에 있는 애플리케이션 설정 파일(@app.json@)의 @orientation@ 키의 값을 다음과 같이 @default@로 설정해준다. /app.json{ "expo": { "name": "section-02", "slug": "section-02", "version": "1.0.0", "orientation": "default", "icon": "./as..

Dimensions API들어가며리액트 네이티브(React Native)의 내장 API 중 하나인 Dimensions API에 대해 간단히 정리해본다Dimensions API를 이용하여 현재 디바이스의 화면 정보를 가져올 수 있다. Dimensions API개념리액트 네이티브(React Native)에서 기본으로 제공하는 내장 API디바이스의 화면 크기(너비(Width)와 높이(Height)) 정보를 가져오는 데 사용된다.반응형 UI 구성에 활용할 수 있다.이러한 정보를 이용하여 폰트 크기(Font Size), 패딩(Padding), 마진(Margin) 등을 디바이스 화면 크기에 따라 조정할 수 있다. 사용하면 좋은 경우다양한 화면 크기에 맞춰 폰트, 간격, 크기를 조절할 때미디어 쿼리(Media Que..