# vanilla js

98개의 포스트
post-thumbnail

vanilla js로 라우팅 구현하기 - 더 많은 pathname을 처리해보자!

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

2023년 3월 11일
·
0개의 댓글
·
post-thumbnail

Singleton pattern으로 콜스택 터지는 문제 해결 😅: 전역에서 접근 가능한 하나의 인스턴스 생성하기

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

2023년 3월 11일
·
0개의 댓글
·
post-thumbnail

틱택토 게임

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

2023년 3월 6일
·
0개의 댓글
·
post-thumbnail

[Vanilla JS] 우당탕탕 바닐라JS 팀 프로젝트 4화 - swiper

우와,, swiper 너 멋친 놈이였구나??

2023년 2월 11일
·
0개의 댓글
·
post-thumbnail

[Vanilla JS] 우당탕탕 바닐라JS 팀 프로젝트 3화 -레이아웃

아 조장님 저 HTML/CSS 못하겠워요... 퇴사하고싶습니다 (퍽)

2023년 2월 11일
·
0개의 댓글
·
post-thumbnail

[Vanilla JS] 우당탕탕 바닐라JS 팀 프로젝트 2화 -프로젝트회의

팀원님들..내가 열심히 할게요. 우리 친해져요

2023년 2월 10일
·
0개의 댓글
·
post-thumbnail

[Vanilla JS] 우당탕탕 바닐라JS 팀 프로젝트 1화 -시작

두근두근, 처음 해보는 팀 프로젝트..!!

2023년 2월 9일
·
0개의 댓글
·
post-thumbnail

숫자 야구 게임

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

2023년 2월 3일
·
0개의 댓글
·
post-thumbnail

쿵쿵따 게임

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

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

개요

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

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

넘블 챌린지 신년 메시지 주고받기 회고

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

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

VanillaJS 로 신년메시지 주고받는 사이트를 SPA 로 만들기 2차 회고

\-Numble Challenge처음에 처음 렌더링된 페이지의 navbar에 들어있는 a 태그들에 대해서만 페이지 이동 처리되는 것으로 인지새로 생성하는 a 태그의 동작 코드에 navigate 로 처리하기

2023년 1월 16일
·
0개의 댓글
·
post-thumbnail

VanillaJS 로 신년메시지 주고받는 사이트를 SPA 로 만들기 1차 회고

\-Numble Challenge지금까지 React와 같은 라이브러리를 통해 프로젝트를 진행해봤는데 이번 numble 챌린지를 통해 vanilla js로 SPA를 구현해보려고한다. 첫번째 문제(A)는 vanilla js를 통해 어떻게 프로젝트를 구성할 것인지두번째 문제

2023년 1월 13일
·
0개의 댓글
·
post-thumbnail

[Front-End] JSX란 무엇인가?

JSX의 깊이 있는 공부(순수 JS부터 Virtual Dom, 문법들 정리)

2023년 1월 6일
·
0개의 댓글
·

Event - e.preventDefault() / e.stopPropagation()

사전지식 > html에서의 이벤트 전달 방식 어떠한 태그(ex) div, ul, li, a 등)를 클릭했을 경우 해당 태그만이 클릭 이벤트를 감지하는 것이 아니라 태그를 감싸고 있는 부모 태그들도 클릭 이벤트를 인식하고 반응하게 된다. 이것을 버블업(Bubble Up)

2022년 12월 16일
·
0개의 댓글
·
post-thumbnail

바닐라JS 챌린지 day1 퀴즈

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

2022년 11월 21일
·
0개의 댓글
·
post-thumbnail

바닐라 JS로 autocomplete 만들기

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

2022년 11월 13일
·
0개의 댓글
·
post-thumbnail

Vanilla JS로 크롬 앱 만들기 - To Do List

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

2022년 11월 11일
·
0개의 댓글
·
post-thumbnail

Vanilla JS로 크롬 앱 만들기 - random

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

2022년 11월 11일
·
0개의 댓글
·
post-thumbnail

Vanilla JS로 크롬 앱 만들기 - Clock

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

2022년 11월 10일
·
0개의 댓글
·