박주니 개발 정리

설명 이유) 마켓을 운영하다보면 리스트를 확인할 때 해당 상품에 이미지도 엑셀에 필요할 때가 있습니다. 저는 이미지를 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 이후에 들어갈 실제 데이..

1. nodemailer 공식문서에 코드를 기본 form으로 진행합니다. https://nodemailer.com/about/ Nodemailer :: Nodemailer Nodemailer Nodemailer is a module for Node.js applications to allow easy as cake email sending. The project got started back in 2010 when there was no sane option to send email messages, today it is the solution most Node.js users turn to by default. npm i nodemailer.com "use strict"; const nodemailer..

기본적으로 routing 하는 방법이 아닌 협업으로 해서 페이지 구분해서 진행시 구분하는 방법 기준으로 설명하겠습니다. 폴더 구조 app>main>test appRouting - main을 loadChildren으로 해서 자식 모듈로 가지고 와서 app module import 진행 mainRouting - 기본적으로는 main을 '/'으로 설정합니다. 보통 header 및 sidemenu 구성이 되는 페이지입니다. testRouting - main html에 router-oulet에 설정되어서 path에따라 페이지 변하게 되는 구간이 되는 router입니다. ts 영역 설명 1. main component를 생성합니다. ng g c main 으로 terminal에서 진행하시면 됩니다. 2. main c..

설명 이유) 프론트를 react로 진행하다가 이번에 신규 프로젝트는 angular로 진행하게 되어서 정리하게 되었습니다. angular 환경설정은 다 되어있다는 조건으로 진행하겠습니다. 1. terminal에서 npm install -g @angular/cli 진행합니다. 설명) angular/cli를 이용해서 component를 쉽게 연결하고 설정하기 위함입니다. 2. 메인으로 진행할 container를 생성합니다. terminal에서 ng generate component container을 진행합니다. 설명) container은 예를 들어서 메인페이지라고 했을 때 다른 component들을 bind해서 사용하기 위함입니다. 3. calendar module로 이용하기 위해 terminal에서 ng ..

나는 주로 virtualbox를 통해서 로컬상에서 nginx 연결해서 진행만 해보다보니 테스트서버를 만들어주셨을 때 그것을 내 컴퓨터에 어떻게 적용해야는 지 이해가 잘안됬습니다. 그런데 이번에 적용하면서 제가 host에 대한 이해가 부족하다는 것을 알게 되었습니다. host 연결 회고 C:\Windows\System32\drivers\etc hosts는 주로 어떤 용도로 이용되는 것일까 "hosts" 파일은 운영 체제에서 호스트 이름을 IP 주소와 연결하는 데 사용되는 설정 파일입니다. 이 파일을 편집하여 특정 호스트 이름을 특정 IP 주소로 매핑시킬 수 있습니다. 이렇게 하면 로컬 시스템에서 DNS(Domain Name System) 서버를 통해 호스트 이름을 검색하는 대신 직접 매핑된 IP 주소로 접..

설명 이유 보통 그룹으로 지정할 것도 없이 동시에 적용을 할려면 클래스 name을 가지고 와서 , 구분한다음 한번에 이벤트를 적용하면 됬지만 hover이나 동작에 대한 이벤트를 줄때에는 별도로 설정해야한다는 것을 알게 되어서 정리하게 되었습니다. 예시 코드 테스트 적용 미적용 조건 li테그에 테스트에 마우스를 갖다대면 h1테그 적용부분도 동시에 hover 적용해서 글자가 빨간색으로 변하게 만들어보세요 css .test-group:hover li, .test-group:hover h1 { color: red; } 설명) 먼저 적용하고자하는 범위에 상위에 있는 클래스를 가지고 와서 hover을 적용하고 그다음에는 상세 적용할 부분을 지정하면 됩니다. 회고) 이 방법을 몰랐을경우 hover을 동시에 적용하고자..

설명 이유 주로 풀스택으로 업무를 볼때에는 프론트에서 데이터를 바로 response해서 사용할 수 있게 백엔드에서 데이터를 셋팅해서 보내는데 이번에 타팀에서 만든 데이터를 가지고 중복된 값이 존재했을 때 이중포문으로 진행하면 되지만 관리하는 입장에서는 어떻게 접근해야할 지 생각하다가 filter을 이용후 group으로 접근했을 때 코드가 좀 더 간결해진다는 것을 알게되었습니다. 먼저 데이터가 key는 menu, sub-menu로 구성되어있고 menu가 중복되었을 때 중복을 제거하고 sub-menu가 속하게 만드는 것으로 접근을 해보겠습니다. const [asset, setAssetData] = useState([ { menu: "one", "sub-menu": "test1" }, { menu: "one"..