Per ardua ad astra.

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

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

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..

헤더에 인증 정보 추가하는 방법들어가며Axios를 사용하여 헤더에 인증(Authorization) 정보를 추가하는 방법을 정리해본다.이 글은 리액트(React) 코드로 작성되었다. 방법① 파일에 인증 헤더 부분 추가하기API 호출을 하고자 하는 파일 안에 인증 정보를 담은 변수를 생성하여 추가하는 방법이다.// 인증 정보를 담은 변수const authHeader = (thunkAPI) => { return { headers: { authorization: `Bearer ${thunkAPI.getState().user.user.token}`, }, };};export const createJobThunk = async (job, thunkAPI) => { try { const..

Mockaroo들어가며가상 데이터를 생성해주는 도구인 Mockaroo에 대해 정리해본다. Mockaroo개념개발자와 데이터 분석가를 위해 현실적인 가상 데이터를 생성해주는 온라인 도구CSV, JSON, SQL, Excel 등 다양한 형식으로 최대 1,000개의 행을 무료로 생성할 수 있다. 주요 기능이름, 주소, 이메일 등 다양한 필드 타입을 제공하여 사용자 정의 데이터 생성이 가능하다.필드 이름, 데이터 타입, 옵션 등을 설정하여 원하는 데이터 구조를 만들 수 있다. CSV, JSON, SQL, Excel 등 여러 형식으로 데이터를 다운로드할 수 있다.가상 API를 설계하여 실제 API와의 상호 작용을 하게 할 수 있다. 사용 방법아래의 공식 홈페이지에 접속하여 필드 이름(Field Name)과 타입(..

CMS(Content Management System)들어가며CMS(Content Management System)에 대해 정리해본다. CMS(Content Management System)개념콘텐츠 관리 시스템웹사이트나 애플리케이션의 콘텐츠를 생성, 관리, 수정, 배포하는 데 사용하는 소프트웨어기술적인 지식이 없는 사용자도 쉽게 웹 콘텐츠를 관리할 수 있도록 설계되어 있다.대표적인 예로 WordPress, Joomla, Drupal 등이 있다.CMS를 사용하면 코딩하지 않고도 텍스트, 이미지, 비디오 등을 추가하거나 변경할 수 있다. 특징비개발자도 쉽게 콘텐츠를 관리할 수 있다.웹사이트 디자인과 레이아웃을 미리 정의된 템플릿으로 설정할 수 있다.다양한 기능을 추가할 수 있는 플러그인과 확장 기능을 지원..

.env 파일 만들고 사용하기 (환경 변수 관리)들어가며리액트(React.js)에서 환경 변수 관리를 위해 @.env@ 파일을 만들고 사용하는 방법을 정리해본다. @.env@ 파일개념애플리케이션에서 사용되는 환경 변수(Environment Variables)를 저장하는 파일환경 변수는 운영체제나 애플리케이션의 설정 값들을 외부에서 설정하고 관리할 수 있게 해주는 변수들로, 코드에 직접 하드코딩하지 않고도 민감한 정보나 설정 값을 관리할 수 있게 해준다.리액트나 노드 같은 웹 애플리케이션에서는 주로 다음과 같은 정보를 @.env@ 파일에 저장한다.✅ API 키 ✅ 데이터베이스 연결 정보 ✅ API 엔드포인트 ✅ 앱 환경 설정 (개발, 테스트, 프로덕션 등) 특징애플리케이션에서 민감한 정보나 환경에 따라 달..

전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor)들어가며Axios의 전역(Global)/커스텀(Custom) 인스턴스, 인터셉터(Interceptor) 개념에 대해 정리해본다. 전역 인스턴스(Global Instance)개념Axios의 기본 인스턴스를 설정하여 애플리케이션 전체에서 사용할 수 있도록 하는 방법모든 Axios 요청에 기본적인 설정(예: @baseURL@, @headers@ 등)을 적용할 수 있다. 설정 방법프로젝트의 @src@ 폴더 안에 @axios@ 폴더를 만들고, @global.js@ 파일을 생성한다.그리고 다음과 같이 코드를 작성한다.import axios from 'axios';// In latest axios version common proper..

API(Application Programming Interface) 들어가며 API(Application Programming Interface)에 대해 알아보자. API(Application Programming Interface) 개념 응용 프로그램 간에 소통하고 상호 작용하기 위한 규칙 세트나 도구 모음 소프트웨어 구성 요소들 간에 데이터 및 서비스를 교환할 수 있도록 하는 인터페이스를 제공한다. 이러한 인터페이스는 다른 시스템이나 애플리케이션에서 기능을 사용하거나 데이터를 공유하는 데 사용된다. API를 사용하면 다른 개발자나 시스템이 제공하는 서비스를 쉽게 통합하고 확장할 수 있다. 예를 들어, 특정 서비스의 데이터를 가져오거나 외부 서비스에 데이터를 전송하는 등의 작업을 API를 통해 수행할..

파이썬을 이용하여 텔레그램(Telegram) 메시지 보내는 방법 들어가며 파이썬(Python)을 이용하여 텔레그램(Telegram) 메시지를 보내보자. 원리는 우선 텔레그램에서 봇을 만든 후, 파이썬 코드를 이용하여 해당 봇에 메시지를 보내는 것이다. 카카오톡 API를 이용한 메시지를 보내는 방법 보다 더 간단하다. 방법 ① 텔레그램에서 봇파더(@BotFather@) 추가하기 텔레그램에서 @BotFather@를 검색한 후, 체크박스(☑️)가 있는 봇파더를 추가해준다. ② 봇 생성하기 아래의 내용들을 차례로 채팅방에 입력하여 봇을 생성하고 API 토큰값을 얻어보자. 새로운 봇 만들기 채팅방에 아래의 메시지를 입력하여 전송한다. > /start > /newbot 봇 이름 지정하기 생성할 봇 이름을 지정해준다..