개발자

리액트로 업무를 진행해야 하는데 업무 방식이 고민이 됩니다

2024년 07월 03일조회 184

신입 프론트 개발자인데, 궁금한 게 있어서 물어봅니다! 리액트 프로젝트를 진행하는데, 퍼블리싱은 외주를 받는다고 하면, 공통 컴포넌트 같은 부분은 어떻게 정하나요? 퍼블리싱 외주를 받은 html 파일을 개발자가 일일이 쪼개서 리액트 프로젝트로 옮겨야 하나요?

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 2

프레드윰님의 프로필 사진

그거는 퍼블리셔 가 리액트를 알면 그렇게 하면되고 모르면 프론트엔드 담당자가 준비 하셔야되요

profile picture

익명

작성자

2024년 07월 03일

답변 감사합니다, 프론트쪽에서 준비한다는 것은 공통 컴포넌트를 정하고, 퍼블리셔쪽으로 전달한다는 의미일까요?

프레드윰님의 프로필 사진

프레드윰

개발대발소발2024년 07월 03일

컴포넌트 만드는영역이 프론트엔드 담당이잖아요? 퍼블리셔가 리액트 해본적 없으면 퍼블리싱만 하면되요 퍼블리셔가 리액트까지 하는일은 극히 드문일이라서~ 크게 관심 있지 않는이상은 자기 할것만 합니다 그리고 보통 프론트엔드도 퍼블리싱 기초정도는 할줄 알아야된다 생각해요~ 디자인은 못하더라도 퍼블리싱은 다루는일은 크게 어렵지 않구요 요새 css 프레임워크도 많다보니 공부 좀만 해도 금방 배우니 알아두는게 좋을것 같아요

profile picture

익명

작성자

2024년 07월 03일

네, 결국은 퍼블리셔가 리액트를 모른다면 리액트로 옮기는 작업은 개발자가 해야한다고 이해했습니다. 궁금했던 점은, 1. 컴포넌트 단위로 설계한 후에, 정해진 공통 컴포넌트를 퍼블리셔들과 미리 공유해야하는지, 2. 페이지가 html파일 통으로 짜진 산출물이 전해질 때, 리액트로 옮기기 위해 다시 설계따라 쩌개서 작업하는 방식이 괜찮은 지에 대한 부분이었습니다! 현업에서는 어떻게 진행되는지 궁금해서 여쭤봤습니다!

박정환님의 프로필 사진

제가 프론트엔드 초보일때 그런 방법으로 진행해 본 적이 있습니다. 저의 경우에는 외주가 아니고 사내 '디자인UI/UX팀'이 디자인 및 퍼블리싱을 했었습니다. 그리고 제 역할은 프론트엔드 및 Java SpringBoot 백엔드 작업이었지요. (현재는 저는 퍼블리싱도 하며 프론트엔드~백엔드 까지 모두 담당할 수 있는 자원이 됐습니다.) 업무의 흐름은 크게 보면 이렇습니다. 1. 퍼블리싱이 끝나고 나면 개발팀에게 전달 됩니다. 2. 퍼블리싱 html을 분석해서 요소별로 쪼갭니다. (안 쪼갤수도 있습니다.) 3. 요소들을 컴포넌트화 합니다. 4. 컴포넌트들을 조립하여 페이지를 구성합니다. 이 과정에서, 만약 퍼블리셔가 jQuery를 사용하게 되면 jQuery로 짜여진 부분을 React에 맞게 일종의 중간 작업을 해줘야 하는데요 이 부분이 좀 어렵습니다. 저희 같은 경우에는 스크립트를 새로 짜거나, 일부 스크립트를 컴포넌트화 해서 적용하였습니다. 이외 방법은 여러 가지 있으니 혹여라도 필요하면 참고하시기 바랍니다. 그리고 컴포넌트화 한 부분을 따로이 디자인, 퍼블리셔쪽에 공유할 필요는 없습니다. 이 부분은 디자이너나 퍼블리셔가 프론트엔드에 대한 이해력이 높지 않다면 스킵해도 됩니다. 그쪽에서는 퍼블리싱 넘기면 할일 끝이라고 생각하거든요. 전 그런 환경이었습니다만.. 개인적인 소망으로는 질문자님의 환경이 되도록이면 다같이 프론트엔드에 대한 이해가 있어서 협업할 수 있는 환경이기를 바랍니다. 그 후의 개발은 개발자나 개발팀의 성향에 따르는 것이므로 평소대로 진행하면 되겠습니다. 그럼 참고가 되셨길 바랍니다.

profile picture

익명

작성자

2024년 07월 04일

어떤식으로 진행해야할 지 막막했는데 감이 좀 잡히는 거 같습니다. 자세한 답변 감사드립니다!

백승훈님의 프로필 사진

백승훈

프론트 엔드 개발자 (FE)2024년 07월 04일

저희도 이런 환경입니다.. 추가적으로 보통 퍼블이 주는 CSS나 이런건 재사용 함수화 이런것들이 거의 안된상태가 대부분이라 깡으로 public이나 폴더를 분리해서 넣고 import하고 추가적으로 예외나 개발자가 원하는 작업이 있다면 따로 css를 분리해서 작업하고 있습니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 07월 03일

퍼블리싱 외주를 받는 경우, 개발자와 디자이너, 또는 외주 업체간의 소통이 중요합니다. 일반적으로 HTML/CSS/JS가 얼마나 재사용 가능한지, 각 요소들이 어떤 목적을 갖고 있는지 등에 대한 정보를 공유해야 합니다. 공통 컴포넌트의 경우에는 사전에 정의된 스펙에 따라 작업되거나 팀 내에서 협의를 통해 결정되곤 합니다. 예를 들어 버튼, 입력 폼 등 반복적으로 사용되는 요소들은 공통 컴포넌트화하여 재사용할 수 있습니다. React 프로젝트로 옮기는 것은 개발자가 해야하는 일입니다. React 코드베이스로 전환하기 위해선 HTML을 JSX로 변경하고 CSS를 적절한 방식(inline 스타일, CSS Modules 등)으로 처리해야 합니다. 그러나 모든 것을 수동으로 처리하는 것은 시간이 많이 소요될 수 있으므로, 퍼블리싱 결과물을 리액트 컴포넌트로 자동 변환해주는 도구들도 존재합니다. 그러나 이런 도구들은 종종 세부적인 설정이 필요하거나 완벽하게 변환하지 못하는 경우도 있으므로, 지속적인 커뮤니케이션과 협업이 중요합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!