Web

1. 설치 npm install -D tailwindcss 2. tailwind.config.js 파일 생성 npx tailwindcss init 3. tailwind.config.js tailwind.config.js 파일을 다음과 같이 설정해주었다. /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,htm,js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], } 4. css 파일 생성 @tailwind base; @tailwind components; @tailwind utilities; 5. import 만약 리액트에서 사용한다면 4번에서 만든..

Jest는 페이스북에서 만들어 React와 더불어 많은 자바스크립트 개발자들로부터 좋은 반응을 얻고 있는 테스팅 라이브러리이다. 출시 초기에는 프론트엔드에서 주로 쓰였지만 최근에는 백엔드에서도 기존의 자바스크립트 테스팅 라이브러리를 대체하고 있다. 📌 설치 npm install --save-dev jest supertest 📌 테스트 서버를 하나 만들어주었다. // app.js const express = require('express'); const app = express(); app.get('/', (req, res, next) => { res.status(200).json({ message: 'hello world', }); }); module.exports = app; 그리고 테스트를 하기 위한..

async/await는 ES8에 등장한 것으로 Promise와 then보다 깔끔하게 코드를 작성할 수 있게 해준다. 👉 Promise 방식 function promise() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('success'); }, 2000); }); } promise() .then((result) => { console.log(result); }) .catch((e) => { console.error(e); }); 👉 async/await 방식 function fn() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('success..

문자의 Bytes 길이를 쉽게 구하는 방법이 있습니다. buffer.byteLength를 사용하면 됩니다. const korBytesLength = Buffer.byteLength('안녕'); const engBytesLength = Buffer.byteLength('hello'); console.log(korBytesLength); // 6 console.log(engBytesLength); // 5 근데 영어는 글자당 1 bytes로 계산되는데 한글의 경우 글자당 3 bytes로 계산됩니다. 한글을 글자당 2 bytes로 계산하려면 다음과 같이 할 수 있습니다. function getBytes(str) { let character; let charBytes = 0; for (let i = 0; i <..

👉 Nginx 설치 Nginx는 nginx.org에서 설치할 수 있다. Stable version을 다운로드 받아 사용했다. 👉 실행 & 종료 위에서 다운받은 압축파일을 풀고 nginx.exe를 더블클릭해 실행하면 된다 혹은 cmd에서 압축을 해제한 경로로 들어와서 start nginx를 치면 된다. 종료, 재시작 할 때도 마찬가지로 nginx가 설치된 경로까지 들어와서 아래 명령어를 치면 된다. 종료: nginx -s stop nginx -s quit 재시작: nginx -s reload 👉 localhost 접속해보기 nginx가 실행이 됐으면 브라우저에서 localhost라고 쳐보면 아래 이미지처럼 나오는데 이렇게 나오면 제대로 된 것이고 기본 포트가 80이기 때문에 localhost 뒤에 ':포트..

코드 포매터(Formatter)로는 대표적으로 Prettier가 있습니다. 많이들 사용해봤을거라고 생각이 드는데요. Prettier가 하는 역할은 우리가 작성한 코드를 정해진 규칙대로 코드 스타일을 변환해주는 도구입니다. 린터(Linter)는 버그가 날 수 있을 만한 코드, 스타일 오류, 의심스러운 구조 등을 찾아서 잡아주는 도구입니다. 대표적으로는 ESLint가 있습니다. 📌 Prettier 설정하기 제가 한 설정을 기준으로 작성하였습니다. IDE는 JetBrains사의 WebStorm을 사용합니다. npm i -D prettier 그리고 .prettierrc 파일을 하나 만들고 json 파일을 작성하는 것 처럼 규칙들을 작성하면 됩니다. 저는 간단하게 두 가지 규칙만 넣어봤습니다. { "semi": ..