AWS프리티어 계정 비용 이슈 대처방법 AWS 처음 사용해보시는 분들이라면 비용이 생각보다 높게 나오고,,, AWS 해지를 까먹어서 비용이 청구되고 그런 경험이 있죠? 저도 그랬습니다.. 그래서 이번에는 AWS 어마무시한 비용청구를 사전에 방지법을 알아보도록 하겠습니다. 종류 1.프리티어 사용량 알림 설정 2.결제 알림 설정 3.트스트 전 비용 검토 4.테스트 후 리소스 정리 5.프리티어 계정이 만료된 경우 대처법 프리티어 사용량 알림 설정 AWS에서 제공하는 프리티어 사용량을 모두 소진한 경우 경고 이메일을 전송하는 방법입니다. 1.로그인 후 우측에서 계정 tab으로 이동하기. 2.다음과 같이 결제 기본 설정에서 이메일을 입력해주세요. AWS 결제 알림 설정 방법 - 결제할 App을 Cloud Watc..
devops가 뭘까 ? 필요한 이유 ? - 소프트웨어 개발은 아래와 같은 라이프사이클, 생애주기를 갖고 있습니다. 데브옵스는 개발과 운영을 통합하여 제품 출시 및 조직의 효율성을 끄렁올리기 위한 문화입니다. 2009년에 시작된 기업의 소프트웨어 개발 방법을 개선하기 위한 움직임입니다. 데브옵스는 조직, 고객, 회사 모두에 이점을 가져다 줄 수 있습니다. 큰 규모의 조직에서는 아래와 같은 역할로 나누어집니다. 과연 데브옵스라는 건 어떻게 하는 것인가? 데브옵스는 개발과 운영의 벽을 허물어 더 빨리 자주 배포하자는 게 목적입니다. AWS가 제안한 데브옵스 실천방법 - 지속적 통합(Continuous Integration) : 개발자가 만든 변경 사항에 대해서 빌드 및 테스트를 진행해본 후 중앙 코드로 통합...
아토믹(atomic)디자인 패턴 대형 프로젝트에서 재사용할 수 있는 컴포넌트들은 필수입니다. 이번에는 여라가지 패턴 중 하나인 아토믹(Atomic)디자인 패턴을 알아보겠습니다. 소개 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념입니다. 아토믹 디자인 패턴은 Aoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿)으로 구성되어지고 최종적으로는 Pages 단위가 됩니다. 즉, 일관된 UI를 만들고 유지보수성을 향상시켜줍니다. 구성요소 Atoms - 원자는 버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트이다. - 모든 컴포넌트들의 기초가 되는 블록이며, 더 이상 분해 될 수 없는 필수 요소이다. Molecules - 분자는 2개..
이번에는 reselect 라이브러리를 사용하여 코드단을 최적화 해볼 예정입니다 ! 우선 reselect는 리덕스에서 만든 라이브러리입니다. state안에 있는 내용들을 가공하는 경우에 useSelector 안에서 처리할 수 있게 도와줍니다. 리렌더링을 방지해주는 역할이죠. reselect를 사용하지 않을 경우, useSelector에서 가공하곤 하였는데 문제점은 여기서 useSelector안에서 가공하는 경우에는 리렌더링을 방지할 수 없다는 것입니다. 먼저 라이브러리를 설치해줍니다. npm i reselect 여기서 저희는 createSelect 를 이용하여 최적화를 진행할 예정입니다. 라이브러리 링크는 아래와 같습니다. https://github.com/reduxjs/reselect GitHub - r..
| Layout shift란? UI/UX 경험을 해치고 이미지 로딩이 느리게되어 화면 레이아웃이 갑자기 변경(밀리는)되는 현상을 말합니다. Lighthouse에서도 확인이 가능합니다. 그래서 왜 이런일이 일어는거지? 1.사이즈가 정해져 있지 않은 이미지 2.사이즈가 정해져 있지 않은 광고 3.동적으로 삽입된 콘텐츠 4.Web font(FOIT, FOUT) 그럼 어떻게 해결하지? -당연히 이미지에 사이즈를 설정해주면 됩니다. -폰트 문제는 미리 setting을 해주시면 됩니다. 예시를 들어보겠습니다. 아래와 같은 코드가 존재할 때 function PhotoItem({ photo: { urls, alt } }) { const dispatch = useDispatch(); const openModal = ()..
보통 초보 개발자들은 성능 최적화를 고려하지 않고 무작정 코딩을한다.(나 같은 사람) 이런 불상사를 막기위해 성능 최적화를 알아보자 ! 개인 프로젝트 같이 자그마한 프로젝트를 진행하는 경우에는 크게 신경을 쓰지 않아도 된다. 하지만 수 많은 사용자들이 몰리는 사이트라면 ...? 당연히 속도가 빨라야한다. 그렇게 하기 위해 발버둥쳐서라도 메모리 사이즈를 줄이고 불필요한 코드를 줄이고 이미지 사이즈도 줄이고.. 역시 날씬한게 짱인가? 아무튼 이번에는 코드단에서 불필요한 Css를 제거할 것이다 ! 위의 이미지는 Lighthouse를 통한 사이트 성능 검증인데 굉장히 구리다. 어느정도 개선 시켜봐야겠다. * Lighthouse 보는 방법은 Chrome인 경우 F12 mac : command + option + ..
✔️ 속성 entry : 진입점 (기본적으로 webpack config js 파일은 javascript 파일을 기준점으로 함) output: 반환점 (결과물을 내보내는 역할) - path : 결과물들의 저장 위치 (폴더명) (주의 : 상대경로(./dist)와 같은 경로를 입력하면 안 됩니다. 꼭 절대경로를 입력할 것.) - filename : 진입점의 파일 name과 동일하게 적어줍니다. 여기서 만든 filename은 entry의 key 값이 됩니다. (여러개 만들수도 있습니다. 동적으로 file name을 결정할 땐 [filename].js를 입력해주세요. ) clean : 이전에 만들어진 파일들 제거(단,5.20 version 이상만 사용 가능합니다. document에 여러 속성 및 version이 ..