IBS 홈페이지 제작
1.Nav 토글 및 아코디언 메뉴
아이패드와 모바일 버전에서 카테고리들이 드롭다운 형태로 보여지게 ui를 구성하였습니다. 세부카테고리를 보기 위해서는 카테고리 옆의 화살표를 클릭하면 숨겨진 아코디언 메뉴가 나오게 구성하였습니다.
2.라이브러리 없이 리액트로 자동 슬라이드 구현하기
포트폴리오 슬라이드 갤러리를 구현했습니다. 슬라이드를 넘기지 않아도 일정시간이 지나면 슬라이드가 넘어가는 자동 슬라이드 기능과, 버튼을 이용해서 왼쪽 오른쪽으로 슬라이드를 이동할 수 있는 기능 두가지 모두를 넣었습니다.
3.리액트 프로젝트에 네이버지도 넣기
네이버지도에 접속하지 않아도 회사 홈페이지에서 편하게 지도를 볼 수 있도록 홈페이지안에 네이버 지도를 불러오는 기능을 넣었습니다.
4.Email.js를 활용하여 홈페이지에 메일 폼 생성하기
문의사항이 있는 고객들이 메일로 문의사항을 남김 수 있게 홈페이지에 Email.js를 활용하여 mail 폼을 생성했습니다. 홈페이지에서 작성 후 제출한 폼은 지정한 메일함으로 들어오게 되어있고, 개인정보 제공 동의를 체크박스를 체크해야 메일 폼을 전송할 수 있도록 로직
5.React-reveal 애니메이션 적용하기
스크롤을 내리는 것에 따라 반응하는 애니메이션 효과를 적용하고 싶어 react-reveal 이라는 라이브러리를 적용하게 되었습니다. 공식홈페이지에 설명이 잘 되어있고, 코드 몇줄로 손쉽게 애니메이션 효과를 적용할 수 있어서 접근성이 용이합니다. 여기 에 접속하면 Fad
6.Map 함수안의 배열 중 특정 요소에만 모달창 이벤트 발생시키기
자료실 페이지에서 배열안의 요소들을 map함수를 통해 갤러리 리스트로 만들었습니다. 갤러리에서 한 요소를 클릭 시 모달창을 띄워 상세페이지처럼 모달창안에서 보여질 수 있도록 기능을 구현하였습니다.
7.Express로 React프로젝트를 Heroku에 배포하기
리액트 프로젝트를 완성하고 난 후, cafe24의 node.js배로를 이용할 지 heroku배포를 이용할지 고민하다 heroku를 선택하게 되었습니다. cafe24와 heroku모두 깃을 통한 push로 배포를 진행하는 것은 동일했으나 카페24는 배포가 정상적으로 완료
8.heroku 프로젝트에 커스텀 도메인과 cloudflare를 통한 SSL 보안 적용하기
Heroku에 react프로젝트 배포를 완료한 후, 기존에 회사에서 사용하던 커스텀과 도메인을 heroku에 연결하고, cloudflare를 통해 ssl 보안 적용을 진행해 줬습니다.