javascript
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
[JavaScript] 🖼️ JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기
2019.02.05🖼️ Day5 - JavaScript로 Flexbox를 이용한 이미지 갤러리 만들기JavaScript 30의 다섯 번째 프로젝트는 Flexbox를 이용한 이미지 갤러리 만들기 프로젝트이다. 😊 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142434445 Flex Panels 💪 Hey CAT Dance Give CAT Receive Experience CAT Today Give CAT You can Life CAT Motion Colored by Color Scriptercs🎨 CSS 코드1234567891011121314151617181920212223242526272829303132333435363738..
[JavaScript] 💪 Array관련 Method 완전정복 1탄
[JavaScript] 💪 Array관련 Method 완전정복 1탄
2019.02.05💪 Day4 - Array관련 Method 완전정복JavaScript 30의 네 번째 프로젝트는 프로젝트는 아니고, 잠시 공부시간이다. Array와 관련된 Method에는 무엇이 있는 지, 예제를 통하여 확인해보자 😃 HTML & JavaScript 코드 콘솔에 결과 값들이 출력 되어있다. 💁 💪 Array 관련 Method 1. filter()123const arr = [1,2,3,4,5]arr.filter( el => el el * 2 ) // [2,4,6]arr // [1,2,3] 원본이 바뀌지 않음csmap은 모든 요소를 특정 조작을 가한 데이터로 수정하여 새로운 배열을 만들어줍니다. 3. sort()123const arr = [3,20,12,1,4]arr.sort() // [1, 12, 20, ..
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
[JavaScript] 🎨 JavaScript로 CSS 업데이트하기
2019.02.04🎨 Day3 - JavaScript로 CSS 업데이트하기JavaScript 30의 세 번째 프로젝트는 JavaScript를 통해 이미지의 CSS를 업데이트하는 프로젝트이다. 😃 HTML 코드123456789101112131415161718192021222324252627282930313233343536373839404142 clock UPDATE CSS VARIABLES WITH JS Spacing: Blur: Base Color: Back to List Javascript30 Day3 Colored by Color Scriptercs😃 CSS 코드12345678910111213141516171819202122232425262728293031323334:root { --base: #ffc600; --sp..
[JavaScript] ⌚ JavaScript로 시계만들기
[JavaScript] ⌚ JavaScript로 시계만들기
2019.02.03⌚ Day 2 - JavaScript로 시계만들기JavaScript 30의 두 번째 프로젝트는 '시계 만들기'이다. JavaScript도 사용되지만 CSS 테크닉도 필요한 좋은 프로젝트이다. 😃 HTML 코드1234567891011121314151617181920212223242526272829 clock CLOCK Back to List Javascript30 Day2 Colored by Color Scriptercs 시침, 분침, 초침과 시계 테두리, 시계의 중앙부를 만들었다.😃 CSS코드123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646..
[JavaScript] 🎹 JavaScript로 악기 만들기
[JavaScript] 🎹 JavaScript로 악기 만들기
2019.02.02🎹 Day 1 - JavaScript로 악기 만들기 JavaScript 30의 첫 번째 프로젝트는 '드럼 킷 만들기'이다. 특정 키보드 버튼을 누르면 해당하는 드럼 소리가 나와서 연주를 할 수 있는 프로젝트이다. 😃 HTML 코드 SYNTH PIANO A S D F G H J K L ; ' Back to List Javascript30 Day1 😃 JavaScirpt 코드 playSound = e => { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`li[data-key="${e.keyCode}"]`); if (audio) { audio..
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30
📅 30일간 30개의 JavaScript 프로젝트 도전기 / JavaScript 30
2019.02.02프로그래밍 언어를 가장 빨리 익히는 방법에 여러 방법론이 있지만, 여러가지를 만들어보면서 해당 언어를 체득하는 것이 가장 좋다고 알려져있다. 30일간 Vanilla JS( 프레임워크, 컴파일러, 라이브러리, 보일러 플레이트등이 없는 순수한 자바스크립트 )로 30개의 결과물을 만드는 JAVASCRIPT 30의 목적도 이와 같다.There is no formation without repetition반복 없이는 결과물도 없다JavaScript 30의 이용 방법은 매우 간단하다. 이메일을 이용해 가입하면, Wes Bos의 JavaScript 30 강의를 무료로 들을 수 있다. 유튜브 영상도 올라와있으니, 가입이 귀찮다면 유튜브를 통해 강의를 들어도 된다. 자 이제 매일 JavaScript 프로젝트를 만들며 J..
npx create-react-app ... 그래서 npx가 뭐길래?
npx create-react-app ... 그래서 npx가 뭐길래?
2018.12.26🤔 npx란 무엇인가? 우리가 리액트를 처음 시작할 때, 프로젝트를 만드는 패키지인 create-react-app이 있습니다. npx create-react-app my-app 여기서는 왜 npm이 아닌 npx를 사용하고 npx란 무엇일까요? 👨👦npm의 아들 npx는 자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 npm@5.2.0 버전부터 새로 추가된 도구입니다. 따라서 npm@5.2.0 이상 버전만 깔려 있다면 npx 커맨드를 사용 가능합니다. npx는 npm 레지스트리의 패키지 사용 경험을 파악하기 위한 도구입니다 - npm은 레지스트리에서 호스팅되는 종속성을 매우 쉽게 설치하고 관리할 수 있으며, npx는 레지스트리에서 호스팅되는 CLI 도구 및 기타 실행 파일을..
[⚛React] React 기본 개념
[⚛React] React 기본 개념
2018.12.26🤔 리액트란? 리액트(React, React.js 또는 ReactJS)는 선언적, 효율적으로 유연하게 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리의 하나로, 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수되며 지금도 계속 업데이트 중인 프로젝트이다. 리액트의 개념은 다음과 같은 함수로 표현 가능하다. f(data) = View 페이지에 동적인 상호작용을 넣고 싶을 때 우리는 자바스크립트를 이용하게 된다. 하지만 웹 개발 시 DOM 관리 및 상태값 관리 작업은 프로젝트가 커질 수록 논리가 복잡해질 수록 귀찮고 머리 아파진다. 이러한 것들을 최소화하고 오직 기능 개발과 사용자 인터페이스(UI) 를 구현하는 것에 집중하기 위해 React 같은 라이브러리가 탄생되었다. 리액트의 특징 리액트는 ..
[JavaScript] 키보드 이벤트 함수 onKeyDown, onKeyUp, onKeyPress 비교
[JavaScript] 키보드 이벤트 함수 onKeyDown, onKeyUp, onKeyPress 비교
2018.12.23⌨ [JavaScript] 키보드 이벤트 함수onKeyDown키를 눌렀을 때 이벤트 발생이벤트 발생 후, 문자 입력Keycode 값을 받는다.키보드에 있는 모든 키를 인식한다. onKeyUp키를 눌렀다 놓았을 때 이벤트 발생문자 입력 후, 이벤트 발생 onKeyPress키를 눌렀을 때 이벤트 발생이벤트 발생 후, 문자 입력ASCII Code 값를 받는다.ASCII Code에 해당하지 않는 shift, ctrl, backspace, tab, 한/영 등의 키는 인식하지 못한다. CodeSandBox 예제
React로 WYSIWYG 에디터 뭘로 시작하지?
React로 WYSIWYG 에디터 뭘로 시작하지?
2018.12.20커뮤니티 형태의 사이트를 만든다면, 글 작성 및 댓글 작성을 구현 할 때 필연적으로 고민하게 되는 부분 어떤 WYSIWYG를 쓸 까? 그런 분들에게 추천드릴만한 제가 직접 사용해 본 React에 맞는 WYSIWYG에 대해서 설명해보겠습니다. WYSIWYG(위지위그)란? 모두 대문자로 이루어졌으니 무언가의 약어라는 뜻인데, 바로 'What You See Is What You Get, 보는 대로 얻는다'라는 뜻으로 말 그대로 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말한다. - 위키피디아 커뮤니티 형태의 사이트에서는 글을 작성하는 곳에서 이 위지위그 에디터들이 사용됩니다. 간단하게 글자를 굵게 만드는 것부터, 이미지 삽입, 동영상 삽입, 특정 정보 삽입까지 복잡한 역할..