UI요소 만들기 - VanillaJS / React 강의형 스터디

강의 내용

대표적인 UI 요소들을 VanillaJS(순수 JavaScript) 버전과 React 버전으로 만들어보고,
가능한 다양한 방법들을 도입해 보면서, 각각의 특징을 비교 체험 합니다.

예를 들어 탭메뉴의 경우, vanilla 버전, React 버전, CSS로 숨김처리하는 버전,
메뉴와 컨텐츠를 하나의 li로 통합하는 버전, html만으로 동작하는 버전 등을 만들어 보는 식입니다.

기술 스택

다음은 본 강의의 핵심 기술 스택입니다.

• HTML5

• CSS (SCSS)

• JavaScript (ES6+ 및 Web API, DOM 등)

• React18

다음은 작업 편의를 위한 도구들로, 강의에서 본격적으로 다루지 않습니다.

• Node.js 16

• Next.js 13

• TypeScript

• classNames

참여 전에 이런 점을 유의해 주세요.

• 초심자에게는 적합하지 않습니다. 기초적인 HTML 및 CSS, 자바스크립트 문법, 리액트 문법을 숙지하고 있다는 전제 하에 수업을 진행합니다.

• 이론 강의가 아닌, 실전 코딩 위주의 강의입니다. 어떤 개념을 친절하고 자세하게 설명하기 보다는, 대략적으로 이해한 내용을 바탕으로 즉시 적용하는 데에 초점을 맞춥니다. 따라서

  처음 접한 지식에 대해서는 별도의 학습이 필요하실 수도 있습니다.

• 제 코딩 속도가 제법 빠르고 말도 많습니다. 강의 중에는 코드를 따라서 작성하기보다는, 관전모드로 간략히 필기하면서 화면에 집중하시는 편이 좋을 것입니다.

스터디 일정

• 주 2회 (화요일 오후 9시 ~ 최대 3시간 / 토요일 오전 10시 ~ 최대 3시간)

• 10 ~ 12주 정도 예상하나, 그보다 길어질 수도 있습니다.

• 12월 2일부터 시작합니다.

스터디 진행방식

• 초반 1~2회는 주 1회로 토요일에만 강남역에서 오프라인으로 진행하며,

• 이후부터는 주 2회 모두 온라인(줌)으로 진행합니다.

• 주로 제가 이런저런 설명과 함께 라이브 코딩을 합니다.

• 언제든지 질문 또는 의견을 내어 함께 토론하거나 검색해보는 등 자유롭게 진행됩니다.

   

커리큘럼

• 90% 이상 준비된 요소들

   

  • 아코디언

  • 탭메뉴

  • 툴팁

  • 반응형 텍스트박스

  • 여러줄 말줄임 처리

  • 지연로딩

  • 무한스크롤

  • 스크롤스파이

  • 스크롤박스

  • 스낵바

  • 이미지슬라이드

  • 캐러셀

• 준비중인 요소들

  • 모달

  • 팝오버

  • 갤러리(모달)

  • 셀렉트박스

  • 자동완성

• 스터디 진행 상황에 따라 새로운 요소를 다루거나, 예정했던 요소를 다루지 않게 될 수도 있습니다.

   

참여 방법

• 모집마감입니다.