꿈많은 DEVELOPER

🤷‍♂️ 본론에 앞서react-query는 React에서 데이터를 가져오고, 캐싱하고, 동기화하고, 데이터 관리를 위한 후크와 유틸리티를 제공하는 라이브러리입니다. 이 라이브러리의 활용은 React의 전반적인 성능을 향상시키고 사용자에게 부드러운 경험을 줄 수 있습니다. react-query 사용법에 대해 알아보기https://cometruedream.tistory.com/130 React-query 상태 관리📖React-query 알기전에 JSX란?JSX(javascript XML)는 javascript에 XML을 추가한 확장한 문법이다.JSX는 React에서 사용되는데 공식적인 자바스크립트 문법은 아니다.JSX는 javascript 확장한 문법으로 바벨등등을cometruedream.tistory...

🤷‍♂️ 본론에 앞서풀스택 개발을 진행하면서 사용자의 입장을 우선으로 하여 사용자 경험을 최우선으로 개발하려 노력합니다. 얼마 전에 읽은 책에서"개발하는 사람이 수고롭다면 사용하는 사람이 편리하고, 개발하는 사람이 편리하다면 사용하는 사람이 수고롭다" 라는 말을 되새겨 봅니다! Prefetching이란 무엇인가?프리페칭은 데이터가 실제로 필요하기 전에 미리 데이터를 가져와 캐시에 저장하는 과정을 말합니다. 이러한 프리페칭 기술을 통해 데이터를 미리 캐싱하면 사용자 경험을 향상할 수 있습니다. 간단히 설명하면💡 미리 필요할 수 있는 데이터를 가져오는 것을 의미합니다. 대표적으로 페이지네이션과 특정 탭을 누를 확률이 높은 곳에서 프리페칭을 많이 사용합니다.화면이 부드럽게 이동하고 캐싱데이터에 액세스 해서..

🤷‍♂️ 자바스크립트 내장 함수란?자바스크립트를 효율적으로 활용하려면 내장 함수를 잘 사용해야 합니다.내장 함수는 자바스크립트에서 미리 선언된 함수로, 호출만으로 사용할 수 있습니다.자바스크립트 언어를 사용한다면 기본적으로 제공하는 함수들을 활용해서 다양한 작업을 쉽고 효율적인 코드로 사용할 수있게 도와줍니다. javascript map() 함수 알아보자!https://cometruedream.tistory.com/7 javascript map() 함수 알아보자값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 for문,,,하지만 오늘은 map() 함수를 다뤄보도록 하겠습니다  vs코드를 여시고 let getStartedarr 배열에cometruedream.tisto..

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

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

🤷‍♂️ Tailwind 한줄, 두줄, 세줄 효과프로젝트 진행중 배너 링크에 URL 길이가 너무 길어서 3줄 효과 처리를 해야 했습니다. React + Tailwind CSS 셋팅된 프로젝트 여서 CSS 파일 & style 태그를 사용하지 않고 className 속성을 활용해서 CSS 스타일링 해야 했습니다.   기존에 방식으로 한줄 효과 스타일링을 하려고 했으나 tailwind CSS 방식이 달라서 다른 좋은 방법을 찾았습니다. 한줄 효과 기존 CSS 방식p { width: 6rem; text-overflow: ellipsis; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clam..

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

🤷‍♂️ 본론에 앞서Tailwind란?Tailwind CSS는 React와 Next 프레임워크에서 많이 사용되는 CSS 프레임 워크입니다. Tailwind CSS는 ‘utility-first’ 목적을 기반으로 다른 CSS 라이브러리와 달리 CSS 파일 & style 태그를 사용하지 않고 class 속성으로 CSS 스타일링 할 수 있습니다.  Tailwind CSS 사용하는 이유?Tailwind CSS 프레임워크를 통해서 UI를 빠르고 유연하게 디자인하고 스타일링할 수 있습니다. class(className) 기반의 화면을 스타일링 하기 때문에 개발자의 생산성과 빠르게 화면을 만들 수 있는 장점이 있습니다.   🤷‍♂️ Tailwind 사용법Next.js or React에서 Tailwind CSS 적용..

🤷‍♂️ 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..

🤷‍♂️ 본론에 앞서 Nest JS 개념?Nest JS는 Node JS 기반으로 한 서버 어플리케이션 프레임워크 입니다. 자바스크립트는 상당히 오랫동안 Express 기반으로 서버 어플리케이션 개발에서 압도적인 점유율을 차지한다.많이 사용하는 이유중에 빠르게 서버 구축과 API 구성할 수 있다는 장점이 있다. Express가 경량화된 프레임워크여서 핵심적인 기능과 빠르게 서버를 구성해서 API 구축하는데 큰 문제가 없지만 서비스 규모가 확장되고 볼륨이 커지는 프로젝트에서 불편함이 많다. 이런 문제를 해결하기 위해서 Nest JS 프레임워크가 등장하며 기업용 어플리케이션을 개발하고 내장하고 있는 플러그인을 통해서 쉽게 확장도 할 수 있다. OOP(객체 지향 프로그래밍), DI(의존성 주입), AOP(과점..

🤷‍♂️ 본론에 앞서프론트엔드 번들러 개념과 webpack vs vite 비교에 대해서 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교https://cometruedream.tistory.com/224 프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교🐣모듈 번들러? 모듈 번들러는 분리된 코드 조각들을 하나로 압축 하는 개발 도구입니다. 핵심 작업은 HTML, CSS, JAVASCRIPT 여러 파일을 하나로 결합하여 단일 파일로 만드는 것이다. 압축시킨 단일cometruedream.tistory.com 🤷‍♂️ 로컬 개발 환경 CORS 오류?프론트 개발을 하다 보면 로컬 환경에서 API CORS 오류가 빈번..

🤷‍♂️ 본론에 앞서프로젝트를 시작하기에 앞서 폴더 구조, 설계에 대한 아키텍처를 만드는 것은 상당히 어렵다. 이번 프로젝트에 React FSD 폴더구조 아키텍처를 설계할 예정이라서 FSD 아키텍처에 대해서 알아보겠습니다.  🤷‍♂️ FSD 아키텍처란?FSD는 Feature Sliced Desing 의미이며 작은 규모의 프로젝트나 점진적으로 규모가 확장될 필요가 없는 프로젝트라면 모놀리스 형식으로 프로젝트를 설계하면 되지만 점진적으로 소프트웨어의 규모가 커지고 확장해 나갈 예정이라면 FSD를 적용할 필요가 있다.  프론트 프로젝트 보일러플레이트 개념 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^보일러플레이트(Boilerplate code)란? - 개념, 필요한 이유https://cometrued..

🤷‍♂️ 본론에 앞서 docker 볼륨이란?docker는 가상화 환경을 빠르고 쉽게 컨테이너로 실행하고 관리할수 있는 대표적인 오픈소스 툴입니다.   도커에 대한 개념과 핵심 설명을 먼저 보시면 도커 볼륨에 대해서 이해하기가 쉬워요^^도커&쿠버네티스 [Docker] Docker의 개념 및 핵심 설명https://cometruedream.tistory.com/76 [Docker] Docker의 개념 및 핵심 설명Docker란? Go언어로 작성된 리눅스 컨테이너 기반으로하는 오픈소스 가상화 플랫폼입니다. VM(Virtual Machine)과 컨테이너(Container)의 차이 가상화는 VM 버추얼 머신으로 OS가상화죠. 대표적으로 window, licometruedream.ti..

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

🤷‍♂️ NVM이란? NVM? Node Version Manager node.js 개발을 하다보면 한번쯤은 들어봤던 용어 NVM은 설명하자면 Node.js의 버전을 관리하는 도구이다. 왜 NVM을 사용해야 하는 이유? 회사에서 협업, 프로젝트를 진행하다보면 다양한 라이브러리, 프레임워크, 개발툴의 버전 호환 문제를 겪는다. 이러한 버전 호환문제를 해결하기 위해서 node.js 버전을 관리해주는 도구 NVM 필요하다. ex: Next.js 14 버전은 node.js 버전 18.17.4 이상부터 사용이 가능하다. 18.17.4 아래 버전이 Next.js 14 버전을 install or create 하면 오류가 발생하므로 node 버전을 업그레이드 해야한다. 이런 예시같은 버전 호환 문제가 발생할경수 NVM을..

🤷‍♂️ replaceAll is not a function 오류? 제가 운영하는 커뮤니티에 크롤링 로직에서 replaceAll is not a function 오류가 발생하면서 크롤링이 제대로 되지 않고 있었다. 오류 로그를 확인했는데도 정확한 원인을 파악하지 못했다. 본론에 들어가기 앞서 NODE.JS 무엇인가? https://cometruedream.tistory.com/2 Node.js 는 무엇인가? 요즘 개발에서 JavaScript 활용도가 높아지면서 Node.js를 활용하는곳이 점차 늘고 있습니다! 저또한 Node.js를 Study하는 중입니다!!ㅎ 그렇다면 Node.js란 무엇일까요???? 웹어플리케이션을 개발할때 JavaS cometruedream.tistory.com replaceAll ..

🤷‍♂️ 에러 코드 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)란? 아이디어나 디자인, 기능 등을 시각적으로 또는 동작적으로 구현하고 요구사항들과 시나리오를 구현한 초기 설계 버전 프로토타입은 제품의 컨셉을 시험하고 피드백과 요구사항을 수집하기 위해 서비스 초기에 많이 사용됩니다. 보편적으로 개발 초기 단계에서 많이 활용되며 사용자, 고객 요구사항을 이해하고 디자인을 검증하며 문제를 해결하는데 도움을 줍니다. 가장 중요한 개념은 프로토타입은 실제 제품과 비슷한 모습을 가지지..

🤷‍♂️ 도커란? HTML 삽입 미리보기할 수 없는 소스 (Docker)도커는 애플리케이션을 개발, 배포, 실행하도록 도와주는 오픈 소스 플랫폼이다. 컨테이너화 기술을 사용하여 애플리케이션과 관련된 파일들을 컨테이너안에 패키징해서 독립적으로 실행, 관리할 수 있도록 돕는다. 도커의 컨테이너화 기술은 안정적이며 효율적으로 애플리케이션을 관리할 수 있다. Docker Container (도커 컨테이너)란? 도커 컨테이너는 가상화된 공간을 생성하기 위해 리눅스 자체 기능인 chroot, 네임스페이스(namespace), cgroup을 사용함으로써 프로세스 단위의 격리 환경을 만들기 때문에 성능 손실이 거의 없습니다. 컨테이너에 필요한 커널을 공유해서 사용하고, 컨테이너 안에는 어플리케이션을 구동하는 데 필요한..

🤷‍♂️ 본론에 들어가기 앞서 React 프로젝트 중에 input 입력 후에 Enter or 등록 버튼 후에 모든 테스트를 선택해야 되는 기능을 만들어야 했다. 나는 자바스크립트에 addeventlistener 메소드를 활용해서 하려고 했지만 더 좋은 방법이 있기 때문에 기억보다는 기록으로 남겨본다. 🤷‍♂️ focue가 맞춰지면 React를 사용하여 입력 요소의 모든 텍스트를 선택 input 포커스가 되면 입력요소에 모든 텍스트를 선택하는 select() 요소를 활용해서 포커스가 있을 때 모든 텍스트를 선택하는 방법 select() 요소를 활용해서 input 요소에 모든 텍스트를 선택하는 이유는 똑같은 값을 사용하거나 전체 삭제를 효과적으로 사용할 수 있기 때문에 필요한 기능이다. EX: App() {..