[React] 템플릿 적용기(삽질)
새 웹 프로젝트를 create react app 으로 만들었다
디자인을 직접하면 너무 오래 걸리고 결과가 그닥 예쁘지도 않을 듯 해서 유료 ui 템플릿을 구매!
해당 템플릿은 html + css + js 로 구성 된 템플릿이였다
리액트 탬플릿이 아닌 일반 템플릿은 리액트에 적용해본적이 없어서 해보는데 살짝 애 먹은 부분이 있어서 포스팅 하게 되었다.
일단 지금까지 해놓은 걸 정리하자면
1. react 에 있는 기본적인 index.html 에 템플릿 css 파일과 js 파일을 임포트 해 둔다
(이 방식으로 하면 프로젝트 단위로 css랑 js 가 적용되므로 쓸데없는 로드가 많아 무거워지니 비추.. 이긴하지만 일단 나는 ui 템플릿이라 다 로드해야됨)
여기서 이상한거는 저 파일들을 보기 좋게 src 디렉토리에 넣어두고 상대경로로 "../src/asset/..." 이런식으로 가져오면 파일이 안가져와 진다는것? 무슨 원리인지는 좀 더 서치가 필요
지금 일단 돌아가는거 확인해보려고 이렇게 index.html 있는 public 경로에 css 파일, 폰트, js 파일을 다 때려넣어 놓은상태..^^...아휴..
2. 이 상태에서 페이지에 원하는 css 가 적용된 거까지는 확인했는데 이상하게 js 파일에 명시된 함수들이 실행 안되는 현상이 발생했다.
js 파일들 status 200으로 잘 로드 되었는데도 불구하고 카운트 업하는 함수가 실행 안되는 듯이 보임ㅠㅠ
삽질 start..
index.html 이 문제인가 해서 거기서 임포트 하는 소스를 주석하고 컴포넌트안에서 useEffect 를 사용해서 appenChild 방식으로 임포트 해보았다. (역시나 실패) -> react third party script 라고 구글 검색하면 방법 나오는거 거의 다 해본듯
+ 리액트는 원래 외부js 파일 로드가 아닌 npm install 로 필요한 라이브러리를 다운받고, 기능이 필요한 컴포넌트에서만 import 로 명시해서 써야한다.
근데 이미 템플릿을 html 로 구매한 이상 그에 따른 외부 js 파일을 로드해서 써야하는 상황ㅠㅠ 리액트 사용법에 맞지않지만.. 회사에서 사준 템플릿이라 어쩔수가 읎다..
각설하고 카운트 업 이라고 단순히 숫자 1부터 올리는 함수였는데 그게 실행이 안됐음
결국 템플릿에있는 js 파일을 까서 살펴보니
그중 main.js 파일에
이런식으로 윈도우 함수 로드로 시작하고
카운트 업 관련 실행부분은 이렇게나 초 간결하게 되어있는것
3. 크롬 개발자 도구로 소스 실행부분 확인
여기서 좀 이상한거를 발견한게 실제 리액트 컴포넌트쪽에 className 으로 counter 를 가진게 다섯개 있는데 크롬 개발자 도구 콘솔에다가 $('.counter')를 쳐보니까
해당 클래스네임을 가진 div 가없는 것처럼 나옴
여기서 번뜩 든 생각은 일전에 next.js 할때 CSR, SSR 공부할때 처럼 실제 html 이 만들어 지기 전에 script 가 먼저 로드되어 js 파일 내용이 실행 안되는듯 보였나? 란 생각이 들었음
window 함수중에 html 이 다 로드되고나서 실행되는 리스너가 무엇이 있나 검색
windowOn.on('DOMContentLoaded', function(){
}DOMContentLoaded 를 사용하면 된다고 해서 main.js 안에 함수들을 저기 안에 넣어주었다
똑같이 $('.counter') 검색해보니까 5개 html 요소가 들어있는걸 확인할 수 있었다
카운트 업 함수 잘 실행된다.. 편안..
일단 지금 디렉토리가 너무 지저분해서 정리해야하는데 third party js file import 에 성공한 사실이 너무 기뻤달까..(단순)
삽질정리 끝!