Personal - portfolio 스따뜨 😎
클라이언트-서버를 배웠고, 리액트도 배웠으니 슬슬 Personal-portfolio를 만들어야 할 때가 됐다.
마침 부트캠프 과정 중 이틀동안 리액트와 리액트라우터를 사용해 제작해보라는 시간이 있어 이것을 기회를 이용해 만들어보았다.
이번 과제는 리액트-라우터를 이용해 간단한 기능 구현만 하면 되서 의외로 빠른 시간 내에 과제를 끝낼 수 있었지만, 사람의 욕심이란게 끝이 없다는 말처럼..
내 개인 포트폴리오 페이지를 만드는 것이다보니 좀만 더 예쁘게.. 좀 더 좋게... 만드려다 엄청난 시간이........새벽 5시까지 했지...
나만의 웹사이트이자 나를 드러내는 공간과 나의 첫 작품이라 생각하니 설레 힘든지도 시간가는 줄 도 몰랐던 것 같다.
결과물
사물이든 사람이든 첫인상이 중요하다.
나만의 포트폴리오 웹도 마찬가지라 생각한다.
그래서 우선 처음으로 보이는 화면은 너무 어지럽지 않게 심플하고,
궁금증을 유발하여 스크롤을 아래로 내리고 싶게 하는 페이지를 보이게 하고 싶었다. 너무 추상적이라 이 모든 걸 표현하는 페이지를 만들자니 이마저도 여간 힘든게 아니였다.
⭐️ 구현한 것
1. 클라이언트 사이드 셋업
리액트로 클라이언트를 SPA로 구현해보았다.
create-react-app 을 이용해서 리액트 프로젝트를 만들고
기본적인 라우팅을 하기 위해 react router를 npm을 이용해 설치했다.
🙋🏻♂️ 여기서 잠깐!
React-Router 란?
새로운 페이지를 로드하지 않고
하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);react-router-dom에 내장되어 있는 <BrowserRouter>로 감싸거나<React.StrictMode>로 최상위 컴포넌트인 <App /> 감싸면 만들어 놓은 컴포넌트들이 최종적으로 렌더가 된다.(StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위함이라는데 더 알아봐야겠다.) 이러한 라우터 리액트는 서버 라우트와 달리 HTML5의 History API를 사용하는 것이라는데 이것으로 감싸면 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해준다고 한다.
정리하자면, 이들은 리액트 컴포넌트를 이용해서 routing을 해준다. dom 형식으로 표시되기 때문에 React-router-dom이라고 불린다.
SPA를 구현하기 딱 알맞다.
SPA란?
SPA는 Single Page Application(싱글 페이지 애플리케이션)의 줄임말이다.
말 그대로 하나의 페이지로 구성이 된 웹이다.
SPA의 경우 서버에서 사용자에게 제공하는 페이지는 한 종류이지만, 해당 페이지에서 로딩된 자바스크립트와 현재 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여 줄 수 있다.
2. 페이지 설계
위의 프로젝트 셋업을 완료 후, 페이지 목업 구현을 해보았다.
아래 사진은 부트캠프에서 예시로 어떻게 시작을 해야할지 알려주었는데, 이를 참고하여 만든 설계이다.
메뉴 선택 (selected/deselected) 컴포넌트
<Switch>
Switch 컴포넌트는 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만을 렌더링시켜준다
Switch를 사용하면 모든 규칙과 일치하지 않을 때 보여 줄 Not Found 페이지도 구현할 수 있다고 한다.
<NavLink>
NavLink는 Link의 업그레이드 버전이다. 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 css를 적용할 수 있는 컴포넌트이다.
NavLink에서 링크가 활성화되었을 때의 스타일을 적용할 때는 activeStyle값을, css 클래스를 적용할 때는 activeClassName값을 props로 넣어주면 된다.
나는 activeStyle로 메뉴바에 있는 메뉴들을 클릭하면 그 해당 메뉴의 색상이 기본 설정값에서 다른 색상으로 변환시켜주어 현재 머물고 있는 페이지를 육안으로 식별 할 수 있게 해주었다.
다크모드 토글
부트캠프에서 토글을 만들어보라고 해서 만들어보았다.
무엇을 넣을까 고민하다가 우선 기본적인 다크모드 변환하는 것을 적용해보았다. 단, 부트캠프에서 라이브러리를 사용금지령을 내려서.. 구현하는데 쪼오오오금 애 먹었던 것 같다.
다크모드 버튼을 클릭하면 Dark Mode ON -> White Mode ON으로 변하게 한 후 화면 전체를 검정배경과 흰 배경 전환 기능을 적용하였다. 더불어 글자색도 반전시켰다.
.gif)
3. 서버 사이드 셋업
서버 셋업은 Express를 이용했다.
나름 저번에 고생했다고 이번에는 수월하게 진행이 되었다.
다만, 리액트라 구현한 클라이언트를 배포하기 위해 클라이언트에서 npm build하고 이 빌드된 것들을 server 디렉토리 내 public이라는 곳으로 복붙해줬다.
사용자들에게 배포하기 위해서는 build가 필수이니 꼭 유념하자.
서버 코드를 작성하여, http://localhost:8080를 설정 후 클라이언트 파일들이 접근 가능하도록 만들었다.
Potter's thought 😎
재미있긴 하다. 프론트앤드가 맞는다는 말보다는 css나 기타 등등 코드를 적용하는 순간 결과물이 보이고 그 결과물이 점점 발전해나가는 모습을 볼 수 있어서인 것 같다.
완전 시작단계에 머물러 있지만 앞으로 점점 더 예쁘고 편리한 웹으로 완성시켜볼까 한다.
앞으로 구현할 것
💁🏻 클라이언트 사이드
- 반응형 디자인을 적용, 원페이지 스크롤
- 미디어 쿼리를 이용해 모바일에 대응 @media (min-width: 600px)
💁🏻 서버 사이드
- 사용자가 이메일을 제출하면 (POST 요청), 이에 대한 응답으로 나의 이력서 파일이 서버로부터 전송될 수 있도록 만들기.
- HTTP 응답의 content-type 이 이력서 파일 형식에 맞게 제작하기.
(예를 들어 application/pdf)
이 외 적용하면 좋겠다는 부분을 추천해주시면 시도해보겠습니다!!
