리액트 / 포트폴리오 개발 및 배포 (AWS 커스텀 도메인)

포트폴리오, 웹매거진, 리마인더 이렇게 3가지 사이트를 리액트로 만들고 배포한 과정 소개

★
리마인더 컨텐츠는 간단한 TODOLIST와 STOPWATCH, DATE 기능 등
PWA를 배우고 간단하게 접목시킬만한걸로 구성, 휴대폰에 다운받아서 사용할때
이런 자잘한게 있으면 좋을것 같다고 생각함

pwa는 터미널에서 간단하게 다운로드해서 unregister -> register로 바꿔주는 정도만 하면 기본셋팅이 끝남
거기에 https://www.geeksforgeeks.org/create-a-stop-watch-using-reactjs/ 여기서 스톱워치 어떻게 사용하는지
배워서 접목시켰음

좀 더 꾸며보고 싶어서 마우스 커서를 이모지로 바꾸는거 검색해보고 접목 시켜봤으나
behavior 건드리는건 호불호가 굉장히 갈리고 나도 사실 마우스커서 컨트롤되버린 페이지는 빨리 나가고싶단 생각을 좀 하는편이라서 그냥 빼버렸음 (모순적)그래도 언젠가 참고할수도 있으니 링크 첨부 https://blogpack.tistory.com/998

★
포트폴리오는
envato에서 레이아웃 찾아보다가 (사실 포트폴리오를 리액트로 만들 필요는 없다고 생각하는데
스무스하게 움직이는 웹앱 그리고 이것 또한 하나의 실전 프로젝트라고 생각하고 실력향상을 위해 리액트로 만들기로 결정) 리액트로 만든 템플릿 발견 https://tunis.ibthemespro.com/home-dark

여기서 email.js 사용한거 보고 나도 따라함 / 이건 email.js홈페이지에서 튜토리얼 읽어보고 하라는대로만 하면 됨

좀 힘들었던 메뉴 클릭 기능 (탭메뉴)
https://miracleground.tistory.com/entry/react-Css-in-JS-tab%EB%A9%94%EB%89%B4-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%81%EC%9A%A9-%ED%83%AD%EB%A9%94%EB%89%B4

왜 힘들었냐면 제이쿼리나 바닐라자스로 1분도 안걸리는게 내가 처음부터 설계를 잘못해서 잘못된 방향으로 가버림
상태변경시 +1할때 하드코딩하는게 아니라 map써서 index늘리던지 그런식으로 코딩스럽게 해줘야되는데 .. 여튼 공부에 엄청 도움된 부분

★
웹매거진 리뉴얼 프로젝트는 장바구니 추가랑 북마크 기능 제외 할말이 없음 // 초보가 하기 좋은 기능
라우터 처음 시도해보고 이걸 깃허브로 배포해서 basename추가하고 새로고침 시 404에러때문에 이것저것 많이 찾아보면서 공부가 되었다  // 검색해보면 많이 나오는데 사실 browserrouter에 basename 리파짓토리네임만 추가하면 되는거였음

이제 배포에 관한 얘기를 해볼건데

깃허브가 터미널 명령어 몇줄로 배포 쉽게 가능하고 다 좋은데
리액트로 만든 프로젝트를 aws로 배포했을때 너무너무 편하고 좋았다
빠르고 업로드 자체도 빠르고 에러도 안나고 사용방법이 처음엔 복잡하다고 생각했는데(깃헙명령어에 비하면?)
엄청나게 직관적이고 이렇게 대놓고 편할수가 없다고 생각했다
netflify도 해봤는데... 손이 안가는 느낌??(지극히 주관적)

사실 학원에서 포트폴리오용 웹서버를 제공해줬는데 이게 ip주소라서
이력서에 적기가 좀 그랬다 그래서 커스텀도메인을 알아보던중
https://anerim.tistory.com/125
이 글을 보고 aws로 배포해서 내 도메인을 구매해서 올려야겠다고 결심

그래서 나온 내 포트폴리오 주소는 http://minyeokang.com/
깔끔하게 잘 나왔다고 만족하고있다!

[react, Css-in-JS] tab메뉴 만들기, 스타일 적용, 탭메뉴