뚱이의 이모저모 세상 알기 & 개발 일기 😼 뚱이의 이모저모 세상 알기 & 개발 일기 😼

대부분 EC2나 Nginx에 대해서 DevOps 개발자, 혹은 팀장, 혹은 백엔드 개발자가 자주 건들이다보니 프론트엔드 개발자인 내 입장에서는 당장 더 알아야 할 필요는 없었다.그러나 얕은 지식이나마 정보를 전달할 수 있어야 하고, 특히 Nginx는 프론트엔드 개발자라면 어느 정도는 알아야한다는 생각에 공부를 해봤다. ✅ Nginx를 사용하는 이유왜 프론트엔드 개발자는 Nginx에 대해서 알아야할까?물론 vercel 같은 것으로 쉽게 배포할 수 있지만 현업에서는 주로 EC2를 이용하고 Proxy Server를 두어 개발하게 되는데 이 때 프론트엔드 배포에 관여하게 되는 것이 Nginx이기 때문이다. Nginx를 사용하게 되면 "정적 컨텐츠 배포", "SSL 처리", "로드 밸런싱", "장애 대응", "캐..

현재 React, NextJS 모두 Docker를 이용해서 배포를 진행하고 있다.그런데 No space left on device 문제로 인해서 build에서부터 문제가 발생했다.  No space left on device : 디바이스에 남는 공간이 없음 만약 이런 에러 메시지를 발견했다면, 사용하지 않는 쓸모 없는 이미지 등이 얼마나 많은 용량을 차지하고 있는지 확인해봐야한다. 우선 아래 명령어를 사용해보자.docker system df -v docker system df라고 하면 현재 사용 중인 컨테이너, 볼륨, 이미지가 얼마나 많은 공간을 사용하고 있는지 확인할 수 있다.거기에 -v (vervose) 옵션을 추가해서 사용하지 않는 이미지와 컨테이너도 확인 가능하다.위 명령어를 통해서 Images ..

PWA를 만든 이유모바일로 인프런을 이용할 때 매번 [ 크롬 -> 탭을 누르기 -> 인프런 들어가기 -> 강의 누르기 ] 이런 경로를 타다보니 귀찮게 느껴졌는데 마침 인프런 앱이 있었다.그래서 앱을 다운 받아봤는데 마치 PWA 환경과 비슷하다고 생각이 되어서 찾아봤다.[ 개발자 환경 -> 애플리케이션 -> 매니페스트 ] 를 보면 짐작은 할 수 있는데 PWA를 사용할 수 있는 조건은 만족하고 있는 것 같았다.그래서 회사 프로젝트 중 일반 유저들이 사용하는 프로젝트 하나에 PWA를 추가하기로 생각했다. PWA의 장점PWA는 Progressive Wab App을 말한다.직접 네이티브로 개발하지 않아도 웹 개발 한 것을 기반으로 앱을 만들 수 있다는 장점을 가지고 있는데 주요 사용 기업으로는 "스타벅스", "트..

현재 Next.js를 사용하고 있고, Docker를 통해 배포를 하고 있다.Filezilla를 통해서 업로드를 하고 있는데, React의 경우에는 build를 하고 나면 index.html과 assets 정도만 나오기 때문에 그것만 Filezilla로 올리도록 만들었다.그런데 Nextjs의 경우에는 build를 하고 나서 static export를 하게 되면 하나의 index.html이 나오는 것이 아니라 여러개의 html 파일이 나오게 된다.그러면서 기존에 업로드 하는 방식과 방법이 달라져서 문제가 생겼고, 이를 위해 Docker로 이미지를 만들어서 압축해서 올리면 그것을 선임 개발자가 처리하는 방식으로 했다.그런데 다른 문제가 또 있었다.기존에 회사에서 SI 업체에 맡겨서 작업을 했던 것들이 있어서 ..

오늘 Docker를 통해 배포를 하면서 겪은 것은 호환성 에러에 관한 것이다. 기존에 외부 업체에 맡겼던 Next.js로 만들어진 결제 관련 웹앱을 마이그레이션 및 수정 후 Docker로 배포까지 진행하게 되었다. 이 때 프론트단의 역할은 Dockerfile을 포함해 빌드를 압축해서 Filezlia에 올리는 것까지를 목표로 했다. 문제의 발단은 Docker run을 하면서 발생했다. 아래와 같은 호환성 문제로 인한 에러 메시지가 나타났고 이는 Build할 때까지는 문제가 없었는데 Docker run을 할 때 정상적으로 서버가 실행되지 않았다. WARNING: The requested image's platform (linux/arm64/v8) does not match the detected host p..

날짜 포맷 변환 기능에 대한 적용을 하다가 정리를 조금 해놓으면 좋겠다고 생각되어 관련한 정보에 대한 글을 올려놓으려고 한다. 날짜 변환에 대해 접근하기 위해서는 우선 GMT, UTC, 날짜 포맷에 대해서 알아야한다. 더불어 luxon을 이용하려면 IANA도 알고 있으면 도움이 된다. UTC UTC는 Coordinated Universal Time의 줄임말이다. [ 참고 ] Q : Coordinated Universal Time을 줄이면... CUT 아닌가...? A : 초기에 영어권 사람들과 프랑스어권 사람들이 각각 자신들의 언어인 CUT와 TUC로 하기를 원했다. 그런데 두 언어 모두 C, T, U로 구성되어 있다는데 착안하여 UTC로 하였다. 또한 그로 인해서 시계시(UT)와 그 변형 약어들과의 일..

이번에 작업을 하면서 처음 ogp에 대해서 알아보았다. 이는 흔히 우리가 카카오톡이나 슬랙 등에 url을 넣으면 나오는 아래와 같이 나오는 웹페이지 미리보기 같은 것이다. 처음에는 자동으로 크롤링이 되면서 필요한 부분이 크롭되어 나오는 것으로 생각 했는데, 찾아보니 ogp라는 것이 있어서 이번에 배포를 하면서 적용하게 되었다. OGP는 Open Graph protocol 이라고 하여 OG라고도 불리는 것 같다. 이는 meta-tag(메타태그)이며, html에 적용하면 되는 것이다. 메타태그는 무슨 용도일까? 이는 사람에게 보여주기 위한 정보가 아닌, 웹 서버와 브라우저 간의 상호 정보 전달을 위해 사용된다고 할 수 있다. 문서의 디자인에는 영향을 미치지 않으며, 어떤 정보를 담고 있고, 누가 만들었고, ..

og 라고도 불리는 Open Graph Protocol. 나도 이번에 처음 적용해보면서 이런 이름이 있다는 걸 알았다. 무엇인지 알아보자. Open Graph Protocol(오픈 그래프 프로토콜)은 Facebook에서 최초로 정의한 meta-tag 규약이라고 한다. 쉽게 말하면 링크 프리뷰(Link Preview)를 말하는 것인데, 카카오톡이나 슬랙 같은 곳에 url을 복붙 하면 url 뿐 아니라 이미지도 함께 나오게 되는데 그것을 말하는 것이다. 예시) 과거와 달리 누구나 웹사이트를 만들 수 있는 세상이 된 요즘은 우후죽순으로 하루가 멀다하고 수 십, 수 백, 수 천개의 웹사이트들이 만들어지고 있다. 그러다보니 이제는 정확한 정보를 찾는 것이 "일"이 되었다. 그렇기 때문에 메타태그를 잘 지정해놓고 ..