1. 야 너두 리액트 할 수 있어 ¶
모든 프론트앤드 프레임워크에 영향을 준 React.js를 배워봅시다.
스터디 형식은 실습 + QnA 형식으로 진행됩니다.
스터디 초반에는 React.js를 배우고
스터디 중반부터는 React.js + SSR을 지원하는 Next.js로 넘어갈 예정입니다.(거의 비슷합니다 😃)
스터디 형식은 실습 + QnA 형식으로 진행됩니다.
스터디 초반에는 React.js를 배우고
스터디 중반부터는 React.js + SSR을 지원하는 Next.js로 넘어갈 예정입니다.(거의 비슷합니다 😃)
1.3.2. 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
1.3.3. 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을 적용하는 방법
- 절대경로를 설정하는 것의 장점
1.3.4. 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제어 방식 간단히 설명
