# vanillajs

68개의 포스트
post-thumbnail

20 web projects by VanillaJS - 9, 10, 11, 12, 13

09. Expense Tracker Array Methods와 Local Storage를 사용하여 expense tracker 구현 -숫자를 입력하면 지출이 +숫자를 입력하면 수입이 자동으로 입력이 되고 Total이 자동으로 바뀐다. 또한 History 탭에서 각

2021년 12월 23일
·
0개의 댓글

Lyrics for YouTube Music 작업기 0. 서론

이 연재물은 제가 약 1년 전부터 서비스 중인 유튜브 뮤직 가사 제공 크롬 익스텐션 "Lyrics for YouTube Music"의 구상부터 설계, 개발까지의 내용을 다루고 있습니다.

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

JS로 Momentum Clone하기! - 3

Greeting.js : 사용자로부터 입력을 받은 값을 Local Storage에 저장해 사용자를 기억합니다. Clock.js: 현재의 시간을 페이지에 나타냅니다.Quotes.js ,Background.js : 명언과 배경화면을 랜덤하게 화면에 띄워줍니다. Todo.j

2021년 9월 7일
·
0개의 댓글
post-thumbnail

[Project] 버튼 이벤트 코드 리팩토링하기 2 (VanillaJS)

알고 보니 프로젝트 요구사항에 하위 document도 form 밑에 렌더링되게 해놨던 걸 까먹고 있었습니다 😂따라서 이를 어떻게 하면 좀 더 재사용성 높게 잘 쓸 수 있을까하다가, 또 리팩토링을 했어요!결과적으로 어떻게 변했는지를 살펴봅시다!기존 subDocument

2021년 9월 7일
·
0개의 댓글
post-thumbnail

[Project] 중복되는 코드 리팩토링하기 (VanillaJS)

저는 제 코드를 볼 때 항상 다음을 우려합니다.이 코드, 과연 나중에 또 쓸 수 있을까?뭔가 중복되는 듯한 느낌이 드는데?!성능 면에서 영 꽝 아냐?!그러다 보니, 이번에도 뭔가 제 코드를 보는데, 이벤트 쪽에 있어서 중복되는 부분이 몇 차례보이게 됐어요.따라서 시작합

2021년 9월 7일
·
0개의 댓글

VanillaJS

컴포넌트 단위로 구현을 해보니 React의 클래스형 컴포넌트와 거의 흡사한 형태로 짜여지는거같다.기본 문법들이 조금씩 다른부분도 있지만 전체적인 데이터 흐름방식이나 단위단위로 쪼개서 구현하고 상위컴포넌트에서 구현하고 props를 내려주는 방식이 거의 일치한다.전체적으로

2021년 9월 4일
·
0개의 댓글
post-thumbnail

[Project] 커스텀 이벤트로 어ㅡ썸하게 상태 변경하기 (Vanilla JS)

제가 이 프로젝트를 하면서, 문득 이런 생각을 해봤어요.뭔가 하나하나 상태변경을 쭉~내려가지 않고, 그냥 변경시킬만한 아이디어가 없을까?!그러다 생각난 게 바로, customEvent를 잘 활용하자!는 거였어요. 계속해서 window에서 렌더링 된 이후 이벤트 리스너를

2021년 9월 3일
·
0개의 댓글
post-thumbnail

JS로 Momentum Clone하기! - 2

💥 Javascript를 이용하여 웹 페이지 구현해보자 Nomad Coder님의 'Vanilla JS로 크롬 앱 만들기'를 따라가며 제가 배운 것들을 정리하는 포스트입니다. '바닐라 JS -> 관련 프레임워크 -> 백엔드' 로 빠르게 웹 개발과정을 돌아보는 과정의

2021년 9월 3일
·
0개의 댓글
post-thumbnail

[Project] 모달을 통한 생성/삭제 기능 구현

예... 현재 12시간 프로젝트 중인데, 같은 부분에서 3시간 삽질했네요...! 인내심이 끝까지 달리던 순간, 뭔가 제가 오해가 있을 거란 부분을 생각해서 수정한 결과, 정상 동작을 하게 됐읍니다!!! 👏👏👏이래서 정말... 언러닝이 중요하다는 것을 다시금 느낍니

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

[Project] 재귀된 노드에 토글 구현하기

시작하며 🌈 이번에는 토글 버튼을 구현 후 글을 쓰게 되네요 😝 역시 새벽 감성 코딩이 저와 좀 잘 맞는 거 같습니다! 사실 이건 좀 헷갈리는 게 몇 가지 있었는데요! 결국 해결해냈다는 것에 큰 만족을 하려 합니다 😄 >feat: document.querySel

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

classList & className

classList & className의 차이점과 주관적인 나의 사용 목적을 적어봤다.

2021년 9월 1일
·
0개의 댓글
post-thumbnail

[Project] javaScript에 webpack 달기 ⭐

오늘은 웹팩 번들러를 달았어요!사실 Parcel을 할까도 굉장히 고민이 많았어요. 결국 번들러도 상황에 맞는 선택이라 생각하는데, 현재 프로젝트가 작은데다, 굳이 엄~청 디테일한 옵션을 달 게 없어서, parcel만으로도 충분했기 때문이에요.사실 웹팩을 달기 위한 이유

2021년 9월 1일
·
0개의 댓글
post-thumbnail

[JS] 디바운스 어-썸하게 쓰기!

어ㅡ썸하게 클로저 활용해서 전역변수 없이 timer 설정하기 🖐🏻

2021년 8월 31일
·
0개의 댓글
post-thumbnail

[Project] JavaScript로 라우트 구현하기

후! 어제 오늘 거의 10시간 동안 헤매다가 결국 구현해냈어요! 🖐🏻🖐🏻🖐🏻사실 원리는 얼추 알고 있었는데, 제 코드를 다 뒤엎어야 하는 케이스라, 결국 다른 꼼수(?)를 찾다가 바꾸게 됐네요. 하지만 결국 귀한 걸 얻었어요. 망설일까, 말까할 때는 그냥 질

2021년 8월 31일
·
0개의 댓글

[VanillaJS] infinity scroll로 data fetch하기

IntersectionOberver를 활용한 infinity scroll로 data fetch하기

2021년 8월 31일
·
0개의 댓글
post-thumbnail

[VanillaJS] API 통신

vanillajs api 비동기 통신

2021년 8월 31일
·
0개의 댓글
post-thumbnail

[VanillaJS] SPA기본구조 잡기

SPA로 영화 앱 기본구조 잡기

2021년 8월 30일
·
2개의 댓글

[VanillaJS] 영화 앱 만들기

vanillajs를 사용해 영화 앱을 만들어 봅시다.

2021년 8월 30일
·
0개의 댓글