플레이스토어 병아리게임 출시!!!~~ [많은 이용 부탁드립니다!]

📝데이터 네트워크 흐름

✅ OS, WAS, DB가 같은 서버에 설치되어있는 경우 (파일 읽기도 동일)

클라이언트 요청 → NIC Buffer → Socket Buffer → Application Buffer → 클라이언트 요청 정보 해석 (파일 읽기일 때) → OS에 파일읽기 요청 → Read Buffer 저장 → Application Buffer로 전송 → Socket Buffer로 전송 → NIC Buffer로 전송 → 네트워크를 이용해 클라이언트에게 전송

• Read Buffer
  • 파일 시스템이나 데이터베이스로부터 데이터를 읽을 때 사용됩니다
• Application Buffer
  • 보통 사용자가 HTTP로 데이터를 요청하기 때문에 WAS에 Read Buffer 내용이 들어가게 됩니다
  • 필요한 형식으로 변환하거나 추가 데이터 작업을 할 수 있습니다
• Socket Buffer
  • 네트워크에 전송되기 전에 임시적으로 저장됩니다
  • TCP/IP 프로토콜을 통해 데이터를 전송하기 전에 이곳에 저장되게 됩니다
• NIC Buffer
  • 데이터가 네트워크를 통해 전송되기 위해서는 먼저 NIC Buffer로 이동하게 됩니다
• DMA copy
  • DMA(Direct Memory Access Copy)로 CPU의 개입 없이 메모리간 데이터를 직접 선송할 수 있는 컴퓨터 시스템 기능입니다
  • OS 커널 영역에서는 DMA Copy를 한다
• CPU Copy
  • CPU를 이용해 데이터를 메모리에서 다른 메모리로 이동하는 방법으로 WAS로 읽어들이는 경우 사용된다

✅ OS, WAS, DB가 다른 서버에 설치되어있는 경우

클라이언트 요청 → NIC Buffer로 전송 → Socket Buffer로 전송 → Application Buffer로 전송 → DB 호출 → Socket Buffer에 DB 요청 정보 보내기 → NIC Buffer로 전송 → DB 설치 서버에 NIC Buffer로 접근 → Socket Buffer로 전송 → DB에서 처리 후 Socket Buffer로 전송 → NIC Buffer로 전송 → NIC Buffer에서 받기 → Socket Buffer로 전송 → WAS 추가 작업 진행  끝낸 후 Socket Buffer로 전송 → NIC Buffer로 전송 → 네트워크를 이용해 클라이언트에게 전송

✅ OS, WAS 같은 서버에 설치되어있는 경우 (DB Connection X)

클라이언트 요청 → NIC buffer → Application Buffer로 전송 → Socket Buffer로 전송 → NIC Buffer로 전송 → 네트워크를 이용해 클라이언트에게 전송

📝Zero Copy

맨 위에 설명한 OS, WAS, DB가 같은 서버에 있는 경우 WAS에서 따로 처리가 필요 없는 경우 Read Buffer를 바로 Socket Buffer를 이용하는게 좋다

굳이 Socket에 담을 필요 없이 NIC Buffer로 바로 보내면 더 성능에 이점을 가지게 된다 이럴 경우 Buffer에 담는 행위가 줄어들기 때문에 Copy의 과정이 Zero에 가까워진다

📝데이터 싸이언스 

데이터를 수집, 분석하고 이를 통해 의사 결정을 내리는 과정에 참여 → 통계, 머신 러닝, 데이터 시각화 등 다양한 기술과 도구를 사용하여 데이터를 이해하고 활용

📝풀스택 개발자

프론트엔드 및 백엔드 개발을 모두 다룰 수 있는 개발자를 의미하며 우리가 지향해야 한다

📝 DevOps (Development and Operations)

소프트웨어 개발과 운영을 통합하여 효율적이고 신속한 개발 및 배포 프로세스를 구축하는 역할을 수행 → 자동화, 지속적 통합 및 지속적 배포 (CI/CD), 인프라스트럭처 관리 등에 집중

📝임베디드 엔지니어

하드웨어와 소프트웨어를 결합하여 특정 장치나 시스템에 포함된 소프트웨어를 개발 → IoT 디바이스, 드론 등

📝알고리즘 엔지니어

복잡한 문제를 해결하기 위해 효율적이고 최적화된 알고리즘을 설계 및 구현

📝OS / LINUX 개발자

운영 체제 또는 리눅스 시스템의 커널, 드라이버 및 핵심 구성 요소를 개발

📝코딩언어 / Compiler 개발자

새로운 프로그래밍 언어를 설계하거나 기존 언어의 컴파일러를 개발 → 파이썬, C++ 개발 등

📝코드 스니펫

몇개의 글씨를 이용해서 축약시켜 놓고 사용하는 것을 코드 조각(Code Snippet)이라고 부르며 재사용 가능한 소스코드나 텍스트의 작은 부분이라고도 한다 간단히 말하자면 자동완성의 기능이다 요즘에는 우리가 사용하는 IntelliJ , Eclipse IDE 에 포함되어 있다 s라고만 쳐도 s로 시작되거나 중간에 포함된 자동완성 리스트들이 보여서 빠른 개발을 할 수 있게 해준다

📝Passport.js

회원가입과 로그인은 직접 구현할 수도 있지만, 세션과 쿠키 처리 등 복잡한 작업이 많으므로 검증된 모듈을 사용하는 것이 좋다. 서비스에 로그인할 때 아이디와 비밀번호(기본적인 로그인 방식) 이외에 구글, 페이스북, 카카오 같은 기존의 SNS 서비스 계정을 이용하여 로그인 하는데, passport모듈이 바로 여기에 사용되는 것 즉, 로그인을 구현하는데 도와주는 모듈이다

📝MDX

마크다운 파일에서 직접 JSX를 작성할 수 있는 마크다운의 상위 집합

📝Headless CMS

CMS란 Content Management System의 약자로, 콘텐츠 관리만을 위한 서비스이다. 

기존 CMS는 뷰와 콘텐츠가 결합되어 있지만 Headless CMS는 내가 원하는 기술스텍을 사이트로 구성 할 수 있다

대표적인 예로는 strapi라는 게 있는데 백엔드 구축를 쉽게 해주는 툴이다 (DB도 설치해주고 Rest API 생성 등...)

📝CSP (Content Security Policy)

XSS(교차 사이트 스크립팅), 클릭재킹 및 기타 코드 삽입 공격과 같은 다양한 보안 위협으로부터 애플리케이션을 보호하는 것

Apache 예제

<IfModule mod_headers.c>
    Header set Content-Security-Policy "directives here"
</IfModule>

Nginx 예제

add_header Content-Security-Policy "directives here";

Express 예제

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', 'directives here');
  next();
});

📝네트워크 워터폴

호출할 때 비동기적으로 호출되는게 아닌 순차적으로 폭포수가 흐르듯이 호출되는 걸 의미하는데 이럴 경우 소스에 따라 사용자가 화면을 볼 때까지 지연이 될 수 있다

🔗 참고 및 출처

https://velog.io/@seungchan__y/Suspense-%EB%8F%84%EC%9E%85%EA%B3%BC-Waterfall-%ED%98%84%EC%83%81-%ED%95%B4%EA%B2%B0%ED%95%98%EA%B8%B0#:~:text=%EC%88%98%20%EC%9E%88%EA%B2%8C%20%EB%90%98%EC%97%88%EB%8B%A4.-,%F0%9F%9B%9D%20Waterfall%20%EB%B0%9C%EC%83%9D,%EC%88%9C%EC%B0%A8%EC%A0%81%EC%9C%BC%EB%A1%9C%20%EC%9D%B4%EB%A3%A8%EC%96%B4%EC%A7%84%EB%8B%A4%EB%8A%94%20%EA%B2%83%EC%9D%B4%EB%8B%A4.

https://velog.io/@dung002/CSP%EB%9E%80

https://choonsik-lab.tistory.com/entry/코드-스니핏-Code-Snippet-이란
https://kaki104.tistory.com/809

https://velog.io/@holicholicpop/Strapi-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-Headless-CMS

📝em, rem

<style>
    .parent{
        font-size: 20px;
    }
    .child {
        font-size: 2em;
    }
</style>

<body>
    <div class="parent">
        parent
        <div class="child"> child</div>
    </div>
</body>



<style>
    .parent{
        font-size: 20px;
    }
    .child {
        font-size: 2rem;
    }
</style>

<body>
    <div class="parent">
        parent
        <div class="child"> child</div>
    </div>
</body>

em은 font-size와 밀접한 관련이 있는데 상위 태그의 font-size 기준으로 px이 계산 된다

parent가 20px이기 때문에 child는 40px이 되게 된다 이런식으로 계산하면 상위 태그의 px에 따라서 동적으로 변하기 때문에 상위가 바뀌면 하위를 건드릴 필요 없이 비율로 맞게 줄어들게 된다 

이러한 em 계산은 복잡하기 때문에 rem이라는 게 나온다 rem의 경우 기준이 상위태그가 아니라 HTML 전체에 적용된 px 기준으로 부모만 바꾸면 알아서 기준에 따라 조절이 됩니다

📝가변 폰트(글꼴)

기존의 가변 폰트는 em, rem 단위를 사용하여 브라우저 비율에 따라 글자 크기가 늘어나거나 줄어드는 폰트였는데 Adobe, Apple, Google, Microsoft 가 협력하여 폰트의 너비, 두께, 스타일마다 별도의 다른 파일을 사용하는 기존 폰트 대신 다양한 유형의 폰트를 단일 파일에 통합할 수 있는 OpenType 폰트 사양을 발전시킨 것으로  가변 폰트는 width(너비), weight(두께), slant(기울기) 등 폰트 별로 다양한 축을 가지고 있으며 이 축을 수치로 조정하여 원하는 스타일을 지정하고 조합할 수 있습니다

• Noto+Sans+KR:wght@200, Noto+Sans+KR:wght@200;300;500처럼 폰트나 폰트 굵기에 따라 파일을 여러개 다운 받는게 아닌 하나의 파일에다가 옵션을 줌으로 해당 폰트들을 사용할 수 있습니다

📝Sass, Scss

Sass는 CSS의 확장된 문법을 제공하는 스타일 시트 언어입니다

Sass는 기본적으로 Ruby 언어로 작성되었으며, Sass 파일은 .sass 확장자를 가집니다

하지만 Sass의 문법은 초기에 채택하기 어려운 부분이 있었기 때문에, 이에 대한 대안으로 SCSS(Sassy CSS)가 나왔습니다. 참고로 사용하려면 npm install과 같이 라이브러리 설치가 필요합니다.

Sass

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

Scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Scss (변수사용)

/** 변수 사용1 **/
$bgColor: red;

body {
  background-color: $bgColor;
  padding: 0;
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

/** 변수 사용2 **/
%alert {
  margin: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px dashed black;
}

.success {
  @extend %alert;
  background-color: green;
}

.error {
  @extend %alert;
  background-color: tomato;
}

변수를 사용해 재활용 및 가독성 증가

Scss (Nesting)

ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  gap: 10px;
  li {
    background-color: tomato;
    color: white;
    padding: 5px 10px;
    border-radius: 7px;
    &:hover {
      opacity: 0.8;
      a {
        color: gray;
      }
    }

    a {
      text-decoration: none;
      color: white;
      text-transform: uppercase;
    }
  }
}

Nesting으로 알아보기 쉽게 표현 가능 (너무 많아지면 가독성 떨어지긴 함)

Scss (mixin)

@mixin alert($bgColor, $borderColor) {
  background-color: $bgColor;
  margin: 10px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px dashed $borderColor;
}

.success {
  @include alert(green, blue);
}

.error {
  @include alert(tomato, white);
}

함수와 같이 만들어서 재활용성 및 가독성 증가

🔗 참고 및 출처

https://penguingoon.tistory.com/275

https://frontmulti.tistory.com/111

https://wit.nts-corp.com/2019/10/07/5686

📝Assets

이미지, 스타일 시트, 스크립트, 글꼴, 음악 파일 등과 같은 정적인 자원

📝직렬화(Serialization)

객체나 데이터 구조를 바이트 스트림으로 변환하는 과정을 의미합니다. 이 바이트 스트림은 파일에 저장하거나 네트워크를 통해 전송해 다른 시스템과 통신할 수 있게 한다

📝역직렬화(Deserialization)

직렬화된 바이트 스트림을 다시 객체나 데이터 구조로 변환하는 과정을 의미합니다. 역직렬화를 통해 저장된 데이터나 네트워크를 통해 전송된 데이터를 다시 원래의 객체나 데이터로 복원해 사용한다

📝오픈 그래프(Open Graph)

인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다

링크 공유 시 해당 웹페이지에 대한 정보를 내가 원하는 형식의 미리보기로 만들어서 공유하기가 가능하게끔 하는 것이다
SEO에 직접적인 영향을 주지는 않는다

하지만 오픈 그래프 태그를 사용했을 때 웹사이트의 사용자 유입, 전환률에 확실한 영향을 준다는 점에서 SEO 못지않은 큰 장점이다

📝사이트맵

크롤링 봇에게 크롤링 가이드를 주는 것

🔗 참고 및 출처

https://velog.io/@sweetpumpkin/Open-Graph-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

📝Content-Type

Content-Type은 HTTP 헤더의 일종으로, HTTP 메시지의 본문이 어떤 유형의 데이터인지를 나타내는 역할 어떤 데이터 형식으로 인코딩되어 있는지를 정의하며, 이를 통해 수신자(클라이언트 또는 서버)는 데이터를 올바르게 해석하고 처리할 수 있습니다 → Content-Type에 선언되는 MIME-TYPE인 것이다

📝MIME-TYPE

MIME Type은 데이터의 형식을 나타내는 식별자로, 주로 파일 확장자와 연관되어 사용 "text/plain"은 일반 텍스트 데이터를 나타내며, "image/jpeg"는 JPEG 형식의 이미지를 나타냅니다 MIME Type을 사용하여 클라이언트와 서버 간의 데이터 형식을 명시하는 데 사용되는 헤더입니다. 일반적으로 Content-Type 헤더는 MIME Type 정보를 담고 있습니다

📝application/x-www-form-urlencoded

HTML 폼(Form 태그) 데이터를 전송할 때 사용되는 기본적인 Content-Type이다

📝multipart/form-data

파일 데이터와 MIME타입을 같이 전송하는 방법으로 주로 사용되는 유형 → 파일 업로드에 많이 사용

form-data는 텍스트 데이터와 파일(이진데이터)를 모두 포함해서 보낼 수 있다 → <form enctype="multipart/form-data">

📝application/json

JSON 형식의 데이터를 전송할 때 사용

📝text/plain

텍스트 데이터를 전송할 때 사용됩니다. 주로 간단한 문자열이나 텍스트 문서를 전송할 때 활용

📝application/octet-stream

바이너리 데이터를 전송할 때 사용됩니다. 이미지나 동영상과 같은 바이너리 파일을 전송할 때 주로 사용

📝컴파일 에러 (Compile Error)

문법 오류(Syntax error)로 컴파일러가 이해할 수 없는 코드가 있을 때 발생하는데 IDE에서 이를 잡아준다 → 미리 잡아주기 때문에 매우 유용

📝런타임 에러 (Runtime Error)

컴파일은 성공했지만 실행파일을 실행하는 도중 발생되는 오류로 프로그램이 비정상적으로 종료

예) 무한 루프, divide by 0, 존재하지 않는 메모리 위치에 접근을 시도

📝논리 에러 (Logic Error)

컴파일, 실행에 성공했지만 의도하지 않았던 결과가 나오는 경우 알고리즘이 틀리기 때문에 안 나온 것이다 → 디버깅 필요

📝링킹 에러 (Linking Error)

흩어진 소스 코드들을 컴파일한 뒤 각자 연결할 때 어딘가에 선언되어 있는 파일이나 코드가 존재하지 않을 때 발생

예) 함수를 선언만 하고 구현하지 않았을 경우, 선언된 헤더 파일이나 다른 코드 파일이 존재하지 않을 경우(위치, 이름이 잘못됐을 경우)

📝Syntax Error

해당 프로그램 언어의 문법이 올바른가

📝Semantics Error

Semantics은 해당 프로그램 문장이 타당한가? (Out Of Bounds → 인덱스의 범위를 넘어선다.)

🔗 참고 및 출처

https://geukggom.tistory.com/241

📝Point To Point

보내는 사람이 큐를 통해서 메시지를 전달하면 받는 사람이 큐에서 하나씩 꺼내 읽는 방식으로 Point To Point는 서버끼리 연결한 1대1의 상태이다

📝메세징 시스템

메시지는 전송되는 정보의 블록이나 패킷을 의미한다 에를 들면 로그 데이터, 이벤트 메시지 등 API 로 호출할 때 보내는 데이터를 처리하는 시스템입니다

📝Kafka

기존 네트워크 방식은 Point To Point로 서버끼리 연결한 1대1의 상태인데 기능이 늘어나 서버가 늘어나고 각 서버끼리 연결이 많아질수록 복잡해지는 시스템을 가지고 있었다 이러한 네트워크에서는 문제점들이 아래와 같은 문제점들이 존재한다

1. 통합 / 중앙화된 정송 영역이 없음 → 연결이 갈수록 복잡하다
2. 문제가 발생했을 때 여러 시스템을 확인해야 한다 → 어디에서 장애가 일어났는지 문제 해결이 어려워진다
3. 연결된 시스템 마다 제각기 다른 방법으로 구현 될 수 있다 → 복잡도 증가

이러한 문제점들을 해결하기 위해 카프카 개발팀에서는 다음과 같은 목표를 가지고 있었습니다

1. 프로듀서와 컨슈머의 분리 → 역할 분리
2. 시스템 확장이 쉽게 만들기
3. End To End → 이벤트 / 데이터 흐름을 중앙에서 관리하는 방식

그래서 카프카는 pub/sub 모델을 기반으로 만들어진 메세징 시스템이 됩니다

카프카를 설명하기 위한 용어들이 있습니다

• Producer
  • 데이터를 생성하고 특정 토픽으로 전송하는 주체 → 메시지(요청 정보 + 데이터)를 카프카 시스템에 보내는 역할
• Kafka System (Kafka Cluter)
  • 중앙 메시징 시스템으로 메시지를 읽어서 요청한 곳에 보내는 역할 → 주문 시스템에서 주문했을 때(Producer) 해당 처리 시스템(Consumer)으로 보내는 역할
• Consumer
  • 특정 토픽에서 메시지를 소비하여 처리하는 역할 → 주문 시스템에서 주문 관련 정보를 DB에 넣은 후 다시 카프카로 전달
• PARTITIONS
  • 파티션은 메세지를 저장하는 물리적인 파일 → 사용자가 요청한 정보들을 의미 (N명이 요청하면 N개)
• Topic
  • 토픽은 메시지를 관리하는 주체로서, 비슷한 종류의 데이터를 그룹화하는 역할로 여러개의 파티션을 가질 수 있다 → 카테고리라고 생각하면 된다 "주문 시스템 처리 서비스"가 토픽이 될 수 있다
• Broker
  • 여러개의 토픽을 가지며 Kafka 그 자체라고 생각하면 된다
• Zookeeper
  • 브로커 간의 조율과 클러스터의 메타데이터 관리를 위해 Apache Zookeeper를 사용

• 동작 과정
  • 사용자 요청(Partitions)들이 들어오면 Producer로 전달하고 Kafka로 보낸 뒤 Topic에 맞게끔 큐에 쌓인다 그 뒤 역할에 맞게 Consumer로 보내 처리되는 형태이다

💗장점

• 확장성 → 수평 확장이 가능하다
• 래플리카 → 래플리카로 노드 장애나 데이터 손실에 안정적 운영이 가능
• pub/sub 구조 → 확장에 더 용이하다
• 배울 수 있는 환경이 넓음 → 생태계가 구성 됨
• 빠른 처리 → 카프카는 대량의 메시지를 빠르게 처리할 수 있으며  파티셔닝을 통해 데이터 분산 저장 처리해 높은 처리량

💗왜 빠른가?

• DISK I/O 최적화 → 세그먼트단위로 저장하며 순차적인 디스크 I/O가능하게 한다 [디스크 읽을 떄 이리읽었다 저리읽었다 하지 않음]
• 클러스터 구성 → 분산처리로 처리 능력 향상
• 메시지 배치 처리  → 네트워크 및 디스크 I/O 비용 감소
• Zero-Copy
• 토픽 파티셔닝 →  토픽 파티션 병렬 처리 지원

⚠️단점

• 시스템이 복잡하다
• 러닝커브가 필요하다
• 카프카는 대량의 데이터를 처리하고 저장하기 위해 상당한 자원이 필요 → 오버헤드가 발생할 수도 있음 (DISK I/O) → 프로듀서 정보, 래플리카, 컨슈머에서 DISK Read 등 많은 DISK I/O 발생

📝pub/sub 모델

• 중앙에 메시징 시스템 서버(카프카)를 두고 메시지를 보내고(publish), 받는(subscript) 형태의 통신이다
• 구독을 신청한 수신자만 메시지를 전달받을 수 있다
• 개체가 빠지거나 수신 불능이 되어도 메시징 시스템만 살아있으면 전달한 메시지가 유실될 가능성이 없다
• N:M으로 연결되는 게 아니라 확정성에 용이

카프카 적용 예제

📝Haddop

하나의 성능 좋은 컴퓨터를 이용하여 데이터를 처리하는 대신 적당한 성능의 범용 컴퓨터 여러 대를 클러스터화하고 큰 크기의 데이터를 클러스터에서 병렬로 동시에 처리하여 분산처리 저장하는 대용량 처리에 특화된 솔루션입니다

📝Hive

데이터 웨어하우스 기능을 제공하는 데이터베이스 시스템으로 SQL과 유사한 Hive Query Language (HiveQL)을 사용하여 대용량 데이터 세트를 쿼리하고 분석할 수 있습니다 (Hadoop 사용시 분산 저장되어있기 때문에 그걸 통합시켜주는 시스템)

📝Hue

Hadoop 클러스터와 연동하여 사용자 친화적인 웹 인터페이스를 제공하는 오픈 소스 사용자 인터페이스 (UI) 플랫폼

🔗 참고 및 출처

https://velog.io/@seungyeon/%EC%B9%B4%ED%94%84%EC%B9%B4-%EB%AC%B4%EC%97%87%EC%9D%B4%EA%B3%A0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%A0%EA%B9%8C

https://log-laboratory.tistory.com/144

https://www.google.com/search?q=kafka%20microservices%20architecture&tbm=isch&hl=en&sa=X&ved=0CCsQrNwCKABqFwoTCNifpJiRhIMDFQAAAAAdAAAAABB3&biw=1903&bih=931#imgrc=aOlkJWzaD1FuRM

https://victorydntmd.tistory.com/343

https://goneoneill.tistory.com/48

https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-Passport-%EB%AA%A8%EB%93%88-%EA%B7%B8%EB%A6%BC%EC%9C%BC%EB%A1%9C-%EC%B2%98%EB%A6%AC%EA%B3%BC%EC%A0%95-%F0%9F%92%AF-%EC%9D%B4%ED%95%B4%ED%95%98%EC%9E%90

https://choonsik-lab.tistory.com/entry/코드-스니핏-Code-Snippet-이란
https://kaki104.tistory.com/809

📝인코딩 체계

한국에서는 인코딩 체계는 크게 한글이 포함된 인코딩 코드표를 가지고 있냐 없냐로 나뉩니다 기본적으로 한글이 포함되면 영어 특수문자 등은 포함되기 때문에 신경 안 쓰셔도 됩니다

• 한글이 포함된 인코딩
  • UTF-8
  • UTF-16
  • UTF-32
  • EUC-KR
  • CP949
  • KSC-5601
  • 등...

📝화면의 글자가 깨지는 이유

• 해당 페이지의 인코딩 설정과 웹브라우저의 인코딩 설정이 다르기 때문에 일어납니다 간단히 이야기하자면 종이에 한국어가 적혀있는데 번역기가 영어로 번역해 보여주기 때문에 안 맞는 것입니다

JSP 예제

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>

JSP에서 EUC-KR로 페이지 설정을 해놨는데 웹브라우저에서 다른 언어로 읽으면 깨질 수 밖에 없습니다

📝파라미터로 넘긴 글자가 깨지는 이유 (GET)

• GET방식으로 요청시 글자가 깨져서 서버에 들어갔다면 위에 설명한 "화면의 글자가 깨지는 이유"가 있을 수 있습니다

간단한 예제를 한번 보시죠

<%@ page language="java" contentType="text/html; charset=EUC-KR"
	pageEncoding="EUC-KR"%>
<html>
<script>
var text = "가";
	
fetch("http://localhost:8080/reqServer?word=" + text, {
	  method: "GET",
	})
	.then(response => response.text()) // 응답을 텍스트로 변환
	.then(data => console.log(data)) // 응답 데이터 출력
	.catch(error => console.error(error)); // 오류 처리
</script>
<body>
	<h1>웹화면에 PDF 출력해보기</h1>
</body>
</html>

GET방식 통신을 이용해 word라는 키에 text를 담아서 보내고 있습니다 reqServer에서 로그를 찍었습니다. 웹브라우저의 인코딩 상태를 EUC-KR로 했을 때 결과는 "가" 입니다 KO18-U로 설정했을 때는 "╟║" 이상한 문자가 넘어갑니다. 자바스크립트에 적은 하드코딩 한글 때문에 그렇습니다 → 물론 input 박스로 받은 데이터는 잘 넘어갑니다

• URI Encode 설정이 UTF-8이 아닌 경우

이 부분에 대해서는 WAS서버가 역할을 해주는 경우가 많습니다 예를 들면 톰캣이 있겠습니다 server.xml 설정에서 URIEncoding 설정을 UTF-8이 아닌 다른 인코딩 체계로 되어있는 경우 GET방식 통신때 깨져버립니다

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443"/>

참고로 톰캣 9.0 부터는 기본적 Default가 UTF-8로 설정되어 있습니다

📝URLEncoding vs Encode

• URLEncoding
  • GET방식으로 호출할 때 "키=값"으로 데이터를 전달할 때 값에 한글 및 #, $, %, = 등... 특수문자가 들어가는 경우 비정상적으로 동작(예약어 동작 등...)할 수 있기 때문에 URL 인코딩 과정이 필요하다
• Encode
  • 데이터를 보내려면 해당 데이터를 이진데이터로 보내는데 UTF-8 체계를 따라 이진데이터로 만들지에 대한 설정을 합니다 간단히 이야기하면 데이터를 2글자씩 끊어서 보내는 것과 3글자씩 끊어서 보내는 느낌이다

📝POST 통신후 내려온 데이터가 깨진 경우

• MIME-TYPE이 일치하지 않아서 발생한다 즉, HTTP 통신시 Header의 Content-Type 불일치로 일어나게 된다
• Content-Type은 Request와 Response로 나뉘게 된다

아래는 POST 방식 통신에 대한 Request 예제입니다

fetch("http://localhost:8080/reqServer2", {
method: "POST",
headers: {
  "Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify(jsonData),
})
.then((response) => response.text())
.then((data) => console.log(data))
.catch((error) => console.error(error));

(application/json) json형식으로 읽어주세요 + (charset=utf=8)utf-8로 인코딩 되었으니 utf-8로 디코딩해서 읽어주세요

→ 이렇게 해야 백엔드(서버)에서 정상적으로 데이터를 받게 된다

아래는 POST 방식 통신에 대한 Response 예제입니다

Servlet 예제

@PostMapping(value = "reqServer")
public void server(@RequestBody HashMap<String, String> bodyVO, HttpServletResponse res) {

    /** 응답 헤더 설정**/
    res.setContentType("application/json; charset=EUC-KR");
    
    /** 응답 헤더 설정값으로 데이터를 화면에 그려준다**/
    PrintWriter out = res.getWriter();
    out.print(responseData);
}

Serlvet의 경우 이러한 형식으로 데이터를 반환해줍니다

Spring 예제

@PostMapping(value = "reqServer", produces = "application/json;charset=UTF-8", consumes = "application/json;charset=UTF-8")
@ResponseBody
public String server(@RequestBody HashMap<String, String> bodyVO){

  return bodyVO.get("word");
  
}

Spring의 경우 consumes랑 produces라는 옵션이 존재합니다 Request 와 Response의 Content-Type을 설정합니다

• consumes
  • Request 에 대한 Content-Type 설정 제한합니다 → 어차피 Request Hedaer는 Client에서 하기 때문에 해당 Content-Type외에는 호출 못하게끔 서버에서 막습니다
• produces
  • Response에 대한 Content-Type 설정을 해줍니다 이 부분에 따라 리턴에 대한 형태가 깨질지 안 깨질지가 결정됩니다

※ 웹브라우저 및 JSP인코딩 설정을 EUC-KR로하고 POST방식으로 EUC-KR로 데이터를 보낼 때 깨지는 경우가 있는데 내가 Input 박스 따위에 적은 값이 EUC-KR이 아니라 UTF-8이고 UTF-8이 EUC-KR로 인코딩되어 Request때 깨지는 경우도 있고 Response할 때도 EUC-KR로 내려준다고 선언했지만 실제로는 UTF-8이 EUC-KR로 인코딩 되어서 보내지기 때문에 깨져버리는 경우도 있다

📝결론

어떤 깨진 글자는 복구가 가능하지만 어떤 깨진 글자는 복구가 불가능합니다 예를 들면 移���이러한 글자는 아무리해도 복구가 불가능합니다 그렇기 때문에 주먹구구식 처리보다는 근본적인 원인을 파악하기 바랍니다

요즘은 거의 UTF-8을 기본적으로 두고 코딩하기 때문에 UTF-8로 맞춰준다는 생각을 하시면 됩니다 물론 프로젝트 특성이 EUC-KR이런 걸 쓰는 곳도 있겠죠