anvil

엔빌은 고객 성공을 최우선으로 하는맞춤형 솔루션을 제공합니다.

고객에게 꼭 필요한 맞춤형 컨설팅다양한 경험을 통한 혁신적인 IT 시스템LLM 기술로 구현된 맞춤형 비즈니스 솔루션

Business

Portfolio

More
PortfolioPortfolioPortfolio
PortfolioPortfolioPortfolio
PortfolioPortfolioPortfolio

Anvil BLOG

More
2024년 02월 27일

Nginx 웹 서버 가이드

Nginx 웹 서버 가이드 Nginx는 로드 밸런싱, 메일 프록시, HTTP 캐싱 기능을 제공하는 고성능 웹 서버이자 리버스 프록시입니다. 많은 수의 동시 연결을 효율적으로 처리하도록 설계되어 웹 애플리케이션 전송을 최적화하고 고가용성 및 확장성을 보장하는 데 이상적입니다. 이 가이드에서는 Nginx를 설치하고 기본적인 설정을 구성하는 방법을 설명합니다. Nginx 설치 Nginx는 대부분 OS 기본 리포지토리에 포함되어 있으므로 패키지 관리자를 사용하여 설치할 수 있습니다. MacOS Ubuntu 설치가 완료되었다면 Nginx는 Ubuntu 서버 기준, 를 사용하여 관리됩니다. 모든 설치가 완료되었다면, 브라우저에서 또는 를 입력하여 다음과 같은 Nginx 기본 페이지를 확인할 수 있습니다. Nginx 설정 파일 구조 일반적으로 Nginx 설정 파일은 폴더에 위치합니다. : Nginx의 주요 설정 파일 : 디렉터리에는 일반적으로 서버가 호스팅하는 개별 도메인 이름마다 다른 구성 파일을 저장합니다. 예를 들어 에는 도메인을 위한 설정 파일이 있습니다. : 서버 구성 파일에 대한 를 포함하는 디렉터리입니다. 기본적으로 토글 역할을 하며 이 디렉터리에 있는 파일만이 실제로 사용됩니다. 는 심볼릭 링크로, 파일이나 디렉터리에 대한 참조를 가리키는 파일입니다. 명령어를 사용하여 생성할 수 있습니다. 사용 예제 폴더에 nginx 설정 파일이 없다면, 다른 곳에 설치되어 있을 수 있습니다. 명령어를 사용하여 Nginx 설정 파일의 위치를 확인할 수 있습니다. Nginx 서버 블록 Nginx는 서버 블록을 사용하여 서버의 동작을 구성합니다. 서버 블록은 특정 도메인 이름이나 IP 주소에 대한 요청을 처리하는 방법을 정의합니다. Nginx의 설정 파일은 중괄호 로 둘러싸인 블록으로 구성됩니다. 모든 줄은 세미콜론 으로 끝나야 합니다. 블록은 중첩될 수 있으며, 블록 내부에 다른 블록을 정의할 수 있습니다. 으로 시작하는 줄은 주석으로 처리됩니다. 다음은 사이트 블록 파일의 기본 예제입니다. 위의 설정은 또는 으로 들어오는 요청을 디렉터리에서 파일을 찾아 반환합니다. 단순 파일 서버를 설정하는 것 외에도 Nginx는 리버스 프록시, 로드 밸런싱, SSL, FastCGI, uWSGI, SCGI, WebSockets 등 다양한 기능을 제공합니다. 다음은 사이트 블록 파일의 리버스 프록시 설정 예제입니다. 위의 설정은 또는 으로 들어오는 요청을 으로 전달합니다. Nginx 설정 파일 구문 검사 및 적용 Nginx 설정 파일을 변경한 후에는 명령어를 사용하여 구문 검사를 수행할 수 있습니다. 구문 검사가 성공하면 다음과 같은 메시지가 표시됩니다. 구문 검사가 실패하면 다음과 같이 오류 메시지가 표시됩니다. 구문 검사가 성공하면 변경 사항을 적용하려면 명령어를 사용하여 Nginx를 다시 로드할 수 있습니다. Nginx 로그 파일 Nginx는 기본적으로 로그 파일을 생성합니다. 로그 파일은 디렉터리에 위치합니다. : 클라이언트 요청에 대한 로그 파일 : 서버 오류에 대한 로그 파일 로그 파일의 위치는 Nginx 설정 파일에서 변경할 수 있습니다. TLS 인증서 설치 Nginx는 SSL/TLS 인증서를 사용하여 HTTPS 연결을 지원합니다. 을 사용하여 무료 SSL/TLS 인증서를 생성하고 설치할 수 있습니다. Nginx 삭제 Nginx를 삭제하려면 패키지 관리자를 사용하여 삭제할 수 있습니다. MacOS Ubuntu 참조

17 days ago

    2024년 02월 07일

    Docker, Docker Compose 정리

    Docker, Docker Compose 정리 Docker 개요 Docker란 격리된 컨테이너에서 애플리케이션을 실행할 수 있도록 도와주는 소프트웨어입니다. 로컬 환경에서 개발하는 경우 각자의 취향과 시스템에 맞도록 설정이 이미 되어있는 상태에서 애플리케이션을 구동하기때문에 다른 사람에게 똑같은 환경을 구현하거나 클라우드 서버등 다른 환경에서 배포시에 환경을 고려하여 여러가지 설정을 해줘야하는 번거로움이 있습니다. 이를 해결하기 위하여 Docker를 사용하게되면 필요한 환경정보를 모두 포함한 "컨테이너"에서 애플리케이션은 어디서 구동하던지 같은 환경으로 실행될 수 있도록 도와줍니다. Next.js 예제 Next.js 애플리케이션의 예로 들어보겠습니다. Next.js 서버를 구동하기 위해서는 다음과 같은 설정들이 필요합니다. 시스템에 필요한 버전의 Node.js가 설치되어 있어야합니다. 시스템에 필요한 버전의 패키지 관리자 (yarn, npm, pnpm 등)가 설치되어 있어야합니다. 해당 패키지 매니저를 사용한 의존성 모듈들이 설치되어 있어야힙니다. (nodemodules) 실제 구동될 Next.js 코드가 필요합니다 (git pull 등) 외부 데이터베이스 연결 또는 내부 데이터베이스 연결 스트링 정보를 담은 파일 등 환경 변수 설정이 필요합니다. ... 등등 위와 같이 "똑같은 상태"의 애플리케이션은 로컬 PC가 아닌 다른 PC에서 실행하기 위해서는 고려해야할 체크리스트가 매우 많습니다. 또한 여기에서 실행되는 PC의 운영체제가 변경되면 고려해야할 상황은 더욱 늘어납니다. Docker는 "도커 이미지"라는 개념을 통해 위 환경을 모두 선언하여 "컨테이너"로 만들 수 있게 도와줍니다. 도커 이미지는 파일로 명시를 해 줄 수 있습니다. 은 아래와 같이 어떠한 환경에서 어떠한 커맨드로 애플리케이션이 실행되는지 선언해줍니다. Dockerfile에 대한 공식 문서는 에 있습니다. 해당 파일을 Next.js 프로젝트 루트에 넣고 아래 커맨드를 실행하면 도커 이미지가 생성됩니다. () 다음 커맨드로 "도커 이미지" 목록에 이미지가 빌드되었는지 확인합니다. 다음 커맨드로 "도커 이미지"로 "도커 컨테이너를 실행합니다" () 도커 이미지 호스팅 위와 같은 방식으로 만들어진 docker 이미지는 호스팅되어 관리되어 다중 서버에 공유될 수 있습니다. 공유 방법의 예제는 다음과 같습니다. 도커에서 제공하는 허브로, 공개 도커 이미지에 대한 호스팅은 무료입니다. AWS에서 제공하는 도커 저장소로, 공개 도커 이미지에 대한 호스팅은 무료입니다. 수동 (Manual) 이미지를 파일로 변경하여 등의 커맨드로 서버에 공유할 수 있습니다. Docker Compose 개요 Docker Compose는 다중 컨테이너가 필요한 애플리케이션 관리에 사용되는 툴입니다. 기존에 라는 별도의 커맨드라인으로 사용되었었지만, 추후 의 하위 커맨드로 합쳐졌습니다. () Next.js - 프론트엔드 / Nest.js - 백엔드 예제 만약 Nest.js 프론트엔드 그리고 Nest.js 백엔드 애플리케이션을 구동하기위해서는 두가지 애플리케이션이 동시에 구동되어야합니다. 위의 방식을 사용하는 경우 두개의 애플리케이션은 각각 컨테이너 별로 다른 커맨드로 관리해야하는 번거로움이 있습니다. Next.js와 Nest.js를 동시에 실행하기 위한 docker run 커맨드 예제 대신 를 사용하게되면 아래와 같은 파일을 생성하여 하나의 파일로 어떤 컨테이너들이 애플리케이션 구동을 위해서 필요한지 관리가 가능합니다. 위 Docker Compose파일을 사용하여 아래 커맨드로 실행하여 컨테이너 일괄 관리가 가능합니다.

    a month ago

      2024년 02월 06일

      컨텐츠 생성 자동화 ⚙️

      컨텐츠 생성 자동화 개요 블로그 포스트, SNS 피드, 커뮤니티 게시글, 유튜브 영상 등 다양한 컨테츠가 인터넷의 주요 자원으로 자리를 잡음에 따라 양질의 많은 컨텐츠를 보유하면 이는 곳 자원을 보유한 것이 됩니다. 창작의 영역에서 무에서 컨텐츠를 제작하는 것보다 이미 존재하는 컨텐츠들을 취합하여 새로운 것을 생성하는 것이 일반적으로 되었습니다. 생성형 AI와 자동화 툴의 대중화로 컨텐츠를 생성하는 과정을 자동화할 수 있게 되었습니다. 그러므로 이러한 과정을 통하여 컨텐츠 생성을 자동화하는 프로세스를 정리해 보았습니다. 물론, 어떠한 컨텐츠를 생성할지에 따라 프로세스가 달라질 수 있기 때문에 지금의 과정에서는 단기간에 MVP로 다음과 같은 도메인을 지정하여 정리하였습니다. - IT - 개발 - 기술 데이터 수집 우선, 어떠한 과정을 통해서 컨테츠를 생성하든지 간에 다양한 출처로부터 컨텐츠를 생성하는데 기반이 되는 데이터를 수집하여야 합니다. 이는 크게 네 가지로 나눠볼 수 있습니다. 검색엔진 API를 통한 트렌드 데이터 수집 - 검색엔진에서 제공하는 트렌드 데이터를 수집하여 최근 컨텐츠 동향을 살펴보고 생성할 컨텐츠의 방향을 잡는데 사용할 데이터를 수집합니다. - - - 오픈 API를 통한 데이터 수집 - 플랫폼에서 데이터를 제공하는 오픈 API를 활용하여 컨텐츠 생성에 필요한 컨텐츠 데이터를 수집합니다. - 의 최신 트렌드를 제공하는 를 사용하여 데이터를 수집합니다. - 의 포스트 정보를 제공하는 API를 사용하여 포스트 데이터를 수집합니다. (), () - 는 개발 관련 질의 응답 커뮤니티로 제공되는 와 를 사용하여 데이터를 수집합니다. 를 사용한 포스트 데이터 수집 - 뉴스/블로그 사이트에서 제공되는 RSS를 통하여 데이터를 수집합니다. - 는 CSS 관련 팁 정보 등 포스트가 공유되는 플랫폼입니다. - 은 개인 블로그 플랫폼으로, RSS가 제공됩니다. () 크롤링을 통한 데이터 수집 - IT/개발/기술 관련 플랫폼들을 크롤링하여 필요한 데이터를 수집합니다. - 크롤링 방법 - HTML / XML 파싱 라이브러리 사용 정적인 웹사이트의 경우 HTML 파싱으로 충분한 데이터를 수집할 수 있습니다. - - Node.js XML/HTML 파싱 라이브러리 - - 파이썬 XML/HTML 파싱 라이브러리 - 웹 자동화 (Web Automation) 도구 사용 리액트 등 SPA 라이브러리 기반의 웹 사이트의 경우 웹 자동화 툴을 사용하여 크롤링합니다. - - 웹 드라이버를 사용한 브라우저 자동화 도구 - - Node.js 기반 크로미움 기반 브라우저 자동화 라이브러리 - - 브라우저 E2E 테스팅 도구로, 자동화에도 사용 가능 - 웹 자동화에 유용한 유틸리티 라이브러리 - - vimium 컨트롤로 웹 자동화 봇이 LLM기반으로 작동되도록 도와주는 라이브러리 다음은 라이브러리를 사용한 에서 300개의 게시글을 추출하는 예제 코드입니다. 위 코드를 사용하여 정기적으로 해커뉴스의 인기있는 300개 포스트를 크롤링하여 과 같은 CSV 파일을 추출할 수 있습니다. 수집된 데이터의 저장 MongoDB 1차적으로 수집된 로우 데이터(Raw Data)는 원본의 형태를 유지하면서 파일 시스템 또는 클라우드(AWS S3등)에 저장합니다. 웹 사이트 데이터 경우 HTML 형식의 웹 데이터이기 때문에 HTML 형식을 유지하여 저장하고, API 또는 RSS로 부터 제공받은 데이터는 JSON, XML 형식을 유지하여 저장합니다. 수집된 데이터 추적에 용이하도록 클라우드, 파일 시스템에 저장된 파일들에 대한 메타데이터 정보를 별도의 RDBMS 또는 NoSQL 데이터베이스에서 관리합니다. 추가적으로 데이터 정제에 용이하도록 필요에 따라 HTML, XML, JSON 등의 데이터에서 평문 텍스트 데이터를 추출하여 별도로 함께 저장합니다. 평문 데이터 추출에는 정규식(RegEx) 또는 Node.js의 DOM, JSON 파서 등을 활용합니다. 또한 태그 데이터를 제공하는 데이터의 경우 태그 데이터 또한 함께 저장하여 추후 활용합니다. 미디어 추출 및 저장 AWS S3 웹 기반 컨텐츠에는 이미지, 영상, 사운드 등의 컨텐츠가 존재할 수 있습니다. 이러한 데이터를 별도로 추출하여 저장합니다. - 이미지 및 영상 - 영상 및 이미지를 URL로부터 형태로 전달받아 클라우드에 저장합니다. - 로우 데이터와 마찬가지로 추출한 미디어에 대한 메타데이터를 별도의 데이터베이스에서 관리합니다. - 사운드 - 현재로서는 유용한 사운드의 활용 예제가 없기 때문에 사운드 데이터 URL에 대한 메타데이터 정보만 저장합니다. 데이터베이스 (NoSQL 모델링) 데이터 정제 로우 데이터(Raw Data) 자체로서는 활용도가 떨어지기 때문에 컨텐츠를 생성함에 있어서 유효한 데이터를 추출하고 정제합니다. 한국어가 아닌 컨텐츠의 경우 번역이 필요하기 때문에 번역을 해야합니다. 언어에 따라 적합한 라이브러리, API가 다를 수 있습니다. 예를 들어 영어를 한국어로 번역하는 경우에는 구글 번역기보다 네이버 파파고 또는 deepL 번역이 조금 더 자연스러운 번역을 도와줍니다. 번역은 다음과 같은 API를 사용하여 진행합니다. - - - - 영문과 다르게 한국어는 보다 단위로 나누어서 분석해야 자주 반복되는 명사와 태그 등을 추출하기 더 용이합니다. 형태소 ① 뜻을 가진 가장 작은 말의 단위. '이야기책'의 '이야기', '책' 따위이다. ② 문법적 또는 관계적인 뜻만을 나타내는 단어나 단어 성분. 그렇기 때문에 한국어 형태소 분석기를 활용하여 한국어 평문 텍스트의 형태소를 분리하고 이를 기반으로 키워드를 추출합니다. () 형태소 분석기 라이브러리는 다음과 같습니다. () - - Java - - C++ - - Elasticsearch - - Scala - - Java - - Python, C++ 컨텐츠를 생성하는데 한국어보다 영어가 적합하기 때문에 한국어 컨텐츠들은 태그 분석 후 영문으로 번역합니다. 컨텐츠 생성 텍스트 컨텐츠 텍스트 컨텐츠 생성은 오픈소스 또는 API 형태로 제공되는 생성형 AI 도구들을 활용하여 생성합니다. LLM AI 모델들은 텍스트 프롬프트를 통해 새로운 텍스트를 생성합니다. 정리된 IT/기술/개발 뉴스들에 대한 양질의 컨텐츠 생성하기 위해서는 을 통해 고도화해 나갑니다. 의 문서들을 참조하여 정리하였습니다. 또한 를 참조하였습니다. 프롬프트 엔지니어링에 도움이 되는 유틸리티 도구 목록입니다: - - Vercel에서 제작한 다양한 모델들로 프롬프트 테스트가 가능한 웹 애플리케이션 - - Open AI에서 제공하는 GPT들에 대한 프롬프트 테스트가 가능한 웹 애플리케이션 - - 프롬프트 엔지니어링 가이드 문서 - - AWS 가이드 텍스트 컨텐츠 생성에 사용될 수 있는 LLM 모델 목록입니다: - Open AI - - - Meta - 프롬프트 예제입니다: Vercel AI SDK를 사용하여 모델을 사용하여 프롬프트를 테스트하였습니다. 예제에 사용한 블로그 포스트는 을 사용하였습니다. ===== 전체 블로그 포스트 전문 ===== Above is a IT related blog posted from "Github", summarize the above article briefly in 2-3 paragraphs based on the hint. // 위 내용은 "Github"에 작성된 IT와 연관된 블로그 글입니다. 위 글을 아래 힌트들을 기준으로 2-3 문단으로 요약하세요. Hint: AI, developer experience, GitHub Copilot, GitHub Universe, Security // 힌트: AI, 개발자, 경험, Github Copilot, Github Universe, 보안 위 프롬프트에 대한 답변입니다: GitHub has announced the expansion and evolution of its AI-powered developer platform, GitHub Copilot. The platform, which aims to infuse AI into every step of the developer lifecycle, now includes a new feature called Copilot Chat. This feature allows developers to write and understand code using natural language as their programming language. Copilot Chat uses OpenAI's GPT-4 model for more accurate code suggestions and explanations. In addition to Copilot Chat, GitHub is also introducing slash commands, inline chat capabilities within the code editor, and smart actions that offer shortcuts for various workflows. Furthermore, Copilot Chat will be available on JetBrains IDEs in preview mode. The integration of Copilot Chat into github.com and the mobile app will provide developers with suggestions, summaries, analysis, answers to coding questions directly within these platforms. GitHub is also launching GitHub Copilot Enterprise for organizations that want personalized AI assistance tailored to their specific codebase. This enterprise version allows teams to quickly get up-to-speed on their codebase by providing search capabilities through internal repositories and documentation. Lastly,GitHub is expanding its ecosystem by integrating third-party tools through the GitHub Copilot Partner Program. Over 25 partners have already joined this program. Furthermore,GitHub Advanced Security now includes new AI-powered security features such as vulnerability prevention systems based on LLM models and autofixes using CodeQL for JavaScript and TypeScript. The next development from GitHub's research team at Next is the introduction of GitHub Copilot Workspace where developers can generate plans for implementing changes based on issues raised in a repository. Overall,the aim is to create a holistic AI-powered developer platform that enhances productivity throughout all stages of software development while maintaining security measures. 위 내용을 번역기를 사용하여 한국어로 번역하였습니다. GitHub은 인공지능 기반 개발자 플랫폼인 GitHub Copilot의 확장 및 진화를 발표했습니다. 개발자 라이프사이클의 모든 단계에 AI를 도입하는 것을 목표로 하는 이 플랫폼에는 이제 Copilot Chat이라는 새로운 기능이 포함됩니다. 이 기능을 통해 개발자는 자연어를 프로그래밍 언어로 사용하여 코드를 작성하고 이해할 수 있습니다. Copilot Chat은 보다 정확한 코드 제안과 설명을 위해 OpenAI의 GPT-4 모델을 사용합니다. GitHub는 Copilot Chat 외에도 슬래시 명령, 코드 에디터 내 인라인 채팅 기능, 다양한 워크플로우에 대한 단축키를 제공하는 스마트 액션도 도입합니다. 또한 Copilot Chat은 JetBrains IDE에서 미리보기 모드로 사용할 수 있습니다. Copilot Chat이 github.com 및 모바일 앱에 통합되면 개발자는 이러한 플랫폼 내에서 직접 코딩 질문에 대한 제안, 요약, 분석, 답변을 얻을 수 있습니다. 또한 특정 코드베이스에 맞게 맞춤화된 AI 지원을 원하는 조직을 위해 GitHub Copilot Enterprise를 출시합니다. 이 엔터프라이즈 버전은 내부 리포지토리 및 문서를 통한 검색 기능을 제공하여 팀이 코드베이스에 대한 최신 정보를 빠르게 파악할 수 있도록 지원합니다. 마지막으로, GitHub는 GitHub Copilot 파트너 프로그램을 통해 타사 도구를 통합하여 에코시스템을 확장하고 있습니다. 이미 25개 이상의 파트너가 이 프로그램에 참여했습니다. 또한, GitHub 고급 보안에는 이제 LLM 모델에 기반한 취약성 방지 시스템과 JavaScript 및 TypeScript용 CodeQL을 사용한 자동 수정과 같은 새로운 AI 기반 보안 기능이 포함되어 있습니다. 다음 개발은 개발자가 리포지토리에서 제기된 이슈를 기반으로 변경 사항을 구현하기 위한 계획을 생성할 수 있는 GitHub Copilot 워크스페이스의 도입입니다. 전반적으로, 보안 조치를 유지하면서 소프트웨어 개발의 모든 단계에서 생산성을 향상시키는 총체적인 AI 기반 개발자 플랫폼을 만드는 것이 목표입니다. 미디어 컨텐츠 미디어 컨텐츠는 추출된 태그 데이터를 기준으로 AI 모델을 사용하여 아래와 같은 프롬프트로 생성 가능합니다. 예제는 위와 마찬가지로 Github에서 발표한 블로그 포스트의 태그들을(AI, developer experience, GitHub Copilot, GitHub Universe, Security) 기준으로 생성하였습니다. 미디어 컨텐츠 생성 예제는 를 사용하였습니다. Create a blog article thumbnail image based on following tags: AI, developer experience, GitHub Copilot, GitHub Universe, Security. The image should be simple digital art. // 다음과 같은 태그와 연관된 블로그 기사 썸네일 이미지를 생성해주세요: AI, 개발자, 경험, Github Copilot, Github Universe, 보안. 이미지는 단순하고, 디지털 아트여야합니다. 아래는 프롬프트로 생성된 결과값입니다: 컨텐츠 제공 - 페이스북 / 인스타그램 읽기/쓰기 API - instagram - facebook 자동화 + Scheduler - await nestjs scheduler

      a month ago

        2024년 02월 06일

        Chart.js 및 react-wordcloud 관련 사용법

        Chart.js 및 react-wordcloud 관련 사용법 현재 관리자 대시보드 페이지에서는 Chart.js 및 react-wordcloud 등의 라이브러리를 통해서 다양한 차트들이 구현되어 있습니다. 원형 차트, 블록 차트, 선형 차트 등 다양한 차트들은 데이터만 올바르게 주입해준다면, Chart.js 라이브러리를 통해 간편하게 구현 가능합니다. Chart.js 예시 이미지: 선형 차트 버전 기준: 3.9.1 설치법 등 명령어로 chart.js 라이브러리를 설치해주시면 됩니다. 사용법 type에 구현하길 원하는 차트의 종류를 입력해주면 됩니다. (ex) data는 일반적으로 아래와 가은 형태를 지닌채로 넣어주면 됩니다. options 에서는 다양한 차트 관련 설정이 가능합니다. 예를 들어 responsive가 면 감싸고 있는 container 컴포넌트의 크기에 맞춰서 차트의 사이즈가 변화됩니다. legend에는 차트의 목록을 보여줄 위치, tooltip에서는 마우스 커서가 hover 될 때 보여줄 tooltip 관련 설정 등이 가능합니다. 파이(원형) 차트 주의 사항 원형 차트의 경우 (차트의 ) 주입되는 데이터에 수치가 과 같이 들어갈 경우 원형차트가 아예 구현안되는 현상이 있습니다. 때문에, 과 같이 데이터가 들어올 경우에 대해 분기처리하여 알림 문구 등을 구현해 주는게 좋습니다. react-wordcloud 라이브러리는 리액트 환경에서 아래와 같이 키워드 데이터를 시각화해주는데 유용합니다. 버전 기준: 1.2.7 설치법 등 명령어로 react-wordcloud 라이브러리를 설치해주시면 됩니다. 사용법 사용 방법은 아래와 같이 한 컴포넌트에 데이터를 주입하고, 다양한 옵션을 설정하면 됩니다. props에 주입되는 데이터는 와 같은 형식을 지니면 됩니다. 위에 서술된 옵션외에 과 같이 폰트 관련 옵션이나 와 같은 글자 색 관련 옵션 등 다양한 옵션을 제공합니다. 옵션 주의사항 현재 옵션 중 최소 폰트사이즈와 최대 폰트사이즈를 정하는 옵션을 설정하게 될 경우, 페이지 렌더링이 급격하게 느려지는 현상이 존재합니다. () 만약 폰트 사이즈를 동반하여 전체적인 컴포넌트 사이즈를 키우고 싶다면 과 같은 css 스타일을 통해서 전체적인 컴포넌트 사이즈를 키우는 방법이 있습니다.

        a month ago

          2024년 02월 06일

          TLS

          TLS 개요 TLS(Transport Layer Security)는 컴퓨터간 통신에서 서버와 클라이언트간의 보안된 프라이빗(private) 통신을 도와주는 암호화 프로토콜입니다. "대칭형 암호키"를 사용하여 서버와 클라이언트간의 통신을 암호화하고, 이메일, 메신저, voIP 등에 사용되지만 HTTPS로서 가장 널리 사용됩니다. 용어 SSL(Secure Sockets Layer)는 넷스케이프에서 94~96년에 네비게이터 브라우저의 HTTPS 보안 프로토콜을 추가하면서 개발된 사양입니다. 1999년부터는 IETF(국제 인터넷 표준화 기구)에서 개발된 TLS가 표준이되었고 현재는 2018년 8월에 지정된 TLS 1.3 버전이 표준입니다. HTTPS는 TLS위에서 HTTP통신을 하는 프로토콜입니다. HTTP는 80번 포트를 사용하지만, HTTPS는 443번 포트를 사용합니다. HTTP vs HTTPS 예시 는 오픈소스 패킷 분석 툴입니다. 네트워크간의 패킷을 캡쳐하여 분석할 수 있는 툴로, 이를 사용하여 HTTP와 HTTPS의 차이를 비교해보겠습니다. HTTP 테스트로 라는 사이트에 접속한 패킷을 분석하였습니다. 위 화면과 같이 중간에 HTML 페이지 응답이 암호화되지 않고 노출됩니다. 이는 단적인 예로 로그인 폼에서 아이디 비밀번호를 입력한 POST 요청의 Body 또한 중간에 통신이 탈취되었을때 암호화되어 있지 않습니다. HTTPS 반면에 HTTPS 요청의 경우, TLS 프로토콜을 거쳐 암호화 되었기 때문에 탈취된 패킷에서도 정보를 읽을 수 없습니다. 대칭형 키 알고리즘과 TLS 인증서 Node.js 대칭형 키 암호화 예제 실제 인증서와는 다르지만, 개념적으로 TLS 암호화 방식을 이해하기 쉽도록 Node.js에서 대칭형 키 알고리즘을 사용한 코드입니다 다음 커맨드를 통하여 각각 그리고 이라는 Private, Public 키를 생성합니다. 다음과 같은 자바스크립트 파일을 생성합니다. 위 코드를 로 실행하게되면 다음과 같이 로그가 콘솔에 기록됩니다: 서버와 클라이언트는 라는 키(인증서)를 공유하여 암호화하고 복호화하고, 중간에 패킷은 암호화되어 키(인증서)가 없으면 정보를 해독할 수 없게됩니다. TLS 인증서 제공방식 도메인 구매를 도와주는 업체(GoDaddy, AWS, 호스팅 KR 등)들에서 일반적으로 인증서도 함께 판매하거나 제공합니다. 또는, 와 같은 비영리 인증서 기관의 와 같은 툴로 직접 인증서를 발급하고 관리할 수 도 있습니다. TLS 인증서 특성상 만료일이 있기때문에 정기적으로 재발급을 해야합니다. 업체를 통해 유료 인증서를 제공받는 경우 대부분의 경우 자동으로 재발급을 관리해줍니다. Let's Encrypt Certbot을 사용한 경우 Linux 계열의 운영체제 같은 경우 Crontab, 윈도우 계열은 Task Scheduler 등을 사용하여 재발급하도록 권장합니다. TLS 인증서 관리 방법 AWS 인증서 관리 툴을 통하여 인증서를 발급하고 관리할 수 있습니다. ACM을 통하여 발급받은 인증서는 무료입니다. 다만, 해당 인증서를 연결시켜 사용할 AWS ALB (Application Load Balancer) 또는 AWS CloundFront 등의 비용이 사용량에 따라 청구됩니다. ( / ) 또한, ACM을 통하여 발급된 인증서는 만료일이 가까워지면 자동으로 재발급을 관리해줍니다. Let's Encrypt Certbot 웹사이트로 이동하여 웹 서버 소프트웨어명과 운영체제명을 선택하여 안내를 따라서 인증서를 발급하고 적용할 수 있습니다. 이미 발급받은 상태라면, 인증서가 발급되어 있는 서버에서 다음과 같은 커맨드로 인증서 관리가 가능합니다. 인증서 조회 아웃풋 설명 인증서 재발급 테스트 인증서 재발급 인증서 재발급 스케줄러 조회

          a month ago

            2024년 02월 01일

            GPTs, GPT Store 가이드

            GPTs, GPT Store 가이드 개요 작년 11월경 OpanAI는 유저들이 다양한 프롬프트, 스킬, 지식들을 연동하여 커스터마이징하여 사용할 수 있는 를 발표하였습니다. GPT의 챗봇은 지금 현재도 다양한 방면으로 유저들에게 사용되어오지만, 프롬프트나 지시가 없이 사용하는 GPT는 환각 현상이 발생하기 쉬우며 목적에 맞는 답변을 얻기위하여 질문을 수정하는 과정을 거쳐야합니다. LLM의 환각 현상 (Hallucination)은 제공된 소스 콘텐츠에 대해 터무니없이 불성실한 생성 콘텐츠로 정의됩니다. 환각의 예제 사용자: "Weather"라는 단어에 알파벳 "m"이 몇개 있어? AI: "Weather"라는 단어에는 한 개의 "m"이 있습니다. 사용자: 그게 맞아? AI: 죄송합니다. 맞습니다, "Weather"에는 "m"이 없습니다. 이를 해결하기 위하여 특정 목적에 적합한 GPT 모델을 커스텀으로 생성할 수 있는 GPTs는 AI에게 지시 사항, 사전 지식, 커스텀 액션 등을 부여할 수 있으며, 필요에 따라 GPTs는 웹 브라우징, DallE 이미지 생성, 코드 인터프리터 등의 기능을 사용할 수 있습니다. 나아가 24년 1월중에 오픈 예정에 GPT Store에 판매가 가능합니다. GPTs 생성 가이드 사전 요구 사항 GPT Plus 플랜이 활성화된 계정 (월 $20) 현재 베타 버전에서만 활성화된 커스텀 GPT 생성 기능을 사용하기 위해서는 유료 계정이 필요합니다. 커스텀 GPT 생성 Chat GPT 웹 페이지로 GPT Plus 플랜이 활성화된 계정으로 로그인 Explore 탭으로 이동 Create a GPT (Beta) 클릭 이제 GPT 에디터 페이지로 이동하였습니다. 해당 페이지에서는 GPT를 만드는 두가지 방법이 있습니다. GPT로 생성하기 Create 탭에서 GPT와 채팅을 통해 커스텀 GPT를 생성 할 수 있습니다. 커스텀 설정으로 생성하기 Configure 탭에서 수동으로 정보들을 입력하여 커스텀 GPT를 생성할 수 있습니다. 아래는 한국어로 번역한 Configure 탭 내용입니다. 키포인트 Picture / Photo GPT 프로필을 나타낼 수 있는 사진입니다. 직접 등록하거나 DALL-E를 사용하여 생성할 수 있습니다. Name (이름) GPT의 이름입니다. Description (설명) 어떤 일을 하는 GPT인지 간략한 설명입니다. Instructions (지시 사항) GPT가 어떤 일을 하고, 어떻게 행동하며 또 하면 안되는 일이 무엇인지 지시하는 부분입니다. (프롬프트) Conversation Starters (시작 대화) 대화를 시작할 수 있는 예문 목록입니다. Knowledge (지식) GPT가 알고 있어야하는 기반이되는 지식입니다. 파일 형식으로 업로드합니다. Capabilities (GPT의 기능) Web Browsing GPT가 웹을 브라우징하여 검색하고 정보를 찾을 수 있습니다. DALL-E Image Generation GPT가 DALL-E AI를 통해 이미지를 생성할 수 있습니다. Code Interpreter GPT가 코드 인터프리터를 사용하여 코드를 실행할 수 있습니다. 데이터 분석, 수학적 계산 등에 사용됩니다. (업로드한 지식 파일과 함께 사용될 수 있습니다.) Actions (액션) 외부 API를 호출하는 액션을 선언합니다. 예를 들어 영화 데이터베이스 API에 대한 문서를 JSON 형식으로 제공하여 GPT가 영화 정보를 불러올 수 있습니다. Additional Settings (추가 설정) Use conversation data in your GPT to improve our models OpenAI가 해당 GPT의 대화 내용을 학습에 사용하는데 동의 여부입니다. 예제 다음은 라면 전문가 GPT를 만든 예제입니다. 다음과 같은 파라미터를 지정하여 실행하였습니다. GPT Plus 계정이 있으면 다음 에서 테스트 가능합니다. Name: 라면 전문가 Description: 라면을 잘 끓이는 방법을 알려주는 GPT입니다. Instructions Conversation starters 맛있는 라면을 끓이려면 물을 얼마나 넣어야해? 매운걸 못먹는 사람들한테 끓여주기 적합한 라면 레시피 알려줘 기본 재료 외에 넣으면 맛있는 재료가 뭐가 있을까? Knowledge 사전 지식은 에 있는 정보를 PDF 파일 형식으로 업로드했습니다. Capabilities Web Browsing

            a month ago

              2024년 02월 01일

              AWS Cloudformation 그리고 IAC

              AWS Cloudformation 그리고 IAC 개요 AWS에는 다음과 같이 다양한 클라우드 리소스들이 존재합니다. EC2 - 클라우드 컴퓨팅 S3 - 클라우드 저장소 (스토리지) RDS - 클라우드 데이터베이스 Route53 - DNS 레코드 관리 ECS - 클라우드 컨테이너 서비스 (도커) CodeCommit - 코드 버전 관리 (Git) SES - 이메일 발송 서비스 이러한 AWS 인프라들을 활용하여 서비스를 만들고 배포하기 위해서는 AWS 웹 대시보드 콘솔에서 다양한 작업이 선행되어야합니다. 단순한 Node.js 서버가 설치된 EC2를 설정하는데에도 다음과 같은 단계가 필요합니다. 적절한 EC2 인스턴스 타입을 선정 EC2 부팅 드라이브에 부착할 EBS 스토리지 선정 EC2 할당할 고정 IP (Elastic IP) 지정 EC2 에 사용될 AMI (OS 이미지) 선정 EC2 부팅 후 SSH / HTTP / HTTPS 등의 연결이 가능하도록 보안 그룹 지정 EC2 구동 후 필요한 소프트웨어 설치 (Node.js, Git 등) 만약에 이러한 EC2 인스턴스가 마이크로서비스 또는 비슷한 서비스로서 재사용되고 계속해서 생성되어야한다면 반복적인 작업이 많아집니다. 이를 개선하기 위하여 이러한 인프라 구조를 코드로 관리 가능한 개념을 IAC (Infrastructure as Code)라 합니다. IAC 우리가 웹 애플리케이션의 소스 코드를 버전관리 하듯이, 인프라 또한 설정이 바뀌는 부분에 대한 버전 관리, 그리고 반복적인 재사용을 위한 세밀한 문서화가 필요합니다. 이러한 문제를 해결하기 위하여 IAC(Infrastructure As a Code) [인프라 as 코드]를 통하여 관리가 가능합니다. IAC를 지원하는 툴들은 여러가지가 있습니다. AWS Cloudformation AWS Cloud Development Kit Hashicorp Terraform Azure Resource Manager Google Cloud Deployment Manager Ansible 이 중 우리는 아마존에서 지원하는 AWS Cloudformation에 대하여 알아보겠습니다. AWS Cloudformation AWS Cloudformation은 AWS에서 생성 가능한 대부분의 리소스들에 대한 정의를 YAML 또는 JSON 형식으로 관리하고 배포할 수 있도록 도와줍니다. 이렇게 배포된 리소스들은 Cloudformation Stack이라고 불리며, 이것은 즉시 제작 또는 파기가 가능합니다. 예를 들어 아래와 같은 템플릿을 사용하게되면 AWS EC2 () 우분투 서버를 생성하고 80번 포트가 개방된 보안 그룹을 연결합니다. Cloudformation 템플릿을 작성하는 가이드는 AWS의 를 참조 할 수 있습니다.

              a month ago