takeU

Key Sequence Detection 기본 코드 목표 누른 키가 콘솔창에 뜨도록 배열로 연결되어 뜨도록 하고, 비밀 키를 입력하면 유니콘이 나오도록 설정 과정 상수 설정 이벤트 리스너 생성 및 효과 설정 코드 분석 1. 상수 설정 const pressed = []; const secretCode = 'wesbos'; 빈 배열 pressed와 비밀코드가 담긴 secret을 만든다 2. 이벤트 리스너 생성 및 효과 설정 window.addEventListener('keyup', e => { console.log(e.key); pressed.push(e.key); pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length); if (..

Custom Video Player 기본 코드 ► « 10s 25s » 목표 동영상 플레이어의 각종 기능을 자바스크립트로 구현 과정 상수 생성 함수 생성 코드 분석 1. 상수 생성 /* Get Our Elements */ const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const progress = player.querySelector('.progress'); const progressBar = player.querySelector('.progress__filled'); const toggle = player.querySelector('.toggle'); const skipButt..

Hold Shift and Check Checkboxes 기본 코드 This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything inbetween should also be set to checked Try do it with out any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 목표 shift키로 체크박스를 동시에 체크 할 수 있는 기능을 추가하는 것 과정 함수 작성에 필요한 변수, 상수 작성 함수 생성 함수 호출 코드 분석 1. 함수작성에 필요한 변수, 상수 작성 const checkboxe..

Dev Tools Domination 기본 코드 ×BREAK×DOWN× 목표 콘솔창에 각종 연산 및 효과를 넣는 방법들을 익힘 과정 Regular, Interpolated, Styled Warining, Error, Info Testing, clearing, Viewing DOM Elements Grouping together, counting, timing 코드 분석 1. Regular, Interpolated, Styled // Regular console.log('hello'); 기본 콘솔 출력 // Interpolated console.log('Hello I am a %s string!', '💩'); %s 자리에 ,뒤의 값이 들어감 // Styled console.log('%c I am some ..

Fun with HTML5 Canvas 기본 코드 목표 제목 그대로 HTML에 캔버스를 만들어 각종 효과를 넣어보는 연습 과정 그리기 효과를 사용하기 위한 기본 설정 그리기 효과를 실시간으로 변경하기 위한 변수 설정 그리기 효과를 실시간으로 변경하기 위한 함수 작성 그리기 효과를 실시간으로 바꾸는 함수 실행 코드 분석 1. 그리기 효과를 사용하기 위한 기본 설정 const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.strokeStyle = '#BADA55'; ctx.lineJo..

Array Cardio Day 2 기본 코드 Psst: have a look at the JavaScript Console 💁 목표 Array Cardio Day1에 이어 각종 자바스크립트 메소드를 익혀봄 과정 some() every() find() findIndex(), slice() 코드 분석 1. some() // Array.prototype.some() // is at least one person 19 or older? const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); console.log({ isAdult }); 기본 코드에서 선언한 people에 19살 이상이 한명 이상 있는지 알아보..

Type Ahead 웹에서 정보를 받아와 Live Search 기능을 구현 기본 코드 Filter for a city or a state 목표 이번엔 스타일시트가 따로 빠져있는데 자바스크립트를 공부하는 목적이므로 따로 첨부는 하지 않음. 검색창을 만들어서 도시나 주의 이름의 일부를 검색하면 도시, 주, 인구수를 실시간으로 보여주도록 만들 예정 과정 도시와 주의 이름과 인구수를 받아옴 검색시 일치하는 값을 찾아내는 함수를 만듦 위의 함수를 이용해 화면에 보여지게하는 함수를 만듦 인구수를 보기 편하게 콤마를 삽입하는 함수를 만들어줌 만든 함수를 통해 실시간으로 브라우저에 출력 코드 분석 1. 도시와 주의 이름과 인구수를 받아옴 const cities = []; fetch(endpoint) .then(blob..

개발 좋은 글 모음 보시는 분들에게 도움이 되었으면 좋겠습니다. 프로그래밍 Developer-roadmap - kamranahmedse 님 [입문]초보 개발자로의 입문 / 개발이라는 세계에 첫 발 내딛기 - _Jbee 님 [번역]당신의 코딩 학습 방식을 바꿀 사진 - Captain Pangyo 님 [번역]좋은 코딩을 위한 13가지 간단한 규칙 - mingrammer 님 훌륭한 프로그래머와 코드 품질 - 이즈군 님 프로그래밍 재미있게 공부하기 - 조인석 님 소프트웨어 개발자가 되기까지 - 조인석 님 비 개발자를 위한 웹 개발 기초 - Gihyo Joshua Jang 님 [웹개발자 기준]비전공자 신입으로서 전공자한테 안밀리고 살아남는법 - OKKY 은하수 님 [번역]성공적인 웹 개발자가 되기 위한 21단계 ..

정보 http://www.venturesquare.net/ - 스타트업 전문 미디어 서비스 플랫폼, 각종 스타트업 관련정보, 기술 등을 얻을 수 있음 http://platum.kr/ - 세계의 스타트업 관련 기사, 정보 http://www.k-startup.go.kr/ - 스타트업 공고, 소식, 가이드 모임, 채용 http://onoffmix.com/ - 세미나, 포럼, 해커톤등 각종 행사 정보 및 참가신청 http://dcamp.kr/ - 스타트업 관련 행사, 매칭, 이벤트 https://www.rocketpunch.com/ - 스타트업 전문 채용정보, 구인구직 사이트 https://www.wanted.co.kr/ - 스타트업 전문 채용정보, 구인구직 사이트 http://www.elancer.co.kr..

Flex Panel Gallery flex-box를 이용한 레이아웃 및 효과를 공부 기본 코드 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 목표 CSS 속성인 display: flex를 사용해 레이아웃을 구성해보고 자바스크립트 효과를 익힘 과정 display: flex 적용 각 패널의 크기, 내용의 위치 조정 패널 안의 구성요소 정렬 패널의 효과 적용 자바스크립트 효과 적용 코드 분석 1. display: flex 적용 .panels { display: flex; } 위 코드를 적용 시키면 각 패널의 레이아웃이 다음과 같이 바뀐다 2. 각 패널의 크기, 내용의 위치 조정 .panel { displ..