E D R , A S I H C RSS
ZeroWiki

야 너두 리액트 할 수 있어

Difference between r1.6 and the current

@@ -2,24 +2,154 @@
= 야 너두 리액트 할 수 있어 =
모든 프론트앤드 프레임워크에 영향을 준 React.js를 배워봅시다.
스터디 형식은 실습 + QnA 형식으로 진행됩니다.
스터디 초반에는 React.js를 배우고
스터디 중반부터는 React.js + SSR을 지원하는 Next.js로 넘어갈 예정입니다.(거의 비슷합니다 😃)
스터디 초반에는 React.js를 사용하며 추후 Next.js를 사용할 예정입니다

== 참여 인원(최대 6명으로 제한할 예정입니다) ==
== 참여 인원 ==
* [김동욱]
* [장동훈]
* [주영석]
* [...]
* --이상묵--
* [한성민]
== 일정 ==
매주 화요일 or 목요일(추후 참여인원간 상의) 저녁시간 진행
공부하다 궁금한 내용은 Anytime
시험기간 2주전부터 시험기간동안 멈춥니다
매주 목요일 저녁시간
시험기간 2주전부터 시험기간동안 휴식기간입니다
== 진행사항 ==
=== 1주차(11월 3주차에 진행예정) ===
=== 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를 업데이트하는 방법 설명
- 적은 코드로 한 번에 여러 종류의 데이터를 업데이트 하는 방식도 알려줌
== 참고자료 ==
[https://opentutorials.org/course/3084 생활코딩 html&css&js]
[https://dev-yakuza.posstree.com/ko/react/create-react-app/react/ 리액트란?]

1. 야 너두 리액트 할 수 있어

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

1.1. 참여 인원

1.2. 일정

매주 목요일 저녁시간
시험기간 2주전부터 시험기간동안 휴식기간입니다

1.3. 진행사항

1.3.1. 1주차(11월 3주차)

  1. React 소개
참여자 과제 여부
김동욱 튜터

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제어 방식 간단히 설명

1.3.5. 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 컴포넌트 만들어오기

1.3.6. 6주차(1월 3주차)

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

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

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

1.3.7. 7주차(1월 4주차)

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

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

1.3.8. 8주차(2월 1주차)

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

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


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

1.3.9. 9주차(2월 2주차)

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

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

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

1.4. 참고자료

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2022-02-10 12:49:35
Processing time 0.0901 sec