Per ardua ad astra.

React Native 플랫폼 별로 요소에 그림자 효과 넣기 (Android, iOS, Web)

플랫폼 별로 요소에 그림자 효과 넣기 (Android, iOS, Web)들어가며리액트 네이티브(React Native)에서 플랫폼 별(Android, iOS, Web)로 요소에 그림자 효과를 넣는 방법을 간단하게 정리해본다.  방법① AndroidAndroid에서는 elevation 속성을 사용해서 요소에 그림자 효과를 넣어줄 수 있다.style={{ elevation: 5, // 숫자가 클수록 그림자가 진해진다. backgroundColor: 'white', // 배경색 있어야 그림자가 보이므로 넣어준다. borderRadius: 10,}} ② iOSiOS는 elevation 속성이 인식되지 않는다.따라서 다음과 같은 4가지 속성을 사용하여 요소에 그림자 효과를 넣어줄..

React Native 아이콘 사용하기 (＠expo/vector-icons)

아이콘 사용하기 (＠expo/vector-icons)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 아이콘(Icon)을 사용하는 방법을 간단하게 정리해본다.리액트 네이티브의 엑스포 프로젝트에서는 별다른 패키지를 설치하지 않고도 아이콘을 바로 사용할 수 있다. 방법1️⃣ 패키지 설치하기 (＠expo/vector-icons)Expo 프로젝트에서는 이미 기본적으로 ＠expo/vector-icons 패키지가 포함되어 있어서 따로 설치할 필요는 없다.하지만, 해당 패키지가 설치되어 있지 않을 경우, 아래 명령을 실행하여 설치해준다.$ expo install expo/vector-icons 2️⃣ 아이콘 세트 불러오기우선, 아이콘 세트(Icon Set)를 불러와서 해당 아이콘 세..

React Native 커스텀 폰트 사용하기 (expo-font)

커스텀 폰트 사용하기 (expo-font)들어가며리액트 네이티브(React Native) 엑스포(Expo) 프로젝트에서 커스텀 폰트를 적용하는 방법을 간단하게 정리해본다. 방법 1️⃣ 패키지 설치하기폰트 사용을 위해 expo-font 패키지를 설치한다.$ expo install expo-fontexpo install 명령은 현재 Expo 프로젝트의 버전과 호환되는 패키지를 자동으로 설치해준다.  2️⃣ 폰트 파일 준비하기프로젝트의 /assets/fonts 폴더 안에, 추가할 커스텀 폰트 파일을 넣어준다.해당 폴더가 없을 경우, 새로 생성해준다. 4️⃣ 폰트 불러오기 (useFonts 훅)프로젝트 최상단에 있는 App.js 파일에 다음과 같은 커스텀 폰트를 불러오는 코드를 추가해준다.use..

SafeAreaView들어가며리액트 네이티브(React Native)의 SafeAreaView 컴포넌트에 대해 간단하게 정리해본다. SafeAreaView개념React Native에서 화면 상단의 상태바나 노치와 같은 UI 요소로부터 콘텐츠가 겹치지 않도록 자동으로 안전한 영역을 설정해주는 컴포넌트SafeAreaView 컴포넌트를 사용하면 다양한 기기에서 콘텐츠가 적절하게 배치되고, 화면 가장자리나 상단의 중요한 UI 요소에 가려지지 않게 된다. 주요 기능노치, 상태 바, 하단의 홈 바 등과 같은 화면 요소가 있는 디바이스에서 컨텐츠가 겹치지 않도록 자동으로 여백을 추가해준다.다양한 화면 크기와 해상도에 따라 안전 영역을 자동으로 인식하고, 이에 맞게 여백을 적용해준다. 사용 방법React Nativ..

Alert API들어가며리액트 네이티브(React Native)에서 기본적으로 제공하는 Alert API에 대해 정리해본다. Alert API개념사용자가 알림을 띄울 수 있도록 도와주는 API기본적으로 네이티브(iOS와 Android) 알림 다이얼로그를 표시하는 데 사용된다.사용자가 알림을 확인하거나 취소할 수 있도록 버튼을 구성할 수 있으며, 다양한 설정 방법을 지원한다. 사용법기본 사용법Alert는 React Native에서 내장된 객체로, alert() 메서드를 통해 알림을 띄울 수 있다.import { Alert } from 'react-native';Alert.alert('알림 제목', '알림 메시지'); 버튼 추가하기Alert는 기본적으로 [확인] 버튼만 제공하지만, 여러 버튼을..

npm install vs. expo install들어가며리액트 네이티브(React Native) Expo 프로젝트에서 패키지를 설치하는 방법으로 npm install과 expo install 2가지 방법이 있다.이 2가지 방법의 차이점을 간단하게 정리해본다. 패키지 설치 명령어1️⃣ npm install$ npm install 패키지명Node.js 패키지 관리 명령어npm(Node Package Manager)을 사용하여, 프로젝트의 package.json 파일에 정의된 패키지들을 설치한다.Expo 프로젝트에서 npm install을 사용하면, Expo와 관련된 버전 호환성 문제를 직접 해결해야 할 수 있다.Expo가 요구하는 특정 버전의 패키지와 호환되지 않을 수 있으므로 호환성 문제를 일..

환경 변수 파일 사용하기 (react-native-dotenv)들어가며리액트 네이티브(React Native)에서 환경 변수 파일(env)을 사용하는 방법을 정리해본다.react-native-dotenv 라이브러리를 이용하여 환경 변수를 사용하는 방법이다. 방법1️⃣ react-native-dotenv 패키지 설치하기터미널에 아래 명령을 실행하여 프로젝트에 react-native-dotenv 패키지를 설치한다.$ npm install react-native-dotenv # yarn add react-native-dotenv 2️⃣ .env 파일 생성하기프로젝트 최상단 경로에 .env 파일을 생성하고 환경 변수를 설정한다.API_URL=https://api.example.comAPP..

응집도(Cohesion)와 결합도(Coupling)들어가며CS 관련 공부를 하다보면 자주 접하는 용어인 응집도(Cohesion)와 결합도(Coupling)에 대하여 간단하게 정리해본다. 응집도(Cohesion)개념모듈 내부의 구성 요소들이 서로 얼마나 밀접하게 관련되어 있는지를 나타내는 척도높은 응집도를 가진 모듈은 하나의 명확한 기능이나 책임을 수행하며, 내부 요소들이 긴밀하게 협력한다.유지보수와 재사용성을 높여준다. 예시한 클래스가 특정한 데이터와 그 데이터를 처리하는 함수들로만 구성되어 있다면, 해당 클래스는 높은 응집도를 가진다고 볼 수 있습니다. 예제 코드아래의 클래스는 계좌와 관련된 데이터와 기능(예: 입금, 출금, 잔액 조회)을 한 곳에 모아두어 하나의 명확한 역할만 수행하도록 설계되었다.c..

다이얼로그(Dialog)들어가며PyQt에서 다이얼로그(Dialog)의 의미와 종류를 간단하게 정리해본다. 다이얼로그(Dialog)개념사용자와 상호작용하기 위해 나타나는 별개의 창일반적으로 다이얼로그는 사용자로부터 입력을 받거나, 확인 및 경고 메시지를 표시하는 데 사용된다. 종류PyQt에서는 주로 QDialog 클래스를 사용하여 다이얼로그를 구현한다.PyQt에서 다이얼로그는 다음과 같은 2가지 형태로 제공된다. 1️⃣ 모달 다이얼로그(Modal Dialog)사용자에게 해당 창과 상호작용을 완료하기 전까지는 다른 창과의 상호작용을 허용하지 않는다.exec_() 메서드를 호출하여 표시하며, 사용자가 다이얼로그를 닫기 전까지 다른 창과의 상호작용을 차단한다. 2️⃣ 모델리스(비모달) 다이얼로그(Mode..

카메라 권한 요청 메시지 표시 방법 (Expo)들어가며엑스포(Expo)를 이용하여 생성한 리액트 네이티브(React Native) 프로젝트에서 카메라 권한 요청 메시지를 표시하는 방법을 정리해본다. 방법패키지 설치터미널에서 아래 명령을 실행하여 expo-camera 패키지를 설치해준다.$ npx expo install expo-camera 앱 설정 파일 구성하기  (app.json)프로젝트의 최상단에 있는 앱 설정 파일(app.json)에 아래의 내용을 추가해준다. /app.json{ "expo": { "plugins": [ [ "expo-camera", { "cameraPermission": "Allow $(PRODUCT_NAME) t..

클립보드 기능 구현하기 (expo-clipboard)들어가며엑스포(Expo)를 이용하여 생성한 리액트 네이티브(React Native) 프로젝트에서 클립보드(Clipboard) 기능을 구현하는 방법을 정리해본다. 방법간단하게 expo-clipboard 패키지를 설치하여 클립보드 기능을 구현할 수 있다. expo-clipboard 패키지 설치하기$ npx expo install expo-clipboard 사용하기클립보드에 복사할 때는 Clipboard.setStringAsync() 함수를 사용하고, 클립보드에 있는(복사된) 값을 가져올 때는 fetchCopiedText() 함수를 사용한다.import { useState } from 'react';import { View, Text, Button..

blurOnSubmit 속성과 submitBehavior 속성들어가며리액트 네이티브(React Native)의 TextInput 컴포넌트에서 사용할 수 있는 blurOnSubmit 속성과 submitBehavior 속성에 대해 정리해본다. blurOnSubmit 속성개념우선 blurOnSubmit 속성은 다음과 같이 TextInput 컴포넌트에서 사용할 수 있다. { setIsFocused(false); Keyboard.dismiss(); }}/> blurOnSubmit 속성은 TextInput 창 텍스트를 입력하고, 엔터(Enter) 버튼을 누르면 입력한 텍스트가 제출(Submit)되도록 해주는 속성이다.따라서 텍스트 필드가 블러 처리되게 된다.기본값은..

TailwindCSS IntelliSense 활성화하기 (VS Code)들어가며VS Code에서 리액트 네이티브(React Native)를 이용하여 애플리케이션을 만들 때, TailwindCSS IntelliSense를 활성화 시키는 방법을 정리해본다. 방법(1) Tailwind CSS IntelliSense 확장 설치하기VS Code에서 Tailwind CSS IntelliSense 확장을 설치한다. Tailwind CSS IntelliSense - Visual Studio MarketplaceExtension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Codemarketplace.visualstudio.com (2) Tailwi..

리액트 애플리케이션 테스트 환경 구축하기 (Vite, TypeScript, React)들어가며Vite, TypeScript, React를 이용하여 프로젝트 템플릿을 생성하고, 리액트 애플리케이션 테스트 환경을 구축하는 방법을 정리해본다. 방법1️⃣ 프로젝트 생성하기Vite 프로젝트 설정하기프로젝트 이름을 설정한다.React와 TypeScript를 선택한다.$npm create vitelatest 의존성 설치하기아래의 명령을 실행하여 패키지를 설치한 후, 실행해본다.$ npm install$npm run dev 2️⃣ Vite 환경에서 테스트 설정하기Vitest 설치하기아래의 명령을 실행하여 Vitest를 설치한다.$ npm install -D vitest VitestVite 기반의 빠르고 간..

소프트웨어 테스트 방법들어가며다양한 소프트웨어 테스트 방법을 간단하게 정리해본다. ① 단위 테스트(Unit Test)개념애플리케이션의 가장 작은 단위(메서드, 함수, 클래스 등)를 독립적으로 테스트하는 방법단일 모듈, 함수, 메서드를 개별적으로 검증외부 종속성(DB, 네트워크 등)을 배제하기 위해 Mocking(모의 객체) 활용빠르게 실행되며, 개발 초기에 버그를 쉽게 잡을 수 있다. 예시add(2, 3) 함수가 5를 반환하는지 확인하기import unittestdef add(a, b): return a + bclass TestMathOperations(unittest.TestCase): def test_add(self): self.assertEqual(add(2, 3), ..

압축 해제 시 "파일 이름이나 확장명이 너무 깁니다" 문제 해결 방법들어가며웹 개발 프로젝트 폴더를 압축한 후, 압축 해제를 할 때, "파일 이름이나 확장명이 너무 깁니다" 와 같은 오류로 인해 실패하는 경우가 있다.윈도우(Windows)에서 '경로 + 파일 이름 + 확장자'의 최대 길이가 260자이기 때문에 발생하는 문제이다.이때, 이 문제를 해결하는 방법을 정리해본다. 방법① 에서 길이 제한 해제하기[Window] + [R] 키를 눌러 실행창을 띄운 후, regedit을 실행한다. 레지스트리 편집기에서 아래의 경로로 이동한다.컴퓨터\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem LongPathsEnabled 값을 1로..

정규화 방법 정리 (1NF, 2NF, 3NF, BCNF, 4NF, 5NF)들어가며데이터베이스의 정규화 방법을 정리해본다. 용어 정리속성(Attribute) : 테이블의 컬럼(Column)키(Key) : 한 행(Row)을 고유하게 식별할 수 있는 속성 (또는 속성들의 집합)기본키(Primary Key) : 테이블을 대표하는 유일한 키후보키(Candidate Key) : 기본키가 될 수 있는 모든 키기본키는 후보키 중에서 선택한 하나의 키이다.후보키는 슈퍼키 중에서 최소성을 만족하는 키이다.슈퍼키(Super Key) : 유일성은 만족하지만 최소성은 만족하지 않을 수 있는 키유일성(Uniqueness)특정 속성(또는 속성들의 조합)이 중복되지 않고 고유한 값을 가져야 하는 성질유일성을 보장하기 위해 기본키(P..

정규화(Normalization), 반정규화(Denormalization), 이상(Anomaly)들어가며데이터베이스에서 정규화(Normalization)와 반정규화(Denormalization), 이상(Anomaly)에 대해 정리해본다. 정규화(Normalization)개념데이터의 중복을 최소화하고, 이상 현상(Anomalies)을 방지하기 위해 데이터베이스 테이블을 구조화하는 과정1차 정규형(1NF), 2NF, 3NF, BCNF, 4NF, 5NF 등의 정규형이 있다. 장점중복된 데이터가 적어져 갱신이나 삭제 시 한 번만 변경해도 일관성이 유지된다.동일한 데이터를 여러 곳에 보관하지 않아도 되어 저장 공간을 절약할 수 있다.테이블 구조가 잘 정리되어 있어 갱신 이상, 삭제 이상, 삽입 이상 같은 문제들을..

GraphQL (with Apollo GraphQL)들어가며데이터 질의 언어 중 하나인 GraphQL에 대해 정리해본다. GraphQL개념Meta(Facebook)가 개발한 데이터 질의 언어(Data Query Language)클라이언트와 서버 간 데이터 요청 및 관리를 더 효율적으로 처리하기 위해 설계된 기술REST API의 대안으로 주목받고 있으며, 데이터 요청에 있어 더 유연하고 효율적인 접근 방식을 제공한다.클라이언트가 원하는 데이터만 정확히 요청할 수 있도록 지원한다.메타(Meta)의 서비스, Pinterest, Airbnb, AWS, Microsoft 등 많은 곳에서 이용하고 있다. GraphQL | A query language for your APIEvolve your API without..

폼(Form) 처리 방법 (React 19)들어가며예제 코드와 함께 React 19에서 업데이트 된 폼(Form) 처리 방법에 대하여 간단하게 정리해본다. 사용 방법아래의 코드는 React 19에서 새로 추가된 Form 관련 기능들을 적용한 코드이다. Signup.jsximport { useActionState } from 'react';import { isEmail, isNotEmpty, isEqualToOtherValue, hasMinLength,} from '../util/validation';export default function Signup() { // React 19 이상에서는 폼 제출 시, formData 객체가 생성되고 함수의 인자로 가져와 특정 필드의 입력값을 가져올 수 있다..

테이블(QTableWidget) 내용 지우는 방법들어가며PyQt의 테이블(QTableWidget)의 내용을 지우는 방법을 정리해본다. 내용방법 ① : setRowCount(0) 테이블의 행 수를 0개로 설정하여 모든 데이터를 삭제하는 방법이다.빠르고 간단하게 테이블의 행과 데이터를 즉시 제거한다.열 헤더(Header)는 그대로 유지된다.table_widget.setRowCount(0) 방법 ② : clearContents()테이블의 셀 데이터를 비우지만, 행과 열의 구조는 유지하는 방법이다.열 헤더와 행의 구조를 유지하면서 데이터를 삭제한다.기존에 설정한 행 수와 열 수를 수동으로 초기화하려면 추가 작업이 필요하다.table_widget.clearContents() 방법 ③ : 모든 행을 반복하여..

컴포넌트 클릭 시, 최상단으로 스크롤 되는 현상 막는 방법들어가며Next.js의 컴포넌트를 클릭하면, 기본적으로 화면의 최상단으로 스크롤이 된다.이러한 현상을 막는 방법을 정리해본다. 방법간단하다. 다음과 같이 컴포넌트의 scroll 속성의 값을 false로 지정해주면 된다.import Link from 'next/link'; Move 참고 사이트 | Next.js" data-og-description="Enable fast client-side navigation with the built-in `next/link` component." data-og-host="nextjs.org" data-og-source-url="https://nextjs.org/docs/app/api-refe..

클릭 시, 리플 효과(Ripple Effect) 주는 방법들어가며리액트 네이티브(React Native)에서 요소 클릭 시, 리플 효과(Ripple Effect)를 줄 수 있는 방법을 정리해본다. 방법우선 특정 요소에 클릭 이벤트를 넣기 위해서는 Pressable 컴포넌트로 해당 요소를 감싸줘야 한다.import { View, Text, Pressable } from 'react-native';function MyComponent(props) { return ( {/* 클릭 효과를 넣을 요소를 감싸준다. */} {props.text} );} Android OSPressable 컴포넌트에 android_ripple 속성을 추가하여 요소 클릭..

FlatList들어가며리액트 네이티브(React Native)의 FlatList 컴포넌트에 대해 정리해본다. FlatList개념효율적으로 대량의 스크롤 가능한 항목을 렌더링하기 위해 사용되는 컴포넌트최적화된 가상 스크롤링 기능을 제공하여 성능 문제를 줄이고, 스크롤 시 필요한 항목만 렌더링한다.ScrollView 컴포넌트와의 차이점 주요 속성속성설명data- 렌더링할 데이터 배열(Array)을 전달- 배열의 각 요소는 렌더링될 항목의 데이터renderItem- 데이터를 어떻게 렌더링할지 정의하는 함수- 매개변수로 { item, index } 형태의 객체를 받는다.keyExtractor- 각 항목의 고유 키를 반환하는 함수- 기본적으로 item.key 또는 item.id를 사용..

환경 변수 타입 설정하기들어가며타입스크립트에서 환경 변수(Environment Variable)에 타입 오류가 발생하지 않도록 타입을 설정하는 방법을 정리해본다. 방법다음과 같은 환경 변수 파일이 있다고 해보자.이제 이 환경 변수를 프로젝트 내의 다른 파일에서 불러와서 사용해볼 것이다. (Next.js 프레임워크 사용).env.localNEXT_PUBLIC_API_KEY="="***********"NEXT_PUBLIC_SPACE_ID="**************************" (1) !(Non-Null Assertion) 연산자 사용하기!를 사용하여 값이 undefined가 아님을 타입스크립트에 명시한다.하지만 이 방법은 해당 환경 변수가 존재하지 않을 경우, 런타임 에러가 발생한다는..

ADB(Android Debug Bridge) 명령어 정리들어가며ADB(Android Debug Bridge) 명령어를 정리해본다. 명령어 사용 전 주의 사항안드로이드 기기의 [설정]에서 [개발자 도구]를 활성화 시킨 후, USB 디버깅을 활성화 해줘야 한다.PC에 Android SDK Platform-Tools를 설치해야 한다.안드로이드 스튜디오(Android Studio)를 설치할 경우, 함께 설치된다. SDK 플랫폼 도구 출시 노트  |  Android Studio  |  Android DevelopersAndroid SDK 플랫폼 도구는 Android SDK의 구성요소입니다.developer.android.com 명령어기본 명령어명령어설명adb devices연결된 안드로이드 기기 목..

VS Code에서 명령어로 안드로이드 에뮬레이터 실행 방법들어가며안드로이드 에뮬레이터를 실행하려면 안드로이드 스튜디오를 실행한 후, 직접 가상 에뮬레이터를 실행시켜줘야 한다.안드로이드 스튜디오를 실행시킬 필요 없이, 비주얼 스튜디오 코드(VS Code) 터미널에서 명령어로 안드로이드 에뮬레이터를 실행시킬 수 있는 방법을 정리해본다. 방법Windows[환경 변수]의 [시스템 변수]에서 Path 항목을 선택하고 아래의 경로를 추가해준다.C:\Users\\AppData\Local\Android\Sdk\emulator 설치된 가상 장치 목록을 확인한다.$emulator -list-avds 에뮬레이터를 실행한다.$ emulator -avd  AVD_NAME에 실행시키고자 하는 가상 장치 이름을 넣..

adb 명령어 실행 방법 (adb: command not found 문제 해결법)들어가며터미널에 adb 관련 명령을 실행했을 때 다음과 같은 오류가 발생할 경우 해결하는 방법을 정리해본다.$ adb --versionbash: adb: command not found  ADB(Android Debug Bridge)개념안드로이드 기기와 컴퓨터 간의 연결을 관리하고 디버깅 작업을 수행할 수 있게 해주는 명령줄(CLI) 도구안드로이드 개발 과정에서 필수적으로 사용되며, 아래와 같은 작업에 사용된다.☑️ 안드로이드 기기와의 통신☑️ 앱 설치 및 테스트☑️ 디버깅 ☑️ 파일 전송 ☑️ 쉘 명령 실행☑️ 포트 포워딩ADB는 Android SDK에 포함되어 있으며, 안드로이드 스튜디오(Android Studio)를..

피어슨 상관 계수 구하기들어가며피어슨 상관 계수(Pearson Correlation Coefficient)를 구하는 방법을 정리해본다.2024년 9회 제3유형 기출 문제로 피어슨 상관 계수를 구하는 문제가 출제되었다. 피어슨 상관 계수(Pearson Correlation Coefficient)개념두 변수 간의 선형 관계의 강도와 방향을 측정하는 통계적 지표-1에서 1 사이의 값을 가진다. $$r = \frac{\sum (x_i - \bar{x})(y_i - \bar{y})}{\sqrt{\sum (x_i - \bar{x})^2 \cdot \sum (y_i - \bar{y})^2}}$$ ☑️ $x_i, y_i$ : 데이터 값☑️ $\bar{x}, \bar{y}$ : 각각의 평균 값 특징두 변수 간의 관계가 선형..

시험장에서 알아두면 좋은 팁들어가며빅데이터분석기사 실기 시험장에서 알아두면 좋은 팁을 정리해본다. 팁1️⃣ 메모 기능 활용하기빅데이터분석기사 실기 시험은 구름 온라인 IDE를 통해 진행된다. 구름EDU - 모두를 위한 맞춤형 IT교육구름EDU는 모두를 위한 맞춤형 IT교육 플랫폼입니다. 개인/학교/기업 및 기관 별 최적화된 IT교육 솔루션을 경험해보세요. 기초부터 실무 프로그래밍 교육, 전국 초중고/대학교 온라인 강의, 기업/edu.goorm.io 구름 온라인 IDE는 메모 기능을 지원한다. help, dir 명령의 출력 결과나 부분 문제의 정답 등을 메모장에 기록해두면 유용하다.참고로, 구름 온라인 IDE의 터미널 출력 결과는 키보드를 이용하여 복사(Ctrl+C) 및 붙여넣기(Ctrl+V)를 할..