야 너두 리액트 할 수 있어

야 너두 리액트 할 수 있어

모든 프론트앤드 프레임워크에 영향을 준 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과 같은 HOC 컴포넌트를 이용하기

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

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

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

참고자료

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