1. 입사후 첫번째 프로젝트 === "단독으로 홈페이지 전체 리뉴얼"
ㄱ. 단독으로 홈페이지 전체 리뉴얼을 맡게되었고, 같은시기에 입사한 신입디자이너와 2개월간 밤샘 야근을하며 홈페이지를 처음부터 끝까지 단독으로 만들었음
ㄴ. 디자이너와의 소통과 주말, 저녁없는 개발자의 삶을 알게된 프로젝트
2. 사용한 라이브러리
ㄱ. React Slick : React에서 사용하는 이미지 슬라이더(carousel)를 만들기 위한 라이브러리
- 메인 이미지에 들어가야할 이미지를 캐러셀 보여주게함.
설치코드 : npm install react-slick slick-carousel
ㄴ. React BootStrap : Twitter의 Bootstrap 프레임워크를 React 애플리케이션에 통합하기 위한 라이브러리
- 반응형을 쉽게 하기위해 처음에 레이아웃을 부트스트랩으로 짜려고 했지만 프로젝트 진행 중반에 반응형이아닌 데스크탑 버전과 모바일 버전으로 분리를 하는게 좋겠다 라는 의견이 있어서 라디오 버튼이나 체크박스, 모바일 버전에서만 사용함.
설치코드 : npm install bootstrap
ㄷ. Typewriter-Effect : 텍스트가 마치 타자기에서 쓰여지는 것처럼 한 글자씩 나타나는 효과를 나타내는 웹 디자인 효과
- 메인페이지 상단에 Typewriter-Effect를 사용하여 디자인적인 효과를 주었음
설치코드 : npm install typewriter-effect@2
ㄹ. React-i18n-next : 각각의 React 컴포넌트에서 필요한 텍스트를 간단한 컴포넌트와 훅을 사용하여 다국어로 처리
- 외국인 클라이언트를 위해 React-i18n-next를 사용하여 다국어 기능을 구현함.
설치코드 : npm install i18next react-i18next
ㅁ. React-ui-Scrollspy : React 애플리케이션에서 스크롤 위치에 따라 특정 섹션 또는 요소를 감지하고 활성화시키는 라이브러리
- 솔루션 페이지에서 스크롤의 위치와 네비게이션을 위해 사용된 라이브러리
설치코드 : npm install react-ui-scrollspy
ㅂ. React-Quill : 리액트 애플리케이션에서 글쓰기 에디터를 쉽게 구현할 수 있게 해주는 라이브러리
- 공지사항, 팡고소식등 CRUD를 위해 사용된 리엑트 라이브러리
설치코드 : npm install react-quill
ㅅ. React-Device-Detect : React 애플리케이션에서 현재 사용자의 디바이스 및 브라우저 정보를 쉽게 감지할 수 있게 도와주는 라이브러리
- 유저의 기기를 파악해 모바일인경우 모바일 컴포넌트를 사용해서 모바일 버전의 페이지를, PC인경우 PC의 페이지를 보여줌
설치코드 : npm install react-device-detect --save3. 해결한 문제점
ㄱ. 번역을 누르고 새로고침을 누르면 번역이 풀리는 문제(React-i18n-next)
- 번역버튼을 눌렀을때 세션스토리지에 현재 언어를 저장하게하고, i18n의 language의 현재값과 비교해서 언어를 유지하게 하였음.
ㄴ. 메인화면에 Typewriter의 언어가 바로 번역 되지않았던 문제
- 메인화면에 Typewriter 라이브러리를 사용중일때 언어가 변경이되면 useEffect로 감지하여 언어를 바로 변경해줌
ㄷ. React-i18n 라이브러리를 사용중일때 \n 을이용하여 줄간격을 띄우는데 사용이 되지 않은문제
- 스타일 속성중 whiteSpace-"breack-sapce"를 사용해서 해결함
ㄹ. Next에서 서버사이드일때는 유저의 기기가 PC인지 모바일인지 클라이언트쪽에 전달하지 못하는 문제
- React-Device-Detect의 라이브러리를 사용하여 유저의 기기가 pc인지 모바일인지에 따라 MobileView ,BrowserView를 다르게 보여주게 되는데 이때도 서버클라이언트면 클라이언트의 정보를 받아오지 못하는데 메타태그도 적용해야했기 때문에 page.js 안에 Client Component를 만들고 그안에 MobileView와 BrowerView를 사용하여 해결