인프런 커뮤니티 질문&답변
작성한 질문수
실무에서는 퍼블리싱 적용은 어떻게 하나요?
해결된 질문
작성
·
2.7K
0
antd를 사용하셔서 편히 화면구성을 했지만, 보통은 퍼블리셔들이 직접 작성한 css와 js파일은 어떻게 리액트에 적용하는지 궁금합니다.
일단 검색해서 여러 방법들 중에서 2가지 방법을 시도해봤는데요.
1. public에 assets폴더를 만들고 index.html에 기존 방법대로 link해줌.
=> 장점 : 쉽고 잘 돌아감.
=> 문제점 :
1) body에 걸린 클래스는 변경이 불가능한 것 같음
2) 가능하게 하려면 페이지 렌더링을 매번 다시 해야하는데 그러면 react의 장점이 없어지는 것 같음.
2. src안에 assets폴더를 만들고, index.js에서 링크
=> 문제점 :
1. 이 역시 body나 하나 아래 div(wrapper)에 걸린 class를 선택, 변경 시 만들어진 렌더링을 다시 해야하는 것 같음.
2. js파일들을 수정없이 import할 방법을 찾지 못함. => 모든 함수들은 전부 react function에 맞게 수정해야하면 시간이 많이 걸림.
검색해보아도 딱히 깔끔한 방법들은 없고, antd나 유명한 material 같은 라이브러리들은 리액트에 맞게 다시 코딩하는 방법들 튜토리얼과 포스팅 들이 많아서 어떤 방법이 좋은지 궁금합니다.
(처음부터 리액트에 맞게 퍼블리싱하는 방법은 우선 제외했습니다!)
답변 2
3
마리오님 안녕하세요 ^^
우선 assets폴더를 src 폴더안에 만드는것이 더 좋습니다.
왜냐면 webpack은 src폴더안에 있는것들만 처리를 해주기 때문입니다.
CSS같은 경우 index.css 에 넣어주시면 됩니다.
하지만 퍼블리셔분이 SPA(single page application)에 맞게 css를 넣어주지 않으셨다면
그 부분은 직접 처리를 해주셔야 됩니다...
그리고 JS 파일은 어떤 부분을 퍼블리셔 분이 만들어 주시는지에 따라
그 해당하는 페이지에 넣어주셔야 합니다.
그리고 이왕이면 리액트 이미 좋은 라이브러리가 있다면
퍼블리셔분이 해주신 JS파일보다 리액트에 맞게 작성된 라이브러리를 다운 받아서 쓰시는게 더 좋다고 생각합니다 ~ !
요즘 저도 퍼블리셔분이 해주신 걸 받아서하는데 가끔은 퍼블리셔분들도 react에 더 적응이 되면 서로 더 소통도 편하고
일도 더 효율적으로 될거라 생각이 됩니다.
0
아, webpack 때문에 역시 src안에 넣는 게 좋군요ㅜㅜ!
역시 하나하나 직접 처리해야하는군요 ㅜㅜ
오히려 소스들이 파편화 될 수도 있을 것 같고, 퍼블리셔분께서는 전체 하나로 관리하시기도 어려울 것 같은 생각이 들어서 어떤 방법이 제일 좋을지 고민되네요.
답변 감사합니다!