Coding Story

TypeScript 자바스크립트를 기반으로한 프로그래밍 언어. strongly-typed 언어로, 프로그래밍 언어가 작동하기전에 type을 확인한다. 브라우저는 TypeScript를 이해하지 못한다. 사용자에게 publish할 때, TypeScript가 컴파일해서 평범한 JavaScript로 만들어준다. Typescript 테스트 할 수 있는 곳 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www...

실행 화면 기능 캔버스로 공, 패들, 벽돌 생성하기 키보드 이벤트 핸들러로 패들 이동시키기 공 이동 애니메이션 구현 벽돌과 공이 부딪혔을 때 벽돌 보이지 않게 하고 score 올리기 공이 바닥과 닿았을 때 live 하나씩 줄기 live가 다 줄었을 때 게임 오버, 게임 다시 시작 코드 const rulesBtn = document.getElementById("rules-btn"); const closeBtn = document.getElementById("close-btn"); const rules = document.getElementById("rules"); const canvas = document.getElementById("canvas"); const ctx = canvas.getContext(..

requestAnimationFrame() 자바스크립트로 애니메이션을 구현할 때는 1초에 60프레임을 찍어내면 된다. 사람은 1초에 60개의 프레임을 볼 수 있기 때문이다. 16.6ms(1000ms/60frame)마다 프레임을 찍어내면 된다. setInterval로도 이를 구현할 수 있지만, setInterval이나 setTimeout은 프레임을 신경쓰지 않고 동작하기 때문에 애니메이션 코드를 실행하는데 16.6ms가 넘게 걸린다면 16.6ms동안 프레임을 찍어내지 못했기 때문에 화면이 끊기는 듯한 현상이 발생할 수 있다. 프레임 시작시간에 맞춰 함수가 시작되는 것이 아니라 중간쯤부터 시작해 프레임 시간을 초과해버린다. requestAnimationFrame을 사용하면 프레임 생성 시작시간에 맞춰 애니메..

스크롤링 window.addEventListener("scroll", () => { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; if (Math.round(scrollHeight - scrollTop) { loading.classList.remove("show"); setTimeout(() => { page++; showPosts(); }, 300); }, 1000); } setTimeout: 일정시간 후에 함수를 실행한다. 로딩 화면을 띄우고 난 후 setTimeout 함수로 1초 후에 로딩 화면을 지우고, 또다른 setTimeout함수를 실행해 0.3초 후에 다른 포스트들을 띄운다. Post 보여주기 async..

Typing game with Vanilla Javascript 실행화면 기능 랜덤한 단어 제시 선택한 레벨 로컬 스토리지에 저장, 새로고침해도 유지 게임 시작버튼 누르면 게임 시작 => 시간 1초씩 줄어듬 타이핑한 값이 입력 값과 같을 경우 => 점수 1증가, 레벨에 따른 시간 증가, 새로운 단어 제시, 입력창 비움 최고 기록 갱신할 경우 로컬스토리지에 저장 const wordSpan = document.querySelector(".word"); const typing = document.getElementById("typing"); const scoreSpan = document.querySelector(".scoreSpan"); const timeSpan = document.querySelector..

이벤트 위임이란? 여러개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다. 1 2 3 4 5 6 안 좋은 예 부모 안에 있는 자식들에게 공통적으로 무언가 처리해야 할 때 이렇게 일일히 이벤트 리스너를 자식 노드에 추가하는 것은 좋지 않다. 이벤트 위임을 사용한 예 ul에 이벤트 리스너를 한번만 등록한다. 이벤트에는 currentTarget과 target이라는 정보가 있기 때문에 원하는 target에만 집중적으로 처리를 해줄 수 있다. 이렇게 부모에 등록하는 Event Delegation 이벤트 위임을 쓰는 것이 좋은 방법이다.

참고 - https://github.com/bradtraversy/vanillawebprojects 사용한 API 사이트 https://www.themealdb.com/ TheMealDB.com www.themealdb.com API 호출 개념 참고 https://www.daleseo.com/js-window-fetch/ [자바스크립트] fetch() 함수로 API 호출하기 Engineering Blog by Dale Seo www.daleseo.com 결과 화면 코드 API 사이트에서 Lookup full meal details by id www.themealdb.com/api/json/v1/1/lookup.php?i=52772 Lookup a single random meal www.themealdb..

행맨 게임 with vanilla javascript 실행 화면 플레이 화면 결과 화면 기능 랜덤으로 선택된 단어의 길이에 따라 빈칸 생성 누른 알파벳 키보드는 색상이 바뀌고, 한번 더 클릭할시 팝업창이 뜨고 목숨에 영향을 받지 않음 누른 알파벳이 맞을 경우 => 빈칸이 알파벳으로 바뀜 누른 알파벳이 틀릴 경우 => 행맨 그림 선이 생기고 목숨 하나 감소 결과에 따라 결과창 띄우기 코드 const alphabet = [.. ]; const words = [.. ]; const buttons = document.querySelector(".keyboardBtn"); const chosenWord = words[Math.floor(Math.random() * words.length)]; // 랜덤으로 선택된..

const items = document.querySelector(".items"); const input = document.querySelector(".footer__input"); const addBtn = document.querySelector(".footer__button"); function onAdd() { // 1. 사용자가 입력한 텍스트를 받아옴 const text = input.value; if (text === "") { input.focus(); return; } // 2. 새로운 아이템을 만듬 (텍스트 + 삭제 버튼) const item = createItem(text); // 3. items 컨테이너 안에 새로 만든 아이템을 추가한다. items.appendChild(item)..

element.scrollIntoView(); element가 있는 위치로 스크롤 된다. element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"}); behavior: 기본 값은 auto. smooth하면 부드럽게 스크롤링 됨 block: 수직으로 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 start inline: 수평에서 스크롤링이 될 때 정렬될 요소의 위치를 지정해준다. (start, center, end, nearest) 기본값은 nearest 예제