Best
실전AWS-프로젝트
[2] AWS Lambda로 크롤링해서 매일 아침 이메일로 받아보기
안녕하세요! 이까이꺼입니다. 2번째 프로젝트 시작합니다. Lambda를 이용해서, 웹사이트를 실시간 크롤링해서 매일 아침에 이메일로 받아보는 프로젝트입니다. 아래가 대충 잡아본 순서이고, 글이 늘거나 줄어들 수는 있겠습니다. 이제 시작합니다. 1. AWS Lambda 맛보기 2022.12.02 - [분류 전체보기] - AWS Lambda 맛보기 (IAM 계정.정책.역할) AWS Lambda 맛보기 (IAM 계정.정책.역할) 0. 먼얘기랴~! 이 글에는 aws Lambda가 무엇인지 이번시간에는 그냥 맛만 살짝 볼게요. 기본 Lambda만 만들어 보겠습니다. 1. Lambda가 머래유? aws 기본 가이드 : https://docs.aws.amazon.com/ko_kr/lambda/latest/dg/wel..
더보기게시물이 존재할 경우 아래에 최신순 4건이 배열됩니다
- [css]Flexbox 마스터하기: 4. Flexbox를 활용한 반응형 사진 갤러리 예제 안녕하세요! 이번에는 Flexbox를 활용하여 반응형 사진 갤러리를 구현하는 예제에 대해 알아보겠습니다. 이 예제는 다양한 디바이스와 화면 크기에 자동으로 조정되는 유연한 레이아웃을 구현하는 방법을 보여줄 것입니다. HTML 삽입 미리보기할 수 없는 소스 [ 예제 설명 ] 위의 예제에서는 .gallery를 Flex 컨테이너로 설정하고, img 태그를 Flex 아이템으로 배치합니다. 사진 갤러리는 가로로 유연하게 표시되며, 화면의 크기에 따라 자동으로 조정됩니다. 각 이미지는 src 속성을 통해 실제 이미지 파일을 로드하고, alt 속성을 통해 대체 텍스트를 제공합니다. .image 클래스를 적용하여 스타일을 설정하며, flex: 0 0 300px;를 사용하여 이미지의 고정된 너비를 지정합니다. objec.. 더보기
- [css]Flexbox 마스터하기: 3.Flex 컨테이너 설정 Flex 아이템은 Flex 컨테이너 내에서 배치되는 개별 요소입니다. 이번에는 Flex 아이템에 대한 설정에 대해 알아보겠습니다. Flex 아이템을 조정하면 유연한 레이아웃을 구성할 수 있습니다. [ Flex 아이템 순서 변경 (order) ] Flex 아이템의 순서를 변경하기 위해 order 속성을 사용할 수 있습니다. order 값은 숫자로 지정하며, 숫자가 작을수록 앞에 위치하게 됩니다. HTML 삽입 미리보기할 수 없는 소스 [ Flex 아이템의 크기 조절 (flex-grow, flex-shrink, flex-basis) ] Flex 아이템의 크기를 조절하기 위해 flex-grow, flex-shrink, flex-basis 속성을 사용할 수 있습니다. 이들은 각각 Flex 아이템의 증가 비율, .. 더보기
-
[css]Flexbox 마스터하기: 2.Flex 컨테이너 설정
Flexbox를 사용하기 위해서는 우선 컨테이너에 대한 설정이 필요합니다. Flex 컨테이너는 내부의 요소들을 포함하고 있으며, 그들을 유연하게 배치하기 위한 기준을 제공합니다. Flex 컨테이너를 설정하기 위해 다음과 같은 CSS 속성을 사용할 수 있습니다 [ display ] Flex 컨테이너를 생성하기 위해 display 속성을 사용합니다. Flex 컨테이너를 생성하기 위해서는 display 속성에 flex 값을 지정해야 합니다. 예를 들어: .container { display: flex; } 위 코드는 .container 클래스를 가진 요소를 Flex 컨테이너로 설정합니다. [ flex-direction ] flex-direction 속성은 Flex 컨테이너 안에서 아이템들이 배치되는 방향을 설..
더보기
-
[css]Flexbox 마스터하기: 1.소개
소개 Flex 컨테이너 설정 Flex 아이템 속성 Flexbox를 활용한 실전 예제 1. 소개 Flexbox는 웹 디자인에서 강력하고 유연한 레이아웃을 구성하는 데에 사용되는 CSS 기술입니다. 이러한 Flexbox를 이해하고 활용하는 것은 현대적이고 반응형인 웹 디자인을 구축하는 데 있어서 핵심적인 역할을 합니다. 이 블로그 컨텐츠에서는 Flexbox에 대해 상세히 알아보고, 실전 예제와 활용법을 함께 살펴보겠습니다. [ Flexbox란 무엇인가? ] Flexbox는 Flexible Box의 줄임말로, 요소들을 유연하게 배치하기 위한 레이아웃 모델입니다. Flexbox를 사용하면 요소들을 가로 또는 세로 축을 기준으로 유연하게 배치할 수 있으며, 강력한 정렬과 공간 배분 기능을 제공합니다. [ Flex..
더보기
-
[html5] input type date 와 input type time
25년을 넘게 개발해오고 있는 나지만, 얼마전에 이걸 쓰기 시작했으니, 참. 공부를 했다가도 까먹고 있다가 불연듯 생각나는 경우가 있다. 예전에는 date와 datetime을 입력받기 위해서 열심히 스크립트도 만들고 레이어를 올리거나 하는 방식으로 했었는데... 세상 편한 이걸 두고 참. 간단히 사용법 살펴보자 1. input type="time" 거두 절미하고 codepen에 한 번 써보자 See the Pen html5 input type date and input type datetime by 기꾸 (@kigqzaer-the-lessful) on CodePen. [ 브라우져별 표시 모양 ] 브라우져마다 표시모양이 제각각 [ 값 = YYYY-MM-DD ] 값은 위 모양대로 통일된다. 또는 빈값. [ ..
더보기
-
ngrok으로 로컬 개발 환경(localhost) https 로 개발테스트 하기
웹개발시에 localhost로 개발중 구글서비스(geolocation, geocoding, 주소검색서비스) 또는 facebook api 등 외부 api 서비스를 연동하거나 oauth token 발급용이라던지, https url이 필요할 때가 많다. 이때 letsencrypt 나 직접 인증서 파일을 만들어서 개발하는 방법도 있겠으나, ngrok를 활용해서 https를 간단하게 만들어서 개발하는 방법을 소개해본다. 1. ngrok 가입 https://ngrok.com/ ngrok - Online in One Line Zero Trust Add SSO, Mutual TLS, IP Policy, and webhook signature verification. ngrok.com [ ngrok 첫화면 ] 위 예시에..
더보기
-
초간단 HTML 웹 서버 구축 - Live Server vscode
로컬 호스트로 간단한 정적웹사이트나 테스트 개발 사이트가 필요할때, vs extension중 live server 를 소개하고 간단한 기본사용법을 알아본다. 1. Live Server 설치 vscode로 개발할 때 간단하게 로컬 웹서비스를 만들어서 테스트할 경우가 빈번히 발행하는데, 발생할 때마다 매번 nginx에 올리거나 로컬 웹서버를 구동시켜서 올리는 불편한 경우가 있다. Live Server는 이를 대신해 간단하게 로컬웹서비스를 만들어서 테스트 해볼수 있도록 웹서버를 만들어준다. [ vsode extension 설치 ] vscode 왼쪽 확장 extension 아이콘 클릭 liveserver를 입력해서 검색 Liver Server 선택 우측 설치 선택(이미 저는 설치가 되어있어서 사용안함으로 표시되..
더보기
-
HTTP와 HTTPS의 개념
웹의 시작. http와 https 의 개념을 알고, https가 왜 대두가 되었는지 그리고, 웹 개발시에 https를 왜 써야하는지 간략히 정리해본다. 1. http HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답 웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환. HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술 2. http 동작 HTTP는 OSI(Open Systems Interconnection) 네트워크 통신 모델의 애플리케이션 계층 프로토콜. HTTP는 여러 유형의 요청과 응답을 ..
더보기
-
착한가격 쿠팡 가격변동 알림 봇 이제 웹으로 더욱 간편하게
안녕하세요. 쿠팡에서 노트북을 사려고 가격을 지켜보던중... 비싼 제품이니까 좀 더 싸게 살수 있는 방법이 없을까하다가... 검색중 텔레그램으로 가격이 하락했을때 알려주는 봇이 있더군요. 근데 내가 등록한 제품 목록을 시진과 함께 한 눈에 보기가 많이 불편하더라구요. 구래서 이거 내가 직접 개발해야겄다. 생각하고 직접개발하고 오픈하게 되었습니다. 기존 텔레그램과 차별화한점은 바로 제품사진과 같이 관리가 된다는것과 브라우져에서도 url등로과 제품관리가 가능 하다는 점. 한마디로 웹으로 보고 할수있으니 시원시원 하죠. 다만 최초 진입은 텔레그래을 통해서 하세야합니다. 이유는 간단하죠. 일림을 받아야 하니까요. 한번 써보시고 기존 봇들과는 확실히 편하구나 하실것 같습니다. 불편하시면 바로바로 개선하겠습니다. ..
더보기
-
쿠팡파트너스를 시작한다
홀~~~ https://link.coupang.com/a/Zmdb9 레노버 2022 아이디어패드 노트북 COUPANG www.coupang.com https://link.coupang.com/a/ZmyJS 베이직스 2022 베이직북 14 3세대 COUPANG www.coupang.com https://link.coupang.com/a/ZmzlM 아이뮤즈 스톰북 노트북 N4020 35.81cm COUPANG www.coupang.com https://link.coupang.com/a/Zmzwr COUPANG 쿠팡은 로켓배송 www.coupang.com "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." https://link.coupang.com/a/ZmxJA COU..
더보기
-
AWS Eventbridge를 이용하여 Lambda 특정시간에 실행하기
0. 먼얘기랴~! 이 글에는 Amazon EventBridge가 무엇인지 간단히 살펴보고, 기존에 만들어 놓은 Lambda를 특정시간 실행시켜 보겠습니다. 1. Amazon EventBridge가 머래유? https://docs.aws.amazon.com/ko_kr/eventbridge/index.html Amazon EventBridge는 다양한 소스의 데이터와 애플리케이션을 쉽게 연결할 수 있는 서버리스 이벤트 버스 서비스입니다. EventBridge 는 자체 애플리케이션, SaaS(Software-as-a-Service) 애플리케이션 및 AWS 서비스의 실시간 데이터 스트림을 제공한 다음, 해당 데이터를 AWS Lambda 등의 대상으로 라우팅합니다. 데이터를 전송할 대상을 결정하는 라우팅 규칙을 ..
더보기
-
개발한 application을 aws lambda에 aws cli로 배포해 보기
0. 먼얘기랴~! 이 글에는 지난 시간에 만들어 본 크롤링정보를 이메일로 발송하는 소스를 aws cli를 통해서 lambda에 배포해보도록 하겠습니다. 1. Lambda 기본 정보 수정하기 지난 시간에 app.py를 통해서 크롤링 모듈과 이메일 발송모듈을 합쳐서 python app을 만들었는데요. app.py를 보면 handler라는 함수를 메인으로 하여 만들었습니다. Lambda도 시작 모듈을 설정해야하는데요. app.py안에 handler라는 함수가 메인 실행함수라면. 이부분 설정을 해줘야만 실행이 됩니다. myLambdaTest라는 람다함수를 지난번에 만들었습니다. 2022.12.02 - [실전AWS-응용편/Lambda] - AWS Lambda 맛보기 (IAM 계정.정책.역할) AWS Lambda ..
더보기
