lllIIllIl
212
2022-06-16 17:22:00
17
426

리액트 하드코딩 숨기는 방법 있을까요??


 let params = {query : 'SELECT * FROM users'}
      axios.post("/query" , {params}).then((res) => console.log(res))



리액트 로 클라이언트 구성하고 express로  rest api 구성하고있는 중

가끔 쿼리를 보낼 일이 있어서 저런식으로 rest서버에  쿼리를 하드코딩으로 넘길려하는데





저런식으로 관리자모드에서 전부 보여버리는게 마음에 걸리내요 . 

저걸 안보이게 해주고싶은데 어떤 방법으로 처리할 수있을까요??

지금 막연히 떠오르는건 .env에서 관리해야 하나 싶은데

방법이 뭐가있을까요??


0
  • 답변 17

  • 하루의_spring
    1k
    2022-06-16 17:23:35

    난독화 사용하십시오.

  • 인성 절구로 빻음
    4k
    2022-06-16 17:23:36

    react 어떻게 배포하고 계신건가요...?

    운영에서도 저렇게 보인다구요?

  • lllIIllIl
    212
    2022-06-16 17:25:45

    운영아니고 태스트단계고 그냥 집에서 혼자 공부하는 목표에요
    업무중사용하는건 

    스프링부트를 사용한 자바인데

    리엑트는 많이 생소하내요

  • lllIIllIl
    212
    2022-06-16 17:28:24

    @kimdogy1000 난독화 말하시는거면 GENERATE_SOURCEMAP=false 


    적용시켜보니까 안돼서 하다가 다른방법찾고있었는데 좀더 알아봐야겠내요
    샘플을보면 전부 빌드시에 사용하는데 

    일반적으로 개발 서버 스타트 할때 앞에다 사용하는걸로는 작동을 안하나요?

  • 인성 절구로 빻음
    4k
    2022-06-16 17:29:49

    개발이라서 저렇게 보이는 겁니다.

    배포하면 저렇게 보일 수 없어요

    react인데 저런거 보이면 잘못배포한겁니다

  • HJOW
    7k
    2022-06-16 17:30:42 작성 2022-06-16 17:32:49 수정됨

    쿼리는 원래 노출 안시키는 게 보통입니다.

    (난독화시킬 게 아니라 아예 화면소스에 넣지를 말고 백엔드(서버) 소스에서만 관리)


    배포 잘못한 문제는 아닙니다.

    저게 서버쪽 소스일 수가 없는 게,

    서버쪽 소스에서 axios 를 호출하지는 않죠?




    그냥 혼자서 갖고놀기위한 토이프로젝트이고 궂이 쿼리를 화면소스에 넣고 싶다면

    난독화밖에 답이 없습니다.

    화면에서 가지고 있는 한 개발자도구 노출은 절대 막을 수 없습니다.

  • lllIIllIl
    212
    2022-06-16 17:30:46

    @인성 절구로 빻음  
    혼자 개발하는거라 배포는 안해봤는대 
    빌드해서 배포하면 저렇게 안보인다는거죠?? 그럼 신경쓸필요가 없겠내요
    감사합니다 확인해보도록할게요!!

  • 88_Rafael
    133
    2022-06-16 17:31:06

    난독화 하는 것 + 번들러에서 source map 옵션을 끄는 것

    혹은

    Next.js 같이 Server Side Rendering 을 하거나,

    백엔드 서버를 따로 구축해서 쿼리를 직접 호출하지 않는 것


    이외에는 Client Side Rendering 이라는 한계 때문에 아예 안 보이게는 못하지 않을까 싶어요!

  • lllIIllIl
    212
    2022-06-16 17:34:15

    @HJOW rest api 서버도 같이 만들고있어서 
    rest api 규칙에 맞게  get 'users/1'  이런형태로 조회하는대
    간간히 이런형태로는 절대 조회못할거같은 쿼리가 많아서 예외로 
    쿼리를 다이랙트로 넘기게끔 만들고있는중이거든요

    rest api 를 사용중인데 쿼리를 쓸거면 따로 컨넥트 연결해서 쿼리만 다루는 기능을 만드는게 맞을까요??

  • lllIIllIl
    212
    2022-06-16 17:39:47
    감사합니다 일단 그냥 진행 하면서 나중에 빌드시에
    난독화하는 방식을 따로 알아보아야겠내요~!
  • 88_Rafael
    133
    2022-06-16 17:42:11

    > 이런형태로는 절대 조회못할거같은 쿼리
    요게 어떤... 케이스죠?

  • takin17
    4k
    2022-06-16 17:44:08

    개발을 잘못하신거 같네요

    클라이언트 api 요청 로직의 params에다가 SQL 쿼리문을 작성하셨네요

    수행되는 SQL은 서버 쪽 소스에 코딩하세요


    클라이언트는 API만 요청하게 하구요

  • HJOW
    7k
    2022-06-16 17:49:10 작성 2022-06-16 17:51:01 수정됨

    아무래도

    개인 연습용 프로젝트고

    원격으로 SQL 연습하기 위한 앱을 만들고 계신 것 같아요.

    SQL문 직접 입력해서 전송하면 실행결과 받아와 보여주는...



    그렇지 않고서야

    이런형태로는 절대 조회못할거같은 쿼리

    는 이 세상에 존재할 수 없죠.

  • lllIIllIl
    212
    2022-06-16 17:56:09 작성 2022-06-16 18:06:30 수정됨

    테이블 4~5개 조인된 쿼리를 

    rest api 형태로 어떻게 조회하나요????



    대충 인터넷에 굴러다니는 복잡한 쿼리 올립니다

    SELECT * FROM
    (
        SELECT p1.reg_COMPANY_CD REG_COMPANY_CD, p1.PROGRAM_CD PROGRAM_CD, NVL(p1.GENDER,p2.GENDER) ITEM, NVL(p1.cnt,0) ITEM_CNT,
            p2.reg_COMPANY_CD REG_COMPANY_CD2, p2.PROGRAM_CD PROGRAM_CD2, NVL(p2.GENDER,p1.GENDER) ITEM2, NVL(p2.cnt,0) ITEM_CNT2
        FROM
        (
          SELECT reg_company_cd, program_cd,
            CASE WHEN GENDER = 'M' THEN '남성'
                WHEN GENDER = 'F' THEN '여성'
                ELSE '기타' END GENDER,
            COUNT(*) CNT
          FROM
              (
                SELECT s1.reg_company_cd, s1.program_cd,
                  (
                         SELECT GENDER_FLAG FROM TM_MEMBER WHERE MEMBER_NO = s1.MEMBER_NO
                  ) GENDER
                FROM
                  (
                    SELECT reg_company_cd, member_no, program_cd
                    FROM (
                        SELECT /*+ INDEX(RV T_RESERVE_IDX1) */
                                reg_company_cd, member_no, program_cd
                          FROM TKTORA.T_RESERVE RV
                          WHERE  program_cd = ?
                                AND reg_company_cd = ?
                                AND tkt_can_type = 0
                                AND member_no IS NOT NULL
                          GROUP BY reg_company_cd, member_no, program_cd
                         UNION ALL
                         SELECT
                                reg_company_cd, member_no, program_cd
                         FROM TKTORA.t_ticket
                         WHERE
                                program_cd = ?
                                AND reg_company_cd = ?
                                AND ref_flag = 'N'
                                AND member_no IS NOT NULL
                         GROUP BY reg_company_cd, member_no, program_cd
                    )
                    GROUP BY reg_company_cd, member_no, program_cd
                  )s1
              )
          Group BY reg_company_cd, program_cd, GENDER
        ) p1 FULL OUTER JOIN
        (
          SELECT reg_company_cd, program_cd,
            CASE WHEN GENDER = 'M' THEN '남성'
                WHEN GENDER = 'F' THEN '여성'
                ELSE '기타' END GENDER,
            COUNT(*) CNT
          FROM
              (
                SELECT s1.reg_company_cd, s1.program_cd,
                  (
                         SELECT GENDER_FLAG FROM TM_MEMBER WHERE MEMBER_NO = s1.MEMBER_NO
                  ) GENDER
                FROM
                  (
                    SELECT reg_company_cd, member_no, program_cd
                    FROM (
                        SELECT /*+ INDEX(RV T_RESERVE_IDX1) */
                                reg_company_cd, member_no, program_cd
                          FROM TKTORA.T_RESERVE RV
                          WHERE  program_cd = ?
                                AND reg_company_cd = ?
                                AND tkt_can_type = 0
                                AND member_no IS NOT NULL
                          GROUP BY reg_company_cd, member_no, program_cd
                         UNION ALL
                         SELECT
                                reg_company_cd, member_no, program_cd
                         FROM TKTORA.t_ticket
                         WHERE
                                program_cd = ?
                                AND reg_company_cd = ?
                                AND ref_flag = 'N'
                                AND member_no IS NOT NULL
                         GROUP BY reg_company_cd, member_no, program_cd
                    )
                    GROUP BY reg_company_cd, member_no, program_cd
                  )s1
              )
          Group BY reg_company_cd, program_cd, GENDER
        )p2 ON p1.GENDER = p2.GENDER
    )
    ORDER BY ITEM DESC


    이런쿼리 rest로 어케하나요??

  • lllIIllIl
    212
    2022-06-16 18:16:47

    @takin 서버쪽은 요청하는데이터를 던져주기만하고 저안에 따로 쿼리를 직접 코딩하는방식은 피하게 만들다 보니 이렇게 됐내요

    이것저것 방법을 고민중입니다만 어렵내요

  • HJOW
    7k
    2022-06-16 18:22:29 작성 2022-06-16 18:30:23 수정됨

    이런쿼리 rest로 어케하나요??

    그냥 그 쿼리 서버에 박아서 돌리거나

    보통 자바 스프링같은 경우는 MyBatis 매퍼에 저 쿼리 넣어서 돌리죠.

    쿼리 이미 나와있으면 매우 간단한 일입니다.


    그리고 서버쪽이 쿼리를 갖고있는게 맞아요.

    서버쪽은 요청하는데이터를 던져주기만하고 

    그렇게 구현하면 안된다는 얘깁니다.
    화면이 쿼리를 갖고있으면 절대안됩니다.



    왠지 님

    rest api 에 대해 근본적으로 잘못알고 계신 것 같거든요.

    쿼리까지 이미 나와있으면 전혀 어려울 게 없는 일인데

    rest 가 문제가 아니라 rest 를 구현하기 위해 사용한 express 라는 그게 문제인거 아니에요?

    rest 는 자바 스프링으로도 구현할 수 있어요.

    물론이지만 express (node.js기반인 거 같은데)로도 당연히 가능하구요




    혹시나 해서 그런데

    express 로, 테이블 한번에 하나만 조회할 수 있는걸로 알고계신건 아니죠?

  • lllIIllIl
    212
    2022-06-16 18:43:03 작성 2022-06-16 19:00:59 수정됨

    서버단에 코드를 박으면당연히 금방끝나겠죠/마이바티스 이런건 지금 6년째 업무에 사용 중이고요

    rest api 방식을 사용하기 시작한게 최근이라 이해도 많이 떨어지며 이것저것 추가하면서 배우고있는 중입니다



    join 데이터를 가져오려면

    /api/xjoin?_join=pl.productlines,_j,pr.products&_on1=(pl.productline,eq,pr.productline)

    이런느낌으로 가져오게 만들려고 restful api를 만들고 있는데 다른 방법이 있나 물어보는거고요

    아직 구현중이라 어떤방식이 있나 찾는단계고요


    이 reatful api 를이용해 앞으로 제가 만드는 프로젝트 전부 디비를 저걸로 받아올생각입니다


    10개를 만들면10개치의 쿼리가 쌓일탠데 그게 싫어요




    get , post, put , delete , patch 전부 구현했는데
    join 구현을 안해서 어떻게 구현해야하나 막막한데 rest url 규칙 같은거 정리된곳 찾는거도 어렵내요



  • 로그인을 하시면 답변을 등록할 수 있습니다.