kasumil의 코딩 공작소

NextJS로 3일 걸려 만든 사이트를 배포했다.아직 뭐 코드 리팩토링도 해야겠지만... MVP 우선이라 배포했다.기존에 index파일을 읽는 정적개념에서 동적개념으로 사이트가 바뀌었는데, 이게 아주 골때리더라...npm run start로는 안되고 무조건 pm2로 무중단 적용해야한다.근데, pm2로 사용시 접근이 안되는 문제가 발생.npm pm2 install 해서 프로젝트 내부에서 pm2 적용했다.원래는 글로벌로 설치해야하는데, 시놀로지에선 그게 안되더라.예전에 산 데탑을 리눅스 깔고 할까 고민할정도...아무튼 로컬 Pm2 적용하니 동적 사이트로 잘 작동한다.기존에는 node index.js로만 호출하면 서버 db가 작동되었는데프로젝트 내에 pm2를 로컬로 설치하니까db도 잘 호출된다!기존에는 시놀로..

nas에 적용하는건 금방했는데, 권한 오류가 나서 자꾸 git pull이나, pm2 작동에서 오류를 뱉었다. 빡시더라.. Synology NAS 기반 Node.js API 서버 설정 및 배포 자동화 문서✅ 프로젝트 개요서버 위치: Synology NAS (/volume1/web/api)기술 스택: Node.js (Express), MariaDB, PM2, GitHub Actions배포 방식: GitHub main 브랜치 병합 → GitHub Action → SSH → NAS 배포1. NAS 초기 설정📁 디렉토리 구조/volume1/web/api🛠 Node.js 설치 위치/volume1/@appstore/Node.js_v18/usr/local/bin/node🌐 리버스 프록시 설정도메인: api도메인포..

Synology NAS + Express API 서버 구축 및 자동 배포 문서1. 시스템 구성 개요- NAS: Synology DSM 7.x 이상- Node.js 앱 위치: /volume1/web/api- 웹 도메인: api.kasumil.co.kr- DB: MariaDB 10 (NAS 내부 설치, 외부 비공개)- 자동 배포: GitHub Actions + SSH Key 기반2. 기본 설치 및 준비✅ Node.js & Git 설치- Node.js / npm: SSH로 접속 후 `node -v`, `npm -v` 확인- Git: DSM 패키지 센터 → Git 설치3. Express API 프로젝트 구조/volume1/web/api├── index.js # Express 앱 진..

그냥 헬로 월드만 하긴 그래서 버튼 클릭시 백그라운드 변경 이벤트를 추가했다. https://youtube.com/shorts/YZRi2gQg318?feature=share  프로젝트 소스코드는 깃허브에 있다.https://github.com/kasumil/RN_HelloWorld

신규 프론트엔드 개발자로 취업했다가 php를 배우고 코드이그나이터3, 4를 이용한 사이트 개발을 배웠는데,php는 인기가 없는 언어이고, react로 돌아갔더니 거진 PRD, IA, usecase를 통한 문서 개발을 진행하지 않아서,주먹구구식 개발로 기획문서 하나만 받아서 그런지회사에서 배운게 없네... 프레이머는 스크롤 모션때문에 배웠는데, 리액트 훅 폼은 컨트롤이 어려워서 못 쓰던거고,나머지는 처음보는 것들이네... 회사는 주먹구구 개발만 안해도 좋은 회사인듯 싶다.https://lucide.dev/guide/packages/lucide-react Lucide IconsBeautiful & consistent icon toolkit made by the community.lucide.devhttps:..

this?이게 왜 어렵나 하면, 그때그때 다른값을 가르키기때문이다. 자바스크립트 전역컨객체를 가리킨다. 함수 vs 메서드 thisthis가 어려운 이유는 아래와 같다.var obj = { outer: function () { console.log(this); var inner = function () { console.log(this); }; inner(); var obj2 = { innerMethod: inner, }; obj2.innerMethod(); },};obj.outer();/// 응답값 // {outer: ƒ}// Window {0: global, window: Window, self: Window, document: document..

실행컨텍스트란? 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 실행컨텍스트는 기본적으로 stack방식으로 진행되며그 내부에는 this binding, variable enviroment, lexical enviroment로 구성.이중 variable enviroment, lexical enviroment 내부에는 enviromentRecord와 hoisting이 들어 있는데,enviromentRecord 내부에는 식별자(변수명)들이 저장됨.이때, 호이스팅이 진행되어 사용될 변수, 함수들이 최상으로 끌어올려지게 작동됩니다. 해당 내용이 적용되면 코드를 한줄한줄 파서 할때랑 다르게 작동됩니다. 함수선언문은 함수표현식과 다르게 해당 내용이 중복될 경우 덧씌워버리지만 에러가 작동되지 않는다.그러나 표현식의..

자바스크립트 데이터 타입기본형(number, string, boolean, null, undefined, symbol)과참조형(object, array, function, date, regexp, Map, WeakMap, Set, WeakSet)이 존재함.  변수는 변할수있는 수식별자 변수의 이름. 변수를 선언let a; 변수 데이터 할당a = 'Hello World'; 이렇게 진행할 경우 메모리영역에서 아래와 같이 진행된다.변수 주소1000100110021003데이터 이름 : a값 : @3000  데이터 주소3000300130023003데이터"Hello World"   위와 같이 데이터영역과 변수 영역이 나누어진 이유는메모리의 낭비를 줄이기 위함과 가변적 메모리 길이에 대응하기 위함 위의 내용처럼 변수..

import { cookies } from "next/headers";import { NextResponse } from "next/server";import type { NextRequest } from "next/server";export async function middleware(req: NextRequest) { const cookieData = await cookies(); const token = cookieData.get("TokenData"); const publicPaths = ["/login", "/sign-up"]; const isPublicPath = publicPaths.includes(req.nextUrl.pathname); const isFile ..

기존 마이크로소프트의 코드푸쉬가 지원 종료될 예정이다. 3/31일부로...그렇기에 나도 코드푸쉬를 배우려다가 해당 내용을 skip하고, hot-updater로 적용하려고 한다. https://gronxb.github.io/hot-updater/index.html Hot UpdaterSupport New / Old ArchitectureCompatible with both the new and old React Native architectures, offering maximum flexibility for your projectsgronxb.github.io 설치단계1. https://gronxb.github.io/hot-updater/guide/getting-started/quick-start-with..