괴발개발 성장기

# 배경 주민등록번호 뒤자리를 *(별)표시로 해놓은 걸 풀어서 볼 때마다 이력을 남겨야했다. 그래서 눈을 클릭했을 때 API를 호출하고 싶었다. 그리고 눈이 풀렸을 때 눈을 빨간색으로 하고 싶었다. 몇 달이 지나고 Input에 disabled가 ture일때도 눈이 풀려야했다. 눈을 제어하는 방법을 찾아봤다. # 눈 제어 부분을 찾기 visible ? : } /> visible이 ture 일 때 눈이 열리고 false 일 때 눈이 닫힌다. # visible이 ture 일 때 눈 색 변경 - 파고 파고 파서 옵션을 알아냈다. twoToneColor="" - 눈이 열렸을 때 빨간색으로 변경하고 싶다. # 눈을 클릭할 때 함수를 호출하기 - 눈을 클릭할 때마다 API 호출하는 함수를 타고 싶다 - 클릭할 때마다..

# 배경 리스트에서 이름과 주민등록번호가 동일하면 가격을 합쳐주는 코드를 짰다. 이름과 주민등록번호 같은걸 매칭할 때 includes()를 사용했다. 그런데 이름에 삼성전자, 삼성이 있으면 삼성의 가격들이 삼성전자 가격에 합쳐졌다. 테스트를 할 때 이름을 다양하게 쓰다가 발견을 했다. String을 찾을 때 정확히 다 매칭되는 경우 가격이 합치는걸로 사용로 했다. # 리스트 정보 => 변수명 : list id 이름 등록번호 수량 금액 1 지니 990101-2****** 3 6272 2 지니 990101-2****** 1 1830 3 유지니 990101-2****** 2 3660 4 유지니 990101-2****** 22 55318 5 유지니 990101-2****** 2 4442 6 지니 990101-2..

# 배경 같은 코드인데 내 local에서는 실행이 안되고 다른 개발자 local에서는 실행이 되었다. 그래서 antd 버전을 체크하기로 했다. package.json를 보면 다 똑같은 걸 사용하는데 어떻게 버전이 틀릴 수 있냐고 생각할 수 있다. 그런데 package.json에는 아래와 같이 써있다. "antd": "^4.20.0", 내꺼는 4.20.12 이고 다른 개발자는 4.20.10 이었다. # ^ 의미 ^ 기호는 일반적으로 패키지의 버전 범위를 정의할 때 사용한다. 그래서 4.20.0이상 5.0.0 미만까지 사용이 가능하다. # 패키지 버전 조회 npm ls [패키지명] 해당 패키지 버전을 조회할 수 있다. # 예시 npm ls antd 버전을 알 수 있다.

# 배경 모달창 안에 From이 있다. 모달창을 닫으면 메모에 글씨가 리셋이 되지 않는 현상이었다. 리셋이 잘 안돼서 Form이 어렵다고 생각했다. 옆에 동료 덕분에 하는 방법을 알게 되었다. # 예시 - antd에 있는 Form 사용함 - 버튼을 누르면 모달창이 뜬다. - 메모를 적고 X 를 누르고 다시 버튼을 누르면 모달창안에 그래도 있다. const FormStudy = () => { const [form] = Form.useForm(); const [open, setOpen] = useState(false); //여기에 코드를 추가할 예정 return ( {setOpen(true)}}>모달창 setOpen(false)} width={600} > 저장 ) } 이 코드는 리셋이 안되는 코드이다. 여기..

# 배경 회사에서 리스트를 뽑아서 데이터를 조합해야했다. 우리 객체로 된 리스트를 뽑아서 거기에서 이름과 주민등록번호 두개로 중복제거를 한다. # 리스트 예시 => 11개 더보기 const dataList = [ { "donationId": 280090, "donationDate": "20230726", "memberId": 1, "memberName": "전원우", "donorName": "전원우", "quantity": 1, "amount": 1318, "birthDate": "960717", }, { "donationId": 280009, "donationDate": "20230306", "memberId": 1, "memberName": "전원우", "donorName": "박재범", "quant..

# 배경 회사에서 개발자끼리 스터디를 하기로 했다. 경매 서비스를 만들기로 했다. 거기서 결제하는 부분을 맡게 되었다. # 참조 https://portone.gitbook.io/docs/ready 결제 연동 준비하기 - PortOne Docs 포트원 회원가입 이후 관리자 페이지 내 결제연동 -> 테스트 연동 관리 탭에서 연동하고자 하는 PG사를 선택합니다. portone.gitbook.io 가입하고 PG사를 선택하면 된다. 나는 카카오페이와 NHN KCP, KG이니시스 연결했다. 하나만 연결하면 나머지는 수월한 편이다. 네이버 페이도 하려고 했는데 네이버쪽이랑 같이 해야했다. KG이니시스 안에 네이버 페이 기능이 있었다. 이유는 모르지만.... KG이니시스 여기에서 실제로 결제가 됐다 ㅠㅠㅠㅠㅠㅠㅠ 테스..

# 배경 회사에서 이미지 사이즈와 파일 사이즈에 제한을 두려고 했다. 백엔드에서도 제한을 뒀지만 API 호출하기 전에도 제한을 주려고 했다. # 내용 나는 1MB 이상 이미지 파일이면 에러 메시지를 띄웠다. const IMAGE_MAX_SIZE = 1 * 1024 * 1024; 만약 10MB로 하고 싶으면 1를 10으로 변경하면 된다. # 코드 const IMAGE_MAX_SIZE = 1 * 1024 * 1024; const FileStudy = () => { const [ imgErrMessage ,setImgErrMessage] = useState("이미지를 넣어주세요") return ( { if (e.target.files[0]) { e.target.files[0].size > IMAGE_MAX_S..

# 배경 회사에서는 페이지에 import를 하면 사용이 됐다. 그래서 내가 공부하는 프로젝트에서 import만 하면 실행이 될거라고 생각했다. import {Button,message} from "antd"; 그런데 버튼이나 모달창을 만들 때 바닐라 자바스크립 처럼 나왔다. # 해결 방안 App.js 파일에 아래 import 대신에 import './App.css'; Antd CSS를 import 했다 import 'antd/dist/antd.css'; 그럼 적용이 된다. # 관련 이슈 https://github.com/YooGenie/react-study/issues/20 Antd css를 적용시키자 · Issue #20 · YooGenie/react-study github.com

# 배경 회사에서 QR코드를 사용하는 서비스가 있다. 그런데 기획자 분이 QR안에 이미지를 넣고 싶다고 했다. # 사용하는 모듈 import QR from "qrcode.react"; # QR 생성법 # 예시 # 이미지 있는 경우 imageSettings={{ src: logo, width: 100, height: 100 }} # QR 색 변경하는 방법 fgColor={"yellow"} # 배경에 색 넣기 bgColor={"pink"} # QR 테투리 유무 includeMargin={true} includeMargin={false} # 참조 https://www.npmjs.com/package/qrcode.react qrcode.react React component to generate QR codes..

# 작성일 2021-09-01 # 문법 npm remove 패키지명 # 예시 npm remove bable-jest + 회사 Dooray(협업툴)에 적어 놓았던 것들을 하나씩 옮겨야겠다ㅠㅠ