{"id":29370937,"url":"https://github.com/nuung/all-about-javascript","last_synced_at":"2025-07-09T14:11:43.558Z","repository":{"id":47049386,"uuid":"305064960","full_name":"Nuung/all-about-javascript","owner":"Nuung","description":"2020.10) (Vanilla) All about Javascript Study based on ES6 AND Graduation work for Nomad Challenge ","archived":false,"fork":false,"pushed_at":"2024-03-03T16:26:54.000Z","size":25987,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-04-18T09:24:06.716Z","etag":null,"topics":["challenges","es6","javascript","practice-programming","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://nuung.github.io/all-about-javascript/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nuung.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-10-18T09:22:09.000Z","updated_at":"2021-12-12T07:11:23.000Z","dependencies_parsed_at":"2024-03-03T16:52:11.169Z","dependency_job_id":null,"html_url":"https://github.com/Nuung/all-about-javascript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Nuung/all-about-javascript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuung%2Fall-about-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuung%2Fall-about-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuung%2Fall-about-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuung%2Fall-about-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nuung","download_url":"https://codeload.github.com/Nuung/all-about-javascript/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuung%2Fall-about-javascript/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264473897,"owners_count":23613961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["challenges","es6","javascript","practice-programming","vanilla-javascript"],"created_at":"2025-07-09T14:11:42.047Z","updated_at":"2025-07-09T14:11:43.540Z","avatar_url":"https://github.com/Nuung.png","language":"JavaScript","readme":"\u003cdiv align = \"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-green\" /\u003e\n\n[![GitHub stars](https://img.shields.io/github/stars/Nuung/all-about-javascript)](https://github.com/Nuung/all-about-javascript/stargazers)\n\n\u003c/div\u003e\n\n# JS Basics - ALL about Javascript\n\n\u003e Study space for all about javascript based on ES6 (with node) \u003cbr /\u003e\n\u003e And Repository for the JS-Basics Nomad Academy Course. Cloning a Productivity App with VanillaJS\n\n## 1. Simple Vanilla JS Projects Based on ES5+ (ES6)\n\n### [ 여러가지 컨셉의 컴포넌트, 테마, 오브젝트들, 클릭해서 실물 바로 확인 ]\n\n#### 1) [Drag and Drop](https://nuung.github.io/all-about-javascript/Theme/DragAndDrop/)\n\n#### 2) Frontend에서 [CRDT(Conflict-free Replicated Data Type)](https://nuung.github.io/all-about-javascript/CRDT/)\n\n- `node`의 `ws`모듈 기반으로 웹소켓을 통한 그림판 실시간으로 데이터 공유하기\n- 완벽한 CRDT의 컨셉이라 보기엔 어렵다. **`merge`** 와 **중복방지** 부분은 강화할 필요가 있다.\n\n#### 3) [Simple Flip](https://nuung.github.io/all-about-javascript/Theme/Flip/)\n\n- 바닐라JS + CSS 로 **_Flip_** 효과 만들기\n\n#### 4) [Simple Flip Counter](https://nuung.github.io/all-about-javascript/Theme/FlipCounter/)\n\n- 바닐라JS + CSS 로 **_Flip Counter_** 만들기\n- 이벤트 페이지 등에서 꽤 높은 활용도를 보일듯 합니다!\n\n#### 5) [Simple Theme Toggle](https://nuung.github.io/all-about-javascript/Theme/ThemeToggle/)\n\n- 바닐라JS + CSS 로 **_전체 Theme Toggle_** 만들기\n- CSS에서 OS기본 theme를 `prefers-color-scheme` 로 가져와서 js로 control가능\n\n#### 6) [egjs - Flicking](https://nuung.github.io/all-about-javascript/EGJS/flicking/)\n\n- naver official library egjs, flicking library 활용\n- [활용에 대한 기록 - 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)\n\n#### 7) [egjs - Infinitegrid](https://nuung.github.io/all-about-javascript/EGJS/infinitegrid/)\n\n- naver official library egjs, infinitegrid library 활용\n- [활용에 대한 기록 - 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)\n\n### [ ES6 공부 및 기초부터 고급까지 바닐라 자바스크립트 실습 기반 연습 아카이브 ]\n\n#### 1) [유투브, 엘리](https://www.youtube.com/watch?v=wcsVjmHrUQg\u0026list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2)\n\n- 공부 목차 : [노트보기](/note)\n- NavBar Theme : [코드](https://github.com/Nuung/all-about-javascript/blob/main/Theme/NavBar) / [실물](https://nuung.github.io/all-about-javascript/Theme/NavBar/index.html)\n- Shopping Mini Game : [코드](https://github.com/Nuung/all-about-javascript/blob/main/ShoppingGame) / [실물](https://nuung.github.io/all-about-javascript/ShoppingGame/)\n\n#### 2) [NodeJS SocketIO]\n\n- Vanilla JS + NodeJS \u0026 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) 도 참조\n- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/blob/main/NodeSocket)\n- [실물 보러 가기](https://nuung.github.io/all-about-javascript/NodeSocket/)\n\n#### 3) Web Component 활용하기\n\n- `Web Component` \u0026 `Shadow Dom` 을 활용한 HTML custom tag 만들기\n- [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)\n- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/blob/main/WebComponents)\n\n#### 4) [Full Stack AirBnB clone](https://www.youtube.com/watch?v=kuswGIH-Xj8\u0026list=PLN3n1USn4xlnfJIQBa6bBjjiECnk6zL6s)\n\n---\n\n## 2 Nomad Coders, Vanilla JS\n\n#### 1) 바닐라JS 2주 완성반 챌린지 CLEAR!\n\n- [노마드 챌린지](https://nomadcoders.co/challenges)\n- 챌린지 결과물 : https://nuung.github.io/all-about-javascript/\n- 제출한 가벼운 과제들\n  - [Time Until Christmas](https://nuung.github.io/all-about-javascript/NomadJS/TimeUntilChri.html)\n  - [Random Number Game](https://nuung.github.io/all-about-javascript/NomadJS/RandomNumberGame.html)\n  - [Basic To Do List](https://nuung.github.io/all-about-javascript/NomadJS/BasicToDo.html)\n  - [Calculator](https://nuung.github.io/all-about-javascript/Calculator/index.html)\n\n#### 2) 바닐라JS 그림판 만들기! (그림 그리기 게임)\n\n- [실물 보러 가기](https://nuung.github.io/all-about-javascript/NomadJS-game/)\n- [Canvas Dom Object](https://developer.mozilla.org/ko/docs/Web/HTML/Canvas)를 JS로 다루는게 핵심임\n- static(global) val area ~ config / function area ~ main / init() -\u003e start! 영억으로 나눠서 코딩함\n\n#### 3) 바닐라JS Simple Pop up (modal) screen in 5 min\n\n- [노마드 유투브](https://youtu.be/V08wXKHF_Xw)\n- CSS 적인 요소가 더 크긴함! 뭐 굳이 핵심 JS 포인트는 classList / add / remove\n- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/blob/main/Theme/Modal/modal.html)\n- [실물 보러 가기](https://nuung.github.io/all-about-javascript/Theme/Modal/modal.html)\n\n#### 4) nodeJS 실시간 서비스, Zoom clone coding\n\n- [줌 클론코딩](https://nomadcoders.co/noom/lobby)\n- WebSockets, SocketIO, WebRTC\n- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/NomadJS-Zoom)\n\n#### 5) 바닐라JS Simple Snow screen\n\n- [노마드 유투브](https://youtu.be/3CuUmy7jX6k)\n- CSS animation과 순수 js로 DOM 만들어서 attribute setting\n- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/NomadJS-snow-screen)\n- [실물 보러 가기](https://nuung.github.io/all-about-javascript/NomadJS-snow-screen/index.html)\n\n#### 6) Twitter clone coding\n\n- [노마드 유투브](https://nomadcoders.co/nwitter)\n- Vite를 통한 ReactJS 프로젝트, **Firebase 가 핵심 (auth, db, storage)**\n- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/NomadJS-twitter)\n- [실물 보러 가기](https://nomadjs-tweet.web.app/) - 실제 firebase 를 통해 deploy \u0026 hosting 한 상태, 무료 티어\n\n#### 7) Gymshot (Recat + Firebase)\n\n- workout 인증 사진만 업로드 가능한 운동 인증 insta web application\n- Vite를 통한 ReactJS 프로젝트 + **Firebase 가 핵심 (auth, db, storage)**\n- [실물 보러 가기](...) - 실제 firebase 를 통해 deploy \u0026 hosting 한 상태, 무료 티어\n\n## 3. Functional Javascript ES6+\n\n#### 1) 절차, 객체 넘어 함수 지향 코딩 스타일, [함수형 자바스크립트](https://mangkyu.tistory.com/111)\n\n- 인프런, [함수형 프로그래밍과 JS, ES6+](https://www.inflearn.com/course/functional-es6/dashboard)\n- [코드 보러 가기](https://github.com/Nuung/all-about-javascript/tree/main/Functional-Javascript)\n\n---\n\n## 4. Typescript\n\n- js의 최대 장점이자 단점인 유연성을 훨씬 규칙적으로 단단하게 해줄 'type'스크립트\n\n---\n\n## DevLogs\n\n- https://velog.io/@qlgks1\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuung%2Fall-about-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuung%2Fall-about-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuung%2Fall-about-javascript/lists"}