# vanilla js

vanilla js로 라우팅 구현하기 - 더 많은 pathname을 처리해보자!
vanilla js로 라우팅 기능을 구현하면서, 평소 사용하던 react-router의 모듈도 살펴보았습니다.라우터의 메서드 중 renderPage는 현재 경로에 대응하는 페이지를 루트 요소에 삽입해 렌더링하는 메서드입니다.처음 구현했던 코드는 다음과 같았습니다.win

Singleton pattern으로 콜스택 터지는 문제 해결 😅: 전역에서 접근 가능한 하나의 인스턴스 생성하기
🤯 Error: Maximum call stack size exceeded vanilla js로 웹페이지를 구성하던 도중 콜스택이 자꾸 터지는(ㅎ) 문제가 발생했습니다. 라우팅 기능을 구현하기 위해 만들어놓은 Router 클래스로 인스턴스를 생성하여 클래스에 정의해

틱택토 게임
틱택토 게임은 오목게임과 룰이 같으며, 여기에선 3목으로 승부한다. 3 \* 3 = 9개의 칸 안에 o 와 x 를 턴마다 삽입하여 세 개 연속 같은 모양일 경우 승리하는 게임이다.웹게임 링크html, css 코드표를 나타낼 때, 대부분은 자바스크립트의 이차원 배열을

숫자 야구 게임
4개의 숫자를 제한된 기회 안에 맞추는 게임으로, 야구의 규칙 용어만 가져옴게임 규칙 : 1\. 상대편이 숫자 1~9 중 중복되지 않게 4개를 고름2\. 10 번의 기회가 주어지고, 그 안에 해당 숫자 4개를 순서포함해서 맞춰야함3\. 10번의 기회 동안 다음의 힌트가

쿵쿵따 게임
처음 제시된 단어의 맨 뒷글자를 앞글자로 사용하여 단어를 나열하는 게임으로, 한시간은 30초, 단어는 세 글자여야만 한다html, css 코드끝말잇기리팩토링 (or , and)리뉴얼 작업: 끝자리에 깜박거리는 애니메이션 효과를 넣어 첫글자로 입력해야할 글자를 시각적으로

개요
자바스크립트, 프론트엔드 강좌 끝판왕으로 유명하신 제로초님 강의 중 자바스크립트의 정수를 모두 보여준 강의가 있는데, 바로 웹게임을 통해 배우는 자바스크립트 강의다.평소 웹사이트 하나에 구현되는 javascript 의 간단한 기능만 구현하다가, 본 강의를 통해 여러 다

넘블 챌린지 신년 메시지 주고받기 회고
내가 진행한 프로젝트 링크를 먼저 첨부한다.깃헙 리포지토리 링크간단한 게시판 형태의 서비스를 프레임워크 없이 SPA로 만들어내는 프로젝트였다.해본 적 없는 일이라 재밌을 것 같아서 참여하게 되었다.

VanillaJS 로 신년메시지 주고받는 사이트를 SPA 로 만들기 2차 회고
\-Numble Challenge처음에 처음 렌더링된 페이지의 navbar에 들어있는 a 태그들에 대해서만 페이지 이동 처리되는 것으로 인지새로 생성하는 a 태그의 동작 코드에 navigate 로 처리하기

VanillaJS 로 신년메시지 주고받는 사이트를 SPA 로 만들기 1차 회고
\-Numble Challenge지금까지 React와 같은 라이브러리를 통해 프로젝트를 진행해봤는데 이번 numble 챌린지를 통해 vanilla js로 SPA를 구현해보려고한다. 첫번째 문제(A)는 vanilla js를 통해 어떻게 프로젝트를 구성할 것인지두번째 문제
Event - e.preventDefault() / e.stopPropagation()
사전지식 > html에서의 이벤트 전달 방식 어떠한 태그(ex) div, ul, li, a 등)를 클릭했을 경우 해당 태그만이 클릭 이벤트를 감지하는 것이 아니라 태그를 감싸고 있는 부모 태그들도 클릭 이벤트를 인식하고 반응하게 된다. 이것을 버블업(Bubble Up)

바닐라JS 챌린지 day1 퀴즈
✅ only JS✅ Yes✅ Yes✅ To add interactivity to Websites✅ No‼️ No자바스크립트 실행환경모든 브라우저, Node.js 둘 다 자바스크립트 엔진을 갖고있으므로 실행 가능하다.🚨단 차이점은 브라우저는 HTML,CSS,JS를 실행

바닐라 JS로 autocomplete 만들기
프로그래머스 '2022 Dev-Matching: 웹 프론트엔드 개발자(상반기)'기출 문제 해설을 참고하여 작성하였습니다.index.js : App.js의 로직을 index.html에 보여주는 역할App.js : 전역 상태를 관리하면서 아래 3개의 컴포넌트를 연결시켜주는

Vanilla JS로 크롬 앱 만들기 - To Do List
노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다1단계 : 먼저 input 으로 사용자의 value를 받아보자HTML의 태그를 javascript로 접근하여 각 변수에 저장하였다변수 toDoForm 즉 input에 사용자가

Vanilla JS로 크롬 앱 만들기 - random
노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다명언을 랜덤으로 나타나게 해보자 (●'◡'●)예시로 크롬 확장 프로그램인 momentum을 화면 이다랜덤 배경화면과 하단에 랜덤 명언과 작가 이름이 나타난다Math는 흥미로운

Vanilla JS로 크롬 앱 만들기 - Clock
login에 이어서 시계를 넣어보자 👉⏱️⏰⏲️🕰️setInterval() , setTimeout() 에 대해서 간단하게 설명하면setInterval()은 '매번' 일어나야 하는 무언가,만약 2초이면 -> 매 2초마다 인자로 받은 함수를 매번 동작하는 메서드 set