안녕하세요 :) 오늘은 nextjs에서 제공하는 image 컴포넌트의 로더 기능을 사용하여 서버 부하를 줄이게 된 경험을 공유하고자 합니다. 문제점 발견: Next/Image의 동작 방식ec2 서버의 부하를 줄이고 속도 개선 등 여러 이점을 위해 회사 내 인프라 구조는 CDN 서버를 맨 앞에 두어 이를 거쳐가도록 되어있습니다. 하지만 한가지 골칫덩이가 있었는데요. 바로 Next/Image입니다. 기존 프론트엔드의 이미지들은 모두 Next에서 제공하는 Image 컴포넌트로 되어있었습니다.import ImgSrc from '@/static/a/b/test.png'; 위와 같은 코드가 있을 때 우리는 빌드 후 아래와 같은 결과물이 나오기를 기대합니다. 그래야 s3 버킷으로 가서 원하는 경로의 이미지를 가져올 ..

회사에서 push 알림 기능이 들어갈수도 있다해서 간단하게 구현해본 내용을 정리하였습니다.(결국 들어가진 않았지만.. 흑흑) 은근 자료찾기가 까다로워서 저처럼 헤맸던 개발자가 없기를 바라며.. 작성해보았습니다.FCM이란Firebase Cloud Messaging(FCM)이란 메시지를 안정적으로 무료 전송할 수 있는 크로스 플랫폼 메시징 솔루션입니다. 기존에는 푸시 메세지를 보내기 위해 플랫폼 별로 개발해야하는 불편함이 있었지만 FCM의 등장으로 쉽게 개발할 수 있게 되었습니다.위 이미지는 maejing님의 티스토리에 소개된 FCM의 동작 방식을 쉽게 알려주는 그림이라 가져와보았습니다. 웹의 경우도 동일합니다.먼저 Firebase 서버에 토큰을 요청하고 획득한 뒤 우리 서버에 토큰을 저장합니다. 해당 토큰..

이번에 Datepicker 때문에 antd library를 추가하게 되면서 라이브러리의 크기가 커서 성능이 떨어지지 않을까 우려되었습니다. 이를 줄이기 위해 여러가지를 시도해보았습니다.모듈 사이즈 확인하기분명 크기가 클 것 같은데 어느정도인지는 알 수 없어서 일단 자세한 설명을 보기 위해 터미널에 아래 명령어를 입력해주었습니다.npm info antd여러 항목 중 .unpackedSize: 50.3 MB 라는 내용이 눈에 띄었습니다. 이게 무엇을 의미하는건지 검색해봤더니 모듈이 다운로드되어 node_modules에 담겼을 때의 사이즈를 말하는 것이었습니다. 라이브러리가 최종적으로 만들어졌을 때의 사이즈라고 이해해도 되지 않을까 싶습니다. Finder로 확인해보니 정말 사이즈가 같았습니다.제가 줄여야 하는..

1편 바로가기 지난 시간에 vs code로 스프링 프로젝트를 띄우기 위한 셋팅 3가지(자바,메이븐,톰캣)을 해보았다. 이번엔 필요한 vs code 익스텐션을 설치하고 war 파일을 만들어서 띄우는 것까지 해보겠다.  - 2편에서 다룰 내용 -4. vs code 익스텐션 설치5. 톰캣 서버 키고 메이븐에서 war 파일 만들기6. 실행 vs code 익스텐션 설치  vs code 익스텐션 탭에서 java라고 치면 아래와 같이 나오는데 이중, java extension pack 이라고 되어 있는 것을 설치하면 나머지 필요한 5가지도 설치된다. 아래 나와있는 6가지가 모두 설치되어야 한다. 이후, Tomcat For Java라는 것도 설치해준다.   설치가 끝났으면, vs code를 껐다가 다시 실행해준다.  ..

팀프로젝트로 만들고 있는 웹사이트의 시작부터 맞닥뜨린 어려움은 vs code로 jsp 파일을 열 수가 없다는 것이었다.  자바를 잘못 설치하여 맥을 포맷하고.. 며칠동안 구글링을 한 뒤에 해결할 수 있었다. 너무 뿌듯해서 자랑하고 싶어서 올리는 왕초보들을 위한 가이드이다.  준비물스프링 프로젝트vs code자바(Java) 버전 11 이상 (설치할 것임)메이븐(Maven) (설치할 것임)톰캣(Tomcat) (설치할 것임)  단계- 1편에서 다룰 내용 -1. 자바 설치2. 메이븐 설치3. 톰캣 설치 - 2편에서 다룰 내용 -4. vs code 익스텐션 설치5. 톰캣 서버 키고 메이븐에서 war 파일 만들기6. 실행  1. 자바 설치(11 이상)자바 설치를 위해 "homebrew"를 사용하겠다. 이는 오픈 소..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 이번에는 react dependency를 이용하여 어플을 스타일링하는 방법을 알아볼 것이다. 코드 샌드박스의 왼쪽 패널에 add dependency를 눌러준다. 이후, "material ui" 라고 입력한 뒤, "material-ui/core"와 "material-ui/icons"를 설치해준다. 만일 로컬에서 작업하고 있다면 npm install을 이용하여 설치해주면 된다. documentation에 어떤 명령어를 이용하여 설치하는 지 나오니 따라하면 된다. material-ui/icons material-ui/core 이제 원하는 아이콘 compone..