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

오픈 API를 활용해서, 데이터를 출력하는 화면을 개발하던 중에 아래와 같은 오류가 발생해서,

Request failed with status code 429

찾아보니, 일정시간안에 너무많이 API를 호출해서 발생하는 것이라고해서, 지연시간을 주는 방식으로 처리함.

Http 전송방식을 axios를 사용하고 있었어서, 관련 요청빈도를 자동으로 제어하는 패키지를 설치해서 사용하는 방식으로 처리

1. 패키지 설치

npm install axios-rate-limit

2. 리액트 환경이므로 패키지 import해서 사용

import axios from 'axios'; //npm installaxios

import rateLimit from 'axios-rate-limit'; //npm install axios-rate-limit //요청 빈도를 자동으로 제어

--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 수준으로 유지하면서도 안정적인 웹 서비스를 구축할 수 있습니다.

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