개발자 퉁이리

ViteJS vite는 빠르고 간결한 빌드 도구다. 웹 프로젝트 규모가 계속해서 커짐에 따라 빌드를 하는 시간도 그만큼 길어지고 있다. vite는 이러한 문제를 해결할 수 있는 능력을 가지고 있다. 프랑스어로 빠름을 의미하는 vite는 그 이름에 걸맞게 엄청나게 빠른 빌드 속도를 자랑한다. 지금부터 CRA의 대항마인 vite를 사용하여 React 프로젝트를 생성해보자 Vite는 원래 Vue용으로 개발되었지만 React, Svelte 등 거의 모든 웹 프레임워크를 지원하고 있다. Vite가 현재 지원하는 템플릿 JavaScript TypeScript vanilla vanilla-ts vue vue-ts react react-ts preact preact-ts lit lit-ts svelte svelte-t..

자바스크립트 패키지 매니저 자바스크립트 패키지 매니저는 프로젝트에서 사용할 패키지에 대해 설치, 수정, 삭제 등을 도와주는 도구다. 최고의 오픈 소스 생태계를 가진 자바스크립트에서 패키지 매니저는 정말 중요한 존재이다. 최근에는 오픈 소스를 사용하지 않으면, 개발 진행이 안 될 정도로 유용하고 좋은 자료들이 너무 많이 개발되어있다. 그리고 서로서로 의존성이 높아서 하나를 받으면 다른 것을 받아야 하는 상황도 연출된다. 패키지 매니저를 통해 오픈 소스를 다운로드하게 되면 프로젝트 안에서 package.json에 목록이 저장되고, 후에 install 명령어를 통해 package.json 안에 있는 정보들을 손쉽게 다시 다운로드할 수도 있다. 그렇다면 패키지 매니저의 종류로는 무엇이 있을까? npm과 yarn..

CORS CORS는 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유를 말한다. 날 너무나도 힘들게 하고 괴롭혔던 CORS CORS가 무엇인지에 대해서는 이전 포스팅에서 이미 다루었으므로 SKIP!! 오늘은 CORS를 proxy로 해결해보자. proxy로 CORS 해결하기 배포 : netlify WEB 배포를 netlify로 했는데 배포 후 서버에서 데이터를 불러오려고 시도하면 계속해서 CORS 오류가 발생했다. CORS가 무엇인지는 알고 그에 대한 해결법도 알고 있었지만 막상 직접 경험하니 머리가 새하얘졌다. 이전 프로젝트에서도 CORS를 만났는데 서버에서 받아오는 데이터를 그냥 저장하여 불러오는 식으로 해결했었는데 이번에는 정말 해결하고 싶었다. 나는 배포를 net..

FLUX FLUX는 FaceBook에서 고안한 단반향 데이터 흐름의 디자인 패턴이다. FLUX 패턴은 REACT Redux의 디자인 패턴으로 사용되고 있다. MVC 모델을 사용하고 있던 FaceBook에서 데이터가 많아지고, 복잡해지자 예상치 못한 오류들을 FaceBook에게 안겨주었다. 위 그림처럼 복잡해졌고, FaceBook은 이를 해결하기 위해 FLUX 패턴을 고안해낸다. FLUX 패턴 FLUX 패턴은 데이터를 보다 명확하게 구분하기 위해, MVC 복잡성을 해결하기 위해 데이터의 방향이 한쪽으로만 이동한다. FLUX 요소 Action Dispatcher Store View 🔥 Action Action은 데이터 상태 변경을 도와준다. Action 생성자는 type과 payload를 묶어 Dispatc..

CI/CD CI/CD는 CI와 CD를 합친 용어로, 지속적인 통합과 지속적인 배포를 뜻한다. CI (Continuous Integration) CI는 Continuous Integration의 약자로 지속적인 통합이라는 의미를 가진다. 개발이 진행됨에 따라 소스 코드에 대해 업데이트가 생기면 지속적으로 통합을 해준다. 지속적으로 코드를 왜 통합하나요? 해당 프로젝트에 개발자가 여러 명 일시 코드 충돌이 일어날 수도 있다. CI를 진행하게 되면 이러한 문제점을 해결할 수 있다. CD (Continuous Deployment) CD는 Continuous Deployment의 약자로 지속적인 배포라는 의미를 가진다. CI 빌드를 통과한 소스 코드에 대해 서버 배포가 가능하다면 진행된다. 지속적으로 배포를 왜 ..

WEBPACK 웹팩은 모듈 번들러다. 모듈(module)이란? 모듈은 특정 기능을 가지는 작은 코드 단위를 말한다. const sum = (a,b) => a+b; 번들러(bundler)란? 기술의 발전으로 복잡한 코드도 많이 개발되어 자연스럽게 코드 줄은 기하급수적으로 늘기 시작했다. 코드가 길어짐에 따라 여러 문제가 발생하였다. 코드 양이 많아 로딩이 느려짐 중복되는 코드 이름 (에러 발생) 스코프 문제 번들러는 여러 개의 파일을 하나로 묶어주는 역할을 수행함으로써 위 문제들을 해결해준다. 여러 개의 번들러가 존재하고 그중 하나가 웹팩(webpack)이다. 다시 한번 정리하자면 웹팩은 모듈 번들러다. 🤨 모듈 번들러인 웹팩은 장점만 존재할까? 웹팩(webpack)의 단점으로는 러닝 커브가 높다. 또한 ..

BABEL BABEL은 ES6+ 코드를 이전 JavaScript 엔진에서 실행할 수 있게 도와주는 컴파일러다. ❓ BABEL이 필요한 이유 현재 JavaScript는 브라우저에서 돌아가는데 너무 빠르게 바뀌고 있다. 그래서 최신 브라우저가 그 속도를 못 따라가는 경우가 종종 발생한다. babel은 이러한 문제를 해결해준다. 최신 JavaScript 언어를 해석하여 이전 버전을 가진 브라우저에서도 돌아갈 수 있게 문법을 변경해준다. 🔧 BABEL 빌드 진행 과정 파싱 (Parsing) 변환 (Transforming) 출력 (Printing) 파싱 -> 변환 -> 출력 과정을 거쳐 BABEL 빌드가 이루어진다. BABEL 빌드에서 가장 중요한 부분은 변환 과정이다. 변환은 플러그인을 통해 이루어진다. 🎈 플..

크로스 브라우징 크로스 브라우징은 표준 웹 기술을 사용하여 다양한 브라우저에서 작동 가능한지를 말한다. Chrome부터 시작해서 Edge, Firefox, IE Safari 등 브라우저는 굉장히 다양하다. 브라우저가 다양한만큼 렌더링 엔진도 그만큼 다양하다. 브라우저마다 렌더링 엔진이 다르기 때문이다. 🤨 렌더링 엔진 렌더링 엔진은 브라우저의 핵심이 되는 소프트웨어 구성 요소로, 요청한 데이터를 시각적으로 변환시켜준다. 📗 다양한 브라우저에서 해당 기술이 작동되는지 확인하는 방법 모질라(MDN) https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies ..

XML XML은 eXtensible Markup Language의 약자로 HTML과 매우 유사한 마크업 언어다. 🤔 어느 부분에서 HTML과 유사한가요? 같은 Markup Language이다. Markup Language는 사람과 기계가 동시에 읽기 편한 구조로 되어 있다. XML은 데이터를 저장하고 전송하도록 설계되었다. 기존 HTML의 한계를 극복하기 위해 탄생되었다. HTML은 데이터를 어떻게 보여주는지에 포커스가 맞추어져 있다면, XML은 데이터가 무엇인지가 포커스다. XML 특징 1️⃣ 정해진 태그를 사용하지 않아도 된다 XML 언어는 미리 정의된 태그가 전혀 존재하지 않는다. 따라서 새로운 태그를 만들어서 의미 있는 데이터를 계속해서 확장할 수 있다. 2️⃣ 웹 국제표준 W3C의 권장 사항이다..

마크다운 (MarkDown) 마크다운은 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용된다. 일반 마크업 언어에 비해 문법이 쉽고 간단하다. ❓ 마크다운을 어디서 사용하나요? 마크다운 문법을 지원하는 모든 곳에서 사용 가능하다. 블로그나 워드프레스, 인스턴트 메시지나 온라인 포럼 등에서 널리 사용된다. 우리가 알만한 곳으로는 Trello나 Slack, 그리고 마크다운이 가장 주목받은 이유인 GitHub가 있다. GitHub에서 Repository의 정보를 기록하는 README.md가 마크다운 형식이다. README에 설치 방법이나 소스코드 설명 등을 마크다운 형식으로 기록한다. 🎬 마크다운 역사 Swartz와 John Gruber는 2004년에 마크다운 언어를 만들었다. 읽기 쉽고 쓰기 쉬운 일반 텍..