본문 바로가기

프론트엔드 빌드 환경9

[VSCode] Delete `␍` eslint 알림 사라지게 설정

문제: 코드 줄 끝에 eslint 알림이 표시됨. eslint라 정상 실행은 됨. 에러 메시지: Delete `␍`eslint(prettier/prettier) 원인 : End Line Sequence가 CRLF여서 그럼. 해결 방법 ./.eslintrc.js 설정파일을 생성 .eslintrc.js 설정파일에 다음을 작성 module.exports = { // ... rules: { // ... 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, }; 2021. 12. 1.

[json-server] 프론트 개발자가 json만으로 mock rest api 만들기

개요 프론트엔드 개발자가 빠르게 백엔드를 json만을 사용해서 프로토타입으로 만들어 볼 수 있습니다. json으로만 rest api를 만듭니다. 코딩이 필요없습니다. json만 작성합니다. 사용 방법 $ npm install -D json-server // npm 설치 $ json-server --watch mock.json // 실행 실행하면, 홈 경로에 mock.json 파일이 생성됩니다. 초기 세팅을 보시면, 다음과 같을겁니다. 📄 mock.json { "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], ".. 2021. 8. 19.

[nodemon+babel] babel 과 nodemon 개발 환경 구축하기

우아한테크러닝 프로젝트를 수행하면서 express로 서버 쪽을 개발하고 있습니다. 저번 글에서 언급했지만, node가 ES6문법 중에 import 문법을 읽지 못하는 문제를 babel 패키지를 프로젝트 개발 환경에 설치해서 문제를 해결했습니다. 추가로, nodemon을 개발 환경에 추가하려고 합니다. nodemon을 추가하려는 이유는 개발 환경을 편하게 만들기 위해서입니다. nodemon이 없다면, 하루에도 코드는 몇 번이고 변경이 되고 테스트를 위해서 개발자는 반복적으로 수십 번 서버 재실행을 하게 될 겁니다. 🤔 nodemon nodemon은 node환경에서 개발 코드 변경을 감지해서 자동으로 서버를 재실행 해주는 패키지입니다. 기본적인 usage는 다음과 같습니다. 1. 설치 $ npm i -D n.. 2021. 6. 12.

트랜스파일러란 무엇인가요?

Transpiler Typescript, SASS 그리고 Babel이 트랜스파일러입니다. 트랜스파일러는 같은 언어이지만, 문법적으로 변환해 주는 도구를 말합니다. 컴파일러는 머신언어로 변경해서 언어와 파일 자체가 변경되지만, 트랜스파일러는 같은 언어지만, 문법만 바꿔주는 역할을 해줍니다. Typescript Transpile Type이 있는 Javascript -> Javascript SASS Transpile scss -> css Babel Transpile es6 Javascript -> es5 Javascript 2021. 6. 8.

[webpack] 간단하게 알아보는 웹팩 데브 서버 설정 및 사용방법

webpack-dev-server를 켜 놓으면 코드의 변경사항을 감지해서 브라우저에 변경된 점을 자동으로 반영해 줍니다. webpack-dev-server를 사용해서 개발하면, 매번 빌드하는 명령어를 입력하고, 빌드를 기다릴 필요가 없습니다. 배포를 할 경우에만, 빌드를 해서 결과물을 받아서 서버에 넣으면 됩니다. 개발을 편하게 하려고 사용하는게 webpack-dev-server입니다. webpack-dev-server의 원리는 컴퓨터 메모리 상으로만 빌드한 결과물을 만들어서 브라우저에 웹팩 빌드 결과물을 전달합니다. 1. 설치 npm i -D webpack-dev-server 설치가 완료되면, package.json에 devDependencies 객체에 webpack-dev-server가 추가되었습니다.. 2021. 5. 30.

[webpack]실전편-간단하게 따라해보는 webpack 초기 세팅 방법

안녕하세요. 이번 글은 webpack을 처음부터 세팅해서 브라우저에 아래 웹을 띄워볼게요. 목차 준비물 1. 프로젝트 디렉토리 생성 2. 프로젝트 홈 경로에서 npm init -y 3. webpack과 webpack-command line interface 패키지를 설치합니다. 4. package.json에 script 객체에 "build": "webpack"를 입력합니다. 5. webpack.config.js 파일을 생성합니다. webpack의 기본 webpack 설정파일입니다. 6. app.js에 math.js를 임포트해줍니다. 7. 중간 빌드 : npm run build(건너뛰어도 됩니다. 뒤에서 빌드 합니다.) 8. CSS 웹팩 설정(loader 설치) 9. 파일(이미지)도 webpack 설정(l.. 2021. 5. 28.

[babel] 이제야 알게 된 babel의 기적. babel 학습하기.

2년 전에 스터디를 하면서 express를 잠깐 사용해 본 경험이 있습니다. 그 이후로는 전혀 사용해 보지 않았죠. 최근에 우아한 테크 러닝을 진행하면서 node가 설치된 서버에 express 프레임워크로 구축하고 개발하면서 에러가 발생했습니다. 개발한 코드를 실행하면서 node에서 발생한 에러였습니다. SyntaxError: Unexpected token export at Module._compile .. export랑 import 문법에서 에러가 자꾸 발생했습니다. 왜 안되지?...(웹 개발 2년 차) 원인 node에서 런타임 예외가 발생했습니다. node가 es6 이상의 문법에서만 지원하는 import와 export를 이해하지 못하고 에러가 나는 것이었습니다. 이 순간. 저는 깨닫고 말았습니다. 사.. 2021. 4. 2.

ESLint 설정하기

확장 플러그인인 ESLint를 소개하고, 사용하는 방법을 알아보겠습니다. ESLint는 Javascript 문법을 검사해주는 에디터 확장 프로그램입니다. 사용법 Vue-cli가 3.x대 버전에서 ESLint를 사용해보겠습니다. 일단, app.vue에서 다음 코드를 입력하고, vue-cli를 실행해보았습니다. 터미널과 브라우저 모두 아래와 같이 ESLint의 에러로그가 발생합니다. 브라우저에는 overlay되어서 에러로그가 보이게 됩니다. 이럴 경우에는 개발을 할 수가 없게 됩니다. 브라우저의 에러로그 오버레이를 없애주는 설정을 하겠습니다. 설정 순서 1. 프로젝트 홈 경로 바로 밑에 vue.config.js라는 파일을 생성합니다. 2. 다음 코드를 작성합니다. module.exports = { devSe.. 2021. 1. 23.

[vue.js]1 - vue 프로젝트 개발 환경 세팅하기

브라우저 개발 환경 chrome => 설치 크롬 플러그인 vue dev tool => 설치 Visual Studio Code 설치 플러그인 - vetur - vue VSCode Snippets - Material Icon Theme(파일 아이콘 알아보기 쉽게 설정) - Live Server - Night Owl(vscode 테마 색깔 변경) - Prettier (Javascript formmater) - ESLint (Javascript 통합 ) Visual Studio Code 테마 변경 1. vscode 검색창 열기 맥 : Cmd + Shift + P 윈도우 : Ctrl + Shift + P 2. 'color theme'를 검색 git clone 받기 1. 터미널 열기 맥 : control + shi.. 2021. 1. 22.

티스토리툴바