노마드코더 유투브 클론 코딩 을 공부한 기록입니다. 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 더 잘 알고 싶..
🔢 자바스크립트로 계산기 만들기 eval() 함수를 이용하여 계산기를 만듭니다. 난이도 ⭐ 예제 Retro Calculator with JS 기능 정의 버튼 클릭 > 클릭 이벤트가 발생한 값 저장 숫자 연산 +, -, /, * 양수/음수 +/- 소수점 . = 버튼 클릭 저장된 값들을 연산 연산된 값들을 출력 A/C 버튼은 현재 값과 저장된 값 모두 삭제, C 버튼은 현재 입력된 값만 삭제하는 기능 기본 구조 테이블 태그를 사용하는 방법도 있지만 모던 웹 방식에 맞추어 flexbox로 레이아웃을 설계했습니다. 기능이 같은 버튼들은 공통 클래스명을 줍니다. AC C +/- / 7 8 9 * 4 5 6 - 1 2 3 + 0 . = 스타일링은 window 계산기 버전, 아이폰 버전 등 원하는 느낌으로 하시면 됩..
⏰실시간 시간 구하기 난이도 ⭐ 예제 Real Time Clock new Date() 현재 날짜와 시간을 반환합니다. const today = new Date(); console.log(today) // Tue Apr 28 2020 14:40:02 GMT+0900 (대한민국 표준시) getMonth() 자바스크립트의 월은 0부터 시작하므로 1을 더해줘야 1~12월로 나옵니다. const month = today.getMonth() + 1; getDay() 요일 정보는 숫자로 이루어져 있습니다. 0 (일요일) ~ 6 (토요일) 2는 목요일이겠죠? const day = today.getDay(); // 2 Intl.DateTimeFormat 언어에 따라 날짜와 시간 서식을 지원합니다. 숫자로 나오는 요일을 ..
이메일 코딩은 보통의 코딩 방식과 다릅니다. 이메일 서비스(아웃룩, 지메일, 네이버 등)마다 아웃룩의 버전마다 렌더링 되는 화면은 상이합니다. 테스트를 하며 디자인과 맞춰야 하기 때문에 생각보다 쉽지 않은 작업입니다. 이 글은 최근에 아웃룩 이메일 템플릿 작업을 하며 느꼈던 특징들을 정리합니다. 👮🏻♀️ 공통 규칙 Inline Style 스타일시트를 별도로 작성하지 않고 인라인 스타일로 작성합니다. Table 가 아니라 로 레이아웃을 설계해야 합니다. 코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들이 를 지원하지 않습니다. border와 table 사이 공간 제거를 해줍니다. Width width는 버전마다 인라인 스타일 적용 여부가 다르기 때문에 table 태그의 속성으로도 기재하여 명확하게 ..
CSS로 탭을 만드는 방법 중 하나는 앵커 태그로 마크업하여 CSS 선택자 :target으로 구현하는 방법이 있습니다. 이 방법은 몇 줄 안되는 CSS로 구현할 수 있지만 URL 해시를 사용하여 스크롤이 점프되는 이슈가 있기에 권장하지 않습니다. 이를 대체해주는 멋진 아이디어는 바로 input의 radio type을 이용하는 것이죵 체크박스, 스위치버튼을 커스텀할 때 label과 :checked를 활용하여 스타일링 하듯이 이 방법 또한 마찬가지입니다. HTML 탭 메뉴와 내용을 같은 div로 감쌉니다. .tab-label이 탭 메뉴의 역할을 합니다 input radio 기본 사용법처럼 name명은 모두 tabGroup으로 통일하고, 각 input id와 label for을 매칭합니다. Tab Menu 1..
Gulp는 node.js 기반으로 개발 프로세스를 자동화시켜 업무 시간 단축에 도움을 주는 도구_task runner_입니다. SCSS를 CSS로 변환할 수 있고, HTML로 작성된 UI를 컴포넌트화 하여 인클루드 할 수도 있습니다. 빌드 도구, 테스크 러너하면 webpack이 제일 많이 알려져 있죠? 많이 사용되는 webpack으로도 작업 할 수 있지만 걸프는 비교적 배우기 쉽고, 무겁지 않습니다. 정적인 화면 작업만 한다면 걸프도 충분합니다. 처음에 저는 gulp와 grunt 중에 무엇을 쓸까 고민하다가 더 대중화된 gulp를 사용했습니다. 걸프 폴더구조 설치할 경로에 폴더를 생성해줘야 합니다. project 폴더를 만들고 그 하위에 추가 폴더를 생성합니다. 저는 gulp-tutorial 폴더 밑에 ..
가뭄에 콩 나듯 사용하는 빈도수는 적지만, 알아두면 유용한 속성입니다. counter 속성은 화면에 자동으로 번호를 그려주는 기능을 합니다. 문법 counter(name, style) name 카운터 이름으로 변수처럼 네이밍합니다. style 기본값은 decimal(십진수)이고 list-style-type에 적용되는 속성들을 선택적으로 사용할 수 있습니다. list-style-type: disc, circle, square, decimal, decimal-leading-zero, lower-roman ... 사용법 1. 부모 요소에서 카운터 초기화 counter-reset: 이름 / 시작숫자 2. 사용할 요소에 카운터 선언 counter-increment: 이름 / 증감숫자 contnet: counter..
