tailwind에 서버 관련하여 자유롭게 커스텀이 가능하다.몇가지만 해보자.아래 serve안에 --port=8090는 포트번호가 기본적인 5500번을 사용하게 되는데 그 번호를 8090으로 변경하고--browser=safari 는 기본 브라우저 설정을 사파리로 설정하는 것이다. 다른 브라우저로 설정이 가능하다.--host=localhost의 경우는 서버를 로컬환경에서 실행하는 것이다.{ "scripts": { "start": "run-p watch serve", "dev": "tailwindcss -i ./src/styles/input.css -o ./src/styles/main.css", "watch": "npm run dev -- --watch", "serve": "live-s..

1. 새로고침 및 수정사항 반영npm run dev혹은 watch라는 모드가 있다.npm run dev는 1회성으로 수정 사항에 대해 그 순간 새로고침이 되어 반영이 되게 만드는 것이다.근데 watch는 저장을 할 때마다, 수정한 사항에 대해 계속 반영이 될 수 있도록 하는 것이다.아래와 같이 pakage.json 파일에 입력을 하면 된다.그래서 만약에 파일명을 수정하게 된다면 dev 값만 수정을 하게 되면 아래 watch도 같이 수정된다.터미널에1. 상시 업데이트 : npm run watch 라고 입력하면 된다.2. 일회성으로 하고 싶다면 npm run dev 이다.{ "scripts": { "dev": "tailwindcss -i ./src/styles/input.css -o ./src/sty..

테일윈드를 사용할 때 계속 변경을 할 때마다 아래 명령어를 입력해야했다. 하지만 이를 쉽게 할 수 있는 방법이 있다.npx tailwindcss -i ./src/input.css -o ./src/output.css --watch 파일 경로 중에package.json 파일에 들어가서 처음에는 아래와 같다.{ "devDependencies": { "tailwindcss": "^3.4.10" }} 그리고 아래와 같이 고쳐본다. 역시 파일경로와 파일명을 잘 확인해본다.{ "scripts": { "dev": "npx tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/main.css" }, "devDependencies": { "tailw..

여기서 초기세팅할 때 공식문서가서 하자. https://tailwindcss.com/docs/installation1. tailwind 초기세팅 처음 위와 같은 방식으로 세팅한다.1. npm install -D tailwindcss노트 패키지 매니저로 tailwindcss 패키지를 설치하는 것이다. 2. npx tailwindcss init이는 tailwindcss로 초기화위와 같이 파일 경로에 이러하게 생긴다. 2. 초기 경로 설정/** @type {import('tailwindcss').Config} */module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],}위 코드를 tailwin..

1. 공간 나누기 Section Contents Section Header Section Contents 이러한 식으로 section을 통해 서로의 공간을 나누는 것이다.예를 들면 반찬이 들어간 식판의 공간들을 나누며, 그 반찬이 아니더라도 공공재, 레이아웃 느낌으로 만들어야 한다. 여기서 .section의 역할을 제한시킨다. 아래 2번에 title 컴포넌트를 만들어 역할 제한간격 100px 부여배경색 테마 2. 공간안에서의 컴포넌트 나누기 아래와 같이 헤더 부분에 한덩어리에 타이틀을  같이 한다면 이 컴포넌트는 강제성을 띄게 된다.여기..

1. 타입 변환이란?자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion)또는 타입 캐스팅(type casting)이라고 한다.var x = 10;// 명시적 타입 변환// 숫자를 문자열로 타입 캐스팅한다.var str = x.toString();console.log(typeof str, str); // string 10// x 변수의 값이 변경된 것은 아니다.console.log(typeof x, x); // number 10 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다.이를 암묵적 타..