OCR

Optical Character Recognition 간단하게 사람이 눈으로 문자를 인식 하는것 처럼 컴퓨터가 문자를 인식하는 기술

가능한 이유!

이 이미지와 1이라는 이미지를 수천장 수만장을 학습을 한 후에 스스로 패턴을 인식하고, 스스로 생각을 하게 합니다! 이게 바로 딥러닝 학습덕분이죠

학습 방법

사람

사람 눈 → '1' 라는 글자로 인식

컴퓨터

컴퓨터  → 픽셀 숫자값 (0~255) 로 인식 패턴 분석해서 '1' 라고 판단

지금은 간단하게 정리만하고 활용 예제나 작업을 하면서 했던 기술들 정리해서 다음글에서 뵙겠습니다! 글 읽어주셔서 감사합니다 :)

Git

공식 사이트

https://git-scm.com/

설명

프로젝트에서 사용되는 버전을 분산시켜 컨트롤 할 수 있는 시스템이라고 공식 사이트에 나와 있습니다. 고급언어와 관련된 런타임 오버 헤드를 줄였으며, 모든 프로젝트 암호화 하여 무결성 유지 하고 있습니다.

Git 은 리눅스 커널에 작동되면 C 언어로 만들어 졌습니다.

개념

공식 사이트 개념 설명 영상 중

하나의 프로젝트에 다양한 직군과 다양한 작업을 동시에 작업을 할 수 있으면 시간 별로 Tracking을 남기며 각 commit 한 기점으로 작업을 merge 하거나 rollback 할 수 있다

공식 사이트에 proGit 이라는 책을 제공해주네요 취직하면 꼭 한번 읽어봐야지.. 색인부분에 github,gitLab 도 보이고 gitWeb라는 것 도 있네요.

기본 명령어 및 설명

https://git-scm.com/docs/gittutorial

GitHub 깃허브

깃헙 개발자 직군 뿐만 아니라 다양한 직군분들도 한번쯤 들어 봤을 만한 깃허브 저도 학생 때는 깃헙을 많이 사용하지 않았는데 협업을 하면서 프로젝트 관리도 힘들어서 깃허브를 사용함으로 많이 유용하고 느끼고

공식 사이트

https://github.com

공식 문서

Git 과 GitHub 관계

GtiHub는 코드를 저장하고 공유하고 다른 사람들과 함께 코드를 작성 할 수 있는 기반 플랫폼이다. GitHub에 파일을 업로드 하면 파일을 Git 리포지토리에 저장을 하고, GitHub에 파일을 변경하거나, 커밋을 Git에서 변경 내용을 자동으로 추적하고 관리를 한다.

• Git은 원격장소 역할이고 GitHub는 공유하는 온라인 플랫폼이다.
• Git 기반으로 동작하고, 이슈 및 리뷰 등 다양한 지원을 한다.

참고 https://docs.github.com/ko/get-started/start-your-journey/about-github-and-git

GitLab

공식 사이트

https://about.gitlab.com

GitLab 공식 사이트 설명 중 GitLab 버전 관리 프로젝트 관리를 도와준다고 한다. 전체 적인 내용은 DevOps에 특화된 서비스 처럼 보인다. 깃허브를 대체 할 수 있고, 젠킨스도 대체할 수 있다고 나와 있다고 한다.

흠.. 이러면 GitHub랑 뭔 차이지? 라는 생각을 했다.

GitLab 파이프 라인

GitHub vs GitLab

작성자 생각은 GitHub와 GitLab은 둘 다 Git 소프트웨어 기반 서비스 이고 GitHub는 협업 중심에 서비스와 커뮤니티를 중점으로 하고 GitLab은 인프라 적인 관점으로 배포 와 성능 튜닝을 중점을 둔거 같다. GitLab은 중앙서버를 회사 측에서 가질 수 있으며, GitHub는 중앙서버가 GitHub이다.

후기

다 써봐야 차이점을 정확하게 알 수 있을 거같다.. GitLab은 한국어 지원이 안되네요 ㅠㅠ

프로젝트 구조에서 프론트엔드는 React, 백엔드는 Spring으로 REST API를 구현하고 있다. 일반적으로 이미지를 업로드하면 front → back → server 흐름으로 서버에 저장된다. 하지만 React는 빌드된 상태에서 public/ 디렉토리 안의 정적 파일만 접근할 수 있다. 따라서 업로드된 이미지를 전부 public/에 넣는 방식은 프로젝트가 무거워지고, 관리 또한 어렵다. 이 때문에 이미지를 서버 디렉토리에 따로 저장하고, Nginx를 이용해 정적 파일을 서빙하는 방식을 많이 사용한다. AWS 환경에서는 S3가 이런 정적 파일 관리 역할을 대신한다.

방법

Nginx

server{
    # ssl 인증 443 내용


    location /img {
    alias 이미지 디렉토리/; 
    }
}

location 블록 접속 경로 alias URL 경로를 실제 디스크 경로와 연결

Test

$sudo nginx -t  #nginx 테스트 
$sudo systemctl nginx reload # nginx 재 설정 

결과

짜잔 ~

글 읽어 주셔서 감사합니다! :)

https 접속을 하기 위한 인증

http 와 https 차이점

http(Hypertext Transfer Protocol)

네트워크 통신 모델의 애플리케이션 계층 프로토콜로, 웹에서 데이터를 주고받는 기본 규약이다. 클라이언트는 서버에 GET, POST, PATCH, DELETE 등 다양한 메서드로 요청을 보내며, 이때 요청과 응답은 평문(plain text) 으로 전달된다. 따라서 제3자가 네트워크를 엿보면 요청 URL, 헤더, 본문 내용까지 그대로 볼 수 있다. 요청의 결과는 200 OK, 404 Not Found, 301 Redirect 같은 상태 코드로 표현된다.

https(Hypertext Transfer Protocol secury)

HTTP 위에 TLS/SSL 계층을 덧붙여 보안을 강화한 프로토콜이다. HTTP가 평문으로 데이터를 주고받는 반면, HTTPS는 암호화된 통신 채널을 통해 데이터를 주고받아 기밀성(Encryption), 무결성(Integrity), 인증(Authentication) 을 보장한다. 또한 최신 HTTPS는 보통 HTTP/2나 HTTP/3와 결합되어, 텍스트 대신 바이너리 형식으로 데이터를 교환하여 전송 효율과 성능까지 개선한다. 즉, HTTPS는 단순히 데이터를 주고받는 것뿐만 아니라, 통신 과정에서 SSL 인증서를 통해 서버의 신원을 확인하고, 중간자 공격이나 데이터 탈취를 막아 안전한 웹 환경을 제공한다.

왜 ? ? ? https 를 사용해야하나 ?

보안

• HTTP 평문 전송이라 도청·위변조 위험 있음.

• HTTPS 모든 데이터를 암호화해 신용카드·개인정보 같은 민감한 정보 보호에 안전.

  신뢰

• 검색엔진은 HTTPS 사이트를 더 신뢰해 검색 순위(SEO) 에서 유리함.

• 브라우저도 HTTPS에 🔒 아이콘을 표시해서 사용자 신뢰도를 높여줌.

성능 & 분석

• HTTPS는 HTTP/2, HTTP/3와 함께 더 빠르게 동작함.

• 또한 트래픽 출처(추천 링크, 광고, 소셜 미디어 등)를 정확히 분석할 수 있어 마케팅/SEO에 중요.

SEO 최적화.. 중요하죠 검색엔진에 상단에 출력해야 하니깐요. 네이버 서치 어드바이저 등 공식 문서 확인했던게...

자 자 설명은 그만하고

Nginx SSL 인증

HTTP-01 챌린지.

1. 클라이언트(certbot)가 토큰 파일 생성

2. Nginx/Apache가 해당 파일을 서비스

3. Let’s Encrypt 서버가 http://도메인/.well-known/acme-challenge/토큰 요청

4. 파일이 정상 응답되면 도메인 소유권 인증 완료 → SSL 인증서 발급

ubuntu 18 버전 이상시 python3 로 대체 되었습니다. 이거 꼭 버전 확인해주세요

certbot

https://certbot.eff.org/

현재 certbot 에서 snap 이랑 pip 방식만 권장하고있어 apt 는 공식문서에 없었습니다. apt 방식이면 글 참고 해주세요!

install $ apt-get update $ sudo apt-get install certbot $ apt-get install python3-certbot-nginx

인증서 생성 $ sudo certbot --nginx -d example.com -d www.example.com

두 도메인 관련 nginx 추가 되었는데 방식이 맘에안들어서 조금 수정하겠습니다.

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name example.com www.example.com;

    location /.well-known/acme-challenge/ {
        root /var/www/html;
    }

    return 301 https://example.com$request_uri;
}

server {
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;
    server_name example.com www.example.com;

    ssl_certificate     /etc/letsencrypt/live/example.com/fullchain.pem;   # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;     # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf;                       # managed by Certbot

    location / {
        proxy_pass http://127.0.0.1:3000;  #proxy_server
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For                           $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Forwarded-Host  $host;
        proxy_set_header X-Forwarded-Port  443;

        proxy_redirect http:// https://;
        proxy_buffering off;
    }

}

참고 글 https://nginxstore.com/blog/nginx/lets-encrypt-%EC%9D%B8%EC%A6%9D%EC%84%9C%EB%A1%9C-nginx-ssl-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0/

글 읽어주셔서 감사합니다

Nginx가 나오는데 왜 Nginx가 나왔고 동작원리 및 여러가지에 이점이 있어서 아직도 사랑 받고 있을까 부터 생각했습니다!

Nginx,Apache,Tomcat

백엔드를 공부 하다 보면 Tomcat,Apach 는 많이 들어 봤을 거다.

이들의 동작 방식을 정리하면 왜 nginx를 공부해야하는지 알고 잘 알 수 있을 수 거 같다.

Tomcat

tomcat은 WAS(Web Application Server),servlet container 라고 부르는곳이 있다고 한다. 기본 포트 8080포트 사용

JSP,Servlet container에 대한 동적인 웹 페이지를 처리한다.

1. Client 요청

• 클라이언트가 /login 이라는 요청을 날린다.
• http 프로토콜은 tomcat 한테 전달 됨

2. Tomcat mapping을한다.

• Tomcat 에서 클라이언트가 보낸 요청에 맞는 servlet 를 찾아 매핑

3. Controller(Servlet)

• 해당 servlet이 생된다.
• servlet 에 맞는 service 로직 실행

4. Response 응답

• service 로직에서 실행된 결과를 response 객체에 담아 jsp 에 전달된다.

5. JSP

• response 객체를 받아 html를 동적으로 구성한다.

Apache

정적 웹 서버(웹서버)HTML, CSS, JS, 이미지 같은 정적 파일처리,프록시 역할

1. 사용자 http://naver.com 요청
2. 80,443(http->80, https->433) 받고 8080으로 Proxy 한다.
3. Tomcat 에 server.xml 설정으로 connector 에서 8080설정이면 모든 8080포트에 대한 설정을 인식한다.
4. tomcat 실행

Apache + Tomcat

Nginx

정적 웹 서버(웹서버)HTML, CSS, JS, 이미지 같은 정적 파일처리,프록시 역할

이러면 단순히 Nginx 와 Apache 가 뭐 가 다르지? 이렇게 느낄수 있다.

Nginx 동작 원리에서 장점을 찾아 볼 수 있다.

worker 보단 process 가 조금 더 자연 스럽겠네요

Master

클라이언트의 요청에 따라 worker 에 작업을 할당합니다. 작업이 워커에 할당되면 마스터는 클라이언트의 다음 요청을 기다리지 않고 대기한다. worker로부터 응답이 오면 마스터는 클라이언트로 응답을 전송합니다.

worker

각 Worker 는 단일 스레드 방식으로 한 번에 1,000개 이상의 요청을 처리할 수 있습니다. 프로세스가 완료되면 응답이 마스터로 전송된다. 단일 스레드는 서로 다른 메모리 공간 대신 동일한 메모리 공간에서 작업하므로 RAM과 ROM 크기를 절약할 수 있다. 멀티 스레드는 서로 다른 메모리 공간에서 작업한다.

Cache

Nginx 캐시는 서버 대신 캐시 메모리에서 데이터를 가져와 페이지를 매우 빠르게 렌더링하는 데 사용된다. 페이지는 첫 번째 요청 시 캐시 메모리에 저장한다

Apache vs Nginx

둘 다 정적으로 처리하고 프록시도 제공하고 뭐가 다르냐 흠 ??

Apache 동기, Nginx 비동기

물론 Apache에 동작 방식이 요청 한개당 하나의 process 가 먹는게 옛 방식이긴 하지만 그것 때문에 Nginx 가 등장했고 웹 서버가 점점 발전해 간다!

글 읽어주셔 감사합니다 :->

Nginx

설치

sudo apt udpate 
sudo apt install nginx

보라색이 디렉토리이고 흰색이 파일입니다!

디렉토리

conf.d

메인 설정파일(nginx.conf)로 Nginx가 로드 될때 디렉토리 내의 모든 .conf파일을 추가 설정 파일로 인식하고 불러와 로드하는 역할을 한다.

modules-enabled

NGINX 모듈들의 설정 파일이 모여 있는 곳

modules-available

실제로 활성화된 모듈 목록

modules-available에 있는 파일을 여기에 심볼릭 링크로 걸면 모듈이 켜짐.

sites-enabled

site-abailable 에서 만든 사이트를 site-enabled/에 추가해야 활성화 됨. site-available에 추가한 사이트를 site-enabled/에 심볼릭 링크하여 사이트를 활성화 할 수 있습니다.

sites-available

사이트 설정 파일이 들어 있는 곳 nginx에서 관리되는 호스트 정보

snippets

공통으로 자주 쓰는 문구을 모아두는 폴더 사이트별 설정에서 필요한 부분을 include 할수 있게 모듈화 하는곳 이거는 뒤에 포스팅에 자세히 보여드리도록 하겠습니다!.

심볼릭 링크 : 링크를 연결하여 원본 파일을 직접 사용하는 것이다. ex) 웹 naver 아이콘 ** **호스트 : 네트워크에 연결 된 컴퓨터 ex) localhost,127.xxx.xxx.xxx

파일

nginx.conf

Nginx가 구동할때 가장 먼저 읽고 구동하기 위한 메인 파일

proxy_params

프록시할 때 공통으로 필요한 헤더(Host, IP, 프로토콜 등)를 정리한 파일

Proxy : NGINX가 80/443에서 요청을 받고, 내부의 Spring 서버(기본 8080) 로 프록시(넘겨주기)

다음 하나하나 폴더 및 파일을 뜯어보면서 정리하겠습니다!

글 읽어 주셔서 감사합니다! :)

Nginx

공식 사이트

https://nginx.org

NGINX(“엔진 엑스”)는 HTTP 웹 서버이자, 리버스 프록시, 콘텐츠 캐시, 로드 밸런서, TCP/UDP 프록시 서버, 그리고 메일 프록시 서버

만든 사람은 아르고 시쇼이브? 라고 나와 있네요

리버스 프록시·로드밸런서·캐시 서버로 동작하는 오픈소스 소프트웨어 

웹 서버

클라이언트가 웹 정적 파일(html,css,js,이미지)을 응답 해주는 역활

• 요청마다 스레드를 새로 만드는 게 아니라, 이벤트 루프(Event Loop) 하나가 수천~수만 개 요청을 동시에 관리한다.

• 논블로킹 I/O 기반 → 한 요청이 파일 읽기/네트워크 응답을 기다리는 동안 다른 요청도 병렬로 처리 가능하다,

리버스 프록시

사용자의 요청을 받아서 내부 애플리케이션 서버(SPRING, Node.js 등) 로 전달하고, 응답을 다시 사용자에게 반환함

• 도메인 접근하면 -> ip로 접근한다 이걸 nginx 받아 서버에 전달한다 해서 보안에서 이점을 볼 수 있다.

• 필요에 따라 기술 스택이 여러가지인 경우 서버를 여러개 놔야할때가 있다. 이런경우 nginx 하나의 도메인으로 여러가지 서버를 통합할수있다.

콘텐츠 캐시

자주 요청되는 정적 자원이나 응답 결과를 캐시에 저장해 두었다가, 다시 요청이 오면 원본 서버로 가지 않고 캐시된 데이터를 바로 제공한다.

• 서버 부하가 적어짐

• 속도 향상

로드 밸런서

클라이언트에 요청이 많을 경우 서버를 분산해서 서버가 죽는걸 방지한다.

• 사용자에게 안정적인 서비스를 제공

SSL/TLS 인증

간단히 말해, SSL은 구버전, TLS는 그 업그레이드된 최신 버전이며, HTTPS는 이를 기반으로 한 보안 통신 방식입니다. 만약 HTTP만 사용하면 클라이언트와 서버 간 메시지가 평문(암호화되지 않은 원본 데이터) 으로 전달되어 보안에 취약합니다. 반면 HTTPS를 사용하면 데이터가 암호화된 상태로 전송되므로 도청이나 변조를 방지할 수 있어 훨씬 안전합니다.

글 읽어주셔서 감사합니다! :)

설치

npm install mysql2 # mysql 다운로드

연결

mysql.createPool()

pool를 사용해서 클라이언트 요청때마다 DB가 연결/끊기가 반복 되면 상당한 리소스가 사용됨으로 그래서 일정한 connection 을 미리 만들어서 재사용 한다.

• 성능향샹의 도움 됨

mysql.createPool() 사용 방법

const mysql = require('mysql2/promise');

const pool = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'db',
    waitForConnections: true,
    connectionLimit: 10,
    queueLimit: 0,
    }
)

waitForConncetions

연결이 다 차 있을 때, 새로운 연결 요청을 어떻게 처리할지 결정 true → 기다린다 (큐에 넣고 대기) false → 바로 에러 발생 (ER_CON_COUNT_ERROR)

connectionLimit

동시에 DB 연결 허용 한번에 요청까지 허용한다.

queueLimt

connectionLimit에 허용한 connection이 넘어가면 대기 수 0 은 무제한

예시

우리가 박재범 콘서트를 티켓팅 한다고 가정해봅시다.
사용자가 한 번에 엄청난 connection을 요청하면 서버에 갑자기 큰 부하가 생기게 됩니다.

이때 connectionLimit을 1000명으로 설정하고,
queueLimit을 0(무제한 대기)으로 두면,
처음 1000명은 바로 DB에 연결되고,
그 외 인원은 connection이 가능해질 때까지 기다리게 됩니다.

이렇게 하면 서버가 한꺼번에 죽지 않고 안전하게 connection을 관리할 수 있습니다.
다만 서버에서도 DB 서버에 직접 접근하기 때문에, 성능/부하 관리에 유의해야 한다!

query 사용 및 테스트

const pool = require('../config/mysql');
// insert query
pool.query('insert into users(email,password,name,created_at) values(?,?,?,now())',[email,password,name])

// select query
const [rows]=pool.query('select * from users')
res.render('signup', { users:rows});
// select 결과를 rows 객체 배열에 담에 전송

결과

다음 글에선 회원가입/로그인 로직구현 및 session으로 user 상태 관리하고 간단하게 password만 암호화 처리 하겠습니다! :)

Express

개념

Node.js 기반의 웹 애플리케이션 프레임워크, node.js 에서 http 서버를 직접 만들 수 있지만 코드가 길어지고 불편함 때문에 많은 곳에서 채택함

express (x)

const http = require('http');
const url = require('url');

const server = http.createServer((req, res) => {
  const parsedUrl = url.parse(req.url, true);

  if (req.method === 'GET' && parsedUrl.pathname === '/users') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ message: "User list" }));
  } else if (req.method === 'POST' && parsedUrl.pathname === '/users') {
    res.writeHead(200, { 'Content-Type': 'application/json' });
    res.end(JSON.stringify({ message: "User created" }));
  } else {
    res.writeHead(404, { 'Content-Type': 'text/plain' });
    res.end("Not Found");
  }
});

server.listen(3000, () => {
  console.log("Server running at http://localhost:3000");
});

exrpess (o)

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

app.use(express.json()); // JSON 파싱 미들웨어

// GET /users
app.get('/users', (req, res) => {
  res.json({ message: "User list" });
});

// POST /users
app.post('/users', (req, res) => {
  res.json({ message: "User created" });
});

// 404 처리
app.use((req, res) => {
  res.status(404).send("Not Found");
});

app.listen(3000, () => {
  console.log("Express server running at http://localhost:3000");
});

아키텍처

출처 : MDN https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes

1. 클라이언트가 /user,/login,/signup 등 요청을 보낸다.
2. Routes 가 받아 Controller 매핑 해주는 역활이다.
3. db 에 접근해서 읽고 쓰기를 한다.
4. Controller에게 다시 보내주며 응답에 view 를 꾸며준다.

사용방법

mdn 공식문서

// wiki.js - Wiki route module.

const express = require("express");
// express import
const router = express.Router();
// express 참조해서 Router 가져옴
// Home page route.
router.get("/", (req, res) => {
  res.send("Wiki home page");
});
// 리소스 "/" 접근해서 req = request, res = response 
// 응답을 보낸다 "wiki home page"

// About page route.
router.get("/about", (req, res) => {
  res.send("About this wiki");
});

module.exports = router;

인텔리제이 기본 세팅

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});


module.exports = router;

의문점 🤔

쓰는것은 비슷해보이는데 render 와 send 는 무슨 차이일까 ?

send 와 render 차이점

그래서 view가 있는 인텔리제이에서 render를 사용했구나!

글 읽어주셔서 감사합니다! : )

.idea

인텔리제이에서 만들어서 idea 디렉토리가 생겼네요 다른 툴마다 다 다름

bin

• www 파일에 서버관련 실행 및 내용이 있음

서버 실행시 app.js 파일을 가져와서 실행

public

정적 파일 관리 해주는곳 java에서 resouces/static 와 비슷함

routes

리소스(URL 요청)에 대한 로직을 처리하는 부분 spring에 controller 와 비슷함

views

서버에서 동적으로 HTML을 만들어 클라이언트에 응답할 때 사용 spring 에서 WEB-INF/views (JSP) 비슷함

app.js

Express의 메인 설정 허브

• 미들웨어 등록
• 뷰 엔진 설정
• 라우터 등록
• 에러 처리

package.json

전에 npm 명령어로 내가 다운받은 의존성과 실행 명령어문 등 있음 spring에서 build.gradle,pom.xml 비슷함

용어 정리

모듈(Module)

코드를 단위 처럼 쪼개진것 ex) 우리가 header 및 footer 처럼 다른 페이지 파일을 가져다가 쓰는것

npm (Node Package Manager)

node 에서 공식적으로 지원하는 패키지 관리

미들웨어(Middleware)

Express에서 요청(req)과 응답(res) 사이에 실행되는 함수

라우팅(Routing)

클라이언트 요청 즉 리소스(URL)에 대해서 기능을 정의하는것

콜백(Callback) / 프로미스(Promise) / async/await

• Callback: 비동기의 가장 기본 (구식, 지옥 발생)

• Promise: 체계적인 비동기 관리 (then/catch)

• Async/Await: 가장 현대적인 방식, 코드가 깔끔

이벤트 루프(Event Loop)

요청이 들어오면 바로 응답하지 않고, 이벤트 큐에 넣고 나중에 처리

차후 아키텍처로 자세히 글을 작성할 예정

Express

프레임 워크 이며 라우팅, 미들웨어, 요청/응답 처리 기능을 제공

react 를 공부하면서 조금 씩 찾아봤던게 많아서 다행이네요

글 읽어 주셔서 감사합니다. :) 오늘도 파이팅 bb 다음 글에선 어제 실행만해본 node.js에 디렉토리 구조를 작성하겠습니다.

인텔리제이

1. Express
2. view Engine EJS
3. create 클릭

실행

일단 된거 같네요!

글 읽어주셔서 감사합니다 :)

Node.js 란

확장자가 js 이며 V8엔진 기반으로 javascript로 서버 런타임 환경을 구축 한다.

장점

1. 높은 처리량(Throughput)

• 논블로킹 I/O + 이벤트 루프로 I/O-bound 트래픽을 매우 효율적으로 처리한다.
• 컨텍스트 스위칭이 적고 콜백/프로미스 기반으로 동시 연결을 가볍게 유지한다.

2. 확장성(Scalability)

• 단일 이벤트 루프 + libuv 스레드풀 구조로 많은 동시 요청을 처리합니다.

3. 풍부한 모듈 생태계(npm)

• 세계 최대 규모의 패키지 레지스트리로, 필요한 기능을 빠르게 도입 가능.
• 커뮤니티 기여가 활발해 업데이트/대체재 선택 폭이 넓음. (패키지 품질·보안 검증은 필수)

4. 빠른 개발 속도

• 프론트/백 모두 JavaScript/TypeScript로 통일 - 이거 좋은듯 ㅎㅎ
• 비동기 기본기가 언어/런타임에 녹아 있어 네트워크/파일 I/O 로직이 간결합니다.

5. 생산성 도구 & 프레임워크

• Express / Nest로 웹 API를 신속하게 구축.
• Mongoose/Prisma 등으로 DB 상호작용 단순화.

단점

1. 비동기 처리로 callback 지옥

Node.js는 비동기 처리 아키텍처 덕분에 빠른 응답이 가능하지만, 콜백 함수가 중첩되는 ‘콜백 지옥(Callback Hell)’ 문제가 발생할 수 있다. 이는 코드의 가독성과 유지보수를 어렵게 만든다.”

2. 메모리 누수 - 단일 쓰레드

• java JVM 내부에 GC 에서 메모리 상태를 관리해주는다.
• node 런타임 자체가 가볍고 단일 스레드 구조라, 대규모 메모리 관리에는 한계가 있다

후기

java로만 spring 프레임워크만 개발하다 node공부하면 리팩토링 빨리 하고싶단 생각에 심장이 뛰네요!!

글 읽어주셔서 감사합니다 :)

룰루랄라 이제 방화벽도 해결했고 서버도 잘 올라가고 postman으로도 요청이 잘 올라가네 이러고 저장을 할려고했는데 .. Post로 저장하는걸 요청했는데 오류가 떠서 후다닥 프로젝트 폴더 들어가서 tail -f app.log 로 내가 실행 한 내용보는데 허가 불가가 뜬다... ㅠㅠ

조금 찾아보니 프로젝트가 이미지를 저장할려는데 opt 아래 디렉토토리는 쓰기 권한이 root계정만 권한 만 접근가능하다고 하네요 ... 이것도 모르고 설정 먼저 안하고 후다닥 log 부터 확인

초긍정 마인드..

뭐 이참에 리눅스 명령어도 더 공부하고 조금 더 알아서 리눅스 마스터 때 편하게 시험보면되겠죵!

리눅스 디렉토리

사진 출처 https://jinwoo1990.github.io/dev-wiki/linux-directory/

/bin

이름에서 알 수 있듯이 binaries 디렉토리로 이전 파일로 기본적인 명령어가 저장되는 디렉토리이다. 우리 사용하는 명령어가 /bin 디렉토리에 저장되어 있다

/sbin

system + bin 디렉토리로 이것 또한 bin 폴더 랑 별개로 시스템과 관련된 명령어어가 저장되어있다.

/home

우리가 접속을 하게 되면 사용자 별로 계정이 있을 것이다. 그러면 /home/guestA, /home/guestB 안에 개별 폴더를 사용해서 권한을 설정해 서 접속하고 작업하는게 원칙이다

/tmp

임시 파일을 저장하기 위한 디렉토리, 재부팅시 삭제되며정기적을 10일 정도 간격으로 삭제된다.

/lib

라이브러리 디렉토리로 OS 커널에 필요한 라이브러리 파일, 커널 모듈이등이 존재한다.

/usr

사용자 들이 사용하는 디렉토리이다.이러면 /home/geust 랑 뭔차이인가 ? 하면 접속 하는 모든 사용자들이 사용가능한 폴더 이다 특정 사용자랑은 조금 다른 특성이다.

/var

var 기타 모든 다용도로 사용 할 수 있으면 웹 서버 이미지 등을 사용가능하다. 전역으로 사용가능하다.

다른 글들 많이 찾아보니까 var 에 이미지를 저장하더라고요 ㅎㅎ;; 작성자는 이글 작성하다가 properties 내용변경하고 var 하위 디렉토리를 만들었다는 사실..

권한 변경

소유권 vs 파일 권한

소유권 (chage+owner)

chown [옵션] [새로운소유자][:새로운그룹] 대상파일/디렉토리
sudo chown yohan app.log 
#app.log 를 소유자를 yohan으로 변경 

파일 권한 (chage+mode)

chmod [옵션] [권한] 대상
chmod rw------- ~/Desktop/rsa_id 
# 이거는 aws 썻을때 .pem 키 받았을때 봤던거 같네요 ㅎㅎ

대상

u: user 소유자 g: group 그룹 o: others 기타 사용자 a: all 전체 (u+g+o)

연산자

+: 권한 추가 -: 권한 제거 =: 권한 지정

권한

r: read 읽기 w: write 쓰기 x: execute 실행

예시

chmod u+x /tomcat/bin/start.sh
# user 에게 tomcat/bin 폴더에 start.sh 스크립트 실행 권한 줌

CD 세팅

준비 사항

깃허브 아이디 및 리포지토리 서버 접근 키 → ssh key (접속 권한 필수) 빌드된 프로젝트 → jar 또는 war 파일

명령어

프로젝트 올릴 때 → scp 서버 접속할 때 → ssh 실행할 때 → java -jar xxx.jar 서버 → 배포 환경이 준비된 Ubuntu 리눅스 서버

1. github 세팅

• 리포지토리 setting Secrets and variables

이런 창이 나올텐데 new Repository secret 클릭!

• APP_PATH : 프로젝트 경로
• SSH_HOST : 서버 public IP
• SSH_KEY : 서버 접근 키 (SSH 키)
• SSH_USER AWS EC2 → ubuntu 집 리눅스 서버 → 네 계정 이름

서버 접근할때 명령어 ssh -i @

이거를 어떻게 가져올까 ?

참고 https://docs.github.com/ko/actions/concepts/workflows-and-actions/workflows 2 번에 일단 .github/workflows라고 파일들을 찾을 수 있다고 하네요

생성하면 , 일단 인식을 잘하는거 같네요 ㅎㅎ

yml로 작성 해야해서 킹 받긴한데 뭐 가이드라인이 이러는데 어떻게 하겠어요 ㅠㅠ

on : 트리거 -> 내가 어떤 작업을 할때 작동됨 push : git에서 push 를 할때 branches : 지금 브랜치 대부분 개발단계랑 main이랑 사용됨 저는 main 만 할꺼에용! -> git push origin main 일때 트리거 발동

빠르게 세팅 하고 최적화 해서 포스팅 이어가겠습니다.

CI(Continuous Integration)

지속적인 통합

왜 CI 가 필요 할까 ? 대부분 깃허브(통합 저장소)를 사용해서 다른 브랜치를 통해 서로가 만든 코드를 dev(개발 단계), main(실제 서비스 단계) 브랜치로 관리하고 조금 더 세분화 시키면 내가 짠코드는 yohan이라는 브랜치에 코드를 저장한다.

이때 서로 다른 브랜치 병합(merge) 하는 과정에서 문제가 많이들 발생한다. 이것을 방지 하고자 CI 파이프라인이 사용된다.

그리고 또한 모든 커밋 과정에서 테스트 실행으로 코드 품질에 유리하다. 이렇게 테스트 실행시 실패하면 빠르게 오류를 수정 할 수 있고 동기화된 코드를 공유 하는것이 장점이다.

장점

1. 코드 품질 보장
2. 개발 속도 향상
3. 서비스 안정성 확보

   CD(Continuous Delivery)

   지속적 배포

   위에 CI가 코드 품질을 보장하는 단계라면, 이제 남은 건 이 코드를 실제 서버에 올리는 일이다. 사실 예전에는 우리가 scp 명령어나 직접 ssh 접속해서 build 하고 배포해야 했다. 이 과정은 시간도 오래 걸리고 실수 위험도 크다.

이 문제를 해결하기 위해 CD 파이프라인을 사용한다. CD를 통해 테스트까지 끝난 코드를 자동으로 서버에 배포할 수 있다. 사람이 일일이 서버에 들어가지 않아도, 코드가 검증되는 순간 바로 서비스에 반영되는 것이다.

장점

1. 배포 자동화
2. 실수 최소화
3. 빠른 배포
4. 안정성 확보

CICD 개발도구

AWS, Jenkins, gitAction 3가지 개발 환경에 따라 자기에 맞는 도구를 선택하시면 될거 같습니다! 저는 aws를 사용하지 않고 리눅스로 서버 구축및 포트포워딩도 해놓은 상태라서 gitAction 을 사용해서 CICD 구축을 진행하겠습니다!

솔직히 예전 프로젝트 때는 CI/CD를 구축하지 않고 진행했다. 그래서 새벽 2시 30분부터 4시 반까지 서버에 코드를 직접 올리고, 항상 쓰던 scp 명령어와 tomcat의 bin 폴더에서 ./start.sh를 실행해야 했다. 이 과정을 반복하다 보니, “아… 이게 바로 자동화가 필요한 이유구나” 하고 뼈저리게 느꼈다. 뭐! 이전 프로젝트때 노가다 했으니까 CICD 구축할때도 도움도 되겠죠?

이후 글에는 git Action 을 통해 CI/CD 구축 해보겠습니다!

긴 글 읽어 주셔서 감사합니다! :)

Swagger 사이트 : https://swagger.io/

Swagger

Swagger란

Swagger에서 제공하는 오픈소스와 전문가용 도구로 API 문서를 쉽게 만들 수 있어 , 당신과 팀이 API를 효율적으로 설계하고 문서화하는 데 도움이 된다고 하네요.

위에 이미지 오른쪽 부분에 옛날에 공공데이터 사용할때 본거 같은데 친숙하네요 ㅎㅎ

사용 이유

위에 저의 하찮은 영어 실력이유가 설명이 조금 되었지만 back-end 와 front-end가 서버를 따로 두는 경우가 있어 프로젝트 협업이 전보다는 구체적으로 api 명세서가필요한 경우가 있다. 이처럼 swagger를 사용하게 되면 편리하게 api 명세서를 확인 할 수 있다. 서로 winwin ㅎㅎ

사용법

조금 힘들지만 공식 문서 보고 적용해보겠습니다!

0. https://springdoc.org/ <- 접속

1. 소개

swagger 사용처가 여기 나와있네요 .. 한참을 찾았네

2. 설정

maven

<!-- https://mvnrepository.com/artifact/org.springdoc/springdoc-openapi-starter-webmvc-ui -->
<dependency>
    <groupId>org.springdoc</groupId>
    <artifactId>springdoc-openapi-starter-webmvc-ui</artifactId>
    <version>2.8.9</version>
</dependency>

gradle

// https://mvnrepository.com/artifact/org.springdoc/springdoc-openapi-starter-webmvc-ui
implementation("org.springdoc:springdoc-openapi-starter-webmvc-ui:2.8.9")

gradle은 안보여서 mavenRepository에서 가져왔습니다.

properties

4-7

여기에 apiResponse 있는거보면 이거인거같은데 RouterOperation도 있고 한번해보면 알겠네요... 해봅시다

method

@GetMapping("/hello")
    @Operation(summary  = "한눈의 들어오는 한줄요약 느낌 ?",description = "간단한 설명")
    public HttpEntity<String> helloGet() {
        return new HttpEntity<>("hello");
    }

Schema

간단하죠! :)

결과

미완성 글 ㅠㅠ

다음 글에선 security + restControllerAdvice 사용법이 있나 찾아볼께요 ~

글 읽어주셔서 감사합니다. :)

방화벽 (Firewall)

방화벽이란 ?

우분투에서 방화벽 관련 명령어를 치면서 그래서 방화벽이 정확히 무슨역활하고, 어떤 걸 제공할까 ? 이라는 생각에 글을 작성하게되었습니다. firewall 방화/벽 단어로 이러진거 같아서 불 났을때 벽이 그 불을 막듯이 네트워크상에 외부로 부터 막는 역활을 하는거 같아요! 설명하기 전에 RAN 과 WAN이 개념 및 차이점은 간단하게 알아야하겠죵!

RAN (Local Area Network)

1. 집이나 회사 통신망(private IP, 사설 IP)
2. 내부망에서만 사용 가능

   WAN (Wide Area Network)

   1. 전 세계에서 유일한 IP(public IP, 공인 IP)
   2. 인터넷에서 유일한 주소
   3. 웹 사이트 개설 사이트 접속 IP

역시 사진으로 봐야겠죠??!!

LAN 접속

이거는 사설 IP에선 집 wife를 사용하고 있어서 접속이 가능하지만 외부에선 접속이 안됩니다!

WAN 접속

제 공인 IP는 외부 사람들도 접속해서 확인 가능합니다!

참고 자료 - dev_yohan 벨로그

https://velog.io/@dev_yohan/Ubuntu-%EC%84%9C%EB%B2%84%EA%B5%AC%EC%B6%95-spring-jar%ED%8C%8C%EC%9D%BC

좋아요! 방화벽을 LAN과 WAN 사이에서 중재자처럼 설정하고, 내부(LAN)는 자유롭게, 외부(WAN)는 통제되도록 설정하는 건 보안의 기본이자 가장 중요한 부분입니당~

주요 기능

1. 접근 통제(Access Control/(인바운드/아웃바운드))

• 허용된 서비스나 전자우편 서버, 공개정보 서버와 같은 특정 호스트를 제외하고는, 외부에서 내부 네트워크에 접속하는 것을 패킷 필터링(Packet Filtering), 프록시(Proxy) 방식 등으로 접근을 통제하는 기능.

2. 인증(Authentication)

• 메시지 인증 : VPN과 같은 신뢰할 수 있는 통신선을 통해 전송되는 메시지 신뢰성 보장
• 사용자 인증 : 방화벽을 지나가는 트래픽에 대한 사용자가 누군지에 대해 증명하는 기능 (OTP, 토큰기반 인증, 패스워드 인증 등)
• 클라이언트 인증 : 모바일 사용자처럼 특수한 경우에 접속을 요구하는 호스트에 대해 인가된 호스트인지 확인

3. 감사 및 로그 기능(Auditing / Loggging)

• 정책 설정 및 변경, 관리자 접근, 네트워크 트래픽 허용 또는 차단과 관련한 사항 등 접속 정보를 로그로 남김

4. 프라이버시 보호 (Privacy Protection)

• 이중DNS(Dual Domain Name System), 프록시(Proxy) 기능, NAT 기능 등을 제공함으로써 내부 네트워크와 외부 네트워크 간의 중개자 역할을 함으로써 내부 네트워크의 정보 유출을 방지함

5. 서비스 통제(Service Control)

• 안전하지 못하거나 위험성이 존재하는 서비스를 필터링함으로써 내부 네트워크의 호스트가 가지고 있는 취약점을 감소시킴

6. 데이터 암호화(Data Encryption)

• 방화벽에서 다른 방화벽까지 전송되는 데이터를 암호화하여 보내는 것으로, 보통 VPN의 기능을 이용

관련 명령어 ufw --help

한줄 요약

방화벽은 LAN과 WAN 에 접근을 제어하고 감시하는역활이구나!

글 읽어주셔서 감사합니다. :)

1. 서버구축

1.1 배포환경 구축

포트포워딩

외부 요청(공인 IP:포트) → 공유기를 거쳐 내부 IP로 들어오는 트래픽을, 내부 서버(192.168.x.x)가 수신하도록 허용해야 합니다. 내가 8080을 열어두면 공인 IP:8080이 접속 되는것!

방법

공유기 설정

저는 LG 를사용합니다!

명령어 ip a

192.168.219.1 접속

1. 접속하시면 공유기에 패스워드 즉 관리자 비밀번호 입력하고 들어가주세요
2. 네비게이션 바에 있는 네트워크 설정에 nat 설정에 들어가시면 밑에 와 같은 화면이 출력될거에요 !

명령어 ip a에 들어어 제가 192.168.219.104 = private IP DMZ 등록 해주시고 DMZ 설정에 사용함으로 바꾼다음에 적용 눌러주세요! 여기서도 제가 허용할 포트를 내부포트 서비스 포트 입력하신후에 적용하시면 공유기 설정은 끝납니다!

우분투 설정

터미널 창에 명령어

sudo ufw enable // 방화벽 활성화 
sudo ufw allow 8080 // 방화벽에 8080포트 열기 
sudo ufw status // 상태보기 
sudo ufw reload //  방화벽 규칙 재적용

이러면 8080포트 방화벽 허용을 잘한거 같네요!

이러면 우분투 설정도 끝!

spring 설정

application.properties

server.address=0.0.0.0 #전체 허용 server.port=8080 #포트번호 설정 8080

명령어

./gradle build // 빌드 ./gradlew bootRun // 빌드 실행

이제 빌드 해주고, 실행하면됩니다!./gradlew bootRun

실행

설정 끝나고 실행 해보겠습니다!

그전에 우분투에서 확인해보겠습니다! 일단 잘 실행되네요!

우분투에서 내부 접속망으로 확인해겠습니다 ㅎㅎ스웨거 잘 올라와있네요

제 작업 환경에 mac인 pc 에서도 공인 IP로 접속 성공했습니다!

주의점

우분투에서 서버 구축했으나 우분투 안에서 공인 IP로는 접속이 안됩니다! 그래서 다른 PC나 모바일에서 확인해보시는게 좋아요!

명령어 curl ifconfig.me 라고 터미널창에 입력하시면 공인 ip확인할수있습니다.

느낀점

하.. 3일동안 밤새면서 인터넷 서치 해보고 실패도 엄청해보고 우분투에서 열어서 공인 IP로 접속 안되는것도 알고.. private IP 와 public IP 개념도 이해해하는데 조금 오래 걸렸네요 ...

글 읽어주셔서 감사합니다 :)

1. 안쓰는 USB 가져오기!
2. https://ubuntu.com/download/desktop 다운 받기 2-1 파일이 .iso 이라는 파일이 있을겁니다!
3. refus 라는곳에서 USB를 우분투에 굽기! .exe 실행 및 파티션 설정하실분은 설정해주세요
   굽는다라는 표현 학교에서 교수님이 웃으면서 설명하실때 나는 그럴일없다고 생각했는데.
4. USB 확인
5. 굽기가 완료되면 시스템 재시작할때 F2 이거나 부팅할때 메세지가 뜰건데 부팅 메뉴 (??) 그거 들어가서 1번은 usb 로설정해주세요! 그리고 저장하고 나가기!
6. try or install ubuntu 있는데 대부분 1번에 있을거에요
7. 저처럼 초기화를 하고 작업하실분은 메세지 중에 파일 정리가 있으실거에요 그러면 부팅할때 초기화 작업도 같이해주니까 한번해보세요!

진행현황이나 사진이라도 찍어놓을껄 ..ㅠㅠ

글 보고 난 모르겠다 이러시면 댓글주세요 :D