https://mediawiki.zeropage.org/api.php?action=feedcontributions&feedformat=atom&user=1.244.253.29 2026-05-15T20:55:48Z User contributions MediaWiki 1.39.8 https://mediawiki.zeropage.org/index.php?title=%EC%95%BC_%EB%84%88%EB%91%90_%EB%A6%AC%EC%95%A1%ED%8A%B8_%ED%95%A0_%EC%88%98_%EC%9E%88%EC%96%B4&diff=63964 2022-01-04T13:38:39Z

<p>1.244.253.29: </p> <hr /> <div>__TOC__<br /> = 야 너두 리액트 할 수 있어 =<br /> 모든 프론트앤드 프레임워크에 영향을 준 React.js를 배워봅시다.<br /> 스터디 형식은 실습 + QnA 형식으로 진행됩니다.<br /> 스터디 초반에는 React.js를 배우고<br /> 스터디 중반부터는 React.js + SSR을 지원하는 Next.js로 넘어갈 예정입니다.(거의 비슷합니다 😃)<br /> <br /> == 참여 인원(최대 6명으로 제한할 예정입니다) ==<br /> * [[김동욱]]<br /> * [[장동훈]]<br /> * [[주영석]]<br /> * --이상묵--<br /> * [[한성민]]<br /> == 일정 ==<br /> 매주 화요일 or 목요일(추후 참여인원간 상의) 저녁시간 진행<br /> 공부하다 궁금한 내용은 Anytime<br /> 시험기간 2주전부터 시험기간동안 멈춥니다<br /> == 진행사항 ==<br /> === 1주차(11월 3주차) ===<br /> # React 소개<br /> {| class=&quot;wikitable&quot;<br /> |-<br /> | 참여자<br /> | 과제 여부<br /> |-<br /> | 김동욱<br /> | 튜터<br /> |}<br /> <br /> === 2주차(11월 4주차) ===<br /> * 원격 레포 fork 사용해서 git remote 로 변경 사항 확인<br /> * git fetch upstream : 변경 사항만 생성<br /> * git pull upstream : 원격에 저장<br /> <br /> * JS React의 기본적인 기능에 대한 설명<br /> * Scss 적용<br /> * 해더 꾸미기<br /> * 배경 화면 추가<br /> * 네이게이션 바 flex로 구성<br /> * prop-types 로 default 값들 지정<br /> * className 속성 설명<br /> * 아이콘 사용 설명<br /> <br /> * 자주 사용하는 컴포넌트를 인터페이스 처럼 만들어두기<br /> <br /> * 네이게이션 바 만들기 &amp; 모바일 적용 &amp; 라우팅<br /> * MobileSlider<br /> * MobileNavigation<br /> * Sass Mixin<br /> * media query - 모바일 용 고려<br /> * img 태그 사용 - svg 파일 불러오기<br /> * 기본 라우팅 + 내부 라우팅 - Navlink, onclick 메서드 작성<br /> <br /> -----------------------------------------<br /> * Keywords<br /> * prop-types<br /> * mixin<br /> <br /> * 과제<br /> * Popper 아래 랜더링 컴포넌트 만들기<br /> * position absolute &amp; relative<br /> <br /> === 3주차(12월 4주차) ===<br /> * 전반적인 개발론 설명<br /> * 디자인 변경이 필요할때 한 번만의 수정으로 어떻게 전체적으로 적용할 것인가?<br /> * PageLayout, PopupLayout과 같은 Wrapping 컴포넌트를 이용하기<br /> <br /> * 프로젝트 디렉토리 구조 설명<br /> * component, pages, core, util, styles 과 같은 폴더의 각자 역할 설명<br /> * 앞으로 프로젝트 추가에 있어서 어디에 어떤 파일을 만들어야하는지 알 수 있도록 함<br /> <br /> * 지난번 과제 설명<br /> * Popup 창을 만드기 위한 useState Hook의 사용법<br /> * 팝업창 외부를 클릭했을때 Popup을 invisible하게 만드는 방법<br /> <br /> * React에 대한 설명<br /> * React의 Hook이란 무엇이며 CustomHook을 어떻게 정의하는가?<br /> * useRef Hook과 useState Hook의 차이점<br /> * Css Animation을 적용하는 방법<br /> * 절대경로를 설정하는 것의 장점<br /> <br /> === 4주차(1월 1주차) ===<br /> * googleMap 띄우기<br /> * .env로 api 키 값 가리면서 환경세팅<br /> * React의 index.html에 google map cdn을 추가하여 googleMap 세팅<br /> * useEffect을 통해 div태그 dom에 직접 접근해서 google map 할당<br /> <br /> * React Context<br /> * i18n 모듈을 이용해서 웹사이트 언어 제어<br /> * i18n 모듈에 변경할 언어를 알려주기 위해 언어 정보를 전역 상태로 저장하는 방법 설명<br /> <br /> * React Animation<br /> * css를 통해 직접적으로 animation 만드는 방법 설명<br /> * framer 모듈을 통해 쉽게 animation제어 방식 간단히 설명<br /> <br /> == 참고자료 ==<br /> [https://opentutorials.org/course/3084 생활코딩 html&amp;css&amp;js]<br /> [https://dev-yakuza.posstree.com/ko/react/create-react-app/react/ 리액트란?]<br /> [https://ko.reactjs.org/tutorial/tutorial.html 리액트 프로젝트 시작하는 방법]<br /> [https://quaint-finch-b9b.notion.site/Linting-25c0e7431cd14333b60a0536705e1c9d 유용한 글 모음집(React, NextJS, NodeJS 등등)]<br /> </div>

1.244.253.29 https://mediawiki.zeropage.org/index.php?title=%EC%95%BC_%EB%84%88%EB%91%90_%EB%A6%AC%EC%95%A1%ED%8A%B8_%ED%95%A0_%EC%88%98_%EC%9E%88%EC%96%B4&diff=63963 2021-12-29T09:19:26Z

<p>1.244.253.29: </p> <hr /> <div>__TOC__<br /> = 야 너두 리액트 할 수 있어 =<br /> 모든 프론트앤드 프레임워크에 영향을 준 React.js를 배워봅시다.<br /> 스터디 형식은 실습 + QnA 형식으로 진행됩니다.<br /> 스터디 초반에는 React.js를 배우고<br /> 스터디 중반부터는 React.js + SSR을 지원하는 Next.js로 넘어갈 예정입니다.(거의 비슷합니다 😃)<br /> <br /> == 참여 인원(최대 6명으로 제한할 예정입니다) ==<br /> * [[김동욱]]<br /> * [[장동훈]]<br /> * [[주영석]]<br /> * --이상묵--<br /> * [[한성민]]<br /> == 일정 ==<br /> 매주 화요일 or 목요일(추후 참여인원간 상의) 저녁시간 진행<br /> 공부하다 궁금한 내용은 Anytime<br /> 시험기간 2주전부터 시험기간동안 멈춥니다<br /> == 진행사항 ==<br /> === 1주차(11월 3주차) ===<br /> # React 소개<br /> {| class=&quot;wikitable&quot;<br /> |-<br /> | 참여자<br /> | 과제 여부<br /> |-<br /> | 김동욱<br /> | 튜터<br /> |}<br /> <br /> === 2주차(11월 4주차) ===<br /> * 원격 레포 fork 사용해서 git remote 로 변경 사항 확인<br /> * git fetch upstream : 변경 사항만 생성<br /> * git pull upstream : 원격에 저장<br /> <br /> * JS React의 기본적인 기능에 대한 설명<br /> * Scss 적용<br /> * 해더 꾸미기<br /> * 배경 화면 추가<br /> * 네이게이션 바 flex로 구성<br /> * prop-types 로 default 값들 지정<br /> * className 속성 설명<br /> * 아이콘 사용 설명<br /> <br /> * 자주 사용하는 컴포넌트를 인터페이스 처럼 만들어두기<br /> <br /> * 네이게이션 바 만들기 &amp; 모바일 적용 &amp; 라우팅<br /> * MobileSlider<br /> * MobileNavigation<br /> * Sass Mixin<br /> * media query - 모바일 용 고려<br /> * img 태그 사용 - svg 파일 불러오기<br /> * 기본 라우팅 + 내부 라우팅 - Navlink, onclick 메서드 작성<br /> <br /> -----------------------------------------<br /> * Keywords<br /> * prop-types<br /> * mixin<br /> <br /> * 과제<br /> * Popper 아래 랜더링 컴포넌트 만들기<br /> * position absolute &amp; relative<br /> <br /> === 3주차(12월 4주차) ===<br /> * 전반적인 개발론 설명<br /> * 디자인 변경이 필요할때 한 번만의 수정으로 어떻게 전체적으로 적용할 것인가?<br /> * PageLayout, PopupLayout과 같은 Wrapping 컴포넌트를 이용하기<br /> <br /> * 프로젝트 디렉토리 구조 설명<br /> * component, pages, core, util, styles 과 같은 폴더의 각자 역할 설명<br /> * 앞으로 프로젝트 추가에 있어서 어디에 어떤 파일을 만들어야하는지 알 수 있도록 함<br /> <br /> * 지난번 과제 설명<br /> * Popup 창을 만드기 위한 useState Hook의 사용법<br /> * 팝업창 외부를 클릭했을때 Popup을 invisible하게 만드는 방법<br /> <br /> * React에 대한 설명<br /> * React의 Hook이란 무엇이며 CustomHook을 어떻게 정의하는가?<br /> * useRef Hook과 useState Hook의 차이점<br /> * Css Animation을 적용하는 방법<br /> * 절대경로를 설정하는 것의 장점<br /> <br /> == 참고자료 ==<br /> [https://opentutorials.org/course/3084 생활코딩 html&amp;css&amp;js]<br /> [https://dev-yakuza.posstree.com/ko/react/create-react-app/react/ 리액트란?]<br /> [https://ko.reactjs.org/tutorial/tutorial.html 리액트 프로젝트 시작하는 방법]<br /> [https://quaint-finch-b9b.notion.site/Linting-25c0e7431cd14333b60a0536705e1c9d 유용한 글 모음집(React, NextJS, NodeJS 등등)]<br /> </div>

1.244.253.29