전체 글 130

NCP + 도커로 깃허브 프로젝트 배포하기 (+https)

NCP에 배포하기서버를 사고 접속해요ncp에 돈을낸다서버를 산다vpc, 퍼블릭 서브넷 설정 필요공인 IP 발급받기키파일(.pem) 저장하기서버가 열리면 서버 관리 및 설정 변경 -> 관리자 비밀번호 확인에서 서버 비밀번호를 확인한다터미널에서 서버에 접속ssh -i (키파일) (사용자명)@(서버공인IP)비밀번호: 3번에서 본거접속했다도커를 깔아요https://docs.docker.com/engine/install/ubuntu/ # Add Docker's official GPG key:sudo apt updatesudo apt install ca-certificates curlsudo install -m 0755 -d /etc/apt/keyringssudo curl -fsSL https://download...

기록 2025.11.25

[NestJS] 깃허브 OAuth 로그인 구현하기

개념OAuth가 뭐임: https://day4fternoon.tistory.com/171 OAuth 2.0OAuth란?Open Authorization의 약자..사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 접근 권한을 부여할 수 있는 수단으로써 사용되는, 접근 위임을 위한 개방형 표준day4fternoon.tistory.com NestJS와 리액트를 사용중인 프로젝트에 깃허브 OAuth를 사용한 로그인 api를 구현해보자.우선 OAuth의 개념과 깃허브 OAuth 앱 공식 문서를 바탕으로 어떻게 구현할지 설계해보았다.공식문서: https://docs.github.com/ko/apps/oauth-apps OAuth 앱 - GitHub DocsOAuth app을(를) 만들고 ..

기록 2025.10.27

OAuth 2.0

OAuth란?Open Authorization의 약자..사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 접근 권한을 부여할 수 있는 수단으로써 사용되는, 접근 위임을 위한 개방형 표준이다. 서드파티 애플리케이션이 사용자 정보에 접근하기 위한 절차를 정의하고, API를 사용할 수 있는 권한을 부여하기 위한 *표준 방식*을 의미한다.OAuth 2.0은 1.0의 보안문제 등을 개선한 버전이다. OAuth 2.0의 구성 요소1. 리소스 소유자(Resource Owner)OAuth에 의해 보호되는 리소스에 대한 액세스 권한을 부여하는 사용자. 2. 클라이언트(Client)OAuth를 사용해 리소스에 접근하려는 서드파티 애플리케이션.즉 개발을 하는 입장이라 치면 우리의 백엔드 서버가 곧..

공부 2025.10.27

[React] 컴포넌트의 내부동작 뜯어보기: state와 hook

리액트는 컴포넌트를 어떻게 만들고 관리할까?여기서 Fiber architecture가 사용된다. 리액트는 컴포넌트를 Fiber 객체 단위로 관리한다.아래는 리액트가 Fiber 타입을 정의하는 코드다.src/ReactInternalTypes.js tag: 태그 타입. 어떤 종류의 컴포넌트인지elementType: 렌더링할 컴포넌트 타입 (div, span, ...)stateNode: 이 fiber에 연관된 다른 객체머 어쩌구저쩌구...memoizedState: 컴포넌트의 state는 이거에 관련되어 있는 듯하다 클래스형컴포넌트의 침몰이후 메이저가 된 함수형컴포넌트는 훅으로 상태와 생명주기를 관리한다.훅은 어떻게 생겼을까?src/ReactFiberHooks.js컴포넌트는 이 훅들을 연결리스트 형태로 저장해놓..

공부 2025.10.21

[NestJS] NestJS 기초, 사용해보기

NestjsDocumentation | NestJS - A progressive Node.js framework nodejs 기반 웹 프레임워크. 타입스크립트를 지원한다. express를 기반으로 그 위에 여러 기능을 구현해놓은 형태이다. 설치npm i -g @nestjs/clinest new project-name 기본 폴더구조 src 폴더 내 코어파일nest는 기본적으로 MVC패턴을 따르며 들어오는 http요청을 컨트롤러가 라우팅한다.Controller컨트롤러를 만들기 위해서 클래스 와 데코레이터 를 사용한다. 데코레이터는 메타데이터와 함께 클래스를 연결하며, 하나의 컨트롤러에서 처리할 요청들의 라우팅 맵을 관리할 수 있게 한다. app.controller.tsimport { Controller, ..

공부 2025.10.19

[AWS] EC2 + Ngnix로 프로젝트 배포하기

AWS EC2로 프로젝트를 배포해보자. 준비물: AWS계정, 돈 (결제수단등록)계정 관련해서는 옛날옛적에 다 설정해둬서 따로 건드리지 않았다. 근데 이유는 모르겠지만 디폴트VPC가 없어져 있어서 그것만 새로 만들었다... 1. EC2 인스턴스 생성AWS 들어가서 EC2 탭에서 새 인스턴스를 만든다. VPC랑 서브넷 있는거 설정해주고 프리티어 가능한 옵션들 선택해주면 되는데 신경써야 할 부분이 몇가지 있다.키 페어서버 접속을 위해 필요하다. .pem으로 설정해서 생성하면 키 파일이 받아지는데, 공개된 곳에 올리면 안 된다. 깃허브 이딴데 올렸다가 미친해커 가 돈을 털어간다고 한다보안그룹ssh(22)는 내 ip만 허용, https(443)/http(80)는 전체허용nginx등 프록시를 사용하지 않고 3000..

기록 2025.10.19

[Ubuntu] Node js 프로젝트 가상환경으로 배포하기

깃허브에 올려놓은 내 프로젝트를 Ubuntu linux 가상환경에 배포해보자. Docker 등의 도구 없이 가상환경과 터미널 명령어만으로 배포할 것이다.준비물배포할 프로젝트 github repository사용할 수 있는 Ubuntu linux 가상환경외부 접속 허용 필요: NAT 설정이든 브리지 설정이든 해두기배포하기가상환경에 접속가상환경을 켜놓고, 각자 설정한 방법으로 터미널에서 가상환경에 접속해준다. 접속한 뒤 사전 업데이트 및 필요한 패키지를 설치해준다.ssh로 접속: ssh username@ip주소 -p 22sudo apt udatesudo apt upgradegit, nodejs 없으면 설치하기ssh 키 설정리포지토리를 클론할 건데, 보통 로컬에서 쓰는 https 방식으로 클론하려면 아이디와 비..

공부 2025.09.13

[Vanila JS] 함수형 컴포넌트와 클래스형 컴포넌트

컴포넌트컴포넌트...나의 얕은 지식으로 아는 것은 리액트에서 예전엔 클래스형 컴포넌트를 썼는데 지금은 함수형 컴포넌트로 바뀌고 있다는 사실뿐이다. 아무 생각 없이 그냥 그렇군. 하고 함수형 컴포넌트니 useState니 하는 것들을 써왔는데, 이참에 뭐가 뭔지 제대로 알아보도록 하자.컴포넌트란 재사용이 가능한 독립된 모듈을 뜻한다. 코드의 재사용성이 높고 UI의 일관성을 유지하기 좋다. 스타일 등 공통된 부분들을 만들어두고, 내용 등 사용하는 곳에 따라 변화하는 부분은 속성을 넘겨주는 방법으로 조작한다.컴포넌트는 생명주기, 라이프사이클을 가진다. 말 그대로 생성되면서부터 제거되기까지의 컴포넌트 수명을 의미한다.라이프사이클은 왜 있을까?: 컴포넌트는 생성되고, 업데이트되고, 제거되기까지의 과정 동안 어떤 작..

공부 2025.09.06

[MySQL/Node.js] Node.js 프로젝트에 MySQL DB 연동하기

주제Ubuntu 가상환경에서 MySQL을 설치하고Node.js 프로젝트에 mysql2로 연동한다가상환경에서 MySQL 설치하기실행 가능한 가상머신을 설치하고 실행한다. 필자는 VirtualBox에 Ubuntu 환경을 사용했다.가상머신 터미널에서 ip a로 가상환경 ip를 확인한 뒤, 로컬환경 터미널에서 해당 ip로 가상환경에 연결한다.ssh username@ip -p 22가상환경에 mysql을 설치한다. sudo apt update 해주고 실행하면 좋다sudo apt install mysql-server초기 상태에서는 외부 접속이 막혀있다. config파일에서 외부 접속을 허용해줘야 한다.sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf로 config 파일 열기bind-ad..

공부 2025.09.06