꿈많은 DEVELOPER

네이버 플레이스 대표 키워드란?플레이스 대표 키워드 설정은 검색 결과에서 상위 노출을 돕고 많은 고객들의 관심을 끌기 위해서 매우 중요합니다.대표 키워드를 설정하기전에 경쟁업체에 대표 키워드를 참고하여 효과적인 키워드를 설정하여 경쟁 업체보다 상위 노출로 더 많은 고객을 끌어모을 수 있습니다. 네이버 플레이스에 사업자라면 당연히 대표 키워드에 대해서 많은 고민을 하시며 경쟁업체에 대표 키워드를 궁금하실수 있습니다.단 1분만에 플레이스 경쟁업체 키워드를 알아보는 방법을 알려드리겠습니다. 상위노출 플레이스 대표키워드 찾는 방법경쟁업체의 대표키워드를 찾는 방법은 아래에 순서대로 따라 하시면 됩니다. 1. 네이버 지도에서 키워드 검색 2. 경쟁업체 매장 클릭 3. 클릭한 플레이스 매장 정보에서 우클릭하고 프레임..

🤷‍♂️ User-Agent란?서버와 클라이언트가 통신을 할 때 내가 누구인지 식별하기 위해 HTTP 요청 헤더에 다양한 정보를 포함합니다.이 정보는 임의로 수정이 될수 없고 보통 이상한 요청이나 HTTP 에러가 발생했을 때 사용자 정보와 환경을 알아보기 위해서 사용됩니다. 크롬(Chrome) 브라우저의 User-Agent는 다음과 같습니다:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.5735.110 Safari/537.36 User-Agent의 구조플랫폼 정보: 운영체제 정보가 들어가며 예를 들어 Windows NT 10.0, Macintosh, Linux 등이 포함됩니다.브라우..

🤷‍♂️ 본론에 앞서IT분야에서 프로그래밍을 하다 보면 컴파일러(Compiler)와 인터프리터(Interpreter) 차이에 대한 개념이 필요할 때가 있고 이 두 개의 방식에 대한 개념은 개발자에게 중요한 지식이라고 생각이 듭니다. 그래서 이번 글을 통해서 컴파일러와 인터프리터의 개념을 가장 쉽게 이해할 수 있도록 정리해 보았습니다.  🤷‍♂️ 컴파일러와 인터프리터 개념프로그래밍 언어를 사용할 때 코드가 어떻게 실행되는지 이해하는 것은 개발자에게 중요합니다.여기서 프로그램 언어마다 컴파일러와 인터프리터라는 두 가지 방식이 있고 둘 다 고급언어이며 즉 기계가 이해할 수 있는 언어로 번역해 주는 프로그램입니다. 그리고 이 두 가지는 코드 실행 방식에서 큰 차이를 보입니다.컴파일러와 인터프리터 개념을 요즘..

Svelte(스벨트)는 2019년 출시한 최신 기술에 프레임워크입니다.개발자라면 한 번씩은 들어본 웹 프레임워크 3 대장 Angular, React, Vue 다른 방식의 프런트 프레임워크입니다.기존에 프런트 프레임워크 달리 Svelte는 컴파일러로 동작합니다. 쉽게 설명하자면 Svelte 코드를 작성하면 작성한 코드가 컴파일되어 순수 javascript로 변환되고 브라우저에서 실행됩니다.이러한 특징 때문에 기본에 프레임워크보다 훨씬 더 빠른 성능의 장점이 있습니다. Svelte 특징컴파일 타임: 다른 프레임워크들이 브라우저에서 런타임에 많은 작업을 처리하는 반면 Svelte는 컴파일 타임에 모든 작업을 처리하여 더 빠른 성능에 애플리케이션을 만듭니다.반응성(Reactivity): Svelte는 반응성을 ..

사업자라면 누구나 매출 상승과 웹사이트의 구매 전환율을 높이고 싶어 합니다.이러한 목표를 달성하기 위한 다양한 방법 중에 효과적인 방법으로 바로 랜딩 페이지입니다.랜딩 페이지는 고객이 웹사이트에 처음 접속했을 때 가장 먼저 보게 되는 페이지로 많은 기업들이 이를 활용하여 고객 유입을 극대화하고 있습니다.잘 설계된 랜딩 페이지는 단순한 정보 제공을 넘어 고객의 관심을 끌고 행동을 유도하는 강력한 도구로 작용합니다. 랜딩 페이지 잘 만들어진 하나의 랜딩 페이지가 10명의 세일즈맨보다 더 큰 효과를 낼 수 있다는 것입니다.이는 비용 측면에서도 효율적이며 지속적으로 고객을 유치하고 전환시키는 데 기여할 수 있습니다.랜딩 페이지는 24시간 운영되며 언제든지 고객에게 접근할 수 있는 기회를 제공합니다. 랜딩페이지 ..

🤷‍♂️ 본론에 앞서Nginx, Apache로 서버를 구성하고 프론트에서 서버로 요청을 보낼 때 용량이 큰 파일을 업로드하면 413 Request Entity Too Large 오류 메시지를 볼수 있습니다. 이러한 오류에 대한 원인을 파악하지 못하면 불필요한 시간낭비를 할수 있습니다. 이 글을 통해서 Request Entity Too Large 원인과 해결방법을 알아보겠습니다. 알아두면 좋은 Nginx Proxy 설정 오류 해결방법2023.02.01 - [AWS] - [Trouble Shooting] Nginx proxy 설정 [Trouble Shooting] Nginx proxy 설정🤷‍♂️ Proxy? 다른 서버에서 리소스를 찾는 클라이언트의 요청에 대한 중계자 역할을 하는 서버이다. 따라서 프록..

🤷‍♂️ UUID 개념UUID(Universally Unique Identifier)는 전 세계에서 고유한 식별자를 생성하는 표준 방법입니다.고유한 식별자를 만들기 위해서 UUID 라이브러리를 활용한 경험들이 있으실겁니다. PostgreSQL에서도 UUID 데이터 타입을 사용하여 고유한 식별자를 만들 수 있습니다.  PostgreSQL 사용해야 하는 이유?https://itibiza.tistory.com/entry/%EA%B0%80%EC%9E%A5-%ED%95%AB%ED%95%9C-DB-postgresql-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%82%AC%EC%9A%A9%ED%95%B4%EC%95%BC-%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 가장 핫한 DB..

🤷‍♂️ SEO 최적화 메타태그 생성기가장 쉽게 만드는 메타태그 생성기https://webtool.everyday-365.com/make-meta https://webtool.everyday-365.com/make-meta webtool.everyday-365.com    재밌는 오늘의 띠별 운세 보고 가세요!   https://cometruedream.tistory.com/247 [React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하comet..

🤷‍♂️ 실시간 로또 회차별 당첨번호최신 로또 회차별 당첨번호https://webtool.everyday-365.com/lotto https://webtool.everyday-365.com/lotto webtool.everyday-365.com      재밌는 오늘의 띠별 운세 보고 가세요!   https://cometruedream.tistory.com/247 [React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하cometruedream.ti..

IT 업계 사람들은 MasOS 운영체제의 전자기기를 많이 사용합니다.특히, Mac을 사용하는 개발자분들이 많습니다.MacOS 기반에 iTerm 터미널에서 Shell 명령어, 커스텀 명령어, alias 설정 명령어들이 있습니다.편리하고 효율적으로 생산성을 높이기 위해서 기본적인 개념과 alias를 사용방법에 대해서 알아보겠습니다. 🤷‍♂️ 본론에 앞서 Shell(셸) 이란?Shell은 사용자가 컴퓨터와 상호 작용하는 인터페이스로 명령어를 입력하고, 파일을 관리하고, 다양한 프로그램을 실행할 수 있습니다.즉, 명령어를 입력하면 입력한 명령어를 해석하고 실행하는 프로그램이다.MasOS에서는 기본적으로 Unix 기반의 Shell을 사용합니다.다양한 프로그램을 보다 보면 파일명을. js,. py 파일로 구성되어..

" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 많은 업종에 사람들이 ChatGPT 활용해서 필요한 정보를 얻거나 문제를 해결합니다.본론에 앞서 ChatGPT 개발을 보다 쉽게 이해하기 위해서 영상을 시청 후에 생성형 AI, ChatGPT API 개념과 활용방법에 대해서 알아보겠습니다.  🤷‍♂️ AI란? "> HTML 삽입미리보기할 수 없는 소스 AI는 “인공지능”의 약자이며 컴퓨터가 사람처럼 학습하고 문제를 해결하고 다양한 답변을 만들어주는 기술을 뜻합니다.  왜 AI가 중요한가?코로나 시국 이후로 AI, IT 기술은 더 빠르게 발전하고 진화하고 있습니다.AI는 지금도 우리의 일상생활에서 사람들에게 많은 일을 도와주고 있습니다.의료진단, 자율주행차, 언어번역등 다양한 분..

🤷‍♂️ 본론에 앞서 "> HTML 삽입미리보기할 수 없는 소스  Firebase Cloud Messaging(FCM)? 앱에서 알람,공지을 보내기위해서 사용되는 알림을 보내는 도구입니다.우리가 사용하는 앱/웹에서 우리는 알림을 공지, 업데이트, 알림을 휴대폰 메세지로 받는데 이 푸시 알림을 보낼수 있도록 도와주는 클라우드 기반 메세징 솔루션 기술입니다.저는 Nest.js 백엔드로 FCM을 구축해서 푸시알림 서비스를 개발할 예정이지만 개발에 앞서 FCM의 개념및 아키텍처를 알아보겠습니다. FCM 이란?💡 Firebase Cloud Messaging(FCM)는 Google Firebase 플랫폼에서 제공하는 메시징 서비스로 서버에서 사용자들 핸드폰으로 푸시 메시지를 안정적으로 전달할 수 있는 방법을 제..

🤷‍♂️ Redis 개념?Redis(Remote Dictionary Server)는 키(key)와 값(value)의 구조를 가진 비관계형 데이터베이스인 NoSql입니다. 오픈 소스 기반의 in-memory 데이터 저장소를 사용하는 Redis는 일반적인 데이터베이스와 달리, 데이터를 주 메모리(RAM)에 저장합니다. 이 특징은 데이터에 빠르게 접근 가능하게 하며, Redis의 성능을 향상시키고 응답 시간을 최소화하여 사용자에게 빠른 데이터 제공을 가능하게 합니다. 간단히 이해하기 위한 팁!일반 데이터베이스는 데이터를 보조 기억장치에 저장하므로, 저장된 데이터에 접근할 때마다 디스크를 직접 접근해야 합니다. 이로 인해 읽기 속도 & 응답 시간이 필요합니다. 반면, in-memory 데이터베이스인 Redis..

🤷‍♂️ 본론에 앞서프로젝트 개발을 하다 보면 로컬에서 개발 중인 버전을 배포하지 않고 외부에서 접근할 수 있도록 서버를 구축해야 할 일이 있습니다.예를 들어 외부 협력업체, 거래처에서 개발 중인 버전을 확인하고 싶을 때나 외부에서 테스트를 위해서 외부에서 로컬에 접근을 위한 서버를 만들어야 됩니다. 외부에 접근을 위해서 다양한 방법들이 존재합니다. 공유기 설정에서 포트포워딩 방식, 외부에서 접근할 수 있도록 서버를 구축하는 방법 등등... 언급한 2가지 방법은 상당히 까다롭고 시간이 필요한 작업입니다.위에 두가지 방법 없이 외부에서 로컬을 접속 가능하게 하는 터널 프로그램 ngrok에 대해서 알아보겠습니다.   🤷‍♂️ ngrok란?ngrok은 외부에서 로컬에 접속할 수 있도록 도와주는 터널링 프로..

🤷‍♂️ 본론에 앞서최근에 새로운 조직에서 풀스택으로 프론트 & 백엔드 업무를 담당을 맡으면서 새로운 기술스택과 아키텍처 그리고 팀 컨벤션과 업무방식을 적응하면서 새로운 것에 대해서 많은 습득과 공부를 하고있습니다. 최근에 백엔드 REST API를 담당하면서 Param & Query Parameter에 대한 차이에 대해서 깊이 생각을 하게 되면서 어떠한 설계가 좋은 방식인지 아닌지 고민을 하게 되었습니다.  🤷‍♂️ Param & Query Parameter 사용 방법의 차이?API GET 메소드 종류API 요청에 GET 메소드를 컨트롤하기 위한 2가지 형태를 담고있다.ParamQuery  Param?주소에 포함된 변수의 값을 처리합니다.http://localhost:3000/blog/8763 주소에..

🤷‍♂️ Prisma 명령어 본론에 앞서 Prisma란?Nest JS 프레임워크와 Prisma ORM을 활용해서 프로젝트를 진행하면서 Prisma는 Node JS 기반에 프레임워크/라이브러리와 상호작용이 잘되며 Prisma + DB 연동으로 더 편하게 schema.prisma 하나의 파일로 모델, 스키마 관리를 하면서 많이 사용되며 알아두면 좋은 Prisma 명령어를 정리했다. Prisma와 상호작용이 좋은 Nest JS 알아보기 https://cometruedream.tistory.com/132 Nest.js - 개념 & 초기셋팅🤳 Nest.js 란? Nest.js는 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임워크이다. JavaScript를 사용하고 TypeSc..

🤷‍♂️ 본론에 앞서 메모리란? 메모리는 '기억장치'라는 뜻을 가지고 있으며 컴퓨터의 메모리는 일반적으로 RAM을 의미하여 주기억장치 라고도 한다. 기본적인 컴퓨터의 메모리 종류 기본적인 컴퓨터는 일반적으로 레지스터, 캐시, RAM을 주기억장치라고 부른다. 왜냐하면 프로그램이 실제로 실행될때 이 세 기억장치를 사용하기 때문이다. 이 3가지의 기억장치를 알아보자. 레지스터: 제일 빠른 장치이며, CPU 계산과정의 일부분이다. 캐시 메모리: 레지스터 다음으로 빠른 메모리로 L1, L2, L3 CPU에 작은 칩으로 메모리를 저장시켜 빠르게 데이터를 제공한다. RAM: 주 기억장치로 매우 빠르지만 CPU > Cache > RAM > HDD 순서로 캐싱데이터를 제공한다. 하지만 HDD, SDD 보다는 월등히 빠르..

🤷‍♂️ 에러 코드 MAC에서 볼수있는 이미 실행중인 포트 에러 서버를 실행시 이미 사용중인 포트라는 오류를 볼수있다. Error: listen EADDRINUSE: address already in use :::3000 🤷‍♂️ 해결 방법 1. 3000번 포트를 사용하고 있는 프로세스 확인 명령어 sudo lsof -i :포트번호 ex:3000, 3003, 8000 위에 명령어를 터미널에서 입력하면 아래의 리스트를 볼수 있다. 내가 친 명령어 sudo lsof -i (모든 프로세스를 확인하기 위해서) PID가 현재 사용중인 프로세스의 고유번호 2. 실행중인 프로세스 강제 종료 시키기 sudo kill -9 PID번호 프로세스 리스트를 확인후 고유번호 PID를 입력해서 강제 종료 종료 후 다시 서버를 띄..

🤷‍♂️ [개발용어] 프로토타입 & MVP란 ? HTML 삽입 미리보기할 수 없는 소스 스타트업 또는 새로운 제품을 개발할 때 많이 사용하는 용어 프로토타입(Prototype)과 MVP(Minimum Viable Product)의 뜻과 차이점에 대해서 알아보겠습니다. 프로토타입(Prototype)란? 아이디어나 디자인, 기능 등을 시각적으로 또는 동작적으로 구현하고 요구사항들과 시나리오를 구현한 초기 설계 버전 프로토타입은 제품의 컨셉을 시험하고 피드백과 요구사항을 수집하기 위해 서비스 초기에 많이 사용됩니다. 보편적으로 개발 초기 단계에서 많이 활용되며 사용자, 고객 요구사항을 이해하고 디자인을 검증하며 문제를 해결하는데 도움을 줍니다. 가장 중요한 개념은 프로토타입은 실제 제품과 비슷한 모습을 가지지..

🤷‍♂️ 본론에 들어가기 앞서 코로나 이후로 IT 전공이 아니신 분들도 VPN, 네트워크 등등에 단어들을 많이 들어보고 사용했을 것이다. 코로나 이후로 재택근무가 활성화되면서 VPN을 이용하여 회사 네트워크에 접속해서 회사 업무를 처리했을 것이다. 나 또한 우리 회사의 자회사 데이터 센터에서 업무를 위해서 VPN을 접속해서 업무를 했던 경험이 있다. 그러면서 자연스럽게 VPN이 무엇이고 VPN의 개념에 대해서 궁금해졌다. 🤷‍♂️ VPN(Virtual Private Network) 이란? 사용자들은 인터넷에 접속하여 웹을 이용할때 ISP(KT, SKT, LG 같은 업체)의 통신망을 사용한다. 통신망을 사용하면 사용료를 지불하고 이따 사용하는 네트워크를 public network라고 한다. public n..

🐣인코딩 & 디코딩 이란? Encoding: 인코딩이란 사람이 인식할 수 있는 문자열을 바이트 형식으로 변환 하는 과정 Decoding: 디코딩이란 인코딩과 반대 개념으로 바이트 형식을 문자열로 변환 하는 과정 인코딩과 디코딩은 주로 HTTP 통신을 할때 URI에 한글 혹은 특수문자가 포함되어 있을때 주로 사용한다. 🐣인코딩 & 디코딩 개념 EX: URI 상수에 값을 encodeURI로 변환하면 아래에 변환된 값으로 변환된다. 인코딩된 값을 다시 decodeURI로 변환을 하면 다시 안녕하세요 문자열을 변환시킨다. 인코딩과 디코딩을 사용하는 이유 인코딩과 디코딩을 하는 이유 중에 가장 큰 이유는 URI 주소 또는 file 이름에 한글 or 특수문자가 포함되면 에러를 발생 시킬 수 있다. 이러한 에러를 해..

🐣모듈 번들러? 모듈 번들러는 분리된 코드 조각들을 하나로 압축 하는 개발 도구입니다. 핵심 작업은 HTML, CSS, JAVASCRIPT 여러 파일을 하나로 결합하여 단일 파일로 만드는 것이다. 압축시킨 단일 파일을 브라우저에서 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게된다. 🐣빌드 도구란? 애플리케이션을 개발할 때 사용하는 도구이다. 위에 언급한 번들링을 위한 도구다. 이 도구는 프론트엔드 코드를 빌드하고 번들링하며, 최적화하고, 테스트하고, 배포하는 데 사용된다. 프론트엔드에서 가장 많이 사용되는 빌드 도구로는 Webpack, Parcel, Rollup, Gulp, Grunt, Vite 등이 있다. 요즘은 webpack, vite 많이 사용된다. 이 도구들은 각각의 장단점이 있으며, 프..

디바운스와 쓰로틀링 모두 웹에서 발생하는 이벤트를 제어하는 방법이다. 예를 들어 스크롤 이벤트의 경우 스크롤링 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면 성능 문제가 발생할 수 있다. 디바운스와 쓰로틀링을 적절한 상황에서 사용하여 그런 상황이 발생하지 않도록 막을 수 있다! 목록으로가기 or 버튼 이벤트에서 여러번 클릭하면 여러번에 이벤트가 일어나면서 예측할 수 없는 다음 액션이 일어날수도 있다. ex: 목록으로가기 이벤트가 router.back()을 2번 누르면 history 2번째 stack 페이지로 이동하는 경우도 있다. 디바운싱과 쓰로틀링은 성능을 목적으로 자바스크립트의 이벤트를 제어하기 위해 사용되는 기법이다. 디바운싱 (Debouncing) 연속으로 호출되는 함수들 중에 마지..

QR코드(QR CODE)란? 기존에 사용되던 바코드형태에서 발전한 흑백 격자무늬 패턴 코드이며, 정보를 나타내는 매트릭스 형식의 이차원 코드이다. 기존의 바코드 형태의 용량 제한에서 벗어나 형식과 내용을 확장하여 2차원의 패턴으로 정보를 저장하여 숫자 외에 문자의 데이터도 저장할 수 있다. 일반적으로 디지털카메라나 전용 스캐너로 읽어 활용하고, 근래에는 핸드폰을 이용하여 대중적으로 사용되고 있다. QR코드의 명칭은 덴스 웨이브가 등록한 상표인 'Quick Response'에서 유래되었고, 주로 한국, 일본, 중국, 영국, 미국 등에서 많이 사용된다. QR코드(QR CODE)의 장점 QR코드의는 누구라도 다양한 목적으로 쉽게 제작하여 사용할 수 있다. 그리고 많은 양의 데이터와 정보를 넣을 수 있지만 코드..

SEO(Search Engine Optimization, 검색 엔진 최적화)에서 추천하는 블로그 글자수 상세한 내용 제공: 글자수가 많을수록 더 많은 키워드를 포함시킬 수 있고, 주제에 대해 더 상세하게 설명할 수 있습니다. 이는 검색 엔진이 블로그 글의 주제를 더 정확하게 이해하는 데 도움이 됩니다. 독자의 관심 유지: 너무 긴 글은 독자가 중간에 지치거나 관심을 잃을 수 있습니다. 따라서, 글의 길이를 적절하게 유지하면서 독자의 관심을 유지하는 것이 중요합니다. 고질적인 내용: 글자수가 많을수록 주제에 대해 더 깊이 있는 분석이 가능하며, 이는 블로그가 전문성을 갖추는 데 도움이 됩니다. 검색 엔진 순위: 더 긴 글은 일반적으로 검색 결과에서 더 높은 순위를 차지하는 경향이 있습니다. 이는 검색 엔진..

모든 브라우저 복사 금지 되어있는 글 복사 방법 글을 쓰거나 수정하다 보면 정말 필요한 내용이나 정보를 복사해야 되거나 복사한 글을 다시 한번 가공해야 될 때가 많습니다. 간혹 중요한 내용이나 정보를 복사 하려는데 복사 방지 or 복사 금지가 되어 있는 경우에 복사 할수 있는 유용한 방법을 알려드겠습니다. 전 세계 3대 웹 브라우저 (크롬, 파이어폭스, 엣지) 더해서 네이버웨일, 사파리에서 모두 똑같이 사용 할 수 있는 방법입니다. 1. 브라우저에서 복사할 내용이 있는 웹페이지로 이동합니다. 2. F12(개발자 도구)를 누르면 아래 이미지 처럼 소스를 볼 수 있는 창이 뜬다. 3. 빨간색으로 표시한 부분의 아이콘을 클릭합니다. (항상 Elements가 선택되어 있어야 합니다) 4. 화면에 커서를 옮기면 ..

빠르고 쉽게 내 IP 주소를 확인하는 방법 브라우저 즐겨찾기를 통해 빠르게 확인하는 것은 IP주소를 확인하는 가장 쉽고 빠른 방법 중 하나입니다. webtool.everyday-365.com 개인정보 수집 없이 안전하게 현재 접속한 기기의 공인 IP(Internet Protocol) 주소를 제공합니다. 내 아이피 바로 찾기 IP, IP 주소란? IP란 인터넷 프로토콜(Internet Protocol)의 약자로 인터넷에 연결되어 있는 장치를 식별하기 위해 각각의 장비에 부여하는 고유 주소입니다. 데이터를 주고 받기 위해서 데이터를 발신하는 곳과 수신하는 곳이 필요합니다. 통신을 위해 부여한 주소가 IP 주소(Internet Protocol Address)입니다. 공인IP와 사설IP IP는 사용자 입장에서 ..

👋 보일러 플레이트란? 코딩을 하다 보면 의미 없는 코딩을 할 때도 있고 불필요한 작업에 때문에 업무 생산성이 떨어지는 경우가 있습니다. 이럴 경우를 대비해 보일러 플레이트로 기본적인 골격을 미리 만들어서 업그레이드하는 방식이며 불필요한 코드와 생산성을 높일 수 있는 방법이다. 개발자에게 보일러 플레이트 란? 코딩에서 보일러 플레이트는 개발자에게 꼭 필요한 요소이다. 직접 타이핑, 반복적인 작업, 하드 코딩 등은 자동화로 맡겨 버리고 꼭 필요한 코딩을 할 수 있도록 도와주는 방법이 보일러 플레이트입니다. 가장 대표적인 예로 create-react-app 활용하면 미리 갖춰진 골격을 주고 개발자는 거기서 원하는 서비스에 맞춰서 개발을 하는 것이다. 만약 create-react-app 없이 첨부터 세팅을 한..

🤷‍♂️ Content-Disposition?일반적인 HTTP 응답에서 Content-Disposition 헤더는 컨텐츠가 브라우저에 inline 되어야 하는 웹페이지 자체이거나 웹페이지의 일부인지, 아니며 attachment로써 다운로드 되거나 로컬에 저장될 용도로 쓰이는 것인지를 알려주는 헤더입니다.  정리하자면?HTTP Response Header에 들어가는 Content-Disposition은 HTTP Response Body에 오는 콘텐츠의 성향을 알려주는 속성 Content-Disposition에 attachment를 주고 filename과 함께 주게 되면 body에 오는 값을 다운로드 받으라는 뜻이 된다. ex: Header 부분에 content-disposition 설정해준다.Conten..

🤷‍♂️ 모놀리식와 마이크로서비스 아키텍처란? 모놀리식 애플리케이션은 하나의 통합된 유닛으로 만들어지는 반면, 마이크로서비스 아키텍처는 독립적으로 배포할 수 있는 서비스다. 어떤 것이 적합한지는 여러 요인에 따라 다르다. 👀 모놀리식 아키텍처 (Monolithic Architecture)? 전통의 아키텍처를 지칭한다. 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어 있는 형태. 모놀리식 아케텍처의 경우 모든 프로세스가 긴밀하게 결합되고 단일 서비스로 실행된다. 따라서 애플리케이션의 한 프로세스에 대한 수요가 급증하면 해당 아키텍처 전체를 확장해야 한다. 코드 베이스가 증가하게 되면 모놀리식 애플리케이션의 기능을 추가하거나 개선하기가 더 복잡해진다. 모놀리식 아키텍처 장점 모놀리식 아키텍처를 사용하여 ..