노마드코더 유투브 클론 코딩 을 공부한 기록입니다. Node.js 란 무엇인가 자바스크립트는 웹 브라우저에 내장되어 있습니다. 다시 말해, 웹 브라우저에는 자바스크립트 실행을 위한 자바스크립트 엔진이 내장되어 있고 이는 브라우저를 사용하는 모든 사용자는 자바스크립트를 언제든 실행 시킬 수 있는 프로그램을 가지고 있음을 의미합니다. 브라우저 안에서는 누구든 얼마든 자바스크립트를 사용할 수 있습니다. 그러나 밖에서는요? Node.js는 자바스크립트를 브라우저 밖으로, 사용자의 컴퓨터로 가지고 나와서 사용자가 사용할 수 있게 합니다. Node.js로 자바스크립트를 꺼내와 서버를 만들 수 있습니다. 언제 Node.js를 쓸까? 서버를 빌드해야 하는 경우 자바스크립트를 정말 좋아하는🧡 개발자 프론트, 백엔드를 자..
노마드코더 유투브 클론 코딩 을 공부한 기록입니다. 수업을 시작하기에 앞서 우리가 빌드하는 것이 무엇인가? 왜 바닐라 자바스크립트를 선택했는가? 위의 두 가지를 알기 위해서는 웹사이트와 웹 어플리케이션의 차이를 알아야 한다. Websites vs Webapps Websites 웹사이트는 내가 컨텐츠를 생산하는 것이 아니라 소비하는 경우이다. 내가 뭔가를 클릭하여 작성된 글을 보고, 다시 뒤로가고 정도를 의미한다. =인터랙티브 ❌ 각종 프레임워크나 라이브러리 가이드 사이트에 방문했을 때 우리는 작성된 도큐멘트를 확인만 할 수 있다. 이런 것을 웹사이트라고 한다. Webapps 어플리케이션은 내가 페이지를 이동하고 클릭하고 검색을 할 수 있는 것이다. 예시로 넷플릭스가 있으며 영화가 보여지고 필터링과 검색을..
🥤 gulp-concat concat은 연결하다는 의미로 배열 메소드로도 쓰이는 친구죠. gulp-concat 플러그인도 유사한 의미로 여러 파일들을 하나로 연결(?)해줍니다. var concat = require('gulp-concat'); gulp.task('scripts', function() { return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js']) .pipe(concat('all.js')) .pipe(gulp.dest('./dist/')); }); lib 폴더 아래에 있는 자바스크립트 파일 3개를 all 이라는 파일명의 js파일 하나로 합쳐줍니다. 그리고 all.js는 dist 폴더 아래에 위치하겠죠? 그러면 이전 글의 s..
Gulp 4.* 버전 기준으로 설명합니다. 이번에는CSS의 전처리기(CSS Preprocessor)인 SCSS로 스타일을 작성하여 CSS로 컴파일하는 작업을 위한 테스크를 작성합니다. SCSS, SASS, LESS가 무엇인지 알고 싶다면? 바로가기 🥤 gulp-sass 설치하기 npm -D gulp-sass gulp-sass 플러그인을 설치해 줍니다. 개발자도구에서 sass 라인을 알려주는 소스맵 플러그인도 별도로 설치했어야 했는데, 걸프가 업데이트되면서 기본 지원합니다. 그만큼 사용자들이 많았나 봅니다 👍 이전 글에서도 말했듯이 --save는 작성하지 않으셔도 됩니다. "devDependencies": { "gulp": "^4.0.2", "gulp-sass": "^4.1.0" } 설치가 잘 되었다면 p..
🔍 Design System Research 각 회사마다 디자인 시스템 문서를 어떻게 구성하였는지 알아보기 위해 작성한 글입니다. 회사 선별은 굳이 정하자면 많이 알려진 기준입니다. AUI 아틀라시안의 패턴 라이브러리 컴포넌트를 세 단위로 분류했습니다. Generaul UI components Forms and form components Page and conent structure 지속적으로 관리함을 보여주는 change log 내용이 있습니다. 바로가기 BLK 부트스트랩4에 기반한 UI 라이브러리 스타일 가이드에 관한 내용을 Foundation 안에 넣었습니다. Colors Grid Typography Icons 파일 구조를 소개하는 내용이 있습니다. 바로가기 Carbon IBM 사의 디자인 시스템..
✍🏼 Design System Reference 개념 디자인 가이드라인/디자인 시스템은 왜 필요한가(현재글) UX 컨설팅 회사 pxd에서 작성된 디자인 시스템 시리즈 1~8편 디자인 시스템에 대해 상세하게 설명되어 있습니다. typescript와 storybook을 사용한 리액트 디자인 시스템 구축하기 리액트 계의 문익점😇이라는 벨로퍼트님의 글입니다. 리액트를 사용하지 않아도 기본적인 디자인 시스템에 대해 이해할 수 있습니다. 10분만에 읽는 디자인 시스템 헷갈리는 디자인 시스템 개념들에 대해 정리되어 있습니다. 디자인 시스템 체크리스트 3명의 디자이너, 프론트엔드 엔지니어가 만든 체크리스트 2020.01 에 런칭한 따끈따근한 리스트입니다. The ABCs of Design Systems 더 잘 알고 싶..
