프로젝트 개요
이번 프로젝트는 이미지 슬라이드를 만드는 프로젝트이다.
개발환경은 지난 프로젝트와 마찬가지로 웹팩 개발환경이 셋팅될 것이다.
레이아웃은 HTML과 CSS를 사용해서 구성될 것이다.
대략적인 구조는 다음과 같다.
- 슬라이드
- next, prev 버튼
- 인디케이터
- 자동재생 버튼
슬라이드는 이미지가 들어갈 부분이다.
next와 prev 버튼은 클릭하게 되면 이미지가 각각 오른쪽-왼쪽, 왼쪽-오른쪽으로 이동해 현재 나타나는 슬라이드를 변경할 수 있게 한다.
인디케이터는 게시판의 페이지네이션과 같다. 각각의 인디케이터를 클릭하게 되면 해당하는 이미지 슬라이드로 이동하게 된다.
예를 들어 5번째 인디케이터를 클릭하면 내가 어느 이미지를 보고 있더라도 5번째 이미지로 이동하게 된다.
마지막으로 자동재생 버튼은 두가지의 상태를 가진다. 이 슬라이드의 기본 상태는 자동재생, 즉 autoplay가 기본인 상태이다.
사용자가 어떤 동작을 하지 않아도 슬라이드는 일정 시간이 지나면 다음 이미지로 넘어간다.
또한 사용자가 원하면 자동재생을 중지할 수 있어야 하기때문에 자동재생이 될때와, 자동재생이 멈추었을때 두가지 상태가 필요하다.
대략적으로 살펴본 이 프로젝트의 기능들을 구현하기 위해서 가장 중요한 함수는 바로 setTimeout과 setInterval 함수이다.
개발환경 설정
개발 환경은 지난번처럼 직접 일일이 모든 패키지를 설치하는 것이 아닌 강사님이 미리 준비해두신 보일러 플레이트 파일을 다운 받아서 npm install 로 셋팅했다.
💡보일러 플레이트(Boilerplate)
사전적 의미는 '표준 문안' 정도의 의미를 갖고있다.
컴퓨터 프로그래밍에서 보일러플레이트 또는 보일러플레이트 코드라고 부르는 것은 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다.
다음 강의에서는 HTML과 CSS로 기본적인 레이아웃을 잡는 것 부터 시작하게 된다.
************
참고
https://www.wisewiredbooks.com/term-dict/common/boilerplate.html
#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발
#패캠인강후기 #패스트캠퍼스후기 #오공완 #30개프로젝트로배우는프론트엔드withReact
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
'study > fastcampus' 카테고리의 다른 글
| [React] 이미지 슬라이드 - 3. next & prev (0) | 2023.02.27 |
|---|---|
| [React] 이미지 슬라이드 - 2. HTML & CSS (0) | 2023.02.26 |
| [React] 가상 키보드 만들기 - 5. 마우스 이벤트 작성 (0) | 2023.02.24 |
| [React] 가상 키보드 만들기 - 4. 키보드 이벤트 작성 (0) | 2023.02.23 |
| [React] 가상 키보드 만들기 - 3. Dark theme, font 변경 (0) | 2023.02.22 |
