프로그래밍 회고록 (42) 썸네일형 리스트형 AWS S3와 CloudFront CDN 사용해 Flutter 웹앱 배포하기 목차AWS S3 버킷 생성하기CloudFront Distribution 설정하기S3 버킷 policy 수정CloudFront 에러페이지 설정플러터 웹앱 배포Health Check사전 요건AWS CLIAWS ( S3, CloudFront ) 권한이 있는 IAM 계정서론Flutter는 강력한 크로스 플랫폼 모바일 애플리케이션 개발 도구로, 개발자들이 iOS, Android 및 웹 플랫폼에서 동일한 코드베이스를 사용하여 애플리케이션을 빌드할 수 있도록 합니다. 특히 최근에는 Flutter 웹이 공식적으로 지원되면서, Flutter는 웹 애플리케이션 개발에도 강력한 도구로 자리매김하고 있습니다.그러나 애플리케이션을 개발하는 것은 그 자체로만 충분하지 않습니다. 애플리케이션을 성공적으로 배포하고 사용자에게 제공하.. Spring에 Swagger 도입하기 목차 서론 본론 spring 프로젝트 생성 library 사이트 문서 확인 library 설치 화면 확인 간단한 사용 첨언 소스코드 서론 Swagger는 RESTful API를 설계, 문서화 및 시각화하는 도구이다. 주로 개발자와 API 사용자 간의 소통을 촉진하고 API의 이해도를 높이는 데 사용된다. 이를 통해 API의 사용 방법, 엔드포인트, 요청 및 응답 형식 등을 명확하게 문서화하여 개발 및 통합 과정을 단순화할 수 있다. 그래서 문서화 하기 편한 swagger를 도입하기 위해 spring에 springdoc라고하는 라이브러리를 사용하여 swagger를 도입하는 과정을 설명하고 기록하고자한다. 본론 spring 프로젝트 생성 https://start.spring.io/ 를 방문해 기본 스프링 .. 어떻게 좋은 API를 디자인 할 것인가? 우리는 웹서비스와 API(Application Programming Interface)를 어디서든 찾을수 있습니다, 그러나 대부분은 사용하기 고통스럽습니다. API를 사용하여 웹 서비스에 연결한 후 "저 사람들은 도대체 무슨생각을 하고 있는 걸까?" 라는 의문이 든 적이 있으 신가요? 저희도 그런 경험을 가지고 있으며 API로 서비스를 연결하는 것은 매우 혼란스러울 수 있습니다. 잘못된 디자인, 누락된 문서, 지속적인 변경, 버그 등으로 인해 API를 사용하는 것은 종종 어려움을 겪습니다. 하지만 꼭 그럴 필요는 없습니다. 우리는 매혹적인 웹 API를 만들 수 있으며, 그리고 즐겁게 만들 수 있습니다. 그렇다면 좋은 API를 만들기 위한 핵심은 무엇일까요? 준비하시고, 이해해봅시다 어떻게 사람들이 즐겨 .. Nuxt.js & Vue.js 에서 비동기 활용 EventBus Emit후 CallBack 받기 개요 흐름 구현 실행 개요 Vue.js 에서는 Vuex와 같은 상태관리 라이브러리를 활용하지 않는다면, 컴포넌트 계층간 데이터를 주고받는 대표적인 방법은 부모 컴포넌트와 자식 컴포넌트 간의 Props와 Emit 으로의 데이터 통신이다. 부모, 자식간에만 데이터 교환이 아닌 서로 관계가 독립적이거나 형제관계인 컴포넌트간 데이터를 주고받는 방법은 2.0에서는 $emit과 $on을 활용해서 데이터 교환을 하는 EventBus가 존재한다. 데이터를 보낼 발신자 컴포넌트 측에서 $emit을 활용해 보낼 event명과 데이터를 보낸다. 데이터를 받을 수신자 컴포넌트 측에서 $on을 활용해 받은 데이터를 어떻게 처리할지 작성한다. 다음과 같은 순서로 EventBus는 동작한다. 그런데, 수신자 컴포넌트에서 비동기적으.. Spring Mvc프로젝트의 이해 목차 Http Servlet 템플릿엔진 MVC패턴 SpringWebMvc 1. HTTP HTTP 프로토콜은 모든 것을 웹을 통해서 통신하고 있는 21세기 지금 없어서는 안되는 중요한 규약이다. HTTP프로토콜의 중요성을 생각할 때 그 이미지를 상상해보자면 굉장히 복잡한 무엇이 떠오르기 마련이지만 실제 프로토콜의 메시지 구조를 확인해보면 프로토콜 상태코드, 메타정보를 가지고 있는 헤더, 실제 보내거나 받을 정보인 바디라는 세가지 문자열 조합의 나열이다. 문자열의 조합이 HTTP프로토콜이라는 점을 생각해볼 때 통신을 하기위해서 개발자가 직접 HTTP문자열을 만드는 문자열의 나열을 작성하거나, 혹은 HTTP프로토콜을 만들어주는 함수를 직접 만들어 사용하는 방법을 생각할 수 있다. 그런데 모든 것을 직접 만들어.. Picture-in-Picture API 활용해 Youtube같은 멋진 pip모드 제공하기 Picture-in-Picture 란? 주로 동영상 재생 서비스를 제공하는 플랫폼 웹사이트를 들어가면 다음과 같은pip모드를 제공하는 것을 본 적있을것이다 pip모드란 "웹사이트가 윈도우 응용프로그램 처럼 브라우저에서 독립적으로 GUI화면 위에 표현된 화면을 제공하는 기능" 을 말하는데 그렇게 함으로써 사용자는 미디어를 소비하면서 웹사이트의 다른 사이트나 아니면 다른 응용프로그램과 상호작용하여 활동할 수 있게 되는 편리한 기능이다. WebAPI중 하나인 Picture-in-Picture API 다음 사진은 Mozilla Developer 사이트에서 볼 수 있는 Javascript에 구현되어 있는 WebApi들에 대한 사진이다. Pip모드 역시 WebApi중 하나이고 따라서 고맙게도 개발자가 실제로 PIP.. SpringBoot 2.4.1 이후 문법 변화에 따른 환경분리를 위한 설정파일 작성법 환경분리 프로젝트를 진행하다 보면 로컬환경과 개발환경 그리고 운영환경의 설정을 서로 다르게 가져가야할 경우가 존재한다. 그런경우 .properties파일이나 .yml파일에서 서로 다른 설정에 따른 파일을 만들어 가져가는것이 일반적으로 Spring에서 활용하는 환경분리 방법이다. 기존의 방법 SpringBoot 2.4이전에는 spring.profiles 옵션을 활용해서 application-local.yml spring: profiles:local ... application-develop.yml spring: profiles:develop ... profiles의 변수명이 다름을 주목하자. 다음과 같이 서로다른 파일을 가져가서 실행시에 실행변수에 어떤 환경인지 넘겨주며 실행했었다. 그러나 SpringBo.. Hash란 무엇인가? 1.용어 Hash, HashFunction, Hashing 해시는 데이터를 효과적으로 저장할 수 있는 방법인 자료구조와 밀접하게 맡닿아 있는 명사이다. 그러므로 Hash라는 값을 이해하고자 위와 같은 몇가지 용어에 대한 이해가 선행해야 한다. 바로 Hash, HashFunction, Hashing이다. 여기 Happy란 단어가 존재한다. 이 단어는 5글자 이기 때문에 05란 값에 대응하게 변환시키는 경우를 생각해보자. 위의 예시에서 Hash는 변환한 05라는 숫자를 말하며 HashFunction은 Happy라는 인풋에서 05라는 아웃풋을 얻게 만들어낸 알고리즘을 활용한 함수를 말하며 이런 일련의 과정이 Hashing이다. 좀더 구체적으로 보자 Hash란 방금 예시에서 임의의 길이의 데이터를 고정된 길이의.. 이전 1 2 3 4 ··· 6 다음
