진스

css에서도 변수를 선언하고 사용할 수 있다는 사실! 이를 이용해서 다크모드 기능을 만들어보자 (디폴트가 다크모드) 1. toggle 버튼 생성 📃 html 파일 BaeJM 신입 프론트 엔드 / 직장인 연결 21 팔로잉 8 팔로워 5 JavaScript jQuery MySQL Vue Ajax HTML5 Git Css 📃 css 파일 /* 토글버튼 */ .switch { position: absolute; top: 20px; right: 20px; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: point..

ESLint파일인 .esLint.js 혹은 .eslint.json을 열어줍니다. 그 후 아래 사진과 같은 문구를 추가해 줍니다. rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, 그럼 아래 사진과 같이 문제가 해결이 되는것을 확인할 수 있습니다. (만약 에러가 계속 출력된다면 VSCode에 켜놓은 파일창을 꺼줬다가 다시 실행시켜보세요)

작성중.... npm i vue-router 기본적으로 설치 필요 npm i vuex 기본적으로 설치 필요 npm i axios 기본적으로 설치 필요 vue add vuetify

utils/새파일작성 1 2 3 4 5 6 7 8 // -utils/validation.js 파일내 function validateEmail(email) { var re = /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(String(email).toLowerCase()); } export { validateEmail }; Colored by Color Scripter cs 적용할 파일내 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ..

async & await 프로미스 체이닝을 계속 하다보면 코드의 가독성이 떨어짐 async 와 await는 Promise를 간결/간편하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API async 와 await는 새로운 것이 추가 된게 아니라, 기존에 존재하는 Promise 위에 조금 더 간편한 API를 제공함 이런 것을 syntactic sugar 라고 한다 (Class도 마찬가지..) 비동기 처리를 반드시 해야하는 이유 JS 엔진은 블록({})안에 코드를 동기적으로 실행(처리) 함 시간이 오래 걸리는 코드를 비동기 처리를 전혀 하지 않으면, 다음 코드에 문제가 발생할 수 있음 예를 들어 서버에서 data를 받아와서 웹페이지에 출력하는 시나리오가 있다 data를 받아 오는데 10초가 걸림, 근데 비..

Promise 프로미스는 JS에서 제공하는 비동기 코드를 간편하게 처리할 수 있도록 도와주는 object 이다. 프로미스는 어떤 기능을 실행하고 나서 정상적으로 동작하면, 성공의 메세지와 함께 처리된 결과값을 전달해줌, 그러나 기능을 수행하다 예상치 못한 문제가 발생하면 error를 전달해 준다. State: pending(보류) → fulfilled(이행) or rejected(거부) Produce vs Consumer 1. Producer (생산자) 새 Promise가 생성되면 executor라는 콜백함수가 자동으로 실행됩니다. (코딩 할 때 조심!!) const promise = new Promise((resolve, reject) => { // 시간이 오래 걸리는 무거운 처리 (network, r..

1. 동기와 비동기 Javascript는 synchronous(동기적)이다 hoisting이 된 이후부터, 코드가 작성한 순서대로 실행됨 hoisting: var, function 선언 들이 코드 맨 위로 자동으로 올라가는 것 console.log(`1`); setTimeout(() => console.log(`2`), 1000); console.log(`3`); // Synchronous(동기식) callback function printImmediately(print) { print(); } printImmediately(() => console.log(`hello`)); // Asynchronous(비동기식) callback function printWithDelay(print, timeout) {..

HTTP (HyperText Transfer Protocol) 하이퍼텍스트 전송 프로토콜 하이퍼텍스트는 웹사이트에서 이용되어지는 Rink들만 얘기하는 것이 아니라 모든 리소스(문서, 이미지 파일 등)를 포함한다 브라우저 위에서 동작하고 있는 웹사이트나 웹APP 같은 Client들이 어떻게 Server와 통신할수 있는지를 정의 한 것을 HTTP라 한다 HTTP를 이용해서 Sever에서 Data를 요청해서 받아올 수 있는 방법으로는 AJAX라는 것이 있다. AJAX (Asynchronous Javascript And XML) 비동기 Javascript, XML 웹페이지에서 동적으로 Sever에게 Data를 주고 받을 수 있는 기술을 의미 대표적인 브라우저 API로는 XMLHttpRequest, fetch 가..