까막눈코딩

1. Copying // start with strings, numbers and booleans let age = 100; let age2 = age; console.log(age, age2); age = 200; console.log(age, age2); let name = 'wes'; let name2 = name; console.log(name, name2); name = 'wesley'; console.log(name, name2); 문자열, 숫자, 불린 자료형을 변수로 할당하면, 해당 값은 메모리에 저장된다. 위 코드에서, age에 100을 할당하고, age2에 age를 할당한 후 콘솔 창에 나타내 보면 100과 100으로 출력될 것이다. 이후, age의 값을 200으로 바꾸고 콘솔 창에 출력..

Experience/[Javascript] JS 30 2021. 4. 25. 16:13

1. 배경 스크롤을 내리면 삽입된 그림이 슬라이드 되면서 삽입되는 애니메이션 효과를 추가한다. 2. HTML Slide in on Scroll Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos. Lorem ipsum cupidita..

Experience/[Javascript] JS 30 2021. 4. 24. 00:10

1. 배경 브라우저에서 키를 인식하고 방향키에 따라서 스크롤이 움직이는 등의 특별한 기능을 실행할 수 있도록 한다. 2. Javascript const pressed = []; const secretCode = 'wesbos'; window.addEventListener('keyup', (e) => { pressed.push(e.key); pressed.splice(-secretCode.length -1, pressed.length - secretCode.length); if (pressed.join('').includes(secretCode)) { console.log('Ding Ding'); cornify_add(); }; }); 먼저 눌러진 키들을 모으기 위해 빈 배열인 pressed를 만든다. 또..

Experience/[Javascript] JS 30 2021. 4. 22. 23:33

1. 배경 간단한 비디오 플레이어를 만들었다. 화면이나 플레이 버튼을 누르면 재생되거나 일시정지되고, 이에 따라 버튼의 모양이 바뀐다. 풀 스크린 버튼, 10초 전, 25초 뒤로 이동하는 스킵 버튼, 재생 상황에 따라 이를 나타내는 바를 만들었으며, 재생 바를 클릭하면 이에 비례하여 재생 상황이 이동되도록 하였다. 2. HTML ► « 10s 25s » 🔲 3. CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; display: flex; background: #7A419B; min-height: 100vh; background: linear-gradien..

Experience/[Javascript] JS 30 2021. 4. 22. 14:42

1. 배경 Shift 키를 누른 상태로 두 개의 체크박스를 클릭하면, 그 사이에 있는 체크박스도 모두 체크되도록 하는 기능을 만들기로 했다. 2. HTML This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything in between should also be set to checked Try to do it without any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 3. CSS html { font-family: sans-serif; background: #ffc600; } .inbox {..

Experience/[Javascript] JS 30 2021. 4. 21. 00:39

콘솔 창을 잘 활용하기 위한 팁이다. 1. HTML ×BREAK×DOWN× 2. Javascript const dogs = [{ name: 'Snickers', age: 2 }, { name: 'hugo', age: 8 }]; function makeGreen() { const p = document.querySelector('p'); p.style.color = '#BADA55'; p.style.fontSize = '50px'; } 3. console // Regular console.log("hello"); // Interpolated console.log("hello. I am a %s string!", "🐥"); // Styled console.log("%c I am some great text"..

Experience/[Javascript] JS 30 2021. 4. 20. 22:27

1. 배경 간단한 계산기 앱을 만들어 보고자 한다. 2. 기능 - 화면에 연산 과정을 표시하고, 결과 미리보기를 표시한다. - 각 버튼을 누르거나 키보드를 누르면 이에 맞게 화면에 표시되고 동시에 연산을 수행한다. - 화면의 크기에 따라 반응형으로 제작한다.

Experience/[Javascript] Calculator 2021. 4. 20. 20:33

3-way merge는 충돌을 줄일 수 있는 병합 방법이다. base의 내용인 A, B, C, D를 각각 here, there이라는 branch에서 수정하되, here에서는 B와 D를 각각 H로, there에서는 C와 D를 각각 T로 수정한다고 가정해 보자. 2-way merge로 병합한다면, here과 there을 비교하게 되므로, 내용이 일치하는 A 이외에는 모두 충돌이 발생하게 된다. 한편, 3-way merge로 병합한다면, base를 기준으로 하여 병합이 일어난다. 즉, base의 원래 내용인 B와 비교하여, there branch는 변함 없이 B이고 here branch의 값이 H로 변했으므로, H가 최신 내용이라고 판단하여 H로 업데이트된다. C도 마찬가지로 T로 업데이트된다. here, t..

Knowledge/Git 2021. 4. 20. 20:03