개발일기

1️⃣ 사용자가 주소창에 URL 입력사용자가 주소창에 URL을 입력한다. 예를 들어 https://www.example.com을 입력한다고 하면브라우저는 이 문자열이 단순한 검색어인지, 웹 주소인지 먼저 판단한다.https://가 붙어 있다면 명확하게 URL로 인식하고, 바로 네트워크 요청 절차를 시작한다.URL은 아래와 같은 구조를 가진다.https(프로토콜)://www.example.com(도메인):443(포트, 생략되면 https는 기본 443, http는 80)/about(경로) 2️⃣ DNS 조회 (도메인을 IP 주소로 변환)🤔 이게 왜 필요할까?브라우저나 운영체제는 문자열 주소(example.com)를 알지만, 실제 네트워크 통신은 IP 주소로 이뤄지기 때문에 브라우저는 example.com..

📋 개요웹에서 이미지는 사용자 경험과 페이지 성능에 직접적인 영향을 준다. 프로젝트를 진행해보면서 웹사이트 로딩 시간에 가장 영향을 준건 역시 이미지이다. 구글 리서치 자료에 따르면 사이트의 로딩 시간이 3초 이상일 때 32%, 5초 이상은 90%, 6초 이상은 106% 마지막으로 10초가 넘으면 123%의 이탈률이 발생한다고 한다. 이는 곧 검색엔진 최적화(SEO)와 수익에도 악영향을 끼친다.웹사이트의 성능 개선하기 위해 실제 프로젝트에 적용할 수 있는 이미지 최적화 방법들을 알아보자. 1️⃣ 이미지 포맷 변경 (JPG, PNG → WebP)🖼️ WebP란?WebP 포맷은 인터넷에서 흔히 쓰이는 GIF, JPG, PNG 포맷을 대체하기 위해 개발되었습니다. WebP의 가장 큰 장점은, 이미지 품..

📋 개요현재 나의 시점으로 이야기를 하자면 AWS의 EC2를 사용해서 프로젝트를 배포까지 완료 했다면 한가지 불편한 점이 생길 것이다.개발 서버에서의 변경점을 배포서버까지 옮길려면 얼마나 많은 단계와 귀찮음이 존재하는지.우리는 귀찮음을 Github Actions를 사용하여 해결해 보려고 한다. 🏴󠁢󠁳󠁣󠁩󠁿 Github ActionsGithub 공식문서를 보려면 여기를 눌러주세요.Github 공식문서GitHub Actions는 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD(연속 통합 및 지속적인 업데이트) 플랫폼입니다. 리포지토리에 대한 모든 끌어오기 요청을 빌드 및 테스트하거나 병합된 끌어오기 요청을 프로덕션에 배포하는 워크플로를 만들 수 있습니다. 프로젝트는 보통 여러명에..

📟 PM2란? (Process Manager 2)Node.js 애플리케이션을 프로덕션 환경에서 안정적으로 실행하고 관리할 수 있게 해주는 프로세스 매니저이다.애플리케이션이 중단되지 않도록 지속적으로 실행을 유지하고, 필요에 따라 재시작할 수 있게 해준다.PM2는 NPM을 통해 쉽게 설치할 수 있으며, 간단한 CLI를 제공하여 사용하기 편리하다. PM2 공식문서를 보려면 여기를 눌러주세요 ✈️ PM2를 사용하는 이유1. 터미널을 꺼도 앱이 계속 실행됨보통 node 또는 yarn start로 실행한 앱은 터미널을 닫으면 종료된다.하지만 PM2는 백그라운드에서 앱을 실행해줘서 터미널을 닫아도 앱을 계속 실행시킬 수 있다.2. 앱이 종료되어도 자동 재시작서버가 예기치 않게 종료되거나 에러가 발생해도, PM..

💾 NginX 설치NginX 설치 공식 홈페이지는 여기를 눌러주세요.sudo apt updatesudo apt install nginx ❓ NginX는 왜 사용하는 걸까1. Reverse Proxy (리버스 프록시)클라이언트 → Nginx → 실제 앱 서버서버 IP대신 프록시IP가 사용되기 때문에 클라이언트는 서버의 IP를 알수가 없음(🔒보안에 유리)2. HTTP → HTTPS 리다이렉트http://example.com → 자동으로 https://example.com 으로 보내준다3. SSL 인증서 연결 (Let's Encrypt 등)🔒보안 접속을 위해 필수 요소이다4. 정적 파일 서버HTML, 이미지, CSS 같은 파일을 직접 서비스할 수 있다(빠르게 콘텐츠 제공 가능)5. 로드 밸런싱 (여러 ..

📋 개요도메인 연결은 선택사항이지만그래도 해보면 좋은 경험이 될거 같아서 연결해 보려고 한다.돈을 많이 쓰고 싶진 않기 때문에 500원에 판매하는 도메인을 구매해서 사용하기로 했다.구글링을 해보면서 찾아봤는데 AWS의 Route53이란 걸 많이 사용해서 도메인을 연결하는 블로그가 많았다.그래서 Route53을 또 구글링해 본 결과 돈을 지불하고 사용해야 한다.Route53을 꼭 써야 할까? 가비아 DNS만으로 충분하지 않을까?한번 알아보자. 🌐 도메인 연결하기 1️⃣ 가비아 도메인 구매하기 가비아에 로그인한 후에 원하는 사이트 주소를 입력한다. 원하는 도메인 이름 또는 가장 저렴한 도메인을 선택한다. 구매 단계에서 여기서 뭘 선택해야 되는 거지? 하는게 네임 서버이다.네임 서버가 무엇인지 확인해 ..

♟️ Node.js 설치하기절차의 출처를 보려면 여기를 눌러보세요.아래는 간단하게 훔쳐온 설치 방법이다. 1️⃣ nvm(노드 버전 관리자) 설치curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bashnvm을 사용하면 여러 버전의 Node.js를 설치할 수 있고 여러 버전 간을 전환할 수 있기 때문에여기서는 nvm을 사용하여 Node.js를 설치합니다. 2️⃣ 명령줄에 다음을 입력하여 nvm을 로드합니다.source ~/.bashrc 3️⃣ 명령줄에 다음을 입력하여 nvm을 사용해 최신 LTS 버전의 Node.js를 설치합니다.nvm install --ltsNode.js를 설치하면 npm(노드 패키지 관리자)도 설..

📋 개요EC2에 접속했다면 먼저 필요한건 내가 만든 프로젝트이다.이것은 생각보다 간단하다.하지만 EC2에 클론을 했다고 해서 내 컴퓨터의 바탕화면처럼 눈에 보이는 것이 아니다.그렇기 때문에 EC2에 내 프로젝트가 잘 들어왔는지 확인하기 위해서는 리눅스 명령어를 공부할 필요가 있었다.프로젝트를 클론하면서 필요했던 리눅스 명령어,그리고 env파일을 생성하는 방법까지 같이 알아보도록 하자.바로 시작해보자. 🗐 내 프로젝트 클론하기EC2(대여 컴퓨터)에 내 프로젝트를 클론하는 건 다른게 없다.똑같이 깃허브에서 배포하고자 하는 프로젝트 주소를 복사해서 사용해주면 된다.git clone 프로젝트 주소 🌍 리눅스 명령어 명령어 설명 ls현재 디렉토리 목록 보기cd디렉토리 이동pwd현재 위치 경로 확인mkdir..