개인코딩개발공장

Introduction요즘에 메모리관련해서 관심이 많다.특히 어도비 어플리케이션을 사용할때 메모리 문제가 많이 생긴다.. 잘못만든것같음최근 이슈가, 일러스트레이터 작업을 하면 사용중인 메모리가 폭발적으로 증가한다. 뭐 이건 당연한거임. 일러스트레이터가 무거운 프로그램이니까.최근 ram업그레이드를 했어서 어느정도 메모리 사용은 충분히 가능하나, 이상한 점이 생겼다.일러스트레이터를 사용후 메모리가 증가하는건 당연한건데, 일러스트레이터를 종료후에도 사용중인 메모리가계속 증가되어있다. 메모리를 자동으로 비워주겠거니 하고 하루정도 기다렸으나 상승되었던 메모리는 줄어들지 않는다.또한 일러스트레이터 사용시에 tmp경로에 이상한 ai관련 프로세스들이 많이 생긴다.일일히 찾아 종료해주기도 그렇고 참..그래서 일러스트레이..

Introduction이번 포스팅부터는 최근에 공부하고 적용해본 내용이다. 물론 혼자 코딩할때 사용할 수 있는 방법이다.한 프로젝트를 진행하면서 레포지토리에 백업하고 다시 갖다쓰는 방법은 이전 포스팅에서 다뤘다.그럼 이제 한 프로젝트를 기능별로, 작업별로 구분해서 관리하고 싶다면 어떻게해야할까?이번 포스팅에서 다룰 내용이다.branch, switch, merge에 대해서 araboza 상황을 만들어보자muzzi project라는 디렉토리를 만들고 깃으로 관리하게  해줬다.세가지 기능을 각각 파일로 분리해줬음. user기능, board기능, error기능 등 코딩을 할거다. 각각의 파일은 저런 코드가 담겨있음이미 디렉토리 별로 코딩을 알아서 하면된다. 작업을 파일, 디렉토리별로 구분하는건 뭐 다들 사용해본..

Introductiongit은 단순히 협업 툴? 이런 용도로 다들 인식하지만 난 혼자서 맨땅에 대가리 박으며 공부를 한 터라, 사실 협업이란게 무의미했다.그래서 맨처음엔 아예 시작도 안했는데 어느순간 필요성이 느껴진 이유가, 바탕화면에 코드 파일들이 아주 더럽게 넘쳐나서부터이다. 재사용되는 코드가 있는데, 계속 뭔가 덧붙여져서 원본 파일 찾기도 매우 힘들었음.참고로 난 깃을 코딩을 시작한지 약 1년? 정도 지나서야 깃을 깔짝깔짝 만져봤던것같다.사실 포스팅을 읽으면 왜 이런 기본적인걸 포스팅까지하지? 라는 의문점이 들테지만 나도 예전에 깃을 처음 접했을때, 굉장한 이질감을 느꼈던 이유가 왜써야하는지 잘 못느꼈기때문이었음. 떄문에 과거의 나같은 코찔이들을 위해 포스팅을 할거다.때문에 활용방법 위주로 포스팅하..

노트북을 지금 5년넘게 사용중인데 램을 따로 사서 업그레이드를 했다. 내 노트북은 기존에 8GB짜리 두개로 총 16GB의 메모리가 있었는데 이번에는 16GB짜리 두 개를 사서 총 32GB로 업그레이드를 한것이다. 예전엔 프로그래밍을 하면서 사실 단순한 웹사이트 제작시에는 크게 메모리 부족이슈는 없었다. 하지만 점점 배우다보니 여러가지 툴들이 필요해서 설치하게되었고 동시에 사용하다보면 16GB의 램용량으로 실사용 메모리공간이 90%에 임박하는일이 잦더라. 그래서 그때그때 안쓰는것들은 종료해주는식으로 운영을 했는데.. 데스크탑을 기본 다섯 여섯개로 작업공간을 분리하고, vs코드만 한두개 키더라도 그게 램 20%용량은 사용중.. 크롬 여러개 띄우면 걍 기본 80후반대 .. 컨테이너도 몇개 띄우다보면 금새 90..

Introduction이전 jwt포스팅 시리즈중 access토큰까지는 그래도 코드를 봐줄만했으나 refresh토큰이 추가된 순간 아주 코드가 더럽고 불결해졌다. 이걸 깔끔하게 하기위해서 jwt토큰로직을 interceptor, module, middleware을 활용해서 깔끔하고 재사용성있게 고쳐보자. Interceptor일단 우리가 흔히 쓰는 axios요청을 보자. axios.get("/api/test").then((res) => { console.log(res.data.message); }).catch((err)=>{ console.log(err.message) });내가 지금까지 계속 사용했던 axios요청이다.근데 /api요청으로 보내는 axios를 아예 변수로 선..

Introductionjson web token 보안방법에서 refresh token에 대해서 차근차근 포스팅하겠다. 처음부터 와라라락 써버리면 읽는 사람들은 머리가 터질것이기 때문.공부 목적이길래 코드가 매우 더러울것이다. 누군가가 jwt인증을 쓰고싶어서 이 포스팅을 본 후, 이 코드를 복붙해 가지 말길 바란다. 원래 이렇게 안쓰니까. 제발 # refresh token은 어떻게 생겼을까?난 처음에는 access token과 refresh token은 다르게 생긴줄 알았다.하지만 두개는 각기 다른 토큰일뿐 생성 및 방식 자체는 아예 똑같다.const jwt = require("jsonwebtoken");const dotenv = require("dotenv");dotenv.config();const ma..

Introduction사실 개발하면서 많이들 배우는 웹소켓인데 난 남들과는 다르게 배워왔고 내가 만들려고 목표했던 서비스는 웹소켓 기능이 필요가 없었다. 근데 이번에 개인 프로젝트를 하면서 기능개발하는데 필요한것 같아서 배우게됨.쉽다고해야할지 어렵다고 해야할지.. 암튼 배워두면 좋은 내용임.   # 우리가 흔히 아는 api통신우리가 프론트랑 백을 개발했다고 하고 프론트서버에서 클라이언트가 받은 웹사이트가 렌더링되고 그 클라이언트는 백단으로 각각 기능마다 api요청을 보낸다. 해당 api요청을 받으면 백단 서버는 그에 맞는 응답을 해준다.1요청 1응답. 이게 바로 우리가 아는 기본적인 api요청 플로우? 원칙? 같은거다.  # 만약 이런기능을 개발해보려고 한다면?프론트단 백단 전부 구현을 해본사람이라면 알..

Introductionasync / await 함수를 araboza# 일반함수와 다른 점const fuc = () => {};const asyncFuc = async () => {};console.log(fuc);console.log("일반함수는 ", fuc(), "를 리턴해");console.log(asyncFuc);console.log("async함수는 ", asyncFuc(), "를 리턴해");이 코드를 실행해보자.일반함수 fuc이랑 asyncFuc이라는 async함수를 만들어줬고 콘솔로 각각 함수객체와 호출후 리턴되는 값을 출력해봤다.일반함수는 함수객체 출력값이 function으로 나오고 리턴값은 없으니까 undefined를 출력한다.하지만 async함수는 함수객체가 AsyncFunction으로 ..

Introduction사실 나도 jsdeepdive를 뒷쪽은 못읽었다. 지금 1년전에 600페이지까지 10회독한게 마지막 ㅠ암튼 그래서 아직 개념은 좀 부족하지만, promise로 동기 비동기 처리는 자주해봤고 얕게는 알기때문에 단순히 동기 비동기처리하는 방법을 포스팅하려고한다.ㅅㅂ급한불이 너무많아서 딥다이브 언제 다시 공부할수 있을지 ㅠ # 심심해서 뜯어봄console.log(Promise);nodejs에서 Promise 예약어를 콘솔로 출력해보면 Function이라고 나옴좀 더 자세히 보기 위해서 브라우저 개발자도구에서 dir해보면이렇게 Promise생성자함수객체를 대략적으로나마 볼 수 있는데, 파라미터로 받는 resolve와 reject도 들어있고프로토타입에 밥먹듯 쓰는 then, catch, fi..

Introduction예전에 비동기처리를 처음 배울때 너무 이해가안됐다.단순하게 이 함수 실행하고 완료되면 다음 함수 실행되게 하고싶은 내맘을 몰라주는 js였었음.구글링을 해도 큐 스택이니 뭐니 저러니 자라니 고라니...지금이야 밥먹듯이 휘갈겨대는 코드지만 나같은 코찔이들을 위해 동기 비동기처리를 이해할 수 있게 최대한 쉽게 포스팅을 해보겠음.환경은 nodejs임# 1setTimeout함수는 js에서 기본적으로 제공해주는 전역함수다.console.log(global)이걸 쳐보면(브라우저 js에서는 window치샘)전역함수로 저렇게있다. api요청할떄 기본으로 들어있는 fetch도 저기 있어서 기본적으로 js에서 호출할수 있는거임 그럼 이 함수는 어떻게 쓸까?setTimeout(여기에 함수가 들어감!, 여..