[[TableOfContents]] = 야 너두 리액트 할 수 있어 = 모든 프론트앤드 프레임워크에 영향을 준 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 직접 구현해오기 == 참고자료 == [https://opentutorials.org/course/3084 생활코딩 html&css&js] [https://dev-yakuza.posstree.com/ko/react/create-react-app/react/ 리액트란?] [https://ko.reactjs.org/tutorial/tutorial.html 리액트 프로젝트 시작하는 방법] [https://quaint-finch-b9b.notion.site/Linting-25c0e7431cd14333b60a0536705e1c9d 유용한 글 모음집(React, NextJS, NodeJS 등등)]