박주니 개발 정리

설명전) react 소스보기 숨기기는 개발자도구>Sources>Page에서 현재 본인이 작성한 코드가 노출된 것을 가린다는 의미입니다. 노출이 되었을 때 개발이 어떻게 되었고 어떤 api를 이용해서 진행되었는지 다 확인이 되기 때문에 보안상으로 숨겨야합니다. 저는 window 환경에서 작업을 기준으로 설명한 것이니 혹시 맥북으로 진행하셨으면 현재 내용은 참고하는 정도로만 진행해주시길 바랍니다. 1. package.json에서 scripts 안에 있는 build내용을 GENERATE_SOURCEMP=false를 추가합니다. "scripts": { "start": "react-scripts start", "build": "set \"GENERATE_SOURCEMAP=false\" && react-script..

설명 이유) 보통 엑셀 업로드 기능을 관리자페이지에서 데이터를 시각적으로 필요한 데이터를 출력하기 위해 엑셀 업로드 기능을 만드는데 예를 들어서 결제 완료, 결제 대기등 색깔 구분을 하지 않으면 구분하기가 어렵습니다. 또한 exceljs 버전 업데이트에 따라서 richText 적용 방식이 달라진 부분도 있어서 공유하기 위해서 설명을 적게 되었습니다. 가운데 정렬이랑 테두리 설정하는 것은 chatgpt에 물어보면 그대로 붙여서 사용하시면 가능하기 때문에 따로 설명은 하지 않았습니다. 참조 : 엑셀 업로드시 데이터 셋팅하는 방법 참고 (rowData) richText 사용하실 때는 별도 설치하실 것은 없습니다. rowData에서 특정값에 richText를 사용해서 색깔 구분을 합니다. const rowDat..

설명 이유) 마켓을 운영하다보면 리스트를 확인할 때 해당 상품에 이미지도 엑셀에 필요할 때가 있습니다. 저는 이미지를 ipfs형식으로 전환해서 불러오기 때문에 에 src로 url 넣으면 이미지가 나오지만 엑셀 적용은 다른 방식이기 때문에 공유하게 되었습니다. 먼저 이 설명을 듣기 전에 엑셀 업로드시 데이터 적용 방법 참고하시기 바랍니다. 엑셀 업로드해서 데이터 적용하는 방법은 동일합니다. 그부분에서 rowData에 image_url을 추가해서 삽입하는 과정이라고 생각하시면 됩니다. 1. ipfs url 을 따로 데이터를 rowData에서 제외해서 진행합니다. const assetKeys = Object.keys(asset); assetKeys.forEach((id, i) => { console.log("..

설명 이유 관리자 페이지를 하면서 데이터를 리스트로 보여주고 있지만 문서로 확인해야하는 경우도 있습니다. 그래서 해당 데이터를 문서 요구사항에 맞게 셋팅해서 출력을 하면 직접 엑셀로 수작업 할 필요 없이 자동으로 되어 시간을 절약할 수 있습니다. 필요 조건 1. 엑셀 출력할 데이터 배열 2. exceljs 설치 및 연결 (import ExcelJS from "exceljs") 엑셀다운로드 버튼을 클릭했다는 가정하에 진행하겠습니다. 1. header에 들어갈 data를 셋팅합니다. const data = [ [ { value: "A", width: 10 }, { value: "B", width: 60 }, { value: "C", width: 20 }, ], ]; 2. header 이후에 들어갈 실제 데이..