본문 바로가기

프로그램 개발

FastAPI를 사용한 API 백엔드 개발; 1. 윈도우 FastAPI 개발환경 FastAPI를 사용한 API 백엔드 개발1. React Native 개발 환경 설치2. Vagrant로 VirtualBox 서버 추가 1. FastAPI 소개인공지능의 인기가 올라가면서 가장 인기 있는 언어가 파이썬이 되었다. 인공지능이 전에는 파이썬은 C언어로 된 라이브러리를 쉽게 사용할 수 있게 만들어진 인터프리터 언어로 인식이 되어서 시스템 운영자가 관리를 위한 목적으로 자동화를 할 때 많이 사용하였다. 클라우드 시대가 되면서 파이썬이 클라우드 운영을 위한 가장 각광받는 언어가 되었는데, 인공지능의 시대가 되면서 C언어로 만들어진 CUDA나 Tensorflow를 사용하기 위한 언어로 자리를 잡으면서 점차 영역을 넓혀갔다. 이전에 한번 인기 있는 언어에 대한 그래프를 소개한 적이 있는데,  파이썬은.. 더보기
Open AI API 사용 방법 - 2 4. 기사 작성 인공지능이전에 증권사에서 뉴스를 발표하면서 AI가 만든 뉴스라고 발표하는 뉴스가 있었다. 형태도 비슷하고, 나오는 내용도 비슷해서 자동으로 생성되는 것 같다는 생각은 했지만 그때는 어떻게 만드는지 궁금했었다. OpenAI를 사용해서 뉴스를 자동으로 생성하는 프로그램을 가벼와서 어떻게 반응을 하는지 수정하면서 테스트해 봤다. 먼저 아래와 같은 함수를 만든다. def assist_journalist( facts: list[str], tone: str = str, length_words: int = 100, style: str = "journalistic"): response = client.chat.completions.create( model="gpt-3.5-.. 더보기
Open AI API 사용 방법 - 1 1. Open AI에 대한 간단한 설명GPT로 유명해진 Open AI는 GPT 시리즈의 모델과 DALLE-E, TTS, Whisper, Embeddings 등 응용프로그램에서 사용할 수 있는 몇 가지 유용한 인공지능 모델을 제공한다. 물론 가장 유명한 것은 GPT (Generative Pre-trained Transformer)로 2017년 구글에서 발표한 "Attention is all you need"라는 논문에서 나온 모델인데 NLP (Natural Language Processing) 분야에서 새로운 장을 열개된 유명한 모델이다. GTP에 대한 설명은 이미 많은 블로그에 나와 있는데, 문장을 임베딩으로 변환하고 단어 간의 거리를 계산한 다음 어떤 단어가 어텐션인지를 찾아내어 attention을 기.. 더보기
React Native로 PDF Viewer 앱 만들기; 8. React Navigation - 2 React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal)6. TypeScript 전환, Jest 추가7. React Navigation - 18. React Navigation - 2 일반적인 앱을 보면 상단에 Header Bar는 현재 화면의 명칭, 위치나 추가적인 정보가 있고 Button이 있는 경우는 많이 없고, 있다고 하더라도 꼭 필요한 기능에 대해 제한적으로 버튼이 존재한다. 그에 반해 화면 아래쪽에는 아이콘이나 아이콘이 있는 버튼 존재하는 경우가 많고, 이 아이콘을 통해 앱의 기능을 조작하는 경우가.. 더보기
React Native로 PDF Viewer 앱 만들기; 7. React Navigation - 1 React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal)6. TypeScript 전환, Jest 추가7. React Navigation - 18. React Navigation - 2 지금까지 앱은 화면이 PDF를 보는 화면 하나만 있었다. 이제 내 핸드폰에 저장되어 있는 PDF 파일을 보는 기능을 추가하면서첫 화면이 "파일 목록을 보는 화면"이고두 번째 화면이 "PDF 파일을 보는 화면"으로 나눌 것이다. 그래서 첫 번째 화면에서 파일을 선택하면 두 번째 화면에서 PDF를 보여주기 위해, 첫 번째 화면에서 .. 더보기
React Native로 PDF Viewer 앱 만들기; 6. TypeScript 전환, Jest 추가 React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal)6. TypeScript 전환, Jest 추가7. React Navigation - 18. React Navigation - 2 처음 PDF Viewer를 시작할 때는 React Native를 사용하는 방법을 알려 줄 목적으로 만든 예제였는데, 우리 딸이 자기가 원하는 기능을 넣어서 사용할 수 있는 앱으로 만들어 달라고 요구하는 바람에 정식으로 앱을 만들어서 스토어에 무료 앱으로 등록하는 것으로 목적을 바꾸었다. 그래서 이제부터는 일반적인 프로젝트에서 개.. 더보기
React Native로 PDF Viewer 앱 만들기; 5. 화면 개발 - 팝업 창 (Modal) React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API5. 화면 개발- 팝업 창 (Modal) 6. TypeScript 전환, Jest 추가 7. React Navigation - 18. React Navigation - 2 9. Modal; 팝업 (Popup) 창 만들기이제 PDF가 잘 보이는 것도 확인했고, 최상위에 Bar를 만들어 앱 이름과 페이지 정보도 표시해 봤으니, 다른 PDF도 읽을 수 있도록 입력을 받을 수 있는 팝업 창을 하나 만들어 보자. 디자이너는 아니라서... 대충 이런 느낌으로 만들려면, 팝업 창 컴포넌트, Input 컴포.. 더보기
React Native로 PDF Viewer 앱 만들기; 4. 화면 개발 - Context API React Native로 PDF Viewer 앱 만들기1. React Native 개발 환경 설치2. react-native-pdf 테스트 앱3. 화면 개발 - JSX 컴포넌트4. 화면 개발 - Context API 5. 화면 개발- 팝업 창 (Modal) 6. TypeScript 전환, Jest 추가7. React Navigation - 1 8. React Navigation - 2  8. Context ; 컴포넌트 간 정보 전달 방법React은 (React Native를 포함해서) 하향식 단방향 정보전달만 가능하다. 그래서 상하관계가 아닌 컴포넌트가 서로 정보를 전달하기 위해서는 상하관계를 이용해서 두 컴포넌트가 속해있는 상위 컴포넌트의 상태(정보)를 바꾸거나컴포넌트 위치에 관계없이 정보를 전달할 수.. 더보기