React) Porfolio page

< Porfolio page >

< Mockup >

 

- 학습 내용

• React
• component
• Web font
• transition / transform
• React boot strap
• Link
• favicon
• img

 

 

- 회 고

 

: 포트폴리오용으로 페이지 하나를 배포했다. 지금껏 HTML, CSS, JavaScript, React를 학습하며 배웠던 내용을 바탕으로 열심히 만들었다. 순서는 정확히 기억은 안 나지만, 만들면서 부딪혔던 문제들이 많았다. 

 

먼저, 부트스트랩을 사용해 nav-bar를 넣을 때였다. React를 학습하며 부트스트랩을 쓴 경험이 없어 HTML에서 사용했던 것 처럼 부트스트랩에 가서 긁어 왔는데, React 용이 따로 있었다. 관련 확장 프로그램을 설치하고 사용할 코드를 긁어와 VS code에 넣어줬더니, 이번엔 적용이 안되었다. 뭐지... 구글링을 해서 알아낸 방법은 코드 상단에 ' import "bootstrap/dist/css/bootstrap.min.css" '를 넣어주는 것이었다. 이렇게 첫번째 문제를 해결했다.

reference)

리액트에 부트스트랩(bootstrap) 사용하기

 

 

두 번째, Nav.Link를 사용는 것을 잘 몰랐다. < Nav.Link to='/' > 형태로 경로를 지정하려 했는데, 되지 않았다. 구글링을 해도 답을 찾기가 쉽지 않았다. 그래서 '코드를 짤 땐, 우선 돌아가는 게 먼저'라는 멘토님의 말대로, 전에 사용했던 <Link to='/'>를 사용해 경로를 넣어주었다. 

 

세 번째, 경로를 지정하는데, movie app을 만들 때 처럼 Router와 Switch를 사용했는데, 작동하지 않았다. '최근에 배운 건데  왜지?'라고 생각했는데, 문득 당시에도 특정 버전을 다운로드하여 사용했던 기억이 난다. 그래서 또 구글링을 했다... 더 이상 Router와 Switch는 사용하지 않는단다. 그래서 경로를 렌더링 하는 방법을 또 구글링 해서 문제를 해결할 수 있었다. 

reference) 문제 원인

[Error] 'Switch' is not exported from 'react-router-dom' 해결

 

reference) solution

[React] 6. React Router (리액트 라우터) 사용하기

 

 

네번째, Introduction 페이지에 아이콘을 넣고 싶어 Heroicons에 있는 걸 사용하려 했다. HTML에서 사용했던 기억에 React에서 사용하려 했는데, React용 icon 확장 프로그램이 따로 있어 그걸 사용하기로 했다. 방법은 꽤 쉬웠다. 확장 프로그램을 설치하고 필요한 icon을 import 해 원하는 위치에 넣어주는 것. 유익한 경험이었다. 

reference)

React Icons

 

 

다섯번째, 배포 후 이미지 엑박... 로컬에서는 문제가 없어서 '이제 씻고 잘 수 있겠다' 했는데.... 엑박이 떴다. 하... 또 구글링 했다. 유튜브에서 한 번씩 강의를 들었던  코딩애플님이 수강생의 질문에 쓴 답변을 보고 문제를 해결할 수 있었다. public 폴더에 저장한 이미지는 개발 및 배포 환경에서 잘 찾아오지만, public 폴더 하위에 폴더를 만들어 저장한 이미지의 경우, 개발환경에서만 잘 찾아오고 배포 환경에서는 찾지 않기 때문이라고 한다. 이렇게 또 하나를 배워간다...

reference)

리액트 빌드 시 public 하위 폴더 이미지 경로 - 코딩애플 온라인 강좌

 

 

여섯번째, 배포 후 첫 화면에서 nav-bar만 렌더링 되었다. 왜지.... 내가 생각했던 이유는, 메인 페이지의 경로를 '/'로 설정해 놓고 '/Portfolio_Page/'는 연결이 되어있지 않아서라고 생각했다. 그래서 App.js파일에 '<Route path={"/Portfolio_Page"} element={<Home />}></Route> '를 추가해 주었더니 문제가 해결되었다.  

 

 

문제도 많았고 부족함을 느꼈지만, 그만큼 보람도 있었다. 그동안 만들었던 프로젝트 몇 개를 배포하고 포트폴리오 웹에 연결하면서 특히 더 그랬다. (한동안 게을렀는데, 정신 차려야지...) 일부터 앞으로 종종 업데이트 할 것을 생각해 History페이지에서 arr.reverse().map을 사용해 최근에 만든 페이지가 맨 위에 올라오게 만들었다.  자주 업데이트할 수 있으면 한다. 

 

 

 

 

 

React App