본문 바로가기

Java Script, HTML, CSS

(6)
[Vue] 실행 모드(운영/개발)와 환경 변수 분리하기 - 사용자 실행모드를 추가할 수 있다. - 실행 모드별로 필요한 환경 변수를 다르게 설정 할 수 있다. package.json 파일에 스크립트 정보 추가 "[모드명]" : " vue-cli-service serve --mode [모드명]" package.json 에 cli 실행 스크립트에 모드 정보를 붙여 추가해 준다. 내가 추가한건 live, local, dev 이고 아래와 같이 실행 가능하다. npm run [모드명] 으로 실행 가능하다. npm run live npm run local npm run dev 모드명에 맞춰 환경 변수 파일 생성 ( .env.live, .env.dev) - package.json 과 같은 위치 (root) 에 두어야 한다. - .env.[mode].local 로 생성시에..
[클론코딩 요약/노마드코더] 바닐라 JS로 크롬 앱 만들기 - #2 PRACTICE #2.0 Your first JS Function console.log incoInfo.favFood 비슷하다. console 은 Object 이다. console이라는 Object 와 log 라는 function(key) 가 있는것 function(argument) function sayHello (name) { console.log('Hello ' + name); } sayHello("sejin"); #2.1 More Function Fun sexy string~ '', "" , `` 자바 스크립트에서는 "(따옴포)" 도 스트링이고 '(싱글 따옴표)' 도 스트링이다. 기존 스트링 방식 에서는 ex ) "Hello " + name + "you are " + age + ... 불편하다. 대신 백틱(`)을..
[클론코딩 요약/노마드코더] 바닐라 JS로 크롬 앱 만들기 - #1 THEORY # 자잘한 강의 내용 기록 #1.1 Super Powers of JS JavaScript 는 브라우저에서 대체 불가능한 언어이다. 단순히 홈페이지를 구현하는것이 아닌 많은 인테렉티브 디자인 또한 구현 가능하다. #1.2 ES5, ES6 ES..WTF? JavaScript는 언어, ECMAScript 는 Specification 이다. ES5 = ECMAScript5 ES6 = ECMAScript6 : 버전이랑 어떤걸 배워야 할지 걱정하지 않아도 된다. 그냥 강의의 자바 스크립트를 배워랏 자바스크립트는 매우 기능 집중화 되어있어 누군가 업데이트를 하면 모든 브라우저에서 작동을 하게 된다. JS 는 Specification 인데 체계 메뉴얼과 같다. (ex :메뉴얼 이렇게 하면 이렇게 해야합니다~, 오류 나..
자바스크립트 데이터 타입 정리 자바스크립트에는 두가지 데이터 타입이 있다. 바로 기본형과 참조형 기본형 : 숫자, 문자열, 불리언, null, undefiened 등이 있으며 ES6에서는 심볼이 추가 됐다. 참조형 : 객체, 배열, 함수, 날짜, 정규 표현식등이 있으며 ES6에 추가된 Map, WeakMap, Set, WeakSEt 이 이 객체의 하위 분류에 속한다. 일반적으로 기본형은 할당이나 연산시 복제, 참조형은 참조된다고 알려져 있다. 엄밀히 말하면 둘다 모두 복제를 하긴한다. 다만 기본형은 값이 담긴 주솟값을 바로복제, 반면 참조형은 값이 담긴 주소값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.
CSS, HTML - gradient 색상 코드 사이트 (유용한 사이트) https://uigradients.com/#Ali uiGradients - Beautiful colored gradients uiGradients is a handpicked collection of beautiful color gradients for designers and developers. uigradients.com 뭐 간단하다. 마음에 드는 컬러를 확인하고 위에 색상 코드를 가져가면 된다.
FontAwesome 이용하여 HTML Icon 추가하기 FontAwesome 은 5000개 이상의 아이콘을 제공해주는 라이브러리로 Prefix와 name이 들어간 코드를 추가하여 간단하게 여러 아이콘을 무료로 사용할 수 있는 기능을 제공한다. 사용 방법 1. 의 사이에 라이브러리를 다운받을 수 있는 링크를 추가한다. 1 2 3 4 5 6 7 ... ... http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter 2. https://fontawesome.com/ 사이트에 접속하여 Icons 탭에서 원하는 아이콘을 선택한다. 3. 상단에 있는 코드 를 그대로 복사하여 내가 사용하고자 하는 위치에 붙여 넣기 하면 ..