본문 바로가기
반응형

전체 글58

5년만에 nodejs 를 쓰려는데 그동안 바뀐 생태계 알려줭 물론. 5년 전 Node.js 생태계가 Node + npm/yarn + Express + CommonJS 중심이었다면, 지금은 대략 이렇게 바뀌었어요.JavaScript / TypeScript │ ├── 런타임 │ ├── Node.js ← 여전히 표준 │ ├── Deno ← 보안·웹표준·통합 도구 │ └── Bun ← 속도·통합 개발환경 │ ├── 패키지 매니저 │ ├── npm │ ├── pnpm ← 많이 선택되는 편 │ ├── yarn │ └── bun │ ├── 백엔드 프레임워.. 2026. 7. 16.
[잡도리서버 세팅2] FastAPI 배포하기 (NCP + PM2 + Nginx) 이번 글에서는 FastAPI 서버를 Ubuntu 환경에 배포하는 방법을 정리해보려고 한다.FastAPI는 Next.js와 다르게 빌드 산출물을 올리는 개념이 아니라 Python 소스코드를 서버에 업로드하고 실행하는 방식으로 운영한다.서버 구성사용자 ↓Nginx ↓FastAPI (8000)1. Python 설치Ubuntu 기준apt updateapt install -y \python3 \python3-pip \python3-venv확인python3 --versionpip3 --version2. API 서버 업로드 준비로컬에서 배포 폴더 생성rm -rf deploy-apimkdir deploy-api소스 복사rsync -av \--exclude 'venv' \--exclude '.venv' \--exclud.. 2026. 6. 22.
[잡도리서버 세팅1] Next.js 배포하기 (NCP + PM2 + Nginx + Standalone) 최근 Naver Cloud Platform(NCP)에 Next.js 프로젝트를 배포하면서 겪었던 내용을 정리해보려고 한다.이번 글에서는 Next.js를 서버에서 직접 빌드하지 않고, 로컬에서 빌드한 결과물만 서버에 업로드하는 방식으로 진행한다.이 방법의 장점은 다음과 같다.서버 용량 절약빠른 배포서버 빌드 실패 이슈 감소CI/CD 구축이 쉬움서버 구성사용자 ↓Nginx (80) ↓Next.js (3000)1. Ubuntu 서버 준비서버 접속ssh -i "키파일.pem" root@서버IP기본 패키지 설치apt updateapt upgrade -yapt install -y \git \curl \wget \unzip \vim \nginx \build-essentialNginx 실행systemctl start .. 2026. 6. 22.
파이썬/장고 설치 1. 현재 파이썬 버전 확인먼저 터미널(Terminal)을 열고 아래 명령어들을 하나씩 쳐보세요. 맥북이 파이썬을 어떻게 인식하고 있는지 확인하는 과정입니다.명령어 1 (기본 체크):결과 예시: command not found가 뜨거나 Python 2.x.x가 뜬다면 무시해도 됩니다. python --version명령어 2 (현재 표준 체크):결과 예시: Python 3.12.x 처럼 3.10 버전 이상이 뜨면 3번 ㄱㄱpython3 --version 2. 파이썬 설치 및 업데이트 (Homebrew)만약 파이썬이 없거나 버전이 너무 낮다면(3.9 이하), 아까 사용했던 Homebrew로 최신 버전을 설치하는 게 가장 관리하기 편합니다.# 파이썬 최신 버전 설치brew install python# 설치.. 2026. 5. 3.
PostgreSQL 설치/기본설정 설치brew install postgresql 서버 백그라운드 실행brew services start postgresql 관리자 접속 및 우리 프로젝트용 DB 만들기이제 터미널에서 DB에 직접 접속해서, 우리가 만들 '분양 마케팅 허브' 전용 데이터베이스와 유저를 만들어 보겠습니다. 1.기본 관리자(postgres)로 접속psql postgres(프롬프트가 postgres=# 모양으로 바뀌면 접속 성공입니다!) 2. 프로젝트용 DB 및 유저 생성 (아래 SQL 명령어들을 한 줄씩 복사해서 붙여넣고 엔터를 치세요)-- 1. 데이터베이스 생성CREATE DATABASE hub_db;-- 2. 장고에서 접속할 유저 및 비밀번호 생성 (비밀번호는 원하시는 걸로 바꾸셔도 됩니다)CREATE USER admin.. 2026. 5. 3.
OpenClaw + Slack 연동하기 #2. 슬랙 앱 설정 이제 슬랙에서 설정을 이어가 보겠다.슬랙에서 봇을 연결하는 두가지 방법을 소개해보려고 한다. 채널에서의 연동, DM 연동채널에서는 태그로 지정해서 설정한 봇과 대화가 가능하고 (ex: @두쪼쿠) 더 나아가서 봇들끼리의 대화도 가능할거 같은데,이건 대화의 무한루프..? 처럼 빠질 가능성도 있어보이기에 단순 연동까지만 진행해봤다. 1. 채널에서의 연동필요한 준비물채널의ID, 이전 #1. 슬랙 API 설정 에서 생성한 슬랙 앱 (챗봇) 1.1 슬랙 에서 대상 채널 우클릭 -> 채널 세부정보 보기 -> 통합 탭 -> 앱 [앱 추가] 순서대로 진행하면 이전에 #1. 슬랙 API 설정 에서 추가했던 앱이 보일것이다.앱을 추가하면 슬랙 좌측 하단에 내가 추가한 앱(두쪼쿠)가 보이면 성공 1.2 오픈클로 서버 터미.. 2026. 4. 12.
OpenClaw + Slack 연동하기 #1. 슬랙 API 설정 기존에 나는 호스팅서버에, 오픈클로를 설치해서 텔레그램으로 연결해서 모닝브리핑(오늘의 날씨, 개발관련소식)과 바이브코딩 프로젝트 두가지를 진행하면서 오픈클로 맛보기를 하고있었다 (맛은 맵더라..) 그런데, 크게보면 위 두 가지 업무, 모닝브리핑+바이브코딩 두가지를 한개의 텔레그램 채널에서 하자니, 뭔지모를 불편함이 느껴졌다.그렇다, 업무를 할때는 성격에 맞는 소통방(채널) 에서 이야기가 진행되어야되는데 이건 DM(개인메시지) 에서 두가지 업무를 진행하다보니, 이질적이고 불편한 느낌을 지울수 없었다,그래서, 이번에 슬랙과 연동하면서, 에이전트 봇 메인(두쪼쿠) 를 기반으로, 다른 에이전트 봇들을 세팅(채용)할 예정이다 (기획자, 디자이너, 프론트엔드개발자, 백엔드개발자, QA엔지니어) 즉 메인비서(두쪼쿠).. 2026. 4. 12.
SPA MPA (Multi Page Application)페이지 이동할 때마다서버에 요청새 HTML 페이지를 다시 받음화면이 깜빡임예: 옛날 게시판, JSP/PHP 사이트 SPA (Single Page Application)처음에 HTML 1장만 받음이후에는URL만 바꾸고JS가 화면 컴포넌트만 교체새로고침 없음 SPA의 페이지 전환 방법History APIhistory.pushState() : URL을 바꾸고 히스토리 스택에 쌓지만, 페이지 리로드는 안 함history.replaceState() : 현재 히스토리 엔트리를 바꿈뒤로가기/앞으로가기 때 popstate 이벤트가 발생함 2026. 2. 11.
Immer Immer는 React에서 상태(state)를 업데이트할 때마치 state.user.name = ... 처럼 직접 수정(mutate)하는 코드처럼 작성해도,라이브러리 내부에서 안전한 불변성(immutability) 을 유지한 새로운 state를 만들어주는 도구다.React는 상태 변경을 “값이 바뀌었다”가 아니라 참조(reference)가 바뀌었는지로 감지한다. const [user, setUser] = useState({ name: 'Josh', profile: { age: 30 },})function updateAge() { user.profile.age = 31 // ❌ 원본 수정 setUser(user) // 참조 동일} 문제점user.profile.age 값.. 2026. 2. 11.
useActionState, useEffectEvent 1. useActionState란?폼 액션(Form Action)의 결과에 따라 상태를 업데이트하고, 비동기 처리 중인 상태(Pending)까지 한 번에 관리할 수 있게 해주는 React 19의 새로운 훅입니다.핵심 역할: "서버에 데이터를 보낸 뒤, 그 결과를 화면에 보여주기까지" 필요한 모든 상태 관리를 자동화합니다.1-1. 기본 문법const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);fn (Action 함수): 폼이 제출될 때 호출될 함수입니다. 이 함수는 첫 번째 인자로 **이전 상태(previousState)**를, 두 번째 인자로 **폼 데이터(formData)**를 받습니다.initialStat.. 2025. 12. 15.
컴포넌트 라이프사이클 리액트에서 말하는 라이프사이클(Lifecycle) 은컴포넌트가 생성 → 화면에 나타남 → 업데이트 → 사라짐 까지의 흐름을 의미 Mount: 컴포넌트가 처음 생성되어 DOM에 붙음Update: props / state 변경으로 리렌더Unmount: DOM에서 제거됨 클래스함수형componentDidMountuseEffect(() => {}, [])componentDidUpdateuseEffect(() => {}, [deps])componentWillUnmountuseEffect(() => { return () => {} }, []) 2025. 12. 15.
ref - DOM 직접 접근 장치 ref를 사용해야될때특정 요소에 포커스 주기스크롤 위치 조작canvas, video 같은 DOM API 사용외부 라이브러리(Swiper, Chart.js 등) 사용시 1. DOM 요소 참조용 refimport { useRef } from 'react';function MyComponent() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( 포커스 );}inputRef.current 는 랜더링이 발생되도 유지가되며컴포넌트가 처음 랜더링된 이후에 DOM이 생성되고 난뒤에 참조된다.current 안에 실제 DOM노드가 들어있다. 2. .. 2025. 11. 25.
이벤트 핸들링 리액트에서의 이벤트 핸들링은 기존의 HTML 이벤트를 기반으로 만들어졌기 때문에 HTML 이벤트와 명칭과 사용법이 유사하다.리액트에서의 이벤트명칭은 camleCase로 되어있다. onclick -> onClick 리액트의 이벤트 핸들러는 이벤트 객체를 따로 지정해주지 않아도 인자로 전달해준다.const handleClick = (event) => { console.log(event.target);};handleClick(e)}>Click meClick me 이벤트의 흐름 1. 캡처링 단계 (Capturing Phase)이벤트가 발생하면 가장 바깥요소 부터 시작하게 된다.window → document → html → body → ... → (이벤트 타깃 요소) → ... → body → html → .. 2025. 11. 17.
컴포넌트 함수형 컴포넌트 VS 클래스형 컴포넌트 리액트 공식 메뉴얼에서는 함수형 컴포넌트 사용을 권장, 현재 함수형이 표준, 클래스형은 레거시로 본다.리액트 18버전 이후에는 hook을 본격적으로 지원함으로써 함수형 컴포넌트 + hooks가 성능 최적화에 더 유리함이후 버전에서도 계속 hook을 고도화 하는 방향으로 업데이트 1. 선언 방식의 차이 함수형 컴포넌트function Hello() { return Hello;} JSX 반환 → 컴포넌트this 없음 클래스형 컴포넌트class Hello extends React.Component { render() { return Hello; }} ES6 class 문법 사용반드시 render() 필요this 바인딩 필요해서 문법이 더 복잡함 2. 상태 .. 2025. 11. 17.
render(), virtual DOM, JSX render()컴포넌트의 UI/동작을 최종적으로 화면에 정의하는 함수트리형태로 중첩되어있는 컴포넌트를 역순으로 (최하위->최상위) 컴포넌트를 재귀하며 맨 마지막 최상위 컴포넌트까지 랜더링작업 이후에는 해석한 정보들 마크업/DOM/페인팅(브라우저 랜더링 동작) 작업을 거치며 최종적으로 화면에 출력된다.랜더함수가 호출되는 시점state/props 가 변경될 때부모컴포넌트가 다시 랜더링될 때 virtual DOM랜더함수는 이전의 DOM트리 형태에서 변경이 있는 부분만 비교해서 가상의DOM을 실제의 DOM으로 반영하기위한 추상단계→초기 비용 높음, 업데이트되는 부분이 적을수록 성능적으로 유리함 리액트의 슬로건지속적으로 데이터가 변화하는 대규모 어플리케이션 구축하기 ≠ 변화가 적은 소규모 어플리케이션(효율X)정.. 2025. 11. 10.
가민 포러너 965 사용 후기 목차서론포러너 265 vs 965실제 사용 후기장단점 및 총평서론러닝을 꾸준히 하다 보면 스마트워치가 운동의 중심 장비가 되어버립니다.저 역시 러닝화, 이어폰보다도 “워치”가 제일 중요하다고 생각하는 사람 중 하나예요.예전엔 갤럭시 워치를 쓰다가 배터리 때문에 스트레스를 너무 받아서 결국 가민 포러너 시리즈로 넘어왔습니다.제가 워치에 꼭 바라는 건 단 세 가지였어요.배터리 오래갈 것폰 없이 음악 재생 가능할 것아몰레드 디스플레이이 세 가지를 모두 만족시키는 모델이 포러너 965였습니다.포러너 265 vs 965사실 가민을 고르기 전에 피닉스랑 에픽스도 잠깐 써봤습니다.그때 배터리 퍼포먼스에 감탄해서, “이건 그냥 가민으로 가야겠다” 싶었죠.결국 후보는 265 vs 965로 좁혀졌는데, 스펙을 보면 아래와.. 2025. 10. 11.
샥즈 오픈닷 원 실제 사용 후기 요즘 핫해진 러닝 그에 맞는 이어폰을 찾는 분들이 많죠.저도 러닝과 출퇴근용으로 모두 만족할만한 제품을 찾다가 샥즈 오픈닷 원(OpenDot One) 을 선택하게 됐습니다.3개월 정도 사용해본 실제 경험을 정리해봤어요. 오픈핏 vs 오픈닷 원 고민기두 제품 모두 비슷한 음질을 가지고 있었지만, 착용 방식이 달랐어요.오픈핏은 귀를 감싸는 형태이고, 오픈닷 원은 귀를 살짝 걸치는 클립형입니다.러닝할 때는 모자, 고글, 헤어밴드 등 여러 가지를 착용하게 되는데귀를 완전히 덮는 구조보다는 “덜 거슬리는” 쪽이 좋겠다는 생각으로오픈닷 원을 선택했습니다. 3개월 실사용 후기결론부터 말하자면 운동용으로는 아주 만족스럽습니다.노캔이 없는 대신 주변 소리를 인지할 수 있어서러닝할 때 차량이나 자전거 접근을 바로 알아차릴.. 2025. 10. 11.
자바스크립트의 메모리 관리 (가비지 컬렉션) 자바스크립트에서는 개발자가 메모리를 직접적으로 해제하지 않고도 자동으로 메모리를 관리해 주는 언어이다.메모리 관리는 크게 다음 두 가지로 나눌 수 있다.1. 메모리 할당 (Memory Allocation)메모리 할당은 단순하게 변수를 선언하고 값을 할당할 때 발생된다. 2. 가비지 컬렉션 (Garbage Collection)가비지 컬렉션은 할당받은 메모리가 더 이상 사용하지 않을 때 메모리에서 해제하여 메모리 누수를 방지하는 과정이다.자바스크립트에서는 Mark-and-Sweep 알고리즘을 사용하여 가비지 컬렉션을 수행한다. 마킹 단계: 모든 객체가 "도달 가능"(reachable)한지 여부를 결정합니다. 도달 가능한 객체는 루트(root) 객체(예: 전역 객체, 스택에 있는 변수들)에서 시작하여 참조를 .. 2024. 6. 9.
xcodebuild: WARNING: Using the first of multiple matching destinations: React Native ios 빌드실행중 해당에러 발생xcode File > project Settings... 프로젝트 경로로 설정해주었다 2024. 2. 17.
가민 에픽스 gen2 후기(일상편) with 피닉스7x 목차 서론 피닉스7x의 단점 피닉스7x의 장점 워치 페이스 스트랩 알림 충전 마무리 서론 기존에 갤럭시 워치 액티브 2 44mm 블루투스 스테인리스 모델을 3년 조금 넘게 사용하다가, 운동용으로 사용하기에는 배터리가 너무 약해져서 이번에 가민 모델로 갈아타게 되었다..! 19년도에 액티브2 알루미늄 모델이 직접 차 보니 장난감 같은 느낌이어서.. 스테인리스 모델로 바로 갈아탔었다.. (워치 페이스가 그립다..) 가민 제품을 유튜브나 카페에서 찾아보고, 매장에서 실물까지 확인한 후 배터리 깡패라고 불리는 피닉스 7x와 엔드류2 에 눈길이 갔었다.(AOD 기준으로 15일, 태양광 충전까지 하면 +@) 두 모델 가격대가 만만치 않아서... 상태 좋은 피닉스 7x를 입양하게 됐다! 결론부터 말하자면 날씨가 너무.. 2023. 1. 29.
반응형

티스토리툴바