본문 바로가기

전체 글

 (12)
AWS Amplify 슬랙 연동하기 이번에 FE 배포환경을 젠킨스에서 amplify 로 바꾸면서 배포가 성공/실패 할때마다 슬랙 채널에 알림이 오면 좋겠다라고 생각했다. 방법 1. 이메일로 알림 받기1. 채널 > 채널 세부정보 > [통합] 탭 > [이 채널에 이메일 보내기] > 이메일 주소 복사 2. 해당 amplify 앱 > 호스팅 > 빌드 알림 이메일 칸에 1번에서 복사한 채널 이메일 주소를 입력하고, 원하는 브랜치도 선택할 수 있음다하면 저장 ! 3. 배포가 성공하면 슬랙 채널방에 이메일이 온다 내가 슬랙 incoming webhook 을 찾아본 이유 ... 너무 못생김 !!가독성도 없고 무엇보다 succeed 인지 failed 인지 한눈에 파악이 안되는게 너무 불편했다. 예전에 젠킨스로 배포할때 젠킨스 봇 처럼 슬랙 incoming..
Next.js Standalone 으로 빌드하기 1. Standalone 이란?- Next.js에서 웹 어플리케이션을 실행하는데 필요한 최소한의 코드만 추출하겠다는 의미로 사용- 배포에 필요한 파일만 복사하는 폴더를 자동으로 생성할 수 있으며, 선택한 파일이 포함됨// next.config.jsmodule.exports = { output: 'standalone',}; 사실 별거 없다. 그냥 next.config.js 파일에 이렇게 output으로 standalone 만 추가하면 끝이다. 그러나 빌드 후 .next/standalone 이 생기지 않았다..  2. 문제 해결빌드 캐쉬도 제거해보고, .node_modules 제거 후 다시 인스톨해보고,.next 도 제거후 다시 빌드해봐도 .. 생기지 않았다.빌드 로그를 살펴봐도 standalone 에 대..
스토리북 사용기 Storybook 이란?- ui 컴포넌트의 독립적인 개발을 할 수 있도록 하는 오픈 소스 도구- logic과 data로부터 ui component 를 독립적으로 분리하여 만들수 있도록 함리액트에 Storybook 적용해보기1. 스토리북 설치$ npx -p @storybook/cli sb init 설치하면 두개의 폴더가 생성된다..stories예시 컴포넌트들이 들어있음.storybookmain.ts와 preview.ts 가 들어있음main.ts에는 stories를 위한 다양한 설정파일이 들어있음. addons 를 통해 여러가지 확장 프로그램을 추가하고 다양한 기능들을 사용할 수 있음.preview.ts는 모든 story에 global 하게 적용되는 포맷을 설정하는 곳// main.tsimport type ..
http와 https 1. http, https 차이HTTP (Hypertext Transfer Protocol)클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜사용자가 웹 사이트를 방문하면 사용자의 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답즉, HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술HTTPS (Hypertext Transfer Protocol Secure)HTTP의 확장 버전 또는 더 안전한 버전브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정2. http 프로토콜 작동법HTTP는 여러 유형의 요청과 응답을 정의함. 그리고 서버는 숫자 코드 및 데이터 양식으로 다양한 유형의 HTTP 응답을 전송함.200 - OK400 - Bad ..
AWS amplify 배포해보기 AWS amplify기본 제공 CI/CD 워크플로우를 통해 정적 웹 애플리케이션의 글로벌 배포 및 호스팅을 지원하는 완전관리형 서비스amplify 콘솔에서 git repository 를 연결하기만 하면 코드를 커밋할때마다 변경 사항이 단일 워크플로우로 배포됨AWS에 풀스택 애플리케이션을 쉽고 빠르게 구축할 수 있도록 지원하는 특별히 제작된 도구와 서비스 집합 장점AWS 서비스 연결이 쉽다코드 수정 및 배포 프로세스 간소화풀스택 CI/CD 배포 파이프라인을 제공하여 코드 한줄로 배포까지 가능프레임워크가 무료AWS amplify 프레임워크 자체는 무료이고, 연결해서 사용한 AWS 서비스에 대한 비용만 지불하기 때문에 비용 부담이 적음 배포 과정1. aws amplify 접속 > 새 앱 생성 > GitHub ..
[FE] 모노레포 인터페이스 에러 해결 과정 모노레포로 작업을 하는 중, ⨯ ../../packages/ui/src/button.tsxModule parse failed: The keyword 'interface' is reserved (6:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders| import { ReactNode } from 'react';|> interface ButtonProps {| children: ReactNode;| className: string; 이런 에러가 발생하였다. 기..
[FE] 웹뷰(WebView) 란? 🤓 시작하며 웹과 앱을 동시에 개발하는 회사에서 처음으로 웹뷰를 써보았다. 분명 앱 개발자가 따로 있는데 왜 웹뷰를 쓰지? 라는 의문이 들었다. 게다가 처음 개발하는 웹뷰다 보니, 테스트 환경이라던지 디버그 과정이 모호해서 굉장히 애를 먹었던 기억이 있다. 특히 앱 토큰을 연결하는 과정, 새 페이지를 띄우는 과정에서 에러 확인을 직관적으로 하지 못했기 때문에 개발 시간이 더뎌졌고 10시까지 야근을 했던.. ^^ 슬픈 추억이 있다. 그래서 오늘은 그토록 애먹었던 웹뷰에 대해서 정리를 해보려고 한다.우선, 웹뷰(WebView)란 무엇인가?웹뷰는 네이티브 앱 내에서 웹 콘텐츠를 표시하기 위한 컴포넌트이다. 그 컴포넌트의 기능은 앱 내에서, 앱을 벗어나지 않고도 웹 브라우저를 띄울 수 있다. 즉, 웹뷰란 네이..
보스턴 고사리 살리기 최근 형광빛의 예쁜 친구를 데려왔다. 이름은 보스턴 고사리 일반적인 보스턴 고사리와는 다르게 형광연두 빛을 띄고, 풍성한 잎과 화려한 분위기가 특징이다. 예쁘게 잘 키우려고 했는데 .. 언제부턴가 잎 가장자리가 저렇게 마르더니 점점 갈색으로 변하기 시작한다 .. 잎이 갈변되는 데에는 여러가지 이유가 있는데 대표적으로는 1. 과습 2. 낮은 습도 3. 햇빛 부족 이렇게 세가지가 있다. 양치식물은 대부분 음지~반음지에서 키워도 되니 햇빛 부족은 아니겠고 .. (게다가 햇빛이 아예 안드는 자리도 아니다) 물은 일주일에 한번씩 수분계로 체크해서 주니 과습도 아니겠고 .. 설마 낮은 습도 때문인가 ?! 하지만 공중 분무는 매일 해주고 있는데 .. 찾아보니 고사리류는 수분을 굉장히 좋아하기 때문에 과습만 유의하면 ..

티스토리툴바