bcoding-lab

인기글

• 

  [HTML/CSS] 자동으로 조절되는 세로줄 긋기 Start! 프론트엔드 개발자는 아니지만 태그를 이용해서 가로선을 만들 수 있다는 것을 알고 있었다. 개인 프로젝트에서 화면정의서를 만들다가 연출면에서 선을 세우면 좋겠다는 생각을 했다. 물론 피그마로 디자인을 할 때까지만 해도 이 선 세우는게 그렇게 오래걸릴 줄 몰랐다. 시행착오 끝에 세로줄 긋기에 성공한 나의 과정을 시작하도록 하겠다. 혹시 하는 방법만 알고 싶은 사람은 맨 아래 '정리'에 간략하게 정리해두었으니 참고하길 바란다. 예..? 선을 세우라고요?현재 개인 프로젝트로 만들고 있는 에는 스레드(내용)를 한 번에 볼 수 있는 List가 존재하고 디자인 요소를 넣기 위해 세로선이 필요했다. 처음엔 가로선을 그을 수 있는 태그로 만들 수 있다고 생각했는데.. 아니었다. 찾아보니 현재까지 세로선을 손쉽게 만들.. 댓글 0 2022.12.13

• [Axios] query를 보내고 싶은 그대, 이것만 기억하기 query 그거 어떻게 하는건데? 백엔드 개발자가 axios를 쓴 이유가 뭐냐고 궁금해 할 수 있다. 단일 레포 즉, Monolithic 서비스라면 axios를 백엔드에서 사용할 이유가 없을테지만, MSA로 서비스를 운영해야한다면 나눠진 A라는 서비스에 B라는 서비스가 통신하기 위해서 axios를 사용할 수 있다. 현재 우리 회사에서는 MSA와 클라우드 아키텍처로 인해 axios를 사용하고 있고, API를 전적으로 담당하는 나는 점점.. axios 장인이 되어가고 있다 🤣 이번에는 axios에서 query를 보내고 싶을 때 어떻게 하는지 알아보도록 하자. { params: } 필수 body나 param을 보낼때는 그리 신기하지 못해 포스팅 할 필요성을 못느꼈다. 하지만 query는 익숙하지 않아 잘 까먹.. 댓글 0 2023.03.09

• 

  TypeScript에서 란 무엇일까? - Generic Type 들어서며 TypeScript는 단순하게 JavaScript에서 Type을 추가해준 언어이다. 하지만 TypeScript를 쓰면서 라는 새로운 아이를 만나게 된다. 처음에는 를 만나거나 쓸 일이 없어 단순하게 넘겼지만 TypeScript로 개발을 하면서 자연스럽게 를 만나게 되었다. 그럼 가 무엇이고 왜 TypeScript에서는 이걸 쓰는지에 대해서 이야기해보도록 하자. 쓰는 이유 JavaScript는 다른 언어들과 달리 type을 입력하지 않기 때문에 자유롭다. 그만큼 위험부담이 높기 때문에 JavaScript 개발자들은 필수적으로 TypeScript를 이용해서 type에 따른 위험 요소를 줄이고자 한다. TypeScript는 함수나 클라스를 사용하기 위해서는 미리 Type을 지정해줘야 한다. 그렇지만 .. 댓글 1 2022.09.26

• 

  피그마 가로 스크롤 안 될 때 해결방법 피그마로 앱 디자인을 공부하던 중 가장 유용하게 쓰일 가로 스크롤이 안 되었다가 해결한 방법에 대해 공유하도록 하겠습니다. https://youtu.be/t5G87A3t2CM 연정님 유튜브 연정님의 유튜브를 보면서 세로 스크롤은 잘 되었는데 가로 스크롤이 되지 않아 난감했습니다. 분명 저는 잘 따라했는데 말이죠..(아님 ㅎ) 유튜브에서 나온 가로 스크롤 방법으로는 1) 5개의 카드를 선택한 후 Aato Layout를 클린해줍니다. 2) 오른쪽 클린 후 Frame selection을 눌러줍니다. 3) Prototype에 들어가서 No scrolling을 Horizontal scrolling으로 바꿔줍니다. 하지만 저는 작동하지 않았습니다. 유튜브 영상에서 제가 무심코 넘어갔던 부분이 큰 파장을 불러 일으켰.. 댓글 0 2021.08.25

• 

  [Bun 시리즈] #4 Bun에 어울리는 프레임워크 고르기! - express vs fastify vs hono 그대 express를 왜 버리는가? NodeJS + express + TypeScript 조합은 국룰 👍 express라는 프레임워크를 쓰는 이유는 국룰이라는 말이 나올 정도로 정~말 많은 이들이 쓰기 때문이다. 그만큼 안정성이 있다는거고 문제가 발생해도 많은 이들의 도움을 받을 수 있다. express를 주제로 한 글도 많다. 하지만 런타임을 Bun으로 쓰기로 한거 프레임워크를 express로 하기엔 신식 + 구식 느낌이여서 싫다. 이번 기회에 프레임워크도 신식 느낌으로 프레임워크 두가지를 알아봤고 최종적으로 하나를 선택했다. fastify와 hono 간단 소개 아마 fastify는 들어봤을거다. 이름처럼 빠른 처리 속도와 낮은 오버헤드를 자랑하며 고성능을 목표로 하는 프레임워크다. 하지만 인제 hon.. 댓글 0 2024.01.23

• 

  [NodeJS] API 문서 툴 Swagger 사용해서 API 문서 자동화 (+ swagger-autogen) 회사를 다니면서 프론트와 백엔드가 협업하기 위해서 가장 필요한 요소가 API 문서라는 것을 알았습니다. 클라이언트-서버 간의 통신을 정리하는 것이 API 문서입니다. 근데 이걸 아주 조금이라도 잘못 쓰거나 누락시키면 큰일이 됩니다. 그렇기 때문에 API 문서를 작성해주는 툴들이 존재하고 그중에서 가장 유명한 Swagger입니다. Swagger를 찾아보니 일일이 주석을 작성해야해서 굳이 이걸 써야 하는가에 대해 고민했습니다. 귀찮은 것을 싫어하는 개발자답게 좀 더 찾아보니 swagger를 자동 생성해주는 라이브러리가 있더라고요! swagger-autogen을 이용해서 한 번 API 문서를 자동으로 만들어보도록 하죠. 1. 서버(nodemon 포함)를 멈추고 라이브러리 설치 - 매우 중요 ⭐️⭐️⭐️⭐️⭐️.. 댓글 0 2022.05.26

최신글

• 

  PostgreSQL GUI 프로그램 TablePlus 설치 운영체제에 맞는거 선택설치 후 실행하면 상단에 있는 + 클릭 후  PostgreSQL 선택user, password, database 입력 후 connect.굳. 2024.11.05

• 

  #10 알고리즘적 접근: times 값을 최신순으로 재배치 + 알고리즘 문제로 만들기 times 값을 최신순으로 재배치하고 이를 시각화하는 문제사용자가 새로운 데이터를 작성하면 그 즉시 UI에 반영되도록 구현하는 것은 흔한 요구 사항입니다. 하지만 데이터를 단순히 나열하는 것보다 더 중요한 것은 이를 직관적으로 파악할 수 있도록 시각적으로 배치하는 것입니다. 이러한 요구에 따라 최신 데이터를 기준으로 재배치하고, 이를 시각적으로 표현하는 UI를 구현하게 되었습니다. 이 UI는 사용자가 데이터의 최신 상태를 한눈에 파악할 수 있도록 돕기 위해 설계되었습니다. 기본적으로 times 값을 기반으로 그리드가 생성됩니다. 예를 들어, 최신 회차(회차 수를 나타내는 times 값)가 12인 경우, 12개의 정사각형이 그리드를 구성하며, 각 데이터의 times 값에 따라 정사각형의 색상이 결정됩니다... 2024.08.17

• 

  react native ios network request failed error fix fetch로 Open API 통신을 하려고 하는데 network request failed라는 오류가 나온다.원인은 iOS가 기본적으로 HTTP 요청을 허용하지 않고 HTTPS만 허용하다는 것. HTTP 요청을 활성화하려면 어떻게 해야할까? 보편적으로 알려진 방법은 Info.plist 파일에 들어가서 한가지를 바꿔주는거다.NSAppTransportSecurity NSAllowsArbitraryLoads 원래라면 false로 되어져 있거나 아예 없을 수도 있다. NSAllowsArbitraryLoads를 true로 해주거나 넣어주면 된다. NSAllowsLocalNetworking예외로 혹시 NSAllowsArbitraryLoads 아래에 NSAllowsLocalNetworking이 있다면 이건 없애주.. 2024.07.25

• 

  NodeJS Version nvm을 통해 올리기 React Native 좀 할까 하고 이거저거 만져보다가 버전 올리라고 해서 올려봤다.대충 npm version update 뭐 이런 cli로 되면 얼마나 좋을까 싶은데 안된다. nvm을 통해 수행해야하는데 node version manager의 약자이다.nvm은 여러 버전의 Node를 쉽게 괸리할 수 있게 해준다. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash물론 그러기 위해서는 nvm 부터 설치해야한다. 잘 설치가 됐다면 아래 명령어를 연달아 해준다. nvm install --ltsnvm use --ltsnode -v두번째 명령어를 사용해 성공적으로 실행됐다면 Now using node v20.15.1 (.. 2024.07.21

• #9 프리징된 코드만을 ec2 인스턴스에 pull 하기 git checkout 사용하기 새로운 개발을 시작하면서 코드를 프리징했다.https://bcoding-lab.tistory.com/422 [GitHub] 코드 프리징 하기데이터 개편을 앞두고 현재까지 잘 동작하는건 프리징 하기 위해 알아봤다. 1. 태그 설정 2. 릴리즈 추가 두가지만 해주면 코드를 프리징 할 수 있다. 1. 태그 설정 git graph에서 프리징 해줄 커밋을bcoding-lab.tistory.com 근데 코드 프리징만 하고 뭉치를 최신화를 안해주고 개발을 시작하는 바람에 현재 간극이 크다.그렇다면 ec2 인스턴스에서 프리징된 코드만을 어떻게 올릴까? git checkout을 사용하면 된다.기존이었다면 git pull 이라고 했을텐데 git fetch --allgit checkout t.. 2024.05.24

• 

  #8 오랜만에 들어가는 바람에 까먹은 AWS ec2 서버 들어가는 법 오억만년 만에 방치했던 프로젝트의 서버에 들어가기 위한 명령어가 기억이 나지 않았다 😅(사람이 그럴수도 있지...) 그러다가 ec2 탭에서 어떻게 했던게 기억나서 이거저 누르다가 '연결'이 눈에 띄었다.아니나 다를까 누르니  짜잔~ssh 프라이빗 키 파일이 있는 곳에서 '예:' 아래에 있는 명령어를 그대로 쳐주면  새를 다시 볼 수 있다^^ 2024.05.24

• 

  [GitHub] 코드 프리징 하기 데이터 개편을 앞두고 현재까지 잘 동작하는건 프리징 하기 위해 알아봤다. 1. 태그 설정 2. 릴리즈 추가 두가지만 해주면 코드를 프리징 할 수 있다. 1. 태그 설정 git graph에서 프리징 해줄 커밋을 누르면 Add Tag을 할 수 있다. name은 v.0.0.1이든 v.1.0.0으로 본인이 생각하는 버전으로 만들어주면 된다. type은 바꿀 필요 없이 Annotated로 해주고 push to remote을 체크해줍니다. add tag을 누르면 얼마 걸리지 않아 태그가 설정 된것을 볼 수 있죠. github로 가서 해당 레포의 tags를 보면 잘 올라간 것을 확인 할 수 있다. 2. Releases 버전 생성하기 레포 메인 화면에 보면 Releases을 보면 create a new release을.. 2024.02.20

• 

  [NextJS] params 가져오는 법 - 동적 라우팅 하기 하고 싶었던 것 사용자가 /test/123b123b123 이라는 URL로 들어왔다. 그럼 :id인 123b123b123을 뚝 떼어내서 그걸 Backend 파라미터로 보내주고 싶었다. 기존 React의 경우 useParams()을 이용해서 가져왔다. NextJS의 경우 useRouter() 해서 router.query를 하면 된다고 한다. 될까? 안된다 ❗️ 정확히는 문제가 있다. NextJS는 React와 달리 폴더 구조의 라우팅을 한다. 즉 app/test라는 폴더 안에 page.tsx가 있다는 말인데 여기에서 파라미터인 :id로 사용자가 URL을 치고 들어오면 NextJS에서는 경로를 찾지 못한다. 동적 라우팅 그렇다면 어떻게 해야할까? 간단하다. 동적 라우팅을 해주면 된다. 말이 거창한데 그저 기존.. 2024.02.13

• 

  [NextJS] CSS을 사용하는 방법 - Tailwind CSS NextJS가 밀어주는 스타일링 방법 본래 CSS-in-JS 마저 안 쓰고 있던 난 최근에 Tailwind CSS라는 새로운 프론트 기술을 알게 됐다. 알게 되는건 좋으나 지금도 불편함을 느끼지 않았기에 도입할 생각이 없었다. Next 공식 문서에서 한 단어를 보게 되기 전까지는 말이다. exceptionally라는 부사를 붙일 정도로 Next에서 적극 추천한다. 이야... 이건 못 참지 😋 바로 공식문서에 나온 코드 그대로 실행하려고 하다가 bun이라는 걸 기억하고 bun 공식문서엔 따로 적혀 있는게 없어서 걍 아래와 같이 코드를 쳤다. bun install tailwindcss postcss autoprefixer bun tailwindcss init -p tailwind.config.js 파일이 생.. 2024.02.11

• 

  귀찮은데 귀여운 거위 Mac에서 키우기 - Desktop Goose 어느날 컴퓨터에서 거위를 키울 수 있다는 걸 알게 됐다. 혼자서 돌아다니고 이상한 밈도 가지고 오고 마우스까지 가지고 간다는 말에 호기심 발동 ㅋ https://samperson.itch.io/desktop-goose Desktop Goose by samperson I have created a goose that lives on your desktop. He is an asshole. samperson.itch.io 위 사이트로 가서 다운로드를 해주자. Download Now를 해주면 된다. 그럼 이런 결제 페이지가 나오는데 유료 프로그램이 아니라서 No Thanks, just take me to the downloads를 눌러주면 된다. 두가지 운영체제 중 하나를 선택해주면 된다. 난 맥이니 첫번째를.. 2024.02.07

• 

  [hono] npm install cors 할 필요없이 hono cors 사용하기 클라이언트에서 서버로 통신을 시도하니 cors 정책으로 차단되었다고 나왔다. 바로 bun add cors를 하던 중에 bun이나 hono에서 따로 제공해주는게 있지 않을까 싶어 공식문서를 뒤져보니 바로 나왔다. ㄱㅇㄷ 따로 라이브러리 설치할 필요 없이 cors()를 하면 알아서 import로 가져오니 완전 굳굳 👍 2024.02.04

• 

  [node-cron] 메모리에 저장되는 스케줄러를 Redis에 저장해서 영구보관하자 문제 발생 수강생이 강의 신청을 하면 강의일로부터 하루 전에 예약 메시지를 보내야 한다. 수강생이 많을수록 예약 메시지도 많아진다. node-cron으로 스케줄러를 통해 강의일로부터 하루 전에 예약 메시지를 보내고 있었는데 애플리케이션 단에서 수정을 하게 됐다. 서버에서 도커로 돌아가던 애플리케이션을 다운시키고 이미지를 풀 받은 다음 다시 올렸다. 그러자 예약 메시지들이 오지 않는다. 왜일까? 그건 제목에도 적었듯이 node-cron이 메모리에 스케줄러를 저장시키기 때문이다. 즉, 도커를 다시 시작하자 메모리가 리셋되면서 스케줄러가 없어진거다 🤯🤯🤯 해결법으로 Redis에 저장하자 꼭 Redis가 아니어도 된다. 다른 데이터베이스를 사용해도 되는데 난 Redis를 사용했다. 그렇다면 Redis에 무엇을 .. 2024.02.02

• 

  Bun에서 서버사이드 렌더링 NextJS 간단 사용하기 NextJS 준비 미리보기에서 동적으로 이미지와 제목을 변경하기 위해 서버사이드 렌더링을 사용하기로 했다. 런타임을 nodejs로 할까 하다가 최근에 계속 bun으로 작업해서 모든 사이드 프로젝트 런타임을 bun으로 통일했다. 살짝 걱정되는건 아직 완벽하게 bun에서 NextJS를 제어하지 못한다는 점이다. 아무래도 NextJS가 NodeJS에 맞춰 개발을 하다보니 그런 것 같다. 잘되는지 확인하기 위해 bun run start를 했더니 Error: ENOENT: no such file or directory, open '/WEB/.next/BUILD_ID' 이런 오류를 만나게 됐다. 공식문서를 보니 bun run dev를 하라고 해서 했다. 오~ 잘 나왔다. (혹시 이래도 안되면 bun run buil.. 2024.02.01

• 

  crypto 대신 Bun.CryptoHasher 사용하기! 고유한 Id를 만들어하는데 암호화를 위해 crypto 라이브러리를 추가하려고 할 때 갑자기 Bun에서 지원해주는게 없나 싶어서 찾아봤다. 그랬더니 유레카! const hasher = new Bun.CryptoHasher("sha256"); const hasherData = name + category; //여기에 암호화할걸 넣기 hasher.update(hasherData); const hash = hasher.digest("hex").substring(0, 24); 이렇게 코드를 짜주면 crypto와 동일한 기능을 한다. crypto을 굳이 안 깔고 기본 내장 함수로 할 수 있어서 좋았다 👍 bun 공식 문서를 한 번 날 잡고 꼼꼼하게 읽어서 활용할 수 있는걸 다 활용해야겠다. fin. 2024.01.31

• 

  #7 가로 스크롤 만들기 - overflow 스크롤 안될 경우 뭉치에 태그 기능이 도입됐다. 이 태그를 통해 사용자들이 자신이 저장한 태그별로 작품들을 볼 수 있게 할 생각이다. 이런식으로 UI/UX를 짰고 인제 만들면 됐는데 실제로 반영한 결과 태그가 많으니깐 보기가 안좋아서 가로 스크롤을 하기로 했다 🔥 해본 결과...ㅋ 안 넘겨진다. 그러다가 아래 사이트에서 중요한 정보를 얻었다. https://www.codeit.kr/community/questions/UXVlc3Rpb246NWUzNDUyMjU4MGU1MTMzNzNkOTYyNjJk overflow : scroll; 에서 스크롤이 생기지 않는 이유 www.codeit.kr 브라우저의 너비를 조절해보다라고 해서 원래 아이폰 프로 14 맥스에서 아이폰 SE로 해보니 잘됐다 ❗️ 또한 너비를 75%에서 100%로 .. 2024.01.31

• 

  #6 데이터 마이그레이션 하기 구버전인 운영 서버와 신버전인 개발 서버의 데이터가 다르다면? 지난 11월에 운영 서버를 올렸다. 두달이 지난 지금 개발 서버와 격차가 벌어졌는데 가장 큰 문제가 생겼다. 바로 데이터 구조가 바뀌었다 홀리쉣! 개발 서버에선 기존 데이터들이 삭제되어 데이터 구조가 바뀜으로써 일어나는 이슈를 파악하지 못했다. 그렇다고 운영 서버의 데이터도 날려버릴 수 없고... 결국 데이터 마이그레이션을 하기로 결정했다. 데이터 마이그레이션 그거 어떻게 하는건데? 우선 데이터의 전과 후를 잘 알아야 한다. 그래야지 스크립트를 잘 짤 수 있다. 뭉치의 경우 workList에 큰 변화가 있었다. // before "workList": [ "6566feee11", "656feee199", ... } //after "workLis.. 2024.01.29

• 

  [Bun 시리즈] #4 Bun에 어울리는 프레임워크 고르기! - express vs fastify vs hono 그대 express를 왜 버리는가? NodeJS + express + TypeScript 조합은 국룰 👍 express라는 프레임워크를 쓰는 이유는 국룰이라는 말이 나올 정도로 정~말 많은 이들이 쓰기 때문이다. 그만큼 안정성이 있다는거고 문제가 발생해도 많은 이들의 도움을 받을 수 있다. express를 주제로 한 글도 많다. 하지만 런타임을 Bun으로 쓰기로 한거 프레임워크를 express로 하기엔 신식 + 구식 느낌이여서 싫다. 이번 기회에 프레임워크도 신식 느낌으로 프레임워크 두가지를 알아봤고 최종적으로 하나를 선택했다. fastify와 hono 간단 소개 아마 fastify는 들어봤을거다. 이름처럼 빠른 처리 속도와 낮은 오버헤드를 자랑하며 고성능을 목표로 하는 프레임워크다. 하지만 인제 hon.. 2024.01.23

• 

  [Git] Your local changes would be overwritten by checkout의 선택지마다 다른 점 비교 vscode로 이런저런 브랜치를 옮겨다니다가 심심치 않게 보는 안내문구다. 현재 위치하는 브랜치와 옮겨갈려는 브랜치 간의 변경사항이 충돌할 때 나타난다. 3가지 선택지를 주는데 각각 어떤 점이 다른지는 알고 누르도록 하자. 1. Stash & Checkout 임시 저장소(stash)에 저장하고 체크아웃을 진행한다. 나중에 이 변경사항을 다시 적용할 수 있다. 그래서 현재 작업을 유지하면서 다른 브랜치로 전환하고 싶을 때 유용하다. (git stash pop 혹은 git stash apply) 2. Migrate Changes 현재 변경사항을 새로운 브랜치로 옮기고 해당 브랜치로 체크아웃한다. 현재 변경사항을 별도의 작업으로 관리하고 싶을 때 유용하다. 3. Fore Checkout 현재 변경사항을 무시하.. 2024.01.18

• [zipkin] TypeError: fetchImpl is not a function fix 현상 zipkin을 연결한 서비스 A가 로컬에서 npm start을 할 경우 잘 된다. 하지만 Docker로 빌드해서 올리면 서비스 A가 죽는다. 도대체 왜 그럴까? 겨우 찾아낸 오류 문구는 TypeError: fetchImpl is not a function다. https://github.com/openzipkin/zipkin-js/issues/493 node_modules/zipkin-transport-http/src/HttpLogger.js. · Issue #493 · openzipkin/zipkin-js Running a Node application works fine for sending traces. However if I compile this to a minified file in Web.. 2024.01.17

• prometheus Error: connect ECONNREFUSED 127.0.0.1:9090 fix 문제 MSA 환경에서 A서비스에서 prometheus에 질의를 해야하는 코드를 작성했다. 포스트맨으로 A서비스 API를 실행한 결과 Error: connect ECONNREFUSED 127.0.0.1:9090라는 오류가 나왔다. 해결 1. prometheus:9090으로 변경하기 await axios.get('http://prometheus:9090/api/v1/query_range', { 바로 잘된다. 혹시 안되는 사람은 아래 github 링크를 보고 다른걸 시도해보길 바란다. https://github.com/grafana/grafana/issues/46434 Error reading Prometheus: Post "http://localhost:9090/api/v1/query": dial tcp 1.. 2024.01.09

• Helm을 이용해서 k8s에 Redis 넣기 Helm으로 k8s에 Redis 추가하기 helm repo add bitnami https://charts.bitnami.com/bitnami helm repo update helm에서 redis repo을 가지고 온다. helm install my-redis bitnami/redis --set auth.password=my-password 이렇게 해주면 비번까지 설정할 수 있다. redis에 중요한 데이터를 넣지는 않겠지만 그래도 데이터베이스 비번 설정은 중요하니 넣어주자. kubectl exec -it [pod 이름] -- redis-cli redis에 접속하자. ping이라도 해보려고 했더니 (error) NOAUTH Authentication required가 나온다. kubectl exec -i.. 2023.12.21

• 

  [MongoDB] mongoose의 populate을 이용해서 편하게 다른 컬렉션 정보 가져오기 지금 누가 join하고 웃었는가? join은 관계형 데이터베이스에서 많이 쓰인다. SQL에서 join을 사용하면 두 테이블 간의 관계를 기반으로 데이터를 결합하여 결과를 반환한다. 그럼 MongoDB는? $lookupd이라는 Aggregation 연산자가 있긴하다. db.users.aggregate([ { $lookup: { from: "orders", // 결합할 다른 컬렉션 localField: "_id", // 현재 컬렉션의 필드 foreignField: "userId", // 다른 컬렉션의 필드 as: "userOrders" // 결과를 저장할 필드 이름 } } ]); 직접적이고 유연한 방법을 제공하지만 복잡한 쿼리를 작성해야 한다. 이때 mongoose의 populate를 쓰면 좋다. mongo.. 2023.12.08

• 

  #5 서버 백엔드 올리기 + AWS EC2, MongoDB, Redis 야 너두 서버 올릴 수 있어! (반말 죄송) 지난 편에 클라우드 업체를 AWS로 선정했다. 그렇다면 AWS에 서버를 올려봐야 한다. 로컬에서 잘 돌아간다고 하더라도 클라우드에선 안되는 경우가 종종 있다. 그러니 꼭 미리 올려 테스트 해보자. 우선 개발자가 아니라도 서버를 올릴 수 있게 최대한 쉽게 작성해보려고 했다. 근데 클라우드는 개발자들도 어렵다고 생각하는 분야(따로 클라우드 개발자가 있을 정도)이기 때문에 어려워도 참고 하자. 0) 당연히 AWS 계정은 만들었겠죠? 없으면 AWS 계정을 만들도록 하자. 한국어로도 잘 되어져 있어 어려움은 없을거다. 1) EC2 생성 단일 서버로 갈 경우 EC2를 생성해주면 된다. 명칭만 EC2일 뿐 걍 하나의 서버라고 생각하면 된다. 검색창에 EC2를 치면 대시보드.. 2023.11.25

• 

  #4 클라우드 업체 선택하기 - 돌고돌아 고향으로(?) 거기서 거기인데 어디로 하냐... 현재까지 AWS, Azure를 사용해본 사람으로써 클라우드 업체는 거기서 거기라는게 나의 평이다. 이름이 다를뿐 기본적으로 제공해주는건 똑같다. 그렇기에 매번 클라우드 선정할 때 업체 선정에 고민이 된다. (나만 그래...?) 그러다가 네이버 클라우드에 필이 왔다. 사유는 딱 하나, 국내 클라우드 업체를 써본적이 없으니 이번 기회에 써봐야지 싶었다. 한국 기업에서 만들었으니 디자인이나 서비스 측면에서 한국 친화적이지 않을까 싶기도 했다. 찾아본 결과 결제 정보 등록시 1년간 무료로 사용해주는 초소형 서버를 준다. AWS랑 비슷한데 사이드 프로젝트에 1년간 무료는 간지덕지다. 심지어 10만원 상당에 크레딧도 줘서 좋다. (사업자 어쩌고 하면 20만원 더 줌) 문제가 생겼다.. 2023.11.24

• 

  #3 한시간 단위로 집계해서 Redis에 캐싱하기 뭉치에서 특정 작품의 전체 타래를 볼 수 있는 서비스를 만드려고 한다. 타래는 n개의 작품 별로 n회차마다 n개가 있다. ...(긁적) 그렇다보니 클라이언트의 요청이 있을 때마다 그 많은 데이터를 헤집고 쪼개고 붙이는 짓을 하기엔 자원이 많이 소비된다. 그래서 1시간 단위로 집계해 캐싱하는 방법을 택하게 방법을 선택했다. Redis 안쓰겠다고 요리조리 피했는데 결국엔 쓰고야 마는구만 👀 NodeJS에서 Redis 사용하기 brew install redis // 다운로드 후 시작하기 brew services start redis 맥이니깐 brew로 Redis로 깔아보도록 하자. start해서 successfully가 나오면 된거다. 굳 👍 NodeJS에서 Redis 사용하기 위해서는 npm install .. 2023.11.10

• 

  #2 도메인 구매 시 호구 안되는 법 알려드림 개발도 안 끝났는데 도메인 구매부터 하는 놈이 있다? 접니다 ㅋㅋㅋ 이렇게 된 사정을 굳이 설명해보자면 저번 #1에서 nodemailer을 이용해서 사용자에게 사용자 인증 메일을 보냈다. 근데 내 개인 메일로 보내니 살짝 사짜 느낌도 들고 개인 정보 떨릴까봐 걱정이 됐다. 회사 메일을 만들어야 겠다는 생각에 바로 찾아보니 도메인이 있어야 가능하다는 걸 알았다. 그래서 도메인 구매를 하게 됐다. 도메인 구입 어디에서? 구글에 도메인 구매라는 검색어만 쳐도 나오는 업체가 엄청나다. 예전에 가비아에서 구매했는데 솔직히 업체들은 거기서 거기다. (클라우드 업체 고르는거랑 비슷한 st) 그러다가 나의 이목을 집중 시키는 글이 있었으니 '국내 도메인 등록업체 가격 비교'라는 제목이었다. https://blog.la.. 2023.11.09

• 

  #1 가입 인증 메일 동적으로 바꿔보자 실 사용자가 이런 메일을 받는다고 생각하니... 참을 수 없어졌다. 바로 바꿔주도록 하자. 심플 이즈 베스트 👍 일러나 gif 좀 넣고 싶긴 했는데 지금은 개발이 더 급해서 패스했다. 뭉치 회원가입을 위해서는 아래 인증번호를 입력창에 넣어주세요 인증 코드 나올 곳 우리의 친구 chatGPT한테 이미지 주고 뜯어낸 코드다. (미리 말하는데 메일에선 css를 인라인으로 넣어줘야 한다.) 이대로 nodemailer에 집어 넣으면 '당신 코드 뚱뚱해요'가 된다. 그렇기 때문에 mail.html 코드를 만들어준다. import nodemailer from 'nodemailer'; import fs from 'fs'; import path from 'path'; const filePath = path.join(__.. 2023.11.07

• 

  [Bun 시리즈] #3 Bun + React 조합으로 서버사이드 렌더링 구현하기 백엔드 개발자라면서요? 근데 왜 프론트 영역 공부하세요? Bun http 통신에 대해 알아보다가 우연히 라는 게시물을 보게됐다. (님아 그 강을 넘어가지 마시요...) 우선 Bun은 런타임이고 React는 라이브러리이기 때문에 Bun으로 React를 이용해서 프론트를 구축할 수 있다! 즉, 내가 찾은 글은 프론트 개발자 분들에게 좋을 글이었다. 나의 경우 프론트와 백이랑 같이 하는거라고 착각한거였다 🥹 ... (Bun을 순간적으로 백 프레임워크라고 생각함) (왜 React가 프레임워크가 아니라 라이브러리인지에 대해서는 따로 정리하겠다 - 런타임 vs 프레임워크 vs 라이브러리) 아무튼 나의 착각 덕분에 프론트 영역을 많이 공부하게 돼서 잘 정리해 봤다. 서버사이드 렌더링이란 따라하기에 앞서 서버사이드 렌.. 2023.11.06

• 

  [Bun 시리즈] #2 Bun은 왜 빠를까? JSC vs V8 Bun은 뭔 짓을 했길래 빠를까? 🤔 Bun에 감동하자마자 든 생각이 👆였다. 그래서 이거저거 찾아보다가 Bun 공식 페이지에 AI로 물어보는게 있어서 사용해봤다. 만두가 귀엽다. Bun AI가 알려준이유는 2가지다. 1. JSC 엔진 사용 2. 내장된 파일 변환 파일러 두번째 내장된 파일 변환에 대해서는 1편 TypeScript에 대한 NodeJS와 BunJS 차이에서 다뤘다. 그래서 이번엔 첫번째 JSC 엔진 사용에 대해 알아보자. JavaScript 엔진 JSC는 JavaScriptCore 엔진이다. JavaScript 엔진 중 하나인데 우선 JavaScript 엔진이 무엇인지 알아보자. 한마디로 정리하면 JavaScript 언어로 짜인 코드를 해석하고 실행하는 *인터프리터다. 핵심 기능은 파싱, .. 2023.11.04

• 

  [dayjs] JavaScript Date 객체는 불변성을 지켜주기 않는다 + dayjs의 필요성 JavaScript는 날짜 표현을 해줄 수 있는 Date 객체를 제공해준다. 따로 라이브러리를 사용하지 않더라도 손 쉽게 날짜을 얻을 수 있기 때문에 사용을 자주해줬다. 불변성 문제 발생 하지만 불편한 점이 발견됐다. 바로 불변성이다. const date = new Date(); // 2023-11-01T02:06:14.974Z date.setFullYear(2002); console.log(date); set 함수를 쓴 date를 콘솔로 찍으면 어떻게 될까? 당연히 2002-11-01T02:06:14.974Z로 바뀐다. 인제 date는 원래 값인 2023-11-01T02:06:14.974Z을 잃게 된다. 예를들어 우리가 date와 set 함수를 사용해 나온 date를 비교해주고 싶다면? 당연히 둘 다 .. 2023.11.01