재밌는 Coding

1. 시험환경

· 윈도우(Windows)

· NVM(Node Version Manager), Node.js

2. 문제 인식

· React, Vite, Next.js 등 프론트엔드 개발을 위한 필수 엔진 Node.js가 먼저 내 PC에 설치되어 있어야 한다.
· 보통 Node.js를 설치하라고 하면 공식 홈페이지에서 초록색 다운로드 버튼으로 설치할 수도 있지만, 실무에서는 그렇게 설치하지 않는다. 여러 프로젝트를 동시에 진행하다 보면 프로젝트마다 요구하는 Node.js의 버전이 달라서 충돌이 발생하기 때문이다.
· 윈도우 환경에서 버전 충돌 없이 Node.js 최신 버전을 설치하고 관리하는 방법(NVM 활용법)을 알아보자.

3. NVM의 필요성

· 문제 상황: A 프로젝트는 Node 16 버전에서만 작동되고, 새로 시작할 Next.js 프로젝트는 Node 20 이상을 요구할 경우, 매번 Node.js를 삭제하고 다시 설치해야 할까?
· 해결책 (NVM): NVM(Node Version Manager)이라는 프로그램을 사용하면 내 PC에 여러 버전의 Node.js를 설치해두고, 명령어 한 줄로 버전들을 자유자재로 스위칭(변경)하며 사용할 수 있다.

4. 단계별 설치

1) NVM for Windows 설치하기

  ① NVM for Windows의 공식 깃허브 릴리즈 페이지에 접속한다.운로드 페이지 접속한다.

    - URL : https://github.com/nvm-windows/nvm/releases

  ② NVM 설치 버전-PC플랫폼에 해당하는 설치파일을 다운로드 받는다.

    - MAC CPU 사용자는 arm64, Intel, AMD CPU 사용자는 x64 선택

  ③ 다운받은 파일을 실행하고, 특별한 설정 변경 없이 Next를 계속 눌러 설치를 완료한다.

  ④ 설치가 끝났으면 터미널(<윈도우>키 + <R> 입력후 'cmd')에서 설치 버전을 확인한다.

    - 명령어 : nvm --version

2) Node.js 최신 버전(LTS) 확인 및 설치

  ① NVM을 이용해 실제 Node.js를 설치할 때, Node.js는 2가지 최신 버전이 존재한다.

    - Current (최신 버전) : 가장 최근 버전 으로 신기능이 있지만 버그가 있을 수 있다.

    - LTS(Long Term Support) : 안정적이고 호환성이 높아 실무 표준으로 사용하는 최신 버

  ② nvm 명령어를 이용하여 설치 가능한 버전 목록을 확인한다.

    - 명령어 : nvm  list  available

  ③ nvm 명령어를 이용하여 원하는 버전의 Node.js를 설치한다.

    - 명령어 : nvm  install  22.11.0 (버전을 특정하여 설치할 경우)

    - 명령어 : nvm  install  lts (최신 LTS 버전을 자동으로 설치할 경)

3) 설치한 버전 활성화하기

  ① 설치 완료후 NVM에게 "특정 버전을 사용한다"고 알려주어야 한다.

    - 명령어 : nvm  list (PC에 설치된 Node.js 목록 확인)

    - 명령어 : nvm  use  22.11.0 (특정 버전 사용 필수)

  ② Node.js와 NPM(Node Package Manager) 버전이 잘 적용되었는가 최종 확인한다.

    - 명령어 : node  -v

    - 명령어 : npm  -v

5. 요약 및 마무리

· NVM(Node Version Manager)

  - 프로젝트마다 요구하는 Node.js 버전들을 충돌없이 설치하고 스위칭해 주는 관리 도구

· Node.js

  - React.js, Next.js 등 Frontend 프로젝트 코드를 실행할 수 있게 해주는 실행 환경

· npm

  - 외부 라이브러리를 내 프로젝트로 다운로드하는 도구로 Node.js 설치시 자동 내장

1. 시험환경

· AWS S3

· Cloudflare

2. 문제 인식

· 앞의 2개의 설정을 바쳤다면 서비스를 하기 위해서 Cloudflare와 AWS S3 간 연결 설정을 해야 한다.

· 이 설정을 마치면 서비스 도메인(ex: myservice.com)을 입력했을 때 Cloudflare가 접속을 받아 S3에 저장된 웹 사이트를 보여준다.

3. 해결방법

1) Cloudflare DNS 레코드 추가 메뉴 이동

  ① Cloudflare 대시보드에서 등록한 도메인(예: myservice.com)을 클릭한다.

  ② 좌측 메뉴 [DNS] → [Records]를 선택화면에서 [Add record] 버튼을 클릭한다.

2) 메인 도메인(루트 도메인)을 연결 설정한다.

  ① 사용자가 주소창에 (예: myservice.com)이라고 쳤을 때 S3로 연결되게 하는 설정이다.

    - 유형(Type) : CNAME 선택

    - 이름(Name) : @ 입력 - 이는 "myservice.com"을 의미한다.

    - 대상(Target) : AWS S3 엔드포인트 주소 입력 (주소 앞에 "http://"와 끝에 있는 "/" 기호는 반드시 지우고 입력에 주의)

    - 프록시 상태(Proxy status) : 주황색 구름 아이콘이 켜져 있는 상태이어야 HTTPS와 CDN 캐시가 적용됨

3) www 도메인을 연결 설정한다. (추가 권장 설정)

  ① 사용자가 주소창에 (예: www.myservice.com)이라고 쳤을 때 S3로 연결되게 하는 설정이다.

    - 유형(Type) : CNAME 선택

    - 이름(Name) : www 입력

    - 대상(Target) : @

    - 프록시 상태(Proxy status) : 주황색 구름 아이콘이 켜져 있는 상태이어야 HTTPS와 CDN 캐시가 적용됨

5. 요약 및 마무리

· 브라우저에 구매 도메인(예: "myservice.com" 또는 "www.myservice.com")을 입력하여 사이트에 정상 접속되는지 확인한다.

1. 시험환경

· Cloudflare

· 가비아

2. Cloudflare 사용목적

· 가비아, 호스팅케이알 또는 AWS Route 53에서 구매한 도메인을 Cloudflare에 등록하는 방법을 알아보자.

· 도메인을 Cloudflare를 거치도록 설정하면, 무료로 제공되는 보안, 글로벌 로딩 속도(CDN 캐싱), 무료 SSL 인증서를 제공받을 수 있다.

3. 외부 도메인을 Cloudflare에 연결하기

1) Cloudflare에 도메인 등록 및 네임서버 발급

  ① Cloudflare에 접속하여 회원가입 및 로그인을 한다.

  ② [Domains] 메뉴 → [Overview] 하위 메뉴 : 화면 오른쪽 상단 [Add a Site] 버튼을 클릭한다.

  ③ [Connect a domain]을 클릭하여 타 사이트에서 구매한 도메인을 연결한다.

  ④ [Free (무료)] 요금제를 선택한다.

  ⑤ Cloudflare가 DNS 기록을 스캔하여 보여준다.

    - DNS records 등록은 나중에하고 [Continue to activation]을 클릭한다.

  ⑥ 화면에 Cloudflare가 부여한 두 개의 네임서버 주소가 나타난다.

    - armando.ns.cloudflare.com, paisless.ns.cloudflare.com 같은 형태이다.

    - 이 두 주소를 복사하여 메모장에 잠시 저장한다.

2) 가비아 홈페이지에서 네임서버 변경

  ① 가비아 사이트에 로그인 후 [My가비아] → [서비스 관리]로 진입하여 "도메인 통합 관리툴"을 선택한다.

  ② [도메인 관리] 메뉴로 진입한다.

  ③ 구매한 도메인(예: myservice.com)을 선택하고 우측 상단에 [네임서버] 버튼을 클릭한다.

  ④ Cloudflare 네임서버를 입력한다.

    - 기존에 적혀있던 가비아 네임서버를 모두 삭제한다.

    - 1차, 2차 칸에 1단계에서 복사해 둔 Cloudflare 네임서버 주소 2개를 각각 붙여넣는다.

3) DNS 등록 확인

  ① Cloudflare 화면으로 돌아와서 하단의 [I updated my nameservers] 버튼을 클릭한다.

  ② Cloudflare 대시보드에서 도메인이 '활성(Active)' 상태로 바뀌고, 가입한 이메일로 "Status Active" 메일이 오면 연결이 완료된 것이다.

4) Cloudflare SSL/TLS 설정

  ① 좌측메뉴 [SSL/TLS] → [Overview] 화면에서 암호화 모드를 [Flexible]로 변경한다.

4. 요약 및 마무리

· Cloudflare의 전 세계 엣지(Edge) 네트워크가 보호하고 가속해 주는 강력한 무기이다. 이제, 안전하고 빠른 나만의 도메인으로 전 세계 유저들을 맞이할 준비를 마친 것이다.

· 이제 남은 작업은 Cloudflare의 [DNS] 메뉴로 들어가서, 이전에 배포해 두었던 AWS S3 엔드포인트 주소나 서버의 IP 주소를 A 레코드 또는 CNAME으로 연결(매핑)해 주는 것이다.

1. 시험환경

· AWS S3

· FrontEnd 배포

2. 문제 인식

· 배포용 정적 파일(HTML, JS, CSS)을 인터넷에 띄우는 가장 저렴한 방법은 AWS S3의 '정적 웹 사이트 호스팅(Static Website Hosting)' 기능을 사용하는 것이다.

· EC2 같은 가상 서버 대여 없이, 파일만 업로드해두면 AWS가 알아서 웹 서버 역할을 제공한다.

3. S3 정적 웹 사이트 호스팅 단계별 설정 방법

1) AWS S3 '버킷(Bucket)'은 파일을 담는 최상위 폴더이자 웹사이트의 기본 단위이다.

  ① AWS 콘솔(웹사이트)에 로그인 후 'S3'를 검색하여 이동한다.

  ② 우측 상단의 [버킷 만들기] 버튼을 클릭한다.

    - 버킷 이름 : 서비스할 도메인 이름과 동일하게 입력한다. (예: myservice.co.kr)

    - 주의) Cloudflare 서비스를 사용할 경우 특별히 주의하여 반드시 일치하는가를 확인한다.

  ③ S3는 기본적으로 외부 접근이 불가능하도록 되어 있어서 누구나 서비스 접근을 위해 잠금 해제한다.

    - '모든 퍼블릭 액세스 차단'을 체크 해제하고 [변경 사항 저장]을 클릭한다.

  ④ 나머지 설정은 그대로 두고 [버킷 만들기]를 클릭한다.

2) 버킷 정책(Bucket Policy) 적용하기

  ① "누구나 버킷 안의 파일을 읽을 수 있도록" 규칙(정책)을 설정한다.

    - [권한] 탭에서 '버킷 정책' 항목 우측의 [편집] 버튼을 클릭하여 아래 규칙을 적용한다.

3) 정적 웹사이트 호스팅 활성화하여 파일 저장소를 '웹사이트'처럼 작동하게 만든다.

  ① [속성] 탭에서 '정적 웹사이트 호스팅' 항목 우측의 [편집] 버튼을 클릭한다.

    - 정적 웹 사이트 호스팅 : "활성화" 선택

    - 호스팅 유형 : "정적 웹 사이트 호스팅" 선택

    - 인덱스 문서 : "index.html" 입력

  ② 설정 저장 후 "버킷 웹사이트 엔드포인트" URL 주소가 생성되었는지 확인한다.

    - 주의) 엔드포인트 URL 주소는 CloudFlare, AWS CloudFront 등 CDN 서비스 등록 시 필요하다.

4. 요약 및 마무리

· "버킷 웹 사이트 앤드포인트"로 접속하여 웹사이트가 화면에 떴다면 S3 정적 호스팅 배포에 성공한 것이다.

  - 아주 저렴한 비용으로 트래픽을 감당할 수 있는 인프라를 설정했다.

· 하지만 S3 정적 서비스는 " http://로만 서비스된다"는 치명적인 문제가 있다.

· 실무에서는 이 S3 앞단에 CDN 서비스인 AWS CloudFront, CloudFlare 등을 붙여서 서비스한다.

1. 시험환경

· React.js / JavaScript

· 카카오 개발자센터(Kakao Developer Center)

2. 문제 인식

· React.js, Next.js 등 JavaScript 기반 프로젝트에 카카오맵을 띄우기 위한 절차를 알아보자.

· '카카오 디벨로퍼스(Kakao Developers)'에서 Key 발급, 접근 권한, 지도맵 활성화 메뉴 위치 및 설정을 알아보자.

3. KakaoMap 활성화를 위한 카카오 디벨로퍼스(KakaoDevelopers) 설정

1) 내 애플리케이션 만들기

  ① 카카오 디벨로퍼스(developers.kakao.com)에 접속하여 본인의 카카오 계정으로 로그인한다.

    - 카카오개발자센터 URL : https://developers.kakao.com/

  ② 상단 메뉴에서 [앱]을 클릭한 뒤, [+앱 생성] 버튼을 클릭한다.

    - 앱 이름(필수): 프로젝트 이름 입력 (예: 나만의 맛집 지도)

    - 사업자명(필수): 개인 개발자라면 본인 이름이나 닉네임 입력

    - 카테고리(필수): 서비스에 맞는 분류 선택

2) 자바스크립트 앱 키(JavaScript Key) 복사하기

  ① 앱 생성 후 [앱] 메뉴 → [플랫폼 키] 하위메뉴로 들어가면 "영문-숫자 조합 키"를 복사하여 코드에 적용한다.

    - 네이티브 앱 키 : 안드로이드, iOS용

    - REST API 키 : 서버 백엔드 통신용

    - JavaScript 키 : 웹 프론트엔드용

3) 웹 플랫폼(도메인) 등록하기

  ① 웹 프론트엔드용으로 JavaScript키를 적용한 경우 해당 키 영역을 클릭한다.

  ② "JavaScript SDK 도메인"을 등록 [+버튼]하여 접속 허용 도메인을 설정한다.

    - http://localhost:3000 등 개발용

    - http://myservice.com 등 배포용

    - 접속하지 않으면 브라우저의 네트워크탭에서 "401 Unauthorized"에러가 발생한다.

  ③ 사이트 도메인 등록: 개발 환경과 향후 배포할 주소를 모두 적어주어야 합니다. (줄바꿈으로 구분)
    - http://localhost:3000 등 개발용

    - https://myservice.kr 등 배포용

4) 지도 활성화

  ① [앱] → [제품 설정] → [카카오맵] 메뉴에서 사용 설정을 반드시 "ON"으로 선택한다.

1. 시험환경

· React.js

· geojson, Turf.js

2. 문제 인식

· Leaflet, Mapbox 등 지도 엔진 서비스를 이용하면 무거운 GeoJSON 데이터를 화면에 그릴 수 있다.

· 하지만, 데이터를 그리기 전에 데이터 자체를 조작해야만 하는 상황을 반드시 겪게 된다.

  - "서울시 폴리곤 데이터 중 인구가 50만 명 이상인 구역만 필터링하는 경우"
  - "사용자가 클릭한 위치(Point)가 이 다각형(Polygon) 영역 안에 포함되는지 판단이 필요한 경우"

· 이런 공간 연산을 하기 위해 GeoJSON의 구조를 이해하고, 공간 데이터를 효율적으로 다루는 방법을 알아보자.

3. GeoJSON 개념

· GeoJSON이란 3개의 계층으로 이루어진 '지리 정보(Geography)'를 담고 있는 JSON 객체이다.

  - FeatureCollection: 단순히 여러 개의 Feature를 묶어주는 배열
  - Feature: 실질적인 데이터 1건. 이 안에는 반드시 properties(속성)와 geometry(형태)가 한 쌍으로 들어있어야 한다.
  - Geometry: 지도에 그려질 구체적인 점, 선, 면의 좌표(위경도) 데이터

· geometry 객체의 type에 따라 지도에 그려지는 모양(점, 선, 면)이 결정된다.

4. GeoJSON 데이터 다루기

1) JavaScript/TypeScript 환경에서 GeoJSON 배열(Array) 데이터를 가공해서 사용하는 것은 어렵기 때문에 프론트엔드 공간 연산의 표준 라이브러리인 Turf.js와 타입 추론을 위한 @types/geojson을 조합해서 사용한다.

  ① 라이브러리 설치

2) 특정 조건으로 Feature 필터링이 필요한 경우 @types/geojson를 활용한다.

3) 교집합, 거리 계산 등 복잡한 수학 계산이 필요한 경우 Turf.js를 활용한다.

5. 요약 및 마무리

· 모든 데이터는 FeatureCollection ➔ Feature ➔ Geometry + Properties 구조로 파싱(Parsing) 한다.

· GeoJSON의 좌표는 무조건 [경도(x축), 위도(y축)] 순서이다.

· 교집합(Intersection), 버퍼(Buffer), 중심점 계산 등 지리 공간 연산이 필요하면 Turf.js를 사용한다.

1. 시험환경

· Next.js, TypeScript

· pnpm

2. React(Vite) vs Next.js, 무엇이 다른?

· 두 기술의 가장 결정적인 차이는 '화면을 어디서 완성해서 브라우저로 보내는가(렌더링 방식)'에 있다.

  - "검색 노출이 필요 없고 유저 상호작용이 복잡한 웹 도구"를 만든다면 Vite 선택

  - "검색 엔진 상위 노출이 필수적이고 초기 로딩 속도로 고객을 잡아야 하는 서비스"라면 무조건 Next.js 선택

3. Next.js 프로젝트 초기화

1) 설치 명령어 입력

  ① 설치할 폴더로 이동한 뒤, 터미널(명령 프롬프트)에 아래 명령어를 입력한다.

  ② 초기화 옵션을 선택한다. (실무 권장 세팅)

    - Next.js defaults 설정을 선택하면 보편적으로 많이 사용하는 설정 및 라이브러리가 한번에 설치된다.

    - Next.js defaults 선택시 설치되는 라이브러리 목록

  ③ 설치가 완료되면 생성된 폴더(project 설정 이름)로 들어가서 개발 서버를 실행한다.

    - 개발서버 실행 명령 : pnpm  dev

  ④ 브라우저에서 http://localhost:3000에 접속했을 때 검은 바탕의 Next.js 시작 화면이 뜬다면 성공이다.

1. 시험환경

· React.js

· Nginx

2. 문제 인식

· 웹 개발에서 http://로 접속한 사용자를 https://로 강제 전환(Redirection) 시키는 것은 서비스의 기본 설정이다.
· 보통 이 작업은 Nginx, AWS ALB, CloudFront 같은 '인프라(웹 서버)' 단에서 처리하는 것이 표준이다.

· 하지만 서비스를 운영 하다 보면, React 컴포넌트(<HttpRedirect/>)나 미들웨어 같은 'App 코드 내부'에서 직접 리다이렉션을 개발하는 경우가 필요할 수 있다.
· 인프라 설정을 두고, 프론트엔드/백엔드 코드 안에서 HTTPS 전환을 직접 처리하는 실무 케이스들을 알아보자.

3. 코드레벨 구현 특수 케이스

1) 케이스 A: 회사/팀의 상황상 개발자가 앞단의 인프라(Nginx, AWS 등) 설정을 마음대로 건드릴 수 없는 경우

  ① 상황: 사내 보안/인프라팀에 Nginx 설정을 바꿔달라고 요청시 일주일이 걸리는 상황 또는 저렴한 웹 호스팅이나 제약이 많은 PaaS를 사용 중이라 HTTPS 강제 전환 옵션을 제공하지 않는다.

  ② 코드 레벨의 해결책: 인프라를 거쳐 들어온 요청이 최종적으로 도달하는 Next.js 서버(또는 Node.js 백엔드)나 프론트엔드 코드 내부에서 접속 프로토콜(http)을 감지하고, 직접 https로 주소를 돌려버리는 코드를 작성한다.

2) 케이스 B: Next.js 미들웨어(Edge)를 적극 활용하는 모던 스택

  ① 상황: Nginx 설정 따로, 프론트 코드 따로 관리포인트가 많은 경우 프론트엔드 저장소(Repository) 코드 안에서 모든 라우팅 규칙을 통제할 수 있다.

  ② 코드 레벨의 해결책: Next.js의 middleware.ts 파일에서 들어오는 요청의 헤더(x-forwarded-proto)를 검사하여 HTTP인 경우 HTTPS로 301 리다이렉트 한다.

3) 케이스 C: 프론트엔드 CSR 환경에서의 임시 땜질 (React 컴포넌트)

  ① 상황: 인프라/백엔드 서버 모두 만질 수 없으며, 오직 React(Vite/CRA)로 정적 배포된 환경(S3 등)에서 HTTPS 강제 전환 기능이 빠져 있는 상황이다.

  ② 코드 레벨의 해결책: React 최상단(App.tsx)에 아래와 같은 컴포넌트를 만들어서 마운트시킵니다.

5. 요약 및 마무리

· 코드 내부에서 HTTP ➔ HTTPS를 처리하는 것은 위와 같은 특수한 상황에서만 제한적으로 사용해야 한다. 인프라 단(Nginx 등)에서 처리하는 것과 비교했을 때 다음과 같은 단점이 있다.

  - 보안 취약점 (MITM 공격): 브라우저가 클라이언트 코드(JS)를 다운받고 실행하기 전까지의 찰나의 순간에는 HTTP로 통신하게 된다. 이때 해커가 중간에서 데이터를 가로채거나 변조할 수 있다.

  - 성능 저하: 인프라(Nginx)는 요청이 오자마자 즉시 0.001초 만에 튕겨낸다. 하지만 앱 코드까지 요청이 들어오면 서버의 CPU와 메모리를 소모하게 되며, React 컴포넌트로 처리할 경우 리랜더링(하얀 화면 ➔ 주소 변경 ➔ 다시 로딩)이 발생다.