Per ardua ad astra.

- [Network] GraphQL (with Apollo GraphQL)

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 OS@Pressable@ 컴포넌트에 @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)를 할..

print 문 출력 문자에 색깔 넣는 방법 (ANSI Escape Code)들어가며파이썬(Python)에서 @print@ 문으로 특정 문자를 출력할 때, 색깔을 넣는 방법을 정리해본다. ANSI Escape Code개념텍스트를 출력할 때, 색상, 스타일 및 기타 속성을 제어하는 데 사용되는 특수한 제어 문자열주로 터미널 또는 콘솔에서 출력되는 텍스트에 다양한 효과를 주기 위해 사용된다.이 코드는 @\033@ (혹은 @\x1b@)로 시작하며, 뒤에 @[@와 특정 @색상 코드@ 또는 @스타일 코드@가 포함된다. 그리고 마지막에는 @m@으로 끝나는 형태로 이루어져 있다.\033[m \033[0m # 방법1\x1b[m \x1b[0m # 방법2 ⇒ @\033@ / @\x1b@ : 이스케이프 문자..

Contentful들어가며Headless CMS 중 하나인 Contentful 서비스에 대하여 정리해본다. Contentful개념2013년 독일 베를린에서 만들어진  Headless CMS(Content Management System, 컨텐츠 관리 시스템) 서비스현재 Spotify, Red Bull, IKEA 등 굵직한 글로벌 기업들이 이 서비스를 이용하고 있다.프론트엔드와 백엔드(컨텐츠 저장 및 관리)가 결합된 구조와 달리, 프론트엔드와 백엔드가 분리된 형태의 컨텐츠 관리 시스템이다. Content that takes you everywhereBusiness moves faster when teams producing content have a platform that empowers them to ..

제3유형: 가설 검정 연습 문제들어가며빅데이터분석기사 실기 제3유형 가설 검정 파트의 연습 문제를 정리해본다. 단일 표본 T-검정(One Sample T-Test)개념표본 평균이 모평균과 다른지를 검정하는 통계적 방법☑️ 귀무 가설($H_0$) : 표본의 평균은 특정값(모집단 평균)과 같다.☑️ 대립 가설($H_1$) : 표본의 평균은 특정값(모집단 평균)과 다르다.단일 표본 T-검정은 1가지를 만족한다고 가정한다.단일 표본 T-검정은 표본이 정규 분포를 따른다고 가정한다. (정규성 가정 만족)표본의 크기가 작은 경우 (30개 미만) 데이터가 정규 분포를 따르는지 확인한다.정규성 가정을 확인하기 위해서는 샤피로-윌크 검정을 이용한다.@scipy.stats@ 패키지의 @shapiro@ 함수를 이용한다.정규..

Expo Go 앱에서 Expo 프로젝트 연결 안되는 문제 해결 방법 (There was a problem running the requested app)들어가며Expo Go 앱에서 PC에서 생성한 Expo 프로젝트를 연결할 때, 아래와 같은 오류가 발생할 때 해결하는 방법을 정리해본다. 방법① 동일한 네트워크에 연결되어 있는지 확인하기PC와 Expo Go 앱이 설치된 모바일 장치가 모두 동일한 네트워크(와이파이)에 접속되어 있는지 확인한다. ② 제어판에서 NodeJS 관련 기능 설정하기[제어판] > [시스템 보안] > [Windows Defender 방화벽] > [허용되는 앱]에서 @NodeJS JavaScript Runtime@ 항목의 @[개인]@, @[공용]@을 모두 체크해준다.

제2유형 시험 준비들어가며빅데이터분석기사 실기 제2유형 시험 준비를 위한 내용을 정리해본다.제2유형은 데이터 모형 구축 및 평가와 관련된 내용이 포함된다.제2회 ~ 제8회 기출 변형 문제와 풀이 방법을 함께 정리하였다.모든 문제의 모델링은 성능이 준수하게 나오는 랜덤 포레스트(Random Forest)를 이용하여 수행하였다. 랜덤 포레스트(Random Forest)개념앙상블 학습(Ensemble Learning) 방법 중 한 방법여러 개의 의사결정 나무(Decision Tree)를 생성하고 그 결과를 종합하여 예측 성능을 높이는 알고리즘매우 유연하고 강력하지만, 데이터가 잘 준비되지 않으면 성능이 저하될 수 있다. 데이터 전처리1️⃣ 종속 변수를 범주형 변수로 바꾸지 않아도 된다.랜덤 포레스트는 회귀(R..

Nodemailer 라이브러리들어가며Node.js 환경에서 메일을 간단하게 보낼 수 있도록 도와주는 Nodemailer 라이브러리에 대해 정리해본다. Nodemailer 라이브러리개념Node.js 환경에서 이메일을 쉽게 보낼 수 있도록 도와주는 라이브러리간단한 설정으로 SMTP, OAuth2 등을 활용한 이메일 전송을 할 수 있다.텍스트와 HTML 형식의 이메일, 첨부 파일 전송 등 다양한 기능을 제공한다.무료로 사용 가능하다.오픈 소스로 관리되고 있다. 주요 특징SMTP, OAuth2, AWS SES, SendGrid 등 다양한 이메일 서비스 지원이메일 본문을 일반 텍스트 또는 HTML 형식으로 작성 가능이미지, 문서 등 파일 첨부 가능기본 인증 외에도 OAuth2를 지원하여 보안성 강화이모티콘이나 다..

EmailJS 라이브러리들어가며간편하게 회원가입으로 무료로 월 200건까지 이메일을 보낼 수 있도록 도와주는 EmailJS 라이브러리에 대해 정리해본다. EmailJS개념사용자가 서버 없이 자바스크립트만으로 이메일을 보낼 수 있도록 도와주는 서비스사용자는 백엔드 설정 없이 클라이언트 사이드에서 이메일을 전송할 수 있다.SMTP 서버를 활용하여 이메일을 전송하며, Gmail, Outlook 등의 이메일 서비스를 지원한다. 주요 특징클라이언트 사이드에서 직접 이메일을 전송할 수 있어 백엔드가 필요없다.Gmail, Yahoo, Outlook 등 여러 서비스와 호환된다.사용자 정의 템플릿을 만들어 동적으로 데이터를 전달할 수 있다.전송 데이터를 암호화하며 API 키를 사용하여 인증을 처리한다.몇 줄의 코드만으로..

Expo CLI vs. React Native CLI들어가며리액트 네이티브(React Native) 프로젝트 생성 방법으로 Expo CLI 와 React Native CLI 방법 2가지가 있다.이 두 방법의 차이점을 간단하게 정리해본다. Expo CLI개념리액트 네이티브로 앱을 개발할 때 사용되는 도구프로젝트 생성, 관리, 실행을 간단하게 해주는 명령줄 인터페이스(Command Line Interface)리액트 네이티브 프로젝트를 생성할 때 기본적으로 권장되는 접근 방식 새 프로젝트 생성하기$ npx create-expo-app@latest # 새 프로젝트 생성 주요 특징기본 템플릿을 제공하여 초기 설정 없이 바로 앱 개발 시작 가능카메라, 위치 정보, 푸시 알림 등 네이티브 기능을 쉽게 사용할 ..

원격 저장소 주소 변경하는 방법들어가며Git 명령어를 이용하여 현재 프로젝트의 원격(Remote) 저장소 주소를 변경하는 방법을 정리해본다. 방법현재 원격 저장소주소 확인하기현재 프로젝트에 연결된 원격 저장소 주소를 확인한다.$ git remote -vorigin https://github.com/old-user/old-repo.git (fetch)origin https://github.com/old-user/old-repo.git (push)  현재 원격 저장소 주소 변경하기@set-url@ 옵션을 사용하여 원격 저장소 주소를 변경할 수 있다.$ git remote set-url origin  사용 예$ git remote set-url origin https://github.com/new-user..

제1유형 시험 준비들어가며빅데이터분석기사 실기 제1유형 시험 준비를 위한 내용을 정리해본다.제1유형은 데이터 전처리와 관련된 내용이 포함된다.제2회 ~ 제8회 기출 변형 문제와 풀이 방법을 함께 정리하였다. 문제📎 문제1 (21년 2회)BostonHousing 데이터@crim@ 항목의 상위에서 10번째 값(상위 10개의 값 중에서 가장 작은 값)으로 상위 10개의 값을 변환하고, @age@가 80 이상인 값에 대하여 @crim@의 평균 구하기소수점 셋째 자리에서 반올림해서 소수점 둘째 자리로 출력하기import numpy as npimport pandas as pddf = pd.read_csv('./datasets/data_q1.csv')# 'crim' 항목의 상위 10번째 값 뽑기top10_value..

help(), dir() 활용하기들어가며빅데이터분석기사 실기 시험장에서 특정 함수명이나 함수의 사용 방법을 잊어버렸을 경우, @help()@ 또는 @dir()@ 함수를 이용하여 확인할 수 있다.이에 대한 내용을 정리해본다. 방법0️⃣ 참고 사항@help()@ 또는 @dir()@ 함수의 인자에 넣을 대상을 우선 @import@ 해줘야 한다.import sklearn # (1) 확인하고자 할 대상 불러오기print(help(sklearn)) # (2) 사용 방법 확인print(dir(sklearn)) # (3) 속성/메서드 목록 확인 1️⃣ help() 함수 사용하기객체, 모듈, 함수, 클래스 등에 대한 도움말 문서(docstring)를 확인하고 싶을 경우 @help()@ 함수를 사용..

corr() 함수와 numeric_only 옵션들어가며판다스(Pandas) 2.0.0 버전부터 @corr@ 함수의 @numeric_only@ 옵션의 기본값이 @False@로 변경되었다.이에 대한 내용을 정리해본다. 설명판다스(Pandas) 2.0.0 버전부터 @corr@ 함수의 @numeric_only@ 옵션의 기본값이 @False@로 변경되었다.이전 버전에는 기본값이 @True@로 설정되어 있어서, 이 옵션을 따로 넣어주지 않아도 됐었다.따라서 판다스 2.0.0 이상 버전이 적용된 빅데이터분석기사 실기 시험 9회차부터 @corr@ 함수를 사용할 경우, @numeric_only=True@ 옵션을 반드시 지정해줘야 한다.import pandas as pddf = pd.read_csv("data/Titani..

React Hook Form 라이브러리들어가며리액트(React.js) 애플리케이션에서 폼(Form)의 상태 관리를 쉽게 해주는 라이브러리인 React Hook Form에 대해 정리해본다. React Hook Form개념리액트 애플리케이션에서 폼(Form)의 상태를 관리해주는 라이브러리간단하고 효율적이며 퍼포먼스가 뛰어나다.리액트의 훅(Hook)을 활용하여 사용하며, 폼 상태 관리를 위한 기본적인 기능과 유효성 검증(Validation) 기능을 제공한다. React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.react-..

loc, iloc 차이점 비교 (Pandas)들어가며판다스(Pandas)의 @loc@과 @iloc@ 함수의 차이점을 정리해본다.두 함수는 판다스의 데이터프레임(DataFrame) 객체에서 사용할 수 있다. loc 함수개념라벨 기반(Label-based) 인덱싱 방식행과 열의 이름 또는 라벨을 기준으로 데이터를 선택한다.슬라이싱을 할 때, 끝값도 포함된다. (@[a, b]@) 사용 예시 코드import pandas as pddata = { 'A': [1, 2, 3], 'B': [4, 5, 6], 'C': [7, 8, 9]}df = pd.DataFrame(data, index=['row1', 'row2', 'row3'])""" 출력 결과 A B Crow1 1 4 7row..

Hydration 에러 해결하는 방법 (Next.js 15)들어가며Next.js 15에서 생성한 프로젝트에서 아래와 같은 Hydration 에러가 발생할 경우 해결하는 방법을 정리해본다.Console ErrorHydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used- A server/client branch 'if (typeof window !== 'undefined')'.- Variable input such as 'Date.now()' ..

Auth0들어가며인증(Authentication) 및 사용자 관리 기능을 쉽게 도와주는 Auth0 서비스에 대해 정리해본다.이 서비스를 이용하면, 소셜 로그인 등 인증을 위한 기능들을 직접 코드로 구현하여 만들어주지 않아도 된다. Auth0개념사용자가 애플리케이션의 인증 및 권한 관리를 간단하고 안전하게 구현할 수 있도록 지원하는 인증 및 권한 관리 플랫폼개발자는 Auth0를 이용하여 복잡한 인증 시스템을 직접 개발하지 않아도 되고, 다양한 인증 방식을 쉽게 통합할 수 있다. 주요 특징다양한 인증 방식 지원이메일/비밀번호소셜 로그인 (Google, Facebook, GitHub, Twitter 등)다중 인증(Multi Factor Authentication)SSO(Single Sign-On)Passwor..

FusionCharts 라이브러리들어가며자바스크립트(JavaScript)의 FusionCharts 라이브러리에 대해 정리해본다. FusionCharts개념웹 기반 대시보드와 데이터 시각화를 위한 자바스크립트(JavaScript) 차트 라이브러리개발자와 기업이 다양한 형태의 데이터를 차트, 그래프, 게이지(Gauge), 지도 등으로 시각화 할 수 있다.무료 및 유료 플랜이 있어 프로젝트의 필요에 따라 선택 가능하다.공식 홈페이지 : JavaScript charts for web & mobile | FusionCharts 특징선 차트, 파이 차트, 게이지, 히트맵 등 100개 이상의 차트 유형 지원복잡한 비즈니스 대시보드나 보고서를 쉽게 만들 수 있다.모든 차트는 반응형 디자인이 적용되어 모바일, 태블릿, ..

시험장 들어가기 전에 보기 빠르게 보기 좋은 강의 모음들어가며시험장에 들어가기 전에 빠르게 보면 좋을 것 같은 (무료) 강의들을 시험 출제 유형별로 정리해본다.유튜브(YouTube)에 올라와 있는 여러 무료 강의들 중, 괜찮게 들은 것들을 정리해보았다. 강의 모음제1유형 (데이터 전처리)강의명URL비고파이썬 기초https://youtu.be/3GSnGaH5yoc?si=JeIYxJJF8faZkHf6파이썬(Python)한 시간 만에 배우는 판다스https://youtu.be/hmKVYEei4Oo?si=cCy-klaPyMS0Y4Lt판다스(Pandas)판다스 100제https://youtu.be/J9XkwoCamuI?si=S1SKTX0eeUJIMmCb판다스(Pandas)아답터 빅분기 실기 대비 필수 영상 (1유..