1. 리액트로 포트폴리오 사이트 만들기 (셋팅, 컴포넌트화)

원래 자바스크립트 심화 버전 강의를 듣고 있었지만, 너무 이론적이고... 무엇보다 아직 리액트로 사이트를 빌딩 하는 과정에 대해서는 완벽히 모르고 있기에, 따른 유튜브 강의를 듣기로 했다.

물론 추가 활동인 "백준 문제 풀기"도 지속할 것이다.

11. 포트폴리오 사이트 만들기 : React-Site : 셋팅하기

Tutorial/portfolio 포트폴리오 사이트 만들기 - React by @webs 2023. 08. 01. 01 포트폴리오 사이트 만들기 : 셋팅하기 난이도 중간 소스 다운로드 완성 화면 완성 코드 영상 보기 소개 안녕하세요! 웹스토리

webstoryboy.co.kr

(여기 블로그를 참고하였다.)

스킬은 리액트가 되어줄 것이고, SCSS, GASP 등등 여러 기술을 사용하였다.

코드 같은 경우는 밑에 깃허브를 참고하자.

https://github.com/kss2002/PortfolioWebsite-beta

GitHub - kss2002/PortfolioWebsite-beta

Contribute to kss2002/PortfolioWebsite-beta development by creating an account on GitHub.

github.com

깃과 깃허브를 이용해주었다.

깃으로 코드를 관리하고 push 함으로써 코드를 빠르게 올리고 관리도 효율적으로 바뀌게 된다. push를 통해서 최신 코드를 언제든지 올릴 수 있게 되었다. 링크만 있다면 언제든 확인 가능하다.

이때 정말 많은 삽질을 했지만, 결론은 심플하다.

이 영상에 힌트가 있었는데,

Git Bash에 들어가서 내 이름과 깃허브에 가입한 나의 구글 이메일을 미리 환경 설정해 주는 것이었다.

이걸 미리 안 해서 온갖 오류들이 난 것이다.

(오류를 고치기 위해서 윈도우 파워셀에 들어가서 git 파일을 강제로 없앴다..)

코드 같은 경우는 확인해 보면 되지만,

핵심적인 부분은 다음과 같다.

1. 전체적인 세팅

2. 라우팅 및 컴포넌트화

미리 필요한 SCSS와 GSAP, Router-dom, @studio-freight/lenis NPM을 설치하였다.

이후 불필요한 파일을 삭제, 추가하였다.

추후 컴포넌트를 여러 개 만들었다.

마크업을 하되, 결국 리액트와 HTML의 다른 점은 "재활용"에 있는 것이라 할 수 있다.

HTML 같은 경우,

처음부터 끝까지 HTML 파일 안에 욱여넣지만, 리액트인 경우 사이트를 "부품화"해서 합치게 되는 것이다.

이렇게 되면 재사용성도 높아지고, 코드도 깔끔해지며 코드를 찾기도 쉬워진다.

마크업은 HTML랑 비슷해서 생각보다(?) 쉽다.

이 부분은 코드를 확인하면 무슨 말인지 알 것이다.