https://github.com/nuung/all-about-javascript
2020.10) (Vanilla) All about Javascript Study based on ES6 AND Graduation work for Nomad Challenge
https://github.com/nuung/all-about-javascript
challenges es6 javascript practice-programming vanilla-javascript
Last synced: 8 months ago
JSON representation
2020.10) (Vanilla) All about Javascript Study based on ES6 AND Graduation work for Nomad Challenge
- Host: GitHub
- URL: https://github.com/nuung/all-about-javascript
- Owner: Nuung
- License: other
- Created: 2020-10-18T09:22:09.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-03-03T16:26:54.000Z (almost 2 years ago)
- Last Synced: 2024-04-18T09:24:06.716Z (almost 2 years ago)
- Topics: challenges, es6, javascript, practice-programming, vanilla-javascript
- Language: JavaScript
- Homepage: https://nuung.github.io/all-about-javascript/
- Size: 24.8 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/Nuung/all-about-javascript/stargazers)
# JS Basics - ALL about Javascript
> Study space for all about javascript based on ES6 (with node)
> And Repository for the JS-Basics Nomad Academy Course. Cloning a Productivity App with VanillaJS
## 1. Simple Vanilla JS Projects Based on ES5+ (ES6)
### [ 여러가지 컨셉의 컴포넌트, 테마, 오브젝트들, 클릭해서 실물 바로 확인 ]
#### 1) [Drag and Drop](https://nuung.github.io/all-about-javascript/Theme/DragAndDrop/)
#### 2) Frontend에서 [CRDT(Conflict-free Replicated Data Type)](https://nuung.github.io/all-about-javascript/CRDT/)
- `node`의 `ws`모듈 기반으로 웹소켓을 통한 그림판 실시간으로 데이터 공유하기
- 완벽한 CRDT의 컨셉이라 보기엔 어렵다. **`merge`** 와 **중복방지** 부분은 강화할 필요가 있다.
#### 3) [Simple Flip](https://nuung.github.io/all-about-javascript/Theme/Flip/)
- 바닐라JS + CSS 로 **_Flip_** 효과 만들기
#### 4) [Simple Flip Counter](https://nuung.github.io/all-about-javascript/Theme/FlipCounter/)
- 바닐라JS + CSS 로 **_Flip Counter_** 만들기
- 이벤트 페이지 등에서 꽤 높은 활용도를 보일듯 합니다!
#### 5) [Simple Theme Toggle](https://nuung.github.io/all-about-javascript/Theme/ThemeToggle/)
- 바닐라JS + CSS 로 **_전체 Theme Toggle_** 만들기
- CSS에서 OS기본 theme를 `prefers-color-scheme` 로 가져와서 js로 control가능
#### 6) [egjs - Flicking](https://nuung.github.io/all-about-javascript/EGJS/flicking/)
- naver official library egjs, flicking library 활용
- [활용에 대한 기록 - velog](https://velog.io/@qlgks1/javascript-naver-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-egjs-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-flicking-infinitegrid)
#### 7) [egjs - Infinitegrid](https://nuung.github.io/all-about-javascript/EGJS/infinitegrid/)
- naver official library egjs, infinitegrid library 활용
- [활용에 대한 기록 - velog](https://velog.io/@qlgks1/javascript-naver-%EC%98%A4%ED%94%88%EC%86%8C%EC%8A%A4-egjs-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-flicking-infinitegrid)
### [ ES6 공부 및 기초부터 고급까지 바닐라 자바스크립트 실습 기반 연습 아카이브 ]
#### 1) [유투브, 엘리](https://www.youtube.com/watch?v=wcsVjmHrUQg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2)
- 공부 목차 : [노트보기](/note)
- NavBar Theme : [코드](https://github.com/Nuung/all-about-javascript/blob/main/Theme/NavBar) / [실물](https://nuung.github.io/all-about-javascript/Theme/NavBar/index.html)
- Shopping Mini Game : [코드](https://github.com/Nuung/all-about-javascript/blob/main/ShoppingGame) / [실물](https://nuung.github.io/all-about-javascript/ShoppingGame/)
#### 2) [NodeJS SocketIO]
- Vanilla JS + NodeJS & Socket.IO 활용, [nodeJS 실시간 서비스, Zoom clone coding](https://github.com/Nuung/all-about-javascript#4-nodejs-%EC%8B%A4%EC%8B%9C%EA%B0%84-%EC%84%9C%EB%B9%84%EC%8A%A4-zoom-clone-coding) 도 참조
- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/blob/main/NodeSocket)
- [실물 보러 가기](https://nuung.github.io/all-about-javascript/NodeSocket/)
#### 3) Web Component 활용하기
- `Web Component` & `Shadow Dom` 을 활용한 HTML custom tag 만들기
- [velog 글 부터 참조](https://velog.io/@qlgks1/javascript-%EB%82%98%EB%A7%8C%EC%9D%98-HTML-tag-%EB%A7%8C%EB%93%A4%EC%96%B4%EC%84%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0#html-customization)
- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/blob/main/WebComponents)
#### 4) [Full Stack AirBnB clone](https://www.youtube.com/watch?v=kuswGIH-Xj8&list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)
---
## 2 Nomad Coders, Vanilla JS
#### 1) 바닐라JS 2주 완성반 챌린지 CLEAR!
- [노마드 챌린지](https://nomadcoders.co/challenges)
- 챌린지 결과물 : https://nuung.github.io/all-about-javascript/
- 제출한 가벼운 과제들
- [Time Until Christmas](https://nuung.github.io/all-about-javascript/NomadJS/TimeUntilChri.html)
- [Random Number Game](https://nuung.github.io/all-about-javascript/NomadJS/RandomNumberGame.html)
- [Basic To Do List](https://nuung.github.io/all-about-javascript/NomadJS/BasicToDo.html)
- [Calculator](https://nuung.github.io/all-about-javascript/Calculator/index.html)
#### 2) 바닐라JS 그림판 만들기! (그림 그리기 게임)
- [실물 보러 가기](https://nuung.github.io/all-about-javascript/NomadJS-game/)
- [Canvas Dom Object](https://developer.mozilla.org/ko/docs/Web/HTML/Canvas)를 JS로 다루는게 핵심임
- static(global) val area ~ config / function area ~ main / init() -> start! 영억으로 나눠서 코딩함
#### 3) 바닐라JS Simple Pop up (modal) screen in 5 min
- [노마드 유투브](https://youtu.be/V08wXKHF_Xw)
- CSS 적인 요소가 더 크긴함! 뭐 굳이 핵심 JS 포인트는 classList / add / remove
- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/blob/main/Theme/Modal/modal.html)
- [실물 보러 가기](https://nuung.github.io/all-about-javascript/Theme/Modal/modal.html)
#### 4) nodeJS 실시간 서비스, Zoom clone coding
- [줌 클론코딩](https://nomadcoders.co/noom/lobby)
- WebSockets, SocketIO, WebRTC
- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/NomadJS-Zoom)
#### 5) 바닐라JS Simple Snow screen
- [노마드 유투브](https://youtu.be/3CuUmy7jX6k)
- CSS animation과 순수 js로 DOM 만들어서 attribute setting
- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/NomadJS-snow-screen)
- [실물 보러 가기](https://nuung.github.io/all-about-javascript/NomadJS-snow-screen/index.html)
#### 6) Twitter clone coding
- [노마드 유투브](https://nomadcoders.co/nwitter)
- Vite를 통한 ReactJS 프로젝트, **Firebase 가 핵심 (auth, db, storage)**
- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/NomadJS-twitter)
- [실물 보러 가기](https://nomadjs-tweet.web.app/) - 실제 firebase 를 통해 deploy & hosting 한 상태, 무료 티어
#### 7) Gymshot (Recat + Firebase)
- workout 인증 사진만 업로드 가능한 운동 인증 insta web application
- Vite를 통한 ReactJS 프로젝트 + **Firebase 가 핵심 (auth, db, storage)**
- [실물 보러 가기](...) - 실제 firebase 를 통해 deploy & hosting 한 상태, 무료 티어
## 3. Functional Javascript ES6+
#### 1) 절차, 객체 넘어 함수 지향 코딩 스타일, [함수형 자바스크립트](https://mangkyu.tistory.com/111)
- 인프런, [함수형 프로그래밍과 JS, ES6+](https://www.inflearn.com/course/functional-es6/dashboard)
- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/Functional-Javascript)
---
## 4. Typescript
- js의 최대 장점이자 단점인 유연성을 훨씬 규칙적으로 단단하게 해줄 'type'스크립트
---
## DevLogs
- https://velog.io/@qlgks1