야 너두 리액트 할 수 있어

야 너두 리액트 할 수 있어

모든 프론트앤드 프레임워크에 영향을 준 React.js를 배워봅시다.
스터디 형식은 실습 + QnA 형식으로 진행됩니다.
스터디 초반에는 React.js를 사용하며 추후 Next.js를 사용할 예정입니다

참여 인원

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

일정

매주 목요일 저녁시간 시험기간 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을 각자 요구에 따라 만들어오기

7주차(1월 4주차)

• 동적 컴포넌트 만들기
• html tag에 useRef를 통해 직접 접근하여 tag 스타일 동적으로 변환하기 설명
• 마우스 위치별로 특정 글자에 그림자 추가하는 방법 설명
• Range Button 색상을 linear gradient로 색상 transition 구현하는 방법 설명

• 과제
• mouse event handler 직접 구현해오기

8주차(2월 1주차)

• CreatePortal을 이용한 Modal 시스템을 개선하는 방식
• 모달별로 CreatePortal을 호출할때마다 가져오면 오류 및 성능상 문제가 발생할 수 있음
• 가져온 모달 div tag와 모달의 기본적인 스타일을 정의한 Wrapping Component를 정의하고 어떻게 안에 View만 갈아끼우는 형식으로 모달을 구현했는지 설명
• 이를 구현하기 위해서 useContext를 어떻게 정의하고 모달의 Type을 어떻게 만들어야하는지 공부함

• React의 useEffect란?
• useEffect Hook의 return 부분이 하는 역할을 설명
• 이를 통해 Hook을 통해 구현된 Mouse, Resize Handler가 어느 시점에서 해제되는지 설명

• 과제
• 구현되어있는 Modal 시스템을 이용해서 SignUp 모달을 아름답게 구현해오기

9주차(2월 2주차)

• 모달 만들기
• typescript에 정의된 모달 타입에 따라서 자동으로 모달 구현이 안되었다는 에러 나오는 이유 설명
• 모달 정의 순서를 알려주고 SignUpModal을 만들면서 작동방식 알려줌

• CSS를 작성법
• Children Selector 알려줌
• 크로스 브라우저를 위한 기본 태그들 초기화 방법 설명

• Input update방법
• Input으로 넣은 유저데이터가 onChange callback이 들어올때 React State를 업데이트하는 방법 설명
• 적은 코드로 한 번에 여러 종류의 데이터를 업데이트 하는 방식도 알려줌

참고자료

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