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

현재 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 뿐 아니라 이미지도 함께 나오게 되는데 그것을 말하는 것이다. 예시) 과거와 달리 누구나 웹사이트를 만들 수 있는 세상이 된 요즘은 우후죽순으로 하루가 멀다하고 수 십, 수 백, 수 천개의 웹사이트들이 만들어지고 있다. 그러다보니 이제는 정확한 정보를 찾는 것이 "일"이 되었다. 그렇기 때문에 메타태그를 잘 지정해놓고 ..

프론트엔드 일을 하다가 처음으로 GTM이라는 것을 실시했다. 아무래도 마케팅 기반의 회사다보니 AE들이 주를 이루었고, 이분들이 GA를 통해서 확인 할 수 있도록 GTM을 심는 일을 해야했다. 나도 처음이다보니 공부를 하면서 실시를 하게 되었다. GTM이란? GTM이라는 것은 Google Tag Manager를 뜻한다. 이는 Google에서 제공하는 데이터 분석 지원 서비스 이며, 추적코드(태그)를 비교적 쉽게 적용 가능하고, 구글 외에 플랫폼에도 설치 및 관리기능을 제공하고 있다. 또한 기본적으로는 비개발자가 사용 할 수 있도록 만들어졌으므로 GTM에서 자동 에러체크를 하여 문제를 알려준다는 장점도 볼 수 있다. 내가 생각하는 모양은 이러하다. GTM을 통해 내가 GA에서 보고 싶은 것을 만들어내고, ..