초보 개발자의 프로그래밍 공부방

--git email / name 설정
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

--main branches commit / push
git checkout main
git pull origin main
git add .
git commit -m "[이름]커밋 메시지"
git push origin main

--dev branches merge / push (main branches 에서 수정된 사항 병합해서 dev branches 로 push)
git checkout dev

git pull origin dev
git merge main
git push origin dev

--prd branches merge / push (dev branches 에서 수정된 사항 병합해서 prd branches 로 push)
git checkout prd

git pull origin prd
git merge dev
git push origin prd

사이드 프로젝트 작업할때, 사용할 BackEnd 구성

1. 기본 구조 (SpringBoot + Render (클라우드 기반 배포 서비스)) 를 사용 (https://render.com/)

2. 소스 반영절차

2-1. 특정 브랜치에 commit (prd) 

2-2. Dockerfile 을 사용해 Build 및 jar로 압축

2-3. Render에 배포

3. 실제 배포한 URL (https://boot-back.onrender.com/)

- 무료 버전이라 15분동안, 요청을 하지않으면 임시 슬립됨

1. useState ⇨ 자바스크립트의 변수 + setter 함수

✅ JS 예시:

let count = 0;

function increaseCount() {
  count++;
  console.log(count); // 값은 바뀌지만 화면은 안 바뀜
}

✅ React 예시:

const [count, setCount] = useState(0);

function increaseCount() {
  setCount(count + 1); // 값 바꾸면 화면도 자동으로 업데이트됨
}


2. useEffect ⇨ 자바스크립트의 이벤트 리스너 또는 관찰자 패턴

✅ JS 예시:

document.addEventListener("click", () => {
  console.log("클릭됨!");
});

✅ React 예시:

useEffect(() => {
  const handleClick = () => console.log("클릭됨!");
  document.addEventListener("click", handleClick);

  return () => {
    document.removeEventListener("click", handleClick); // 정리
  };
}, []); // 최초 1회만 실행


3. useRef ⇨ 자바스크립트의 객체 또는 DOM 요소 참조

✅ JS 예시 (DOM 접근):

const input = document.getElementById("myInput");
input.focus();


✅ React 예시:

const inputRef = useRef(null);

useEffect(() => {
  inputRef.current.focus();
}, []);

return <input ref={inputRef} />;

🎯 최종 요약
React 훅 JS에서 비슷한 개념 주 용도 비유
useState let, const + setter 값 저장 + 화면 갱신 메모장
useEffect addEventListener, 자동 실행 로직
useRef 참조형 변수, DOM 선택자 DOM 접근, 상태 추적 (비렌더링) 

1. React 프로젝트있는 경로에서 아래 npm 명령어로 차트 관련 라이브러리 설치

npm install chart.js react-chartjs-2

2. 차트를 생성하기 위해서, 아래 코드처럼 예시 작성

==> 해결방법

Netlify 사이트 설정에서, 아래 처럼 환경변수 CI 값을 false로 설정해 주면, 자잘한 경고성 메시지는 무시한채로 빌드 가능

java.sql.SQLException: Cannot create PoolableConnectionFactory (IO 오류: The Network Adapter could not establish the connection)

위와 같이 접속에러가 발생하게 되면
제어판 \ 모든 제어판 항목 \ 관리 도구 \ 서비스에 들어가면 

OracleXETNSListener의 상태가 시작이 안되고 있는 것을 확인할 수 있다.
수동으로 서비스 시작을 누르면 해결이 된다.

출처
https://m.blog.naver.com/PostView.nhn?blogId=syh_22&logNo=220627456918&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

웹서비스를 최소한의 비용으로 구축하려면 비용 절감을 위한 효율적인 선택과 오픈소스 도구 활용이 중요합니다.

각 항목별로 저렴하게 설정하는 방법입니다.

1. 도메인

• 무료 도메인:
  • Freenom에서 무료 도메인(예: .tk, .ml, .ga)을 사용.
• 저렴한 유료 도메인:
  • 도메인 등록 업체(예: Namecheap, Google Domains)에서 프로모션을 통해 .com 도메인을 $5~$10/년 정도로 구매 가능.

2. 서버

• 무료/저비용 클라우드 서비스:
  • AWS Free Tier: 1년 동안 t2.micro(1 vCPU, 1GB RAM) 무료 제공.
  • Google Cloud Free Tier: f1-micro 인스턴스(매월 30GB HDD 포함) 무료.
  • Azure Free Account: 12개월 동안 특정 리소스 무료.
  • Oracle Cloud Free Tier: 항상 무료인 Arm 기반 VM 2개 제공.
• 저비용 VPS:
  • DigitalOcean, Linode, Vultr 등에서 $5/월부터 시작하는 저렴한 VPS 제공.
• 자체 서버 호스팅:
  • Raspberry Pi 등 저전력 장치를 사용하여 집에서 서버를 운영. (단, 인터넷 업타임과 보안 관리 필요)

3. 데이터베이스(DB)

• 오픈소스 데이터베이스:
  • MySQL/MariaDB, PostgreSQL 등 무료로 사용 가능.
• 클라우드 관리형 DB:
  • Google Cloud, AWS에서 제공하는 무료 DB 서비스.
• 로컬 설치:
  • 서버에 직접 MySQL/MariaDB를 설치하여 운영.
• SQLite:
  • 소규모 웹서비스에서는 간단히 SQLite로 시작 가능(파일 기반).

4. 웹 서버

• 무료 웹서버 소프트웨어:
  • Nginx: 경량화된 고성능 웹 서버.
  • Apache: 안정적이고 널리 사용되는 웹 서버.
• HTTPS 인증서:
  • Let’s Encrypt에서 무료 SSL 인증서 발급.

5. 애플리케이션 개발 환경

• 언어 및 프레임워크:
  • Python: Flask, Django.
  • JavaScript: Node.js, Express.
  • PHP: Laravel, CodeIgniter.
• 무료 개발 도구:
  • Visual Studio Code, GitHub.

6. 배포 및 버전 관리

• 무료 Git 리포지토리:
  • GitHub, GitLab, Bitbucket.
• CI/CD 도구:
  • GitHub Actions, GitLab CI/CD 등 무료로 제공.

7. 운영비 절감 팁

1. 자동화:
   • Ansible, Docker 등으로 서버 설정 자동화.
2. 스케일 아웃 전략:
   • 초기에는 최소 리소스 사용, 트래픽 증가 시 추가 리소스 할당.
3. 정적 웹사이트로 시작:
   • 간단한 웹사이트는 Netlify, Vercel 같은 무료 정적 사이트 호스팅 플랫폼 활용.
4. 모니터링 도구:
   • 무료로 제공되는 Grafana, Prometheus, UptimeRobot 사용.

예상 초기 비용 예시

항목 비용(월)

위 방법들을 활용하면 초기 비용을 $5~$15 수준으로 유지하면서도 안정적인 웹 서비스를 구축할 수 있습니다.

추가적으로 클라우드 프로모션을 적극 활용해 비용을 절감할 수 있습니다.

1. Spring Boot (스프링) 란?

- Java 기반 애플리케이션 개발을 지원하는 오픈소스 프레임워크

스프링의 특징

- 의존성 주입 가능

- 웹 프로그램을 개발하기 용이한 MVC(Model-View-Controller) 아키텍처를 지원

MVC 패턴

- Model : 데이터를 저장하는 부분 (Xml 단 - DB)

- Controller : Model을 통해서 데이터를 가져오고 그 정보를 View에 전달 (Java단), 실질적 동작을 하는 부분

- View : 시각적인 표현을 담당 (Jsp 단)

2. Spring Boot (스프링 부트) 란?

- 스프링 부트는 스프링으로 애플리케이션을 만들 때에 필요한 설정을 간편하게 처리해주는 별도의 프레임워크

- 스프링 부트를 사용하면 기존에 어려운 초기 설정에 쏟아야 했을 시간과 노력을 절약하여 비즈니스 로직을 구현하는데에 집중할 수 있습니다.

스프링과 스프링 부트의 차이점

- 내장 서버 지원 (톰캣 등)

- 의존성 관리 간소화

  스프링 부트는 여러 3rd party 라이브러리를 사용할 때, 발생하는 라이브러리 버전 충돌로 인한 문제를 해결하기 위해서,    이미 테스트된 여러 라이브러리들의 묶음 패키지를 제공합니다.

- 간편한 설정

3. Git / GitHub 란?

- Git : 버전관리 소프트웨어.

- GitHub : Git 프로젝트를 관리하는 호스팅 사이트

4. Spring Batch 란?

- 스프링 배치는 대량의 데이터 처리 작업을 효율적으로 수행하기 위한 스프링 프레임워크의 하위 프로젝트.

- 배치 처리란 한정된 데이터를 일괄적으로 처리하는 작업을 의미

  즉, 데이터베이스의 데이터 이관, 대량의 로그 파일 처리, 대용량 데이터의 분석 및 보고 등 다양한 분야에서 활용

- 재사용 가능한 기능 제공

5. Spring Batch 구성요소

- Job

스프링 배치의 여러 가지 처리과정을 하나의 단위로 만들어 놓은 가장 큰 실행 단위이다. 하나의 Job은 여러 개의 Step으로 이루어지며, 이 Step들을 순차적으로 실행한다.

- Step

Job의 실행 단계를 나타내는 것으로, Tasklet 또는 Chunk 지향 처리 방식으로 구성되어 있다.

- Tasklet

Step에서 실행되는 최소 실행 단위이다. 스프링에서 제공하는 Tasklet 인터페이스를 구현하여 실행시킬 수 있다.

Tasklet이 실행되면 Job의 다음 Step으로 넘어가게 된다.