전체 글(107)
-
간단하게 Vite로 프로젝트 생성하는 방법
간단하게 Vite로 프로젝트 생성하는 방법에 대해서 알아보겠습니다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io 선행 작업으로 node.js가 설치되어 있어야 합니다. 터미널을 오픈하세요. 1. npm으로 Vite 설치하기 npm create vite@latest Project name: 진행하고자 하는 프로젝트 폴더명 입력하기 ✔️ 각각의 옵션은 프로젝트 성향에 맞게 선택하기 Select a framework: Vanilla Select a variant: JavaScript cd 생성한_프로젝트_폴더명 npm install npm run dev #서버 띄우기 잠시 서버 종료 ctrl + c #서버 종료..
2023.02.23 -
[Javascript] 매개변수에 객체를 구조 분해 할당해서 전달해보자
객체 안의 키(key)를 상수로 사용하고 싶을 때, 구조 분해 할당을 활용해 보자! const students = { apple: "애플", banana: "바나나", orange: "오렌지" } const { apple, banana, orange } = students; //키(key)값 만으로 호출할 수 있게 됨! console.log(apple); //애플 console.log(banana); //바나나 console.log(orange); //오렌지 배열은 인덱스(index)를 기준으로 구조 분해할 수 있다 const user = ["1", "2", "3"] const [ one, two, three ] = user; //즉 배열은 인덱스 기준으로 구조분해 할 수 있다 console.log(on..
2023.02.11 -
[Javascript] 구조 분해 할당, import, export default 와 연관지어 알아보기
구조 분해 할당 배열이나 객체의 속성을 해체하여 그 인덱스 혹은 키 값을 개별 변수(상수)에 담을 수 있도록 사용하는 Javascript 표현식 //const { 객체 내 key값 } = 객체명 //정해진 key값이 있기 때문에, { 객체 내 key값 }은 바꿀수 없다 const person = { age: 30, height: 175, hobby: "coding" } //⭐️ 구조 분해 할당, 객체 안의 key값이 각각 하나의 상수가 되는 것! const { age, height, hobby } = person console.log(age); //30 //import { key값 } from "경로/라이브러리명"과 연관지어 생각해 볼 수 있음! ⭐️ 중요 import { key값 } from "경로/라..
2023.02.10 -
[Javascript] Math 내장객체 - ceil(), floor(), round(), trunc(), abs(), min(), max(), pow(), sqrt(), random()
Math의 메소드 Math.ceil(x) : x보다 크거나 같은(이상) 수 중에서 가장 작은 정수를 반환 console.log(Math.ceil(1.5)); //2, 소숫점 이하를 올림 console.log(Math.ceil(1.9)); //2 Math.floor(x) : x보다 작거나 같은(이하) 수 중에서 가장 큰 정수를 반환 console.log(Math.floor(1.5)); //1, 소숫점 이하를 내림 console.log(Math.floor(1.9)); //1 Math.round(x) : x에서 가장 가까운 정수를 반환 console.log(Math.round(1.831)); //2 console.log(Math.round(1.15)); //1 console.log(Math.round(-10...
2023.02.03 -
[Javascript] 다양한 방법으로 스타일 적용하기
HTMLElement.style const ele = document.querySelector('.ele'); ele.style.display = 'flex'; /* 스타일 속성 해제(삭제)하기 */ ele.style.display = ''; HTMLElement.style.cssText const ele = document.querySelector('.ele'); ele.style.cssText = `display: flex; justify-content: center; align-items: center; `; HTMLElement.classList.add('className') const ele = document.querySelector('.ele'); ele.classList.add('activ..
2022.10.21 -
.gitignore 작성 규칙
.gitignore 작성 규칙 node_modules 같이 용량이 큰 파일이거나, 보안상 공유하면 안되는 파일, 프로젝트에 관련이 없는 운영체제 파일 등 굳이 이력 관리 대상이 아닌 경우가 있다. 그래서 git의 관리대상에서 무시해야할 파일들 직접 선언하는 방법을 알아보자 #은 주석 # md 확장자로 끝나는 모든 파일 제외 *.md # !는 예외 사항 만들기, readme.md는 제외에서 예외 !readme.md # 경로와 상관없이 build라는 이름의 디렉토리 및 그 안의 모든 파일들 제외 build # 현재 경로에 있는 build 디렉토리에 있는 모든 파일을 제외 /build # build라는 디렉토리 안에 있는 모든 파일 제외 build/ # build라는 디렉토리 하위 파일들 중에서 txt 확장자..
2022.10.18