야 너두 리액트 할 수 있어

야 너두 리액트 할 수 있어

모든 프론트앤드 프레임워크에 영향을 준 React.js를 배워봅시다.
스터디 형식은 실습 + QnA 형식으로 진행됩니다.
스터디 초반에는 React.js를 배우고
스터디 중반부터는 React.js + SSR을 지원하는 Next.js로 넘어갈 예정입니다.(거의 비슷합니다 😃)

참여 인원(최대 6명으로 제한할 예정입니다)

• 김동욱
• 장동훈
• 주영석
• --이상묵--
• 한성민

일정

매주 화요일 or 목요일(추후 참여인원간 상의) 저녁시간 진행 공부하다 궁금한 내용은 Anytime 시험기간 2주전부터 시험기간동안 멈춥니다

진행사항

1주차(11월 3주차)

1. React 소개

참여자	과제 여부
김동욱	튜터

2주차(11월 4주차)

• 원격 레포 fork 사용해서 git remote 로 변경 사항 확인
• git fetch upstream : 변경 사항만 생성
• git pull upstream : 원격에 저장

• JS React의 기본적인 기능에 대한 설명
• Scss 적용
• 해더 꾸미기
• 배경 화면 추가
• 네이게이션 바 flex로 구성
• prop-types 로 default 값들 지정
• className 속성 설명
• 아이콘 사용 설명

• 자주 사용하는 컴포넌트를 인터페이스 처럼 만들어두기

• 네이게이션 바 만들기 & 모바일 적용 & 라우팅
• MobileSlider
• MobileNavigation
• Sass Mixin
• media query - 모바일 용 고려
• img 태그 사용 - svg 파일 불러오기
• 기본 라우팅 + 내부 라우팅 - Navlink, onclick 메서드 작성

---

• Keywords
• prop-types
• mixin

• 과제
• Popper 아래 랜더링 컴포넌트 만들기
• position absolute & relative

3주차(12월 4주차)

• 전반적인 개발론 설명
• 디자인 변경이 필요할때 한 번만의 수정으로 어떻게 전체적으로 적용할 것인가?
• PageLayout, PopupLayout과 같은 Wrapping 컴포넌트를 이용하기

• 프로젝트 디렉토리 구조 설명
• component, pages, core, util, styles 과 같은 폴더의 각자 역할 설명
• 앞으로 프로젝트 추가에 있어서 어디에 어떤 파일을 만들어야하는지 알 수 있도록 함

• 지난번 과제 설명
• Popup 창을 만드기 위한 useState Hook의 사용법
• 팝업창 외부를 클릭했을때 Popup을 invisible하게 만드는 방법

• React에 대한 설명
• React의 Hook이란 무엇이며 CustomHook을 어떻게 정의하는가?
• useRef Hook과 useState Hook의 차이점
• Css Animation을 적용하는 방법
• 절대경로를 설정하는 것의 장점

4주차(1월 1주차)

• googleMap 띄우기
• .env로 api 키 값 가리면서 환경세팅
• React의 index.html에 google map cdn을 추가하여 googleMap 세팅
• useEffect을 통해 div태그 dom에 직접 접근해서 google map 할당

• React Context
• i18n 모듈을 이용해서 웹사이트 언어 제어
• i18n 모듈에 변경할 언어를 알려주기 위해 언어 정보를 전역 상태로 저장하는 방법 설명

• React Animation
• css를 통해 직접적으로 animation 만드는 방법 설명
• framer 모듈을 통해 쉽게 animation제어 방식 간단히 설명

5주차(1월 2주차)

• Framer Motion
• Framer Variants 사용법 설명
• open, close등을 통해 열고 닫을때 애니메이션 작동원리 설명
• AnimatePresence에 대한 설명

• SideMenu Component(using Framer Motion)
• 모바일에서 햄버거 버튼 눌렀을때 왼쪽에 Drawer가 나오는 컴포넌트
• 한 컴포넌트 내에서 지역적으로 쓰는 component 만드는 구조 설명(Ex.Navigation Item)

• Page Transition(using Framer Motion)
• 페이지 컴포넌트가 화면에 보여질때 로딩 되는 듯한 효과 주는 Wrapping Component 만드는 방법 설명

• 과제
• Framer Motion을 이용해서 Image Carousel 컴포넌트 만들어오기

6주차(1월 3주차)

• 과제에 대한 설명
• Carousel 종류에 무엇이 있고
• 과제 예시로 보여준 Carousel Component가 어떻게 동작하는지 설명

• Modal Component
• Modal 컴포넌트에 대해 설명
• React Portal을 이용하여 부모 DOM외부에 자식 DOM을 렌더링해서 Modal을 띄우는 방식 설명
• Web에서 z-index로 Modal을 띄우는 방식 설명

• 과제
• Login Modal을 각자 요구에 따라 만들어오기

참고자료

생활코딩 html&css&js 리액트란? 리액트 프로젝트 시작하는 방법 유용한 글 모음집(React, NextJS, NodeJS 등등)