전체 글92 AWS Lambda에 TypeScript 코드로 배포하기 이전 글에서 AWS Lambda와 API Gateway를 활용하여 Serverless API 환경을 구성하는 법을 알아보았다면 이번엔 실전편이다! 이전 글에서 구현한 Lambda 함수의 핸들러(이벤트를 처리하는 함수 코드의 메서드)는 기본적으로 .js 접미사가 있는 파일을 CommonJS 모듈로 취급한다. 즉, node.js 코드로 구현해야 한다는 뜻이다. 물론 선택적으로 파일명을 .mjs 확장자로 사용하여 ES 모듈로 지정할 수는 있다. [공식문서 참고] 그러나 이번 글에서는 Typescript를 이용해 Lambda 함수를 생성하고 배포하는 과정을 기록해보려 한다. > Lambda에 Typescript 코드 배포하는 방법들 - npx tsc 명령어로 트랜스파일하여 직접 zip 업로드 - AWS SAM .. 2024. 3. 1. AWS Lambda + API Gateway로 Serverless API 환경 구성하기 > AWS Lambda란? 서버리스(serverless) 아키텍쳐. Lambda는 주로 서버리스(serverless)라는 용어와 함께 사용된다. 서버리스란 '서버가 없음'을 의미하지만 사실 서버가 아예 없는것은 아니고 서버의 관리 주체가 aws로 넘어감을 의미한다. 람다는 백엔드를 작은 함수 단위로 쪼개어 aws 내부의 서버에 업로드 하는 방식이다. 그러면 aws는 해당 함수를 내부 서버에 업로드 하고 요청 발생시 요청에 맞는 람다함수를 실행시켜준다. 따라서 람다를 이용하면 별도의 서버 구성 없이 클라이언트의 요청에 따라 원하는 함수를 실행시킬 수 있다. 그리고 람다는 요청 수 기반으로 비용이 측정되기 때문에 24시간 켜놓아야 하는 EC2같은 서비스 대비 저렴하게 이용할 수 있다. > API Gatewa.. 2024. 3. 1. dependencies, devDependencies 차이점 (@types/) Javascript 내에서 라이브러리의 의존성 관리를 위한 종류는 3가지로 나뉜다. > dependencies 현재 프로젝트를 실행하는데(런타임시) 필수적인 라이브러리들을 포함. 이는 컴파일을 수행하고 런타임 단계에서 수행되는 라이브러리들이 이에 해당된다. 프로젝트를 npm에 공개하여 다른 사용자가 해당 프로젝트를 설치하면 dependencies에 들어 있는 라이브러리도 함께 설치된다. (전이 의존성) yarn add react > devDependencies 현재 프로젝트를 개발하고 테스트를 하는데 사용되지만, 런타임에는 필요 없는 라이브러리들을 포함. 이는 런타임 단계에서는 수행되지 않고 이전 컴파일 단계에서까지만 수행되는 라이브러리가 해당 됩니다. ex) 컴파일 단계에서 사용하는 타입스크립트와 관련.. 2023. 11. 28. 객체끼리 값 비교하기 object(객체)는 참조형이기 때문에 key, value 값 및 순서가 같은 object를 일치 연산자(===)로 비교할 수 없다. 즉, 참조형을 원시형으로 바꾸어서 비교해주어야 한다! 1. key 순서가 정해진 객체 비교 const one = { name: "wooyoung", age: 34, } const two = { name: "wooyoung", age: 34, } // 1. Using JSON JSON.stringify(one) === JSON.stringify(two); // true console.log(JSON.stringify(one)); // '{"name":"wooyoung","age":34}' // 2. Using Object.entries Object.entries(one).t.. 2023. 11. 13. react PDF 다운로드 > @react-pdf/renderer React 진영에서 PDF를 편하게 만들어주는 라이브러리라는 점이 장점이다. 최근 업데이트도 활발히 진행되고 있는 라이브러리이지만, 미리보기 구현이 아쉬웠다. 다운로드 이전에 미리보기 화면이 해당 내용을 순수하게 보여주는게 아니라, 라이브러리에서 특정 view를 고정시켜 두었기 때문에 production으로 사용하기에 고민되었다. 순수 다운로드 기능으로만 사용하기에는 아주 적합한 라이브러리 🤔 > html2canvas+ jspdf 현재 보이는 화면에 대한 스크린샷을 찍어서 이를 pdf로 변환해주는 방식이다. How to generate PDF from HTML in React / Node.js app How to generate PDF from HTML in Rea.. 2023. 10. 11. React 모달 밖 영역 클릭시 닫기 (2가지 방법) > useState 사용 모달 바깥 부분(OutModal)에 투명한 배경을 뷰포트 크기로 깔고 이곳을 클릭했을때 모달을 닫아준다. 여기서 중요한점은 모달(DetailModal)과 모달 바깥 부분(OutModal)은 "형제"여야 하고, 모달의 z-index가 모달 바깥 부분보다 더 높아야한다. 즉 모달과 모달 바깥 부분은 다른 층에 존재하는 것이다. (이벤트 버블링을 막기 위해서!) // 모달을 사용하는 컴포넌트 function Container() { const [modal, setModal] = useState(false); const openModalPopup = () => { setModal(true); document.body.style.overflow = "hidden"; }; const clo.. 2023. 10. 10. [iOS] Apple Distribution Certificate 업데이트하기 애플의 실제 하드웨어(아이폰, 아이패드)에서 우리가 만든 소프트웨어를 동작하기 위해 인증서가 필요하다. - Apple Development 개발을 위한 인증서, 해당 인증서를 발급받아 Xcode 에 등록하면 실제 기기에 앱을 동작시킬 수 있다. - Apple Distribution 앱 스토어에 등록을 위한 인증서, 해당 인증서를 발급받아 Xcode 에 등록 후 배포 과정을 거쳐야 앱 스토어에 앱을 등록할 수 있다. > Certificate 업데이트하기 1. Apple Developer(developer.apple.com/)에 접속하여 로그인 2. Certificates, Identifiers & Profiles에 접속하여 만료될 Certificates는 revoke로 제거한다. 3. Xcode 접속 > .. 2023. 10. 5. 안드로이드 http 프로토콜 접속 허용하기 안드로이드 스튜디오에서 웹뷰로 http 접속을 허용하려면 코드를 추가해야한다. 특히 개발서버에서 앱테스트를 진행하고자 한다면, 해당 설정 여부를 먼저 확인해주자 > 해결 AndroidManifest.xml 파일에 android:usesCleartextTraffic="true" 추가 웹뷰를 실행하려면 사실 맨 위에 있는 코드가 더 먼저 존재해야 한다. 웹뷰 자체를 열어주는 설정 코드! 2023. 10. 5. [Xcode] http 프로토콜 접속 허용하기 iOS 9이상 버전부터 HTTP 접근을 허용하지 않는다. 따라서 리소스가 https 가 아니라면 불러오지 못한다. 특히 개발서버에서 앱테스트를 진행하고자 한다면, 해당 설정 여부를 먼저 확인해주자! > 해결 info.plist에 해당 코드를 직접 추가하거나 NSAppTransportSecurity NSAllowsArbitraryLoads App Transport Security Settings > Allow Arbitrary Loads를 추가. App Transport Security Settings이 없다면 마우스 우클릭하여 Add Row로 추가해주면 된다! [참고 URL] https://gent.tistory.com/130 https://daheenallwhite.github.io/ios/xcode/.. 2023. 10. 5. 이전 1 2 3 4 ··· 11 다음
