꿈많은 DEVELOPER

[자바스크립트] 배열(array) reduce 함수의 개념및 활용도 높은 사용법

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 배열 join() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/254 [자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법🤷‍♂️ 본론에 앞서배열은 javascript에서 가장 중요한 데이터 자료구조 중 하나입니다.배열에 내장함수를 활용하는 것은 javascript에서 중요한 부분 중 하나이며 join() 배열 메서드는 배열을 합cometruedream.tistory.com  배열 map(), forEach() 인기있는 메서드 사용법에 대해 알아보기https://cometruedream.tistory.com/253 [자바스크립트] 배열(array)을 처리하는 인기있는 ..

[자바스크립트] 배열(array)을 유용하게 활용할 수 있는 join 함수 개념 및 사용법

🤷‍♂️ 본론에 앞서배열은 javascript에서 가장 중요한 데이터 자료구조 중 하나입니다.배열에 내장함수를 활용하는 것은 javascript에서 중요한 부분 중 하나이며 join() 배열 메서드는 배열을 합치는 것에 가장 중요한 내장함수 중 하나입니다.join() 배열 메서드를 더 잘 활용할 수 있도록 알아보겠습니다. 배열(array)을 처리하는 인기 있는 메서드 map(), forEach() 개념과 차이점https://cometruedream.tistory.com/253 [자바스크립트] 배열(array)을 처리하는 인기있는 메소드 map(), forEach() 개념과 차이점🤷‍♂️ 본론에 앞서자바스크립트는 현재 웹/앱 개발 트렌드에서 필수적으로 사용되는 프로그래밍 언어입니다. 여러 아이템을 저장..

🤷‍♂️ 본론에 앞서자바스크립트는 현재 웹/앱 개발 트렌드에서 필수적으로 사용되는 프로그래밍 언어입니다. 여러 아이템을 저장하는데 사용되는 배열과 이를 파싱하며 새로운 데이터를 생성하고 조작하는데 필요한 자바스크립트 내장함수인 map(), forEach()라는 두 가지 인기 있는 배열 메소드에 대해 알고 계실 겁니다. 이 두 배열 메소드는 배열에 루프를 처리하는 기능이 비슷하지만 중요한 차이점이 있습니다. 이 차이점을 공부하여 배열 메소드를 더 효율적으로 활용할 수 있도록 알아보겠습니다.  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 🤷‍♂️ 배열(array)이란?배열은 여러 개의 아이템을 순서대로 저장, 추가, 삭제할 수 있는 자료구조입니다. 배열은 각 요소에 인덱스..

🤷‍♂️ 본론에 앞서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() {..

🤷‍♂️ 본론에 들어가기 앞서 웹 개발을 하다 보면 B 위 HTML 문서는 브라우저에서 다음과 같이 순차적으로 처리가 됩니다. A가 화면에 출력됨 script.js 파일을 내려받아 자바스립트 코드가 실행됨 B 가 화면에 출력 * HTML은 동기식으로 한줄한줄 읽어나가는 특징을 가지고 있다. HTML 삽입 미리보기할 수 없는 소스 🤷‍♂️ defer vs async 속성? 전통적으로 script 요소를 head 요소 안에 넣도록 배우는 경우가 많지만 실제 프로젝트 or UI & UX 측면에서 body 요소 제일 마지막에 script를 넣어서 사용자에게 최적화된 웹페이지 경험을 줄 수 있다. 미리 HTML 그려주고 script를 렌더 하는 방식이다. Defer 속성 정의 요소에 defer 속성의 정의 def..

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

🤷‍♂️ React에서 동일한 파일 업로드 구현 프로젝트중에 PDF 파일 업로드 기능 구현 당시 동일한 파일을 업로드 하는 경우 input태그의 onChange 이벤트 핸들러 함수가 정상적으로 동작하지 않는 문제가 발생했다. 파일 업로드 과정 브라우저에서 PDF 업로드를 클릭하면 파일 탐색기 창이 열리고 파일을 선택후에 파일을 업로드한다. 여기서 오류는 동일한 파일을 두번 이상 업로드시 onChange 이벤트가 발생하지 않는 문제였다. 20230920001_00_40.pdf 파일을 업로드하고 다시 20230920001_00_40.pdf 파일을 업로드하면 onChange 이벤트가 발생하지 않는다. 정리: React에서 동일한 파일을 연속해서 선택했을 때 input 태그에 onChange 이벤트 핸들러 함수..

🤷‍♂️ 본론에 들어가기 앞서 javascript 이벤트와 이벤트 핸들러의 이해 자바스크립트는 이벤트 기반에 프로그램이며 자용자 또는 브라우저가 페이지를 클릭하거나 action을 통해서 이벤트가 발생한다. 이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고 있습니다. 예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다. 이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다. 이와 같은 시나리오에서 이벤트 발생을 감지하기 위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를..

경험 만큼 좋은 교훈은 없다. 들어가기 앞서 지키지 않는 정책과 규칙은 없으니만 못하다. 이 말에 누구나 다 고개를 끄덕이겠지만 이 세상에 정책과 규칙을 준수하는 것만큼 가장 어려운 일도 없다. Prettier 일관성 있는 코드 스타일 유지해서 코드 퀄리티를 일관 적으로 유지하는 것을 돕는다. * 참고 vscode 자체에도 prettier 설정을 해줄 수가 있는데 이것은 프로젝트에 공유되지 않으니 prettierrc 파일에 설정을 하는 것이 좋다. 만약 prettierrc 파일이 있다면 우선적으로 그 설정을 따른다. Eslint 코드에 문제 패턴을 식별하고 코드에 오류를 검사해준다. Eslint rules Eslint 규칙을 설정 가능하다. VScode Prettier 셋팅 방법 Intellij 셋팅 B..

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

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