Dev Talks/Front-End Dev10 프론트엔드 Framework을 공부하는 방법 이번 포스팅에서는 Dev.to의 How I learn any front-end framework 포스팅에 대한 번역을 바탕으로 React, Angular, Vue.js 같은 프론트엔드 Framework를 어떻게 공부해야하는지 알아봤습니다. 프론트엔드 Framework을 공부하기로 했다면, 보통 유튜브나 구글 검색 등을 통해서 튜토리얼을 찾아보죠. 그런데 생각보다 알아야 할 것도 많고 막막할 때가 있습니다. 프론트엔드 Framework은 종류도 많고 어느 세월에 다 배울 수 있을지도 걱정되기도 하는데요. 하지만 아래와 같은 방법으로 공부를 진행하면 더 효율적으로 빠르게 프레임워크를 배울 수 있습니다. 먼저 프론트엔드 Framework에서 공통적으로 나오는 개념 3가지에 대해 알아봅니다. 어떤 프론트엔드 F.. 2019. 3. 19. Javascript Primitive Types - 자바스크립트 기초 공부 #2 이전 시간에 자바스크립트 기초 공부 첫 번째로 Javascript Call Stack의 개념에 대해서 알아봤습니다. 이번 시간에는 두 번째로 Javascript Primitive Types에 대해서 공부해보도록 하겠습니다.자바스크립트 Primitive Types 이란?Primitive Types는 우리말로 원시 자료형 또는 기본 자료형으로 해석할 수 있습니다. 다시 말해 자바스크립트의 기본이 되는 자료형을 의미하는데요. 그 종류에는 Boolean, Null, Undefined, Number, String, Symbol(ES6에서 추가됨)이 있습니다. 참고로 자바스크립트 Type은 typeof 연산자를 통해 확인할 수 있습니다. (참고 링크 : MDN 표현과 연산자)String자바스크립트 문자열을 의미하며.. 2019. 3. 13. Javascript Call Stack - 자바스크립트 기초 공부 #1 자바스크립트 기초 내공을 쌓기 위해 자바스크립트 개발자라면 알아야 하는 기본 개념들을 정리하고 있습니다. 이번 글에서는 그 첫 번째로 Javascript Call Stack에 대해서 살펴보도록 하죠. 용어정리먼저 용어부터 정리하도록 하죠. 자바스크립트 콜스택은 영어로 Javascript Call Stack으로 쓰이고 우리말로 번역하여 자바스크립트 호출 스택이라고도 합니다. 이 글에서는 한글로 "자바스크립트 콜스택"이라고 표기하겠습니다. 자바스크립트 콜스택 이란?자바스크립트는 콜스택은 자바스크립트 함수를 호출하는 매커니즘을 말합니다. 스택이란 하나씩 쌓았다가 가장 위에 있는 것부터 차례대로 쓰는 방식(LIFO, Last In First Out)이죠. 따라서 자바스크립트 콜스택은 호출할 함수를 스택으로 쌓아.. 2019. 3. 12. Sass 문법 정리 (mixin, include, expend, partial, import, if문) Sass 문법 중에 1) mixin과 include, 2) %와 extend 그리고 3) partial과 import 문법에 대해서 알아보도록 하겠습니다. 참고로 Sass의 이 세 가지 문법은 코드 재사용 기능을 위한 문법이라고 할 수 있습니다. 1. @mixin 과 @includemixin은 자바스크립트의 function처럼 사용할 수 있는 Sass 문법입니다. 인자 값을 넘길 수도 있고, 각 인자마다 기본 값 줄 수도 있습니다. [선언] @mixin fontSizeBgColor($fontSize : 40px, $bgColor : #fff) { font-size : $fontSize; background-color : $bgColor;} [사용] #box { @include fontSizeBogColo.. 2019. 2. 8. Sass 사용법 및 Sass 문법 공부 방법 정리 프론트엔드 프로젝트를 하다 보면 복잡하고 방대한 양의 CSS 코드를 어떻게 유지 보수할까 하는 고민에 빠진다. Sass로 CSS를 관리해야겠다는 생각은 오래전부터 하고 있었는데, 그동안 프레임워크 공부에 빠져 있다 보니 Sass 공부를 계속 미뤄왔다. 그러다 이번에 제대로 Sass 사용법 및 Sacs 문법을 독파하자는 목표를 세웠고 그 내용을 정리해봤다. 1. Sass css 차이2. Sass를 사용하는 이유3. Sass 문법 종류4. Sass 출력 스타일5. Sass 주석6. Sass 변수7. Sass 문법을 더 공부하려면?8. Sass 참고 URL 모음1. Sass CSS 차이?먼저 개념부터 잡고 가자. Sass에 대해 잘 모르는 사람은 Sass와 CSS가 어떤 차이가 있는지 묻는다. 그런데 엄밀히 .. 2019. 2. 5. 크롬 개발자모드 콘솔에서 jQuery 사용하는 방법 크롬 개발자모드는 프론트 앤드 개발하는데 있어서 필수적으로 사용하는 툴이죠. 디버깅 기능을 포함하여 강력한 개발 툴을 지원해주고 있는데요. 가끔 사이트 분석을 할 때 콘솔에서 jQuery 명령어를 쓰고 싶을 때가 있죠. ▼ 우선 크롬 Developer Tool 에서 다음과 같은 코드를 복사 후 실행하면 jQuery 기능을 사용할 수 있습니다. var jq = document.createElement('script'); jq.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); // ... give time for script to load, .. 2017. 8. 25. 정규표현식 치트 시트 정규표현식은 쓸 때마다 헷갈리죠. 분명 공부를 다했다고 했는데 한동안 안쓰다가 막상 개발할 때 쓰려고 하면 가물가물합니다. 정규표현식을 잘 하려면 아무래도 반복하는 수 밖에 없는데요. 어느정도 암기도 해야하지만 그럴 시간이 없죠. ▼ 그럴 때 유용하게 쓸 수 있는 정규표현식 치트 시트를 소개드립니다. 아래 표를 정규표현식을 쓸 때마다 반복적으로 보게 되면 어느 정도 암기도 잘 되고 더 빠르게 개발에 적용할 수 있는 것 같네요. ** 336x280 ** 2017. 8. 18. [angularJS] 프로 AngularJS (애덤 프리먼 저) 책 공부 후 정리 개인적으로 복습하기 위해 정리한 내용이라 정리가 깔끔하지는 않습니다. 혹시 같은 책 공부하시는 분들에게 도움이 될까 해서 포스팅으로 올립니다^^; (그나저나 이제 angularJS 2.0 이 나와서 이 책은 더 공부할 이유가 없네요;;) Angular JS 복습 [1장] 준비하기 - MVC 디자인 패턴 중심- 개발환경설정 브라우져 : 크롬 / 편집기 : 서브라임 텍스트3 / js 실행툴 : Node.js 웹서버 : connect 모듈을 npm으로 설치 후 server.js 를 만들어서 node.js 로 실행 테스트 : npm 으로 karma, jasmin 설치 css 프래임웍 : bootstrap js 프레임웍 : angular.js - 프로젝트 생성 angular.js 다운로드 (1.5) angular.. 2016. 7. 24. [gulp.js] 자동화 빌드를 위한 gulp.js 설치 (Mac) gulp.js 는 node.js 기반 환경에서 작동하는 스크립트 빌드 자동화를 지원해주는 툴이다. 개발 편의를 위해서 분리해놓은 스크립트를 통합하고 압축, 네이밍 하는 등의 작업을 자동화 할 수 있다. 자세한 내용은 https://www.npmjs.com/package/gulp 에서 확인 할 수 있다. 1. gulp.js 설치 node와 npm 이 설치되어 있는 환경에서 터미널에 다음 명령을 수행한다. sudo npm install --global gulp 터미널에서 gulp -v 로 설치여부 및 버전을 확인한다. * node.js 설치 방법 참조 : http://gomcine.tistory.com/15 다음 명령어를 실행하면 설치 경로가 출력된다. which gulp /usr/local/bin/gulp.. 2016. 7. 10. 크롬 GPU 가속 설정 관련 TIP 크롬 GPU 가속 설정 관련 TIP 개발할 때 크롬 많이 쓰시죠. 다음은 크롬 GPU 가속 관련해서 설정해주면 좋은 부분입니다. - chrome://flags/ 에서 Override software rendering list => Enable로 변경 GPU compositing on all pages => Enable로 변경 Disable accelerated 2D canvas => Enable로 변경 - chrome://gpu/ 에서 자세한 내용은 조만간 다시 정리해서 올릴께요~ 2015. 2. 1. 이전 1 다음
