alpeca's world alpeca's world

레퍼러(Referrer)란? 레퍼러는 사용자가 현재 페이지에 도달하기 전에 방문했던 이전 웹 페이지의 URL을 담고 있는 HTTP 헤더입니다. 이 정보는 웹사이트 트래픽의 출처를 분석하거나, 보안을 강화하는 데 사용될 수 있습니다. 레퍼러 데이터 추적의 중요성 트래픽 분석: 어떤 경로를 통해 사용자가 웹사이트에 도달했는지 알면, 마케팅 전략을 개선하고 웹사이트의 사용성을 높일 수 있습니다. 보안 강화: 레퍼러 정보를 활용하여 알려지지 않은 출처로부터의 의심스러운 트래픽을 식별할 수 있습니다. 커스텀 사용자 경험 제공: 특정 출처로부터 온 사용자들에게 맞춤형 콘텐츠를 제공할 수 있습니다. JavaScript를 이용한 레퍼러 데이터 추적 방법 document.referrer를 사용하여 현재 문서에 접근하기 ..

개발을 하다보면 로컬 환경에서 https도메인으로 테스트를 해야하는 경우가 있습니다. ( 예를 들면,, 애플 로그인 테스트..... ) 매번 배포해서 테스트를 하기에는 귀찮음이 이만저만이 아니죠. 우린 귀찮기에 행동하는 개발자이기에 로컬에서도 https로 셋팅하여 개발하도록 하죠. 1. 준비물 Homebrew 설치 Nginx 설치 mkcert 설치 원하는 도메인 이름 2. Nginx 설치 brew install nginx 3. mkcert 설치 brew install mkcert 4. 인증서 생성 cd /opt/homebrew/etc/nginx mkdir ssl cd ssl mkcert {원하는도메인 ex. local.alpeca.co.kr} localhost 127.0.0.1 5. Nginx 설정 파..

iframe과 부모 페이지 간 통신을 가능하게 해주는 postMessage에 대해 알아보겠습니다. 1. postMessage란 무엇일까요? postMessage는 HTML5에서 도입된 메시징 API로, 서로 다른 도메인에 있는 페이지 간에도 안전하게 데이터를 주고받을 수 있도록 해줍니다. 이전에는 서로 다른 도메인 간 통신이 제한되어 iframe과 부모 페이지 간 데이터 교환이 어려웠지만, postMessage를 사용하면 이러한 문제를 해결할 수 있습니다. 2. postMessage 작동 방식 postMessage은 다음과 같은 방식으로 작동합니다. 메시지 전송: 메시지를 전송하려는 페이지는 window.postMessage() 메서드를 사용합니다. 이 메서드는 메시지 자체와 함께 메시지를 받을 대상 도..

개발하면서 디버깅을 하기 위해 console.log를 많이들 찍어보실 거예요. 저도 참 많이 찍는답니다.. 😂 전 회사에서는 스니펫을 활용하여 특정 문자도 콘솔 로그에 찍히게 하여 제가 작성한 콘솔로그는 특정 문자로 검색하여 지우곤 했었는데요.. 혼자 프로젝트를 하다 보니 그냥 콘솔 로그를 막 찍게 되더군요.. 그냥 검색해서 다 지워버려도 되긴 하지만, 운영에서만 콘솔 로그가 찍히지 않으면 되잖아요 ?! 🤣 그래서 찾아보았습니다!!! 바로바로 . . . vite-plugin-remove-console vite-plugin-remove-console A vite plugin that remove the types of console in the production environment. Latest ver..

> 팀원: 이번 프로젝트에 Jenkins를 도입해서 자동 빌드 및 배포를 적용했어요. 다만 같은 version으로 push를 하면 오류가 나니 version 변경에 신경써서 push해주세요! 최근 팀원분이 배포 환경을 크게 개선해줘서 push만 해도 빌드 & 배포가 이뤄지도록 해주셨습니다. 하지만 같은 package 버전으로 push가 되면 빌드 오류가 나게 되어 있어서 push할 때 주의해달라는 요청도 함께 주셨습니다. version을 올리지 않고 push를 하는 실수가 잦아서 version을 변경하지 않으면 push를 막을 순 없을까해서 찾아보다가 git push 정책을 설정할 수 있다는 것을 알았습니다. pre-push라는 파일을 .git/hooks 경로에 생성하여 스크립트를 작성하면 됩니다. pr..

> PC랑 M 프로젝트 실서버 배포 진행하겠습니다~ > git pull PC > ... PC build ... > ... PC baepo ... > git pull M ... > ......... 저희 팀의 배포 방식은 순차대로 짜여진 쉘스크립트를 실행하는 방식입니다. 그냥 쉘스크립트 하나만 실행하기만 하면 두 개의 프로젝트가 빌드&배포가 되기에 편리했었죠. 하지만 PC가 빌드&배포 된 후, M이 빌드&배포가 되기에 하나의 프로젝트를 빌드&배포하는 것의 2배가 되는 시간이 걸리게 됩니다. 🔑 두 프로젝트가 동시에 빌드&배포될 수는 없을까? 순차적으로 빌드&배포가 되어야 할 프로트트들이 아니라면 동시에 빌드&배포가 되면 시간을 좀 더 줄일 수 있지 않을까 싶었습니다. 빌드하는 작업을 백그라운드로 실행시키면..

개발자님 A페이지에서 오류가 났나봐요. 확인해보겠습니다. 내부망 > 서버 > 로그 찾기 서버 에러가 나는 경우 500 상태 값을 리턴해주고 console.error()를 찍어놓는 방식으로 관리가 되고 있었습니다. 사이트에 오류가 났을 경우, 대개 서버에러인 경우가 많고 그러면 내부망에서 서버에 접근해서 로그를 찾아봐야했습니다. 오류가 발생했을 때 확인하는 과정도 귀찮음이 있고, 오류가 발생하더라도 서버 로그를 모니터링하지 않으면 모르고 지나가는 경우도 있었습니다. 🔑 에러가 났을 때 바로 알게 할 수 있지 않을까? 저희 팀은 팀즈로 소통을 하고 있고, 팀즈 알림에 반응하도록 적응이 되어있어서 팀즈 알림을 활용하면 어떨까 했습니다. 팀즈에는 각 채널별로 웹훅을 설정할 수 있는 기능이 있습니다. 팀즈의 웹훅..

로컬에서 작업하고 푸쉬하고 마스터 브랜치로 합치고 서버에 접속해서 빌드&배포 하고... 개발자는 귀찮음이 많아야 좋은 환경들을 만들어 간다고 합니다. 위와 같은 작업이 슬슬 귀찮아져서 자동 배포를 적용해야겠다 싶었습니다. goorm ide로 ubuntu 서버를 사용하고 있고 vue3로 제작된 웹 페이지를 운영하는 환경입니다. 🔑 마스터 브랜치에 코드가 변경되면 빌드&배포가 실행되게 할 수 없을까? goorm ide에 jenkins를 설치해서 ci/cd환경을 구축해보려 했는데 설치가 잘 되지 않아 그냥 계속 수동으로 빌드&배포를 진행해왔습니다. 수개월간 방치하다 문득 git actions가 떠올랐습니다. git actions로 브랜치에 코드 변화 감지를 할 수 있고 명령어를 실행시킬 수 있기에 ssh 접근..