LasBe's Upgrade

최신 글

• 

  [Nginx, Certbot] 서브도메인에 SSL 인증서 발급 후 https 설정하기 📒 [Nginx, Certbot] 서브도메인에 SSL 인증서 발급 후 https 설정하기저번달에 포트폴리오 용도로 사용할 도메인을 하나 구매했었습니다.이번에 새로운 개인 프로젝트를 하며 Nexus Docker Repository를 설치했는데, 서브 도메인에 SSL 인증서를 적용해 https로 통신하도록 했습니다.이게 자주 할 수 있는 작업이 아니기 때문에 금방 기억에서 지워질 것 같아 기록해 봅니다. 📌 CNAME  레코드 설정CNAME은 한 도메인 이름을 다른 도메인 이름에 별칭으로 연결하는 역할을 합니다.저를 예로 들면 "lasbe.kr"이란 도메인을 구매했고, docker repository 통신을 위해 CNAME 레코드를 "docker"로 설정했으면 최종적으로 "docker.lasbe.kr"로.. 댓글 0 2024.11.19

• 

  [nginx, nexus docker repository] retrying, Request Entity Too Large 에러 해결 📒 [nginx, nexus docker repository] retrying, Request Entity Too Large 에러 해결개인 서버에 Nexus Docker Repository를 구축하고 image push 테스트를 해봤는데 다음과 같은 오류가 발생했습니다.  수 번의 재시도 끝에 Request Entity Too Large라는 에러를 뱉고 결국 이미지 푸시에 실패했습니다. 구글링을 하던 끝에 Nexus 서버의 문제가 아닌 앞 단에 proxy로 두었던 Nginx 문제라는 것을 알게 되었습니다. 📌 Nginx 로그 확인$ docker logs -f proxy로그로 확인해보니 Nginx에서 client intended to send too large chunked body라는 에러를 확인했습.. 댓글 0 2024.11.18

• 

  NestJS와 prisma로 편리하게 CRUD 구현하기 📒 NestJS로 편리하게 CRUD 구현하기요즘 NestJS를 조금씩 공부하며 진도를 나가고 있습니다.그런데 사용하면 사용할 수록 "정말 편리하다"고 느끼는 중입니다. 그럼 NestJS와 prisma로 CRUD api를 구성하는 과정을 소개드리면서 어떠한 점이 편리했는지 설명하겠습니다. 📌 prisma 설치 과정prisma를 설치하고 데이터베이스를 연동하는 과정은 다음 글에 자세히 소개되어있습니다. Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기📒  Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기NestJS로 개발할 때 주로 prisma와 postgresql을 사용하는 추세입니다.왜 어떠한 특장점이 있는지, 그리고 초기 설치 방법에 대.. 댓글 0 2024.11.12

• 

  Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기 📒  Docker로 PostgreSQL 설치하고 NestJS + prisma 연동하기NestJS로 개발할 때 주로 prisma와 postgresql을 사용하는 추세입니다.왜 어떠한 특장점이 있는지, 그리고 초기 설치 방법에 대해 설명하겠습니다. 📌 prisma와 PostgreSQL의 장점🔎 prismaPrisma는 TypeScript와 JavaScript 애플리케이션에서 ORM(Object-Relational Mapping) 역할을 수행하는 도구로, 데이터베이스와의 상호작용을 간편하고 효율적으로 만들어 줍니다.Prisma는 데이터베이스 모델링, 쿼리 작성, 마이그레이션 관리 등 다양한 기능을 제공하며, 특히 TypeScript와의 강력한 호환성을 바탕으로 코드 자동 완성, 타입 검사 등을 통해 생.. 댓글 0 2024.10.31

• 

  NestJS 프로젝트 시작과 구조의 이해 📒 NestJS 프로젝트 시작과 구조의 이해지금은 프론트엔드 개발자이지만 항상 백엔드 개발도 함께 해야겠다는 생각을 지니고 살았습니다.나중에 좋은 아이디어가 있으면 혼자서 오롯이 설계하고 구현할 수 있어야 오래 살아남을 수 있겠다고 느꼈기 때문입니다. 아무래도 자바와 스프링이 여러모로 유리한 면이 많지만, 거의 업계 표준이 된 리액트와 함께 JS, TS를 사용하는 NestJS 라면 시너지 효과로 인해 개발 속도를 정말 빠르게 향상시킬 수 있음을 느꼈습니다.또한 NestJS가 스프링의 구조와 거의 유사한데, 이는 전에 스프링 학습을 해 둔 덕에 빠른 적응을 할 수 있어서 NestJS를 배워봐야겠다는 주요한 계기가 되었습니다. 그럼 앞으로 NestJS 학습을 시작하며 그 시작인 프로젝트 생성부터 기록하도록.. 댓글 0 2024.10.28

• 

  프론트엔드 개발자 포트폴리오 📒 프론트엔드 개발자 포트폴리오포트폴리오 용도로 개발한 웹사이트입니다.링크 장성우 포트폴리오 - 프론트엔드프론트엔드 개발자 장성우 포트폴리오lasbe.kr📌 기술 스택Nextjs firebase docker github-action최대한 가볍게 만드려고 최소한의 의존성으로 개발애니메이션은 기존에 제가 만들었던 라이브러리로 구현firebase는 우선 조회수 집계용으로만 사용📌 배포github hosted runner에서 앱 및 docker 빌드 후 pushssh로 자취방 노트북에 이미지 받아오고 컨테이너 올리는 명령어 전송배포2024.10.18 - [Server] - github-action에서 Docker와 SSH로 Nextjs 원격 배포하기 github-action에서 Docker와 SSH로 Ne.. 댓글 0 2024.10.18

React

• 

  프론트엔드 개발자 포트폴리오 📒 프론트엔드 개발자 포트폴리오포트폴리오 용도로 개발한 웹사이트입니다.링크 장성우 포트폴리오 - 프론트엔드프론트엔드 개발자 장성우 포트폴리오lasbe.kr📌 기술 스택Nextjs firebase docker github-action최대한 가볍게 만드려고 최소한의 의존성으로 개발애니메이션은 기존에 제가 만들었던 라이브러리로 구현firebase는 우선 조회수 집계용으로만 사용📌 배포github hosted runner에서 앱 및 docker 빌드 후 pushssh로 자취방 노트북에 이미지 받아오고 컨테이너 올리는 명령어 전송배포2024.10.18 - [Server] - github-action에서 Docker와 SSH로 Nextjs 원격 배포하기 github-action에서 Docker와 SSH로 Ne.. 2024.10.18

• 

  Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 📒 Vercel - Nextjs 방문자 수 집계, 웹 분석 이용하기 이번에 사이드 프로젝트를 Vercel에 배포하고 방문자 수를 확인하고 싶어 찾아보니Velcel에서 자체적으로 제공하는 좋은 툴이 있어서 소개드립니다. 📌 Vercel Web AnalyticsVercel Web Analytics을 이용하기 위한 방법은 정말 간단합니다.🔎  패키지 설치$ npm i @vercel/analytics🔎  컴포넌트 추가하기import { Analytics } from '@vercel/analytics/react'; export default function RootLayout({ children,}: { children: React.ReactNode;}) { return ( .. 2024.10.10

• 

  Nextjs 토이프로젝트, 안성재 요리 평가 GPT 📒 Nextjs 토이프로젝트, 안성재 요리 평가 GPT 안성재 GPT안성재의 요리평가 GPTansungjae-gpt.vercel.app항상 방문자가 많은 개인 프로젝트를 만들고 싶은 야망을 마음속에 품고 살았습니다. 그러다 최근 흑백 요리사의 안성재 쉐프님의 어록이 밈이 되는 현상을 보고,숟가락 하나 올리면 괜찮겠다 싶어 잽싸게 만들어봤습니다.📌 개발 기간2024.10.08 ~ 2024.10.098일 오후부터 9일 아침까지 12시간 안쪽으로 1차 완성했습니다. 하필이면 이 아이디어 떠오른게 흑백요리사 마지막화 나온 날이라관심도가 떨어지기 전에 완성을 시켜야 한다는 압박을 느꼈습니다. 이 밈이 화제가 된 게 지난 주 였는데 그 때 만들었으면 더 좋았지 않았을까 생각합니다.역시 인생은 타이밍입니다. 📌.. 2024.10.10

• 

  지금 당장 pnpm으로 넘어가야 하는 이유 📒 지금 당장 pnpm으로 넘어가야 하는 이유 안전빵이란 이유로 계속해서 npm을 고집해 오다 최근에 pnpm으로 넘어갔습니다. 마이그레이션을 마친 지금 생각해보면 "왜 이제야 넘어갔을까"라고 생각이 됩니다. 아직 npm과 classic yarn을 사용하시는 분들께 npm의 단점부터 pnpm의 장점, 마이그레이션, 사용법까지 전부 소개합니다. 📌 pnpm이란? pnpm은 Performant Node Package Manager의 약자로, 기존 npm의 단점을 보완하기 위해 탄생한 패키지 매니저입니다. 사내에서 기존부터 npm을 사용했었는데, 시간이 지날수록 부각되는 단점들에 의해 패키지 매니저 변경을 결정했습니다. 현존하는 여러 패키지 매니저 중 고민 끝에 pnpm을 사용하기로 했는데요. pnpm을 선택.. 2024.04.10

• 

  [Javascript/Typescript] 논리 연산자 (‘&&’, ‘||’), nullish 병합 연산자 (‘??’) ⚡ 논리 연산자 ‘&&’, ‘||’ 📌 단축평가 console.log("aaa" || "bbb") // "aaa" console.log("aaa" && "bbb") // "bbb" 논리 연산자는 왼쪽부터 오른쪽으로 평가가 이루어지는데, 중간에 평가 결과가 나오면 형 변환 없이 피연산자를 그대로 반환합니다. 즉, 논리적으로 값이 참인지 거짓인지 판단만 하고, 연산자에 따라 값을 타입 그대로 반환합니다. console.log(true && "aaa") // "aaa" console.log(false && "aaa") // false &&(AND) 연산자의 경우 앞선 값이 거짓이면 바로 반환, 참이면 뒤따른 값을 반환합니다. console.log(true || "aaa") // true console.log(.. 2023.01.10

• 

  [Javascript/자바스크립트] innerHTML, innerText, textContent의 차이 innerHTML innerHtml은 마크업 태그를 핸들링할 수 있기 때문에 태그(div, img, script...)들을 삽입 가능합니다. 각종 태그들을 삽일할 수 있다보니 input 태그에 악성 스크립트를 삽입하는 XSS 공격의 가능성이 존재합니다. Login input으로 위와 같이 스크립트 태그를 넣으니 정상적으로 작동되는 것을 볼 수 있습니다. 저는 간단히 alert를 사용했지만 충분히 악의적으로 사용할만 합니다. 이에 최대한 innerHTML 사용을 지양하는 편이 좋습니다. innerText, textContent innerText 프로퍼티는 textContent와 기능이 유사하지만 중요한 차이점이 존재합니다. 이는 반환하는 값과 성능 두가지 측면에서 알아보겠습니다. 반환 값 innerText.. 2022.02.07

• 

  [Javascript/자바스크립트] CSS 선택자를 사용하는 querySelector, querySelectorAll를 통해 요소 선택하기 CSS 선택자 종류 document.querySelector(선택자) document.querySelectorAll(선택자) CSS 선택자를 사용하는 querySelector를 알아보기 위해 먼저 CSS 선택자의 종류부터 알아보겠습니다. 다음 표와 같은 키워드를 사용해 특정 요소들을 가져올 수 있습니다. 이름 선택자 형태 설명 태그 선택자 태그 특정 태그를 가진 요소를 추출 아이디 선택자 #아이디 특정 id 속성을 가진 요소를 추출 클래스 선택자 .클래스 특정 class 속성을 가진 요소를 추출 속성 선택자 [속성 = 값] 특정 속성 값을 갖고 있는 요소를 추출 후손 선택자 선택자1 선택자2 선택자1 아래에 있는 선택자2를 선택 querySelector querySelector는 위와 같은 css 선택자.. 2022.02.04

• 

  [Javascript/자바스크립트] 나머지 매개변수(rest parameter), 전개 연산자(Spread syntax) 매개변수와 전달인자는 아래와 같이 다른 프로그래밍 언어에서도 흔히 사용되는 개념입니다. function sum(a, b) { // a, b는 매개변수 return a+b } let calc = sum(1, 10) // 1, 2는 전달인자 자바스크립트에서도 이러한 개념은 동일하지만 특이한 점이 있습니다. console.log(sum(1)) // NaN console.log(sum(1, 10, 100)) // 11 함수에 정해둔 매개변수의 개수보다 전달인자를 적게 혹은 더 넣어주어도 오류가 나지 않는다는 점입니다. 위 sum 함수에 1개의 매개변수를 넣어주면 나머지 매개변수를 undefined로 할당해 NaN이 출력되고, 더 넣어주면 왼쪽부터 순서대로 정해둔 매개변수만 사용해 출력을 내어줍니다. 그리고 추가.. 2022.02.03

회고

• 

  첫 회사 퇴사 후기 📒 첫 회사 퇴사 후기📌 퇴사24년 6월까지 회사를 다니고 퇴사했다.여기에는 말 못 할 여러 가지 이유가 있겠지만, 가장 큰 이유는 매너리즘이다.외적인 요인으로 힘든 일은 없었는데, 한번 매너리즘에 빠지기 시작하니 마음이 붕 뜨게 되고 마법 같이 모든 의욕이 사라졌다.익숙해진 일과 상황이 반복되니 여기서 다음 단계로 스탭업하려면 환경을 옮기는 게 맞다고 확신했다.아쉽지만 좋은 사람들을 만나 너무 재미있게 일 하면서 많이 배워간다.📌 계획퇴사 전 빠르게 재취업을 하려 느슨한 계획들을 세워놨었다.하지만 인생은 계획대로 되지 않는 법.오퍼 온 스타트업 회사는 내가 간절하지 않았던 건지 준비를 너무 안 해서 탈락하고, 프리 형태로 제안 온 프로젝트는 계속 펜딩 되는 바람에 마음을 접었다.기대도 안했지만 왠.. 2024.07.22

• 

  프론트엔드 개발자 2023.08 ~ 2024.01 회고 📒 2023.08 ~ 2024.01 회고 원래 23년 안으로 회고록을 작성하려 했지만 너무 바쁘고 정신이 없어서 이제야 작성해본다. 분기마다 작성하려 했던 회고를 거진 6개월만에 작성하며 그동안 내가 무엇을 했고 어떤 생각을 주로 해왔는지 복기해보려 한다. 📌 회사에서 내가 22년 8월에 입사했으니 벌써 1년 6개월이 지나버렸다. 마지막 회고로부터 6개월 밖에 지나지 않았지만 생각보다 많은 경험을 했던 것 같다. 🔎 신입 뽑기 회사에 프론트 인원이 적은 관계로 내가 프론트 채용을 담당하게 됐다. 500명 가까운 인원 중 이력서를 추려서 10명 가까운 인원들에게 합격 연락을 돌리고 기술 면접관으로 들어가기도 했다. 윗 사람들이 어떻게 나한테 전권을 맡겼고 내가 이 경력에 이런 중요한 일을 덥썩 물었는지 지.. 2024.01.25

• 

  1년 5개월차 경력, 프론트엔드/리액트 신입 이력서를 검토하다 📒 1년 5개월 경력에 신입 프론트엔드 채용 1차 서류 심사한 후기 회사에 프론트 직무가 생긴지 얼마 안됐고, 그나마 있는 인원도 저 포함 1년~3년차 3명인 상황. 그나마 채용시즌에 시간적으로 이력서를 검토하고 기술 면접을 볼 수 있는 인원이 저 밖에 없었습니다. 그렇게 채용이란 중요한 임무를 부여받고 나름 재미있지 않을까 생각하며 이력서 검토를 시작했습니다. 그런데 재미는 개뿔 그냥 이력서 수백개가 쌓여있어서 2주 동안 업무와 이력서 검토를 병행 하느라 눈알이 개박살 나는줄 알았습니다. 이번 글에서는 이력서를 검토하며 느꼈던 시장 상황과 함께 지원자 분들이 보완했으면 하는 부분들에 대해 이야기 해보겠습니다. 📌 Frontend 레드오션 프론트 공고 뿐 아니라 임베디드 및 백엔드 공고를 냈음에도 지원자.. 2024.01.18