Light Dev

목차 (import / export), (require / exports) 문법 자바스크립트에서의 대표적인 파일 입출력 방법은 CommonJS 와 ES6 문법이 있습니다. 서로 사용법이 다르며, 특징과 차이점이 있다. 그럼 이 두가지 차이점에 대해 포스팅해 보겠다. ES6 문법 (import / export) 특징 ES6에서 새롭게 도입된 키워드입니다. 자바와 파이썬 언어 방식과 비슷합니다. 파일 시작 부분에서만 호출 가능 필요한 모듈 부분만 선택하고 로드할 수 있어 더 선호 require() 에 비해 성능이 우수하며 메모리 절약 사용법 JavaScript import : 가져오기 export : 내보내기 export defaults : 내보내기 Tip 출력할 때 export(ES6) 와 exports(..

목차 VSCode Git 연동 오류 해결 프론트엔드 웹개발을 하던 초창기에 갑자기 VsCode로 작성하던 텍스트 파일 commit이 에러가 일어났다. 다행히 지금은 해결되었지만 문제를 해결하게 된 사이트의 사진처럼 갑자기 소스제어에 공급자가 없다면서 VsCode 상에 커밋이 불가능하게 되었다. 당시 필자의 VsCode도 상태가 딱 저랬다. 그러나 당시에는 해결방법을 몰랐기에 한동안 방치해 두다가 작년 10월 쯤에 어떤 블로그 글을 보고 문제를 해결헀다. VSC Git 연동 오류 링크의 글을 보고 위의 사진처럼 왼쪽 툴바의 확장에 들어가서 @Builtin Git을 검색한 뒤 Git SCM 통합을 클릭했다. 당시에는 비활성화 상태였었는데 사용 버튼을 클릭했더니, 설정에 들어가니 Git is enabled를 ..

목차 React, Vue를 Vite를 통해 풀스택 개발을 하고자 하면 필연적으로 Cors 에러가 발생하게 된다. 이를 해결하려면 Proxy 설정을 하여 해결하여야 한다. 해결 방법은 다음과 같다. Vite.config.js 설정 server 항목을 만든 후 port: 4000으로 작성하면 Vite project가 127.0.0.1:5173 에서 127.0.0.1:4000 포트에서 작동한다. proxy: { '/api' : 'http://localhost:3000'}을 작성하면 localhost:3000에서 '/api'로 서버에서 전달하는 값을 수신하는 것이 가능하다. TypeScript import { defineConfig } from 'vite' import vue from '@vitejs/plugi..

목차 Netlify를 통한 배포 시 에러 Netlify 배포 후 Page Not Found라는 창이 뜨고 웹사이트가 실행되지 않는 오류가 발생했을 때 해결하는 방법을 포스팅 한 글이다. Vanilla JS를 이용한 해결방법 필자의 경우 바닐라 자바스크립트를 이용하여 웹페이지 구축 중이었는데, index.html을 다른 이름으로 변경해버려서 문제가 생겼다. index.html을 다시 생성해 주었더니 문제가 해결되었다. Tip netlify의 url로 들어가면 가장 먼저 index.html 파일을 띄워주기 때문에, index.html 파일이 반드시 있어야 한다. React Router를 이용한 해결방법 아래 두 가지 방법 중 편한 방법을 선택하면 된다. 이후 프로젝트를 저장하고 재배포하면 오류가 사라질 것이..

목차 Node.js를 이용한 백엔드 프로그래밍 작업을 할 때, Node.js 프로젝트 개발환경을 구축할 때 디렉토리 구조를 잡기 어려울 때가 있다. 이 때 Express-generator를 이용하면 Express환경을 간단하게 구축할 수 있다. 그럼 이 글에서 Express-generator 예제 파일을 만들어보자. Npm, Yarn을 이용하여 설치하기 Npm, Yarn을 이용하여 설치하려면 다음과 같은 명령어를 입력한다. Shell // 'npm i' 대신 'install'로도 가능함. $ npm i -g express-generator 프로젝트 환경 구성하기 전역 설치 후 터미널에 다음과 같이 입력한다. Shell // 'express'를 'pug'로 설치. $ express my-app --view..

목차 Node.js란? JavaScript 구동 엔진인 V8의 등장 크롬과 파이어폭스, 인터넷 익스플로러와 같은 브라우저들은 자바스크립트를 읽고 해석하는 역할을 합니다. 자바스크립트를 빠르게 읽고 해석하면 웹사이트 렌더링 성능도 빨라지니 브라우저 개발자들은 자바스크립트를 해석할 수 있는 엔진 개발을 꾸준히 해 나갔습니다. 그러다 구글 사내에 있던 크롬 브라우저 개발자들이 자바스크립트 해석엔진인 V8이라는 프로그램을 만들었는데 성능이 상당히 좋았기 때문에 이 엔진만 따로 기능을 추가하여 출시하였는데, 이 엔진을 Node.js라고 이름을 지었습니다. 즉, 기존의 브라우저에서만 사용되던 자바스크립트를, 브라우저 밖에서 사용할 수 있도록 만들어주는 프로그램입니다. Node.js를 실행하면 자바스크립트 입력란이 ..

목차 Morgan 소개 Morgan 이란? Morgan은 http 요청과 응답이 있을 때 마다, 명령창에 로그로 보여주는 Node.js 패키지로 로깅(logging)에 도움을 주는 미들웨어입니다. 로깅이란 무슨 일이 어디에서 일어났는지를 기록하는 것을 의미한다. Morgan 설치 우선 Morgan 패키지를 설치한다. Shell // 설치 명령어 npm i morgan Morgan 사용법 Morgan 사용법1 Morgan은 클라이어트와 서버의 응답 사이에 존재하는 미들웨어이므로, 아래와 같은 코드를 적절한 위치(루트 이벤트 리스너 전)에 적용해주면 된다. Express 서버에서 사용하려면 다음과 같이 작성하면 사용이 가능하다. JavaScript import logger from "morgan" impor..

목차 Concurrently는 여러 개의 명령어를 동시에 실행할 수 있도록 해주는 Npm 패키지다. 이 패키지를 사용하면 Frontend와 Backend에서 개발용 서버를 따로 실행하거나, 터미널의 로그를 따로 확인할 필요도 없기에 매우 유용하다. 그럼 이번글에서는 Concurrently 사용법을 포스팅해보겠다. 우선 폴더 구조는 다음과 프론트엔드 폴더와 백엔드 폴더로 나눠서 구성한 채로 시작한다, Folder . ├── Frontend └── Backend Concurrently 라이브러리 설치 우선 Concurrently 라이브러리를 설치한다. Shell // 'concurrently' 설치하기. $ npm install concurrently # or $ yarn add concurrently 세부..