오늘은 AWS의 CloudFront를 사용하다가 소액이긴 하지만과금됐던 경험이 있어 다른 사람들도 나와 같은 실수를 하지 않았으면 해서 경험을 공유하려고 한다. 📕1. 문제 발생 동기들과 여행을 위해 버스 타고 가고 있었는데,갑자기 메일로 해외결제가 발생해서 급하게 메일을 들어갔더니아마존에서 약 3천 원이 결제된 것을 확인할 수 있었다. 나는 AWS의 1년 짜리 프리티어를 사용 중이고프리티어에 해당하는 S3랑 CloudFront만 사용 중이었기 때문에 과금될 일이 없었다. 물론 프리티어의 할당량을 초과했을 수도 있지만,배포한 사이트는 아무에게도 노출되지 않았을 것이기에누군가 악의적으로 테러하지 않는 이상 할당량을 넘기지 않았을 것이라 생각했다. 깜짝 놀라서 AWS 홈페이지에 들어가 비용이 발생한 부..
오늘은 Tailwind CSS를 사용하면서 반응형 디자인을 적용했던 방법을 공유해보려 한다. 기존의 CSS에서 반응형을 구현하려면 @media와 같은 미디어 쿼리를 사용해서 코드량이 증가하게 되는데,Tailwind CSS는 자체적으로 Breakpoint prefix를 제공해서 반응형 디자인을 수월하게 구현할 수 있다. 테일윈드 CSS에서는 기본적으로 sm, md, lg, xl, 2xl와 같이 5개의 prefix를 제공하는 것을 알 수 있다.'sm'의 경우 가로너비가 640px 이상인 경우를,'lg'의 경우 1024px 이상인 경우를 의미한다.그리고 아무 접두사도 붙이지 않는 경우 전체 너비에 적용된다. 위의 코드를 예시로 들면,기본적으로 w-16을 적용하고md, 즉 가로가 768px 이상일 때는 w-..
어제 낮부터 오늘 새벽까지 문제를 해결하기 위해 삽질했던 경험을 소개해보려고 한다.같은 문제로 고생하는 사람들의 시간을 줄여주는데 도움이 되면 좋겠다. 📕 1. 문제 발견 그동안 취업 준비를 하며 틈틈이 페어로 진행했던 토이 프로젝트가 어느 정도 완성되어서 배포를 하게 됐다.Next.js를 사용해 개발을 진행했기에 넥스트에 친화적인 Vercel을 이용해 배포를 진행했는데,배포를 하고 보니 로컬에선 엄청 빠르게 렌더링 되던 이미지들이배포 환경에서는 최초로 이미지를 불러올 때 3초씩 걸리는 문제가 발생했다. 최초 1회만 불러오는 데 느리고, 그 이후부터는 캐시된 이미지를 사용하기 때문에 빠르긴 했으나로컬에서는 멀쩡하다가 배포하고 난 뒤에 이런 현상이 발생한 것에 대해 의문이 생겨 해결하고자 몇 시간을 쏟아..
📕1. 문제 발생 사이드 프로젝트를 진행하면서 랜딩 페이지를 구현할 일이 있었는데,초기에 내가 생각했던 방식은 5가지의 각 기능에 대한 설명을 Swipe 하면서 넘기는 방식이었다. 쉽게 구현하기 위해, 널리 잘 알려져있고 특화 프로젝트 때 사용해본 경험이 있는 라이브러리인Swiper.js를 사용해서 랜딩 페이지를 구현하고자 했는데 Swipe를 할 때, 컴포넌트가 겹치는 오류가 발생했다. 오늘은 이 문제에 대해 같은 경험을 겪고 있는 사람들을 위해 해결 방법을 적어보려고 한다.내가 겪은 문제는 아래와 같다. 내가 의도한 것은 위의 사진처럼1번 ~ 5번 페이지를 각각 스와이프하는 방식이었는데,1번 페이지는 잘 나타나는 것이 보이지만2번 페이지는 이렇게 1번 페이지랑 겹치고 5번 페이지까지 스와이프를 ..
얼마 전,토스 앱을 켜서 새로고침을 했더니 계좌 잔액이 2억 몇천만 원이 생기는 꿈을 꿨다. 아무래도 전 날에 복권 이야기를 하다가 자서 그런 거 같지만,다음 날 공부도 하기 싫고 데이터 분석 연습이라도 해보고 싶어서1122회 차까지 나온 복권 정보들을 이용해 복권 번호를 랜덤으로 추출하는 코드를 짜보기로 결심했다. 📕 1. 사전 준비 [ beautifulsoup4 설치 ]먼저 웹 스크래핑을 쉽게 하기 위해 beautiffulsoup4를 설치해 줬다. [ requests 설치 ] 파이썬에서 HTTP 요청과 응답을 처리하기 위해 requests 설치 [ lxml 설치 ]XML 및 HTML 문서를 파싱 하기 위해 lxml을 추가로 설치해 주었다. [ pandas 사용 ]크롤링한 데이터 분석은빅데이터분석기..
몇 주 전에 기업 입사를 위한 코딩테스트를 응시한 적이 있다.총 3문제 중 2문제는 금방 풀어서 1 문제만 풀면 되는 상황이었다. 혼자 올솔에 대한 행복회로를 돌리면서 한 문제를 계속 고민했는데,아무리 생각해도 DP인데 DP에 대한 풀이가 익숙지 못해서 결국 풀지 못했다ㅠ그래서 시험이 끝나고 최대한 비슷한 문제를 열심히 찾았고이 문제가 비슷한 것 같아서 한 번 풀어보는 김에 블로그에 정리해보려고 한다. 📕 1. 문제https://school.programmers.co.kr/learn/courses/30/lessons/118668 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.progra..
오늘은 자바스크립트를 통한 개발을 진행할 때,'개발자 도구' 창의 console을 좀 더 다양하게 활용하며 디버깅을 진행할 수 있는 방법을 소개하려고 한다. 나는 그동안 개발을 진행하며 디버깅의 99%는 에러 로그 또는 console.log에 의존했었는데,우연히 노마드 코더님의 강의를 보고 console을 활용하는 다양한 방법이 있음을 깨달아서 여러분께 공유해보려고 한다. 📕 1. console.log() 먼저, 가장 많이 사용하는 console.log를 설명하기 위해 위와 같은 코드를 적었다.그러면 화면에는 위와 같은 버튼이 만들어지게 되고,위의 '콘솔 찍기' 버튼을 누르면 1+2= 3이 콘솔 창에 찍히게 된다.위의 창을 보면 총 11번 버튼을 누른 것을 확인할 수 있다. 📕 2. console...
📕1. 트랜잭션의 정의 트랜잭션(Transaction)은 일련의 연산을 수행하는 작업 단위.이 연산들은 한 번에 모두 실행되거나 실행되지 않아야 하는 것으로, 트랜잭션을 통해서 데이터의 일관성과 안정성을 보장한다.트랜잭션은 주로 데이터를 삽입, 갱신, 삭제 할 때 사용한다. 📕 2. 트랜잭션의 특징 정보처리기사를 준비하다 보면, 트랜잭션의 특징에 대해 배우게 된다.나도 정보처리기사 취득을 준비하며, 트랜잭션에 대해 읽은 적이 있는데 그 당시엔 급하게 공부하느라ACID라며 그냥 특성들의 이름만 외워버리고, 각각의 특성이 무엇을 의미하는지 정리하지는 못했었다.그래서 이번 기회에 하나하나 다시 제대로 이해하고 넘어가야겠다.트랜잭션의 특징은 총 4개가 있으며 다음과 같다. ✔️1. Atomicity(원자성)..
