Dev 24

[JS] 자바스크립트 기본 개념 / DOM

window, document 객체 웹 개발 과정에서 일상적으로 다뤄오던 window, document 객체는 웹 브라우저에서 JS로 웹 페이지를 제어할 수 있게 하는 객체이다.  window브라우저 창 전체를 대표하는 전역 객체로, 브라우저 환경에서 자바스크립트를 실행할 때, 최상위 컨텍스트로 사용된다. 웹 브라우저의 전체 창을 나타내며, 전역 범위에서 접근 가능하고 브라우저 기능을 제어 가능하다.window.alert('Hello!'); window.setTimeout(() => console.log('2초 후'), 2000); console.log(window.innerWidth); 일상적으로 사용하던 alert()와 같은 메서드나 객체는 wnidow객체를 생략하고 사용하는 것이다. documen..

Dev 2025.04.08

[Oracle Cloud] 오라클 클라우드 / 로그인부터 웹 서버 띄우기까지

현재 Cloud 서비스는 GCP, AWS 등등 다양하지만 다들 일정 기간 동안만 무료로 하거나 일정한 크레딧을 지급하는 경우가 대다수이다. 하지만 Oracle에선 평생 무료인 Cloud 서비스를 제공하고 있고, 이는 Oracle Cloud에서 생성 가능하다. 클라우드 서비스 무료 이용Oracle Cloud Free Tier는 기업에게 무제한으로 사용할 수 있는 상시 무료 클라우드 서비스를 제공합니다.www.oracle.com  위 Oracle Cloud에서 로그인과 결제 수단까지 등록을 마쳐야 한다. 이때의 Region은 포스팅 날짜 기준 대한민국 춘천으로 설정하면 된다. 참고로 이때 설정한 Region은 추후에 수정이 불가하다.    위 로그인 절차를 마무리하면 Cloud 서비스를 사용할 수 있으며, ..

Dev 2025.04.01

[JS] 자바스크립트 기본 개념 / 변수 선언 방식

자바스크립트 | 변수 선언 방법 자바스크립트는 변수를 선언할 때 따로 타입 정의가 필요하지 않은 언어이다. (이로 인해 발생하는 여러 문제 때문에 TypeScript가 등장하는 계기가 되었다.)  따라서 JS의 변수를 선언할 땐 별도의 타입 지정 없이 var, let, const 키워드로 지정하게 되며 각각은 아래와 같은 특징을 갖는다.  var -  변수 재 선언, 재 할당 모두 가능let - 변수 재 선언 불가, 재 할당 가능const - 변수 재 선언, 재 할당 모두 불가var의 단점을 보완하기 위해 let과 const 개념이 등장한 것인데,var의 경우 변수에 대한 재 선언 및 재 할당이 모두 가능하기에 여러 문제가 동반되었다.  var A = "a"; var B = 5; if (..

Dev 2025.03.26

[JS] 자바스크립트 기본 개념 / 동기, 비동기

자바스크립트란 자바스크립트 언어(이하 JS)는 객체 기반의 스크립트 언어로, 동적이며, 타입을 정의할 필요 없는 인터프리터 언어이다. 또한 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있는 언어이다. JS는 클라이언트 사이드 언어로 개발되었으며 JAVA와는 관계없는 별도의 언어이다. 클라이언트 사이드 언어 특성상 주로 브라우저에서 실행되며, 브라우저의 자바스크립트 가상 머신이란 엔진이 JS를 동작시키게 된다. 엔진의 종류는 다양하며, 그 예시는 아래와 같다.V8 - Chrome, OperaSpiderMonkey - FirefoxChakraCore - Microsoft EdgeSquirrelFish - SafariTrident, Chakra - IE그러나 자바스크립트가 위 엔진만을 바탕으로..

Dev 2025.03.25

pm2 사용하여 Node.js 백그라운드 구동하기

지금껏 nohup을 사용하여 웹 애플리케이션을 백그라운드로 구동하고 있었는데최근 들어 자꾸만 서버가 꺼져서 pm2 모듈을 사용해 백그라운드로 서버를 구동하려 한다. sudo npm install -g pm2 위 명령어로 pm2 설치해 주고  // package.json"scripts": { "start": "node app.js"} package.json이 수정되어있지 않다면 start를 추가해 준다. pm2 start app.js 실행하려는 코드가 있는 디렉터리로 이동해서 위 코드를 입력해 주면 pm2에서 웹 애플리케이션을 관리하게 된다.  ETCpm2 list 애플리케이션 목록 확인 pm2 logs [app-name] 애플리케이션 로그 확인 pm2 restart [app-name] 애플리케이션 재시..

Dev 2025.02.27

docker-compose.yml 파일 생성하기 / nginx.conf 파일 정의하기

docker-compose 파일이란? docker-compose는 단일 서버에서 여러 컨테이너를 하나의 서비스로 정의해 컨테이너들의 집합으로 관리할 수 있는 작업 환경을 제공하는 관리 도구이다. wargame 프로젝트에선 백엔드 서버와 데이터베이스가 각각의 도커 컨테이너에서작동되도록 해야 하기 때문에 도커 컴포즈 파일을 사용해야 한다.  docker-compose 파일 생성 services애플리케이션을 구성할 컨테이너를 정의한다.// docker-compose.ymlversion: "3.9"services: web: build: . ports: - "8000:8000" volumes: - .:/wargame - ./uploads:/wargame/uploads ..

Dev 2025.02.27

nginx 리버스 프록시 설정하기

리버스 프록시란? 클라이언트의 요청을 대신 받아서 실제 서버로 전달하고, 그 응답을 클라이언트에게 다시 전달하는 서버이다. localhost:8000 해당 주소의 웹사이트를 운영한다 할 때, 사용자애게 포트번호를 노출해 보안적인 취약점이 존재할 수 있을 뿐 아니라요청이 직접적으로 사이트와 연결되기에 서버의 안정성이 떨어질 수 있다는 위험성이 존재한다. 이러한 문제를 해결하고자 등장한 개념이 리버스 프록시이다. 이는 서버를 향한 요청, 클라이언트를 향한 응답 등을 중간에서 필터링해 보안이슈와 서버 안정성을 상당 부분 해결한 구조로 아래 사진과 같이 구성된다.   해당 구조를 웹 서버에 적용하기 위해선 /etc/nginx/sites-available/default 위치의 파일과 /etc/nginx/nginx..

Dev 2025.02.27

Dockerfile 생성하기

Dockerfile 이란? Docker 이미지를 만들기 위한 텍스트 파일로, 애플리케이션과 애플리케이션을 실행하기 위한 환경을 정의하는 파일이다.애플리케이션에서 사용하는 운영체제, 필요 패키지, 애플리케이션 코드 및 그 실행 방법이 명시되어 있다.개발 환경 등을 일일이 애플리케이션에 맞춰 줄 필요 없이 Dockerfile을 빌드하기만 하면 개발환경을 모두 맞출 수 있단 점에서 그 의의가 있다.  Dockerfile 구성 요소  FROMDocker 이미지를 시작할 때 사용되는 기본 이미지를 지정한다.Dockerfile의 첫 번째 명령어로 쓰이는 가장 기본적인 명령어이다.FROM ubuntu:22.04//위 명령어는 Ubuntu의 22.04 이미지를 기본적으로 사용하겠다는 의미를 내포한다.  RUNDocke..

Dev 2025.02.27

비밀번호 초기화 이메일 보내기 구현

비밀번호 초기화의 필요성 현대적인 많은 사이트들은 사용자가 비밀번호와 같이 중요한 정보를 잊어 이런 정보를 필요로 할때이런 정보를 곧이곧대로 제공하지 않고 임시 비밀번호를 주거나 하는 방향으로 사용자가 로그인한 후,다시 이를 사용자가 수정하게 한다. 이렇게 복잡한 과정을 통해 사용자에게 비밀번호를 발급하는 이유는 관리자 또한 사용자의 비밀번호를 알아내는것이 불가능하기 때문이다.  개인정보보호위원회에서 제시한 방법을 보면 알 수 있듯이 비밀번호는 md5, sha-256 등의 단방향 암호화를 사용해이를 DB에 저장해야 하므로 아무리 관리자 권한으로 DB를 확인한다 한들 이 해싱된 비밀번호를 알아내로그인 하는것은 사실상 불가능에 가깝다. 다만 레인보우 테이블 등을 사용해 사용이 흔한 비밀번호의 경우 브루트 포..

Dev 2025.02.27