어제 보다 나은 나

디자인 패턴 MVC Model/View/Controller 를 의미합니다. model은 데이터, view는 화면, Controller는 model 즉 데이터를 가지고 변형해서 view(화면)에 그립니다. 내가 구체적인 예시 없이는 정확한 이해에 약한 타입이라 예시를 들어서 보면, 일반적인 어드민 페이지를 생각해보자. 우리가 페이지를 들어오게 되면, axios든 fatch을 이용하여 서버를 통해 DB에서 보고 싶은 데이터를 불러온다. 이 데이터가 model이 된다. 우리는 이 model을 html과 css로 만들어진 테이블 같은 화면에서 보게 된다. 이때 화면 즉 html,css로 만들어진 화면이 view가 된다. 이 상태에서 우리가 날짜 데이터를 입력한다고 생각해보자. new Date()나 dayjs로 ..

개발 환경(인프라)를 코드로 관리할 수 있게 해주는 오픈 소스 인프라 즉 EC2같은 인스턴스, 로드벨런스, 접근 관한등의 설정을 말한다. 그러면 인프라를 세팅하는 과정을 생각해보자. 어느 클라우드 서비스를 사용할지 선택하고 해당 클라우드 서비스의 config를 이용하여 필요한 서비스 (ec2, s3) 등을 설정한다. 간단하게 생각하면 이렇게 되는데 테라폼은 어떻게 이 과정을 거치는 지 알아보자. 먼저 테라폼의 핵심적인 플로우는 다음과 같다. write - 사용할 resource들을 정의한다. plan - 테라폼이 인프라 구성체를 생성하고, 수정하고 삭제하는 실행 계획을 생성한다. apply - 테라폼이 리소스의 종속성을 지키면서 동작한다. 알아보기 앞서서 테라폼의 파일 확장자명은 .tf 되시겠다. 명칭 ..

우리는 단일 js파일을 노드 환경에서는 'node ~.js' 이런 식으로 실행 할 수 있다. 그렇다면 돌아가고 있는 서버 안에서는 어떻게 이런 스크립트를 실행시켜야할까. const exec = require('child_process').exec; const execSync = util.promisify(require('child_process').exec); exec는 Node.js에서 다른 프로세스의 명령을 실행할 때 사용한다. 또한 exec함수는 shell을 사용하기 때문에 편하게 사용할 수 있다. 하지만 exec함수는 콜백함수를 받아서 동작하기에 async await같은 프로미스를 이용하는 구문에서는 처리가 귀찮을 수 있다. 이럴 때 execSync 처럼 프로미스를 리턴하도록 만들어 줄 수 있다...

반복적으로 들어오는 이벤트의 환경을 세팅하는게 번거롭기에 자동으로 인스턴스와 이벤트를 관리해주는 기능 개발 어드민에서 서버스팩선택해서 서버생성 버튼 클릭시 인스턴스 생성 및 user-data 파일실행하여 웹서버 실행 초기 세팅 env app.module.ts import { ConfigModule } from '@nestjs/config' @Module({ import: [ConfigModule.forRoot({ isGlobal: true})] }) 이렇게 import 해주면 프로젝트 루트 경로의 .env파일을 읽어와서 process.env를 통하여 사용할 수 있게된다. 추가적으로 모듈을 다른 모듈에서 사용하려고하면 사용하려는 모듈을 import해줘야하는데, isGlobal옵션으로 다른 모듈에서는 Imp..

redux, recoil 등의 전역 상태 관리 라이브러리도 있고, contextAPI처럼 react 자체 기능으로 전역 상태를 관리 할 수도 있다. 개인적으로 recoil이 react 스러워서 보기 편하지만, 그냥 쓰기 쉬운 zustand를 맛보도록 하자. 독일어로 "상태" 라는 의미라고하니 이 얼마나 직관적인가. yarn add zustand 라이브러리를 설치 해주고, store폴더에 걸맞는 이름으로 파일을 만들어주자. src > store > login.ts import { create } from 'zustand'; interface LoginStore { isLogined: boolean; login: () => void; logout: () => void; } export const useLog..

프로젝트를 진행하다 보면, 간단한 관리자 페이지를 자주 만들게 된다. 관리자 페이지의 특성상 비슷한 레이아웃이 반복되서 사용되기 마련이다. 간단히 그려보면 const Layout = ()=> { return ( { children} ) } 이런 식의 레이아웃이 있다고 했을 때, 각각의 페이지 컴포넌트에서 이 레이아웃 컴포넌트를 가져다가 사용한다면 const UserPage = ()=> const StorePage = ()=> const InitPage = ()=> 이렇게 각 페이지마다 레이아웃 컴포넌트를 선언해줘야 할 것이다. 하지만 react-router를 사용한다면, 조금 더 이쁘게 사용할 수 있다. const Router = ()=> { return ( ) } // 이떄 layout컴포넌트 cons..

요즘 매우 바쁘다. RND하던 프로젝트가 메인 프로젝트로 올라와서 정신이 없다. 최근에 개발한 기능은 이미지 생성을 위한 작업을 하다가 뒤로가기, 되돌리기 등의 히스토리 작업이었다. 가장 먼저 든 생각은 양방향 링크드 리스트 이지만, 일단 빠른 개발을 위해 배열과 포인터만 가지고 구현해보기로 했다. 일단 히스토리가 쌓일 배열을 하나 만든다. 그리고 현재 우리가 기억하는 히스토리의 위치를 저장하기 위해 포인터를 하나 둔다. const history= []; const historyPointer = 0; 이제 작업을 하게 되면 저 history배열에 들어가게 된다. const history= [ { 작업 데이터1 }, { 작업 데이터2 }, { 작업 데이터3 }, ]; 이때 히스토리를 쌓는 방향을 잘 정해야..

chat gpt의 등장으로 ai가 뜨면서 회사에서도 이 진보한 기술을 사용하는 프로젝트를 시작했다. 여러 업무중에 나는 이미지에서 특정 물체를 찾아서 지우는 업무와 이미지에서 텍스트를 찾아내서 지우는 추후에는 분석해서 번역하는 업무를 진행하였다. 1번 물체를 찾아서 지우는 기능은 LLAMA 모델을 기반으로 만들어진 lama-cleaner를 사용하고, 2번 텍스트를 찾아서 지우거나 교체하는 작업은 easyOCR을 이용해서 진행하였다. 일단 프론트에서 사용할수 있는 기능이어야 했기에 레이아웃 구조부터 잡으면서 시작했다. 먼저 수정할 이미지는 작업하면서 계속 확인할수 있어야했기에 가장 아래쪽에 두고, 수정된 이미지가 보여질 레이아웃을 중간에, 수정할 부분을 선택할 박스를 가장 위로 올렸다. 그럼 먼저 이미지를..

오래만에 글을 쓰는 점에 먼저 반성한다... 반성을 했으니 글을 써보자. 오늘의 주제는 react에서 텍스트쓰기 이다. 하지만 이제 줄바꿈을 곁들인. 일반적으로 react는 상태를 통해 화면을 그린다는 철학을 기반으로 하니까 const [text,setText] = useState(''); ... {setText(e.currentTarget.value)}} 이런 식으로 텍스트를 입력받게 된다. 하지만 일단 input으로는 줄바꿈이 안된다. 여러줄을 입력받으려면 textArea를 이용해야한다. setText(e.currentTarget.value)} /> 여튼 이렇게 줄바꿈을 해서 입력한 textarea의 값을 일반 div에 보여주려고 {text} 이렇게 해버리면 줄바꿈이 안되어있다! 그 이유는 의외로 c..

사내 프로젝트에 게임서버와 같이 대기실과 게임방 같은 기능이 필요하여 해당 기능에 Socket 기능을 담당하게 되었다. web socket기술은 혼자서 심심풀이로 6인용 캐치마인드를 만들 때 써본게 다인데.. 그거면 되려나 일단 nest.js 를 기반으로 소켓 서버를 띄울것이다. nest new project-name nest 명령어로 기본 세팅 설치하고~ npm i @nestjs/websockets socket.io socket.io와 nestjs/websocket을 설치해준다. src 폴더에 socket을 위한 모듈 폴더를 생성해주고 고 안에 socket.module.ts 와 socket.gateway.ts 파일을 만들어준다. nestjs와 socket.io 에 관련된 글을 좀 읽어봤는데, nestj..