본문 바로가기

공부/프론트엔드32

[JavaScript30] 9,10,11 강 정리 9강 . 14 Must know Dev tools Tricks ( 꼭 알아야하는 14가지 개발 도구 요령 (?)) 콘솔 객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메소드를 제공한다. console.log() 의 reqular, Interpolated, style 출력 방법 1 2 3 4 5 6 7 console.log('hello'); console.log('Hello I am a %s string!', 'yeaseul'); const v = 'yeaseul'; console.log(`Hello I am a ${v} string!`); console.log('%c I am some great text', 'font-size:50px; background:.. 2019. 3. 20.
[JavaScript30] 6,7,8 강 정리 6강 . Type Ahead Fetch 란?Fetch API를 이용하면 Request 나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능.fetch() 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있음.(XMLHttpRequest 기능과 유사) fetch()는 Promise 객체 반환. HTTP error상태를 reject하지 않고 쿠키를 보내거나 받지 않음.HTTP Response 객체로부터 실제값을 가져오기 위해서는 blob()메서드를 사용해야 함. Promise 란?자바스크립트 비동기 처리에 사용되는 객체 (비동기처리란? 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것)데이터를 다 받아오기전에 화면에 데이터를 표시.. 2019. 3. 17.
Embedded Pens Doc (코드팬 블로그에 붙이기!) 프론트에 대한 코딩예제를 찾다보면 Code Pen에 잘 되어있는 코드들이 많다. 이러한 코드들을 블로그에서 코드뿐만 아니라 코딩결과도 바로 볼 수 있도록 내장하는 방법에 대한 문서가 Code Pen 사이트에 있다. 하지만 영어로 되어있기 때문에 해석을 하고, 앞으로 나도 써먹을까 한다! 많은 분들에게 유용하게 쓰이길! 본문 : https://blog.codepen.io/documentation/features/embedded-pens/ Embedded Pens Bring Your creations on CodePen to documentation, blog posts, or any other site! CodePen의 창작물을 문서, 블로그 게시물, 다른 어떤 사이트로 가져가세요 ! 내장된 코드를 복사-.. 2018. 12. 6.
Today I Learned (TIL) 오늘 하루 일하면서 알게된거, 서핑하다가 알게된거, 공부하다가 알게된거 등등.. 웹프론트 관련하여 올리기로 한다. gitHub에서 올리려 하였으나 코딩을 생각보다 안하므로 일단 블로그에 어떤내용인지 정리하는식으로 진행해보도록 한다. 1. SweetAlert [https://sweetalert.js.org/] alert을 예쁘게 처리해준다. 2. Free progress bar javascript plugins for Web Degin [https://speckyboy.com/free-progress-bar-javascript-plugins/] - lineprogressbar : jquery로 하는 라인진행바 - Mprogress.js : css사용하는건가. 간단해보인다.! - progressBar.js .. 2018. 10. 29.
vue-cli 설치 후 vue 실행 오류 for windows Vue.js 로 Todo List를 만들어 보고자 차근차근 셋팅 하던 중, vue-cli 설치 후에 vue를 찾지 못하는 windows 1. 구글에 " not found vue cli command for windows " 검색 https://github.com/vuejs/vue-cli/issues/347 에서 환경변수를 지정하라고 함 내 컴퓨터 환경변수에 C:\Users\{YourUser}\AppData\Roaming\npm 가 없어서 추가하였지만 그래도 안됌. 2. 다시 설치 명령어 : npm install vue-cli -global 음.. 자세히 보니 설치된 장소가 C:\Users\{YourUser}\AppData\Roaming\npm 가 아니라 C:\Users\{YourUser}\node_mod.. 2018. 10. 11.
css 스타일 종합 4 으.. 4일차다.. 별로 진전이 없는것같다.. 귀찮아 죽겠다.. 하나. jqery를 이용한 전원 on off 스타일 지정 전원을 on off 하는 버튼을 만들었는데.. 스타일 지정하기 너모 어렵당. step 1. 초기에는 on 을 active시켜놓고 disabled 속성을 놓아준다. on 이렇게! (.active일때 미리 스타일을 다르게 지정해 놓는다) off step 2. jquery를 이용하여 on off 일때 서로 토글 되게 설정. $('#on').click(function(){ let power = $('#on').attr('class'); if(power != 'active'){ $(this).addClass('active'); $('#off').removeClass('active'); $('#.. 2018. 9. 19.