Git Page
본 리액트는 올리지 못함
노드를 쓰지 않는 리액트만 업로드 가능함
repository 제작
깃허브 인터페이스 => 심플한 것만 제작
메인 페이지를 위해 repository를 새로 만든다
public, Add a README file 체크~
아이디.github.io (무조건 자기 아이디로)
만들어버렸습니다잇
npm run build
build를 실행하게 되면 build 폴더가 생기게 된다
public 폴더 안의 소스들은 그대로 build되고
src 폴더 쪽의 리소스들은 compile 돼서 static 안에 들어가게 됨
github.io/repository
github.io를 만들고 거기에 레포지토리로 연결할 수 있다
원하는 레포지토리의 settings에 들어가서
branch none을 main으로 바꿔준 후 save!
초록색 체크 표시가 뜨면 업로드 완료되었다는 듯~
(진행 중에는 겨자색 bullet이 뜬다)
완성~~
REACT 경로 설정
index.html 에서는
이런 식으로 작성함
<img src="%PUBLIC_URL%/이미지경로/이미지파일.jpg" />
src 폴더 안에서는
<img src={process.env.PUBLIC_URL + '/img/logo.png'} />
package.json
그리고 package.json에 homepage 경로를 입력해준다
"homepage":"github page url",
데이터바인딩
ajaxPage라는 폴더를 만들어서 업로드 했다...
자기도메인/ajaxPage/data/db.json
업로드 된 데이터바인딩의 데이터프로토타입을 보내서 컨펌 받는다~~
pwa
pwa => 비동기통신 할 거라는 뜻
이 파일 중에서 navi.json, portfolio.json은 필수로 제작해야
데이터 바인딩 경로
도메인/pwa/data/navi.json
도메인/pwa/data/portfolio.json
도메인/pwa/data/banner.json
도메인/pwa/data/myinfo.json
도메인/pwa/data/myability.json
navi.json
is를 붙이면 true/false로 사용한다는 의미를 내포하고 있다
여기서는 네비게이션 바에서의 사용 여부를 묻고 있다
banner.json
이 데이터바인딩을 서버에 올리고 해당 링크를 복사해서 ajax url에 사용하면 안전할 것!!
ajax
snippets 정말 편하다...
GET 방식은 text로 읽으므로 가벼운 것만 다룬다
POST는 데이터베이스... 그래서 복잡하다
navi.json Array 안에 Array를 또 만들어 주었다
[ [ { nav } ] , [ { util } ] ]
이런 식으로 되어 있다
백틱을 사용하지 못 할 때!
백틱 대신 "++" 로 표현해봤다~
\를 이용했을 때
\이용하지 않았을 때 => value.naviLink와 target이 섞일 수 있으므로 띄어쓰기 필수
백틱을 쓰면
enter가 유효하지만, 여기서는 사용하면 에러가 난다
Bootstrap Navbar
https://getbootstrap.com/docs/4.6/components/navbar/
부트스트랩 Navbar 떼어왔다........
반응형 모바일 화면 dropdown menu의
toggle활성화
navi.json의
Objectkey인 isNav 활성화 시키기
isNav가
true일 경우에만 navItem에 그 값이 들어가게 된다
