grace's dev_note

/* eslint-disable no-unused-vars */ // 1. 문자 const getString = (arg: string): string => { return arg; }; const result1 = getString("바부"); // 2.숫자 const getNumber = (arg: number): number => { return arg; }; const result2 = getNumber(2); // 3.모두(any) const getAny = (arg: any): any => { return arg; }; const result31 = getAny(8); const result32 = getAny("안녕하세요"); const result33 = getAny(true); // 모두..

stateful / stateless scaleup / scaleout RoundRobin) 백엔드에 나누어진 데이터를 나누어진 백엔드를 돌면서 확인 최소연결(least connection)) 데이터가 제일 적은 백엔드에 데이터를 보내준다. Partisioning,,, 데이터 베이스 나누기 수직파티셔닝/수평파티셔닝(샤딩) 데이터베이스도 분산 가능 데이터베이스에서는 데이터가 디스크에 저장되어 느리지만 영구저장된다. Redis 메모리에 저장되는 데이터 (영구저장하게도 바꿀 수 있지만... 기본적으로는 비영구적인 데이터) 해시 방식은 데이터를 알수 없게 만든다 단방향암호화 패스워드 해싱!! 토큰에 사용자 정보 저장 -> JWT(JSON Web Token) ((JSON 자바스크립트 객체 표기법)) 탈취가능성있어..

Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 V 5 X 10 L 50 C 100 D 500 M 1000 For example, 2 is written as II in Roman numeral, just two ones added together. 12 is written as XII, which is simply X + II. The number 27 is written as XXVII, which is XX + V + II. Roman numerals are usually written largest to smallest from left to right. However..

Given an integer x, return true if x is palindrome integer. An integer is a palindrome when it reads the same backward as forward. For example, 121 is a palindrome while 123 is not. Example 1: Input: x = 121 Output: true Explanation: 121 reads as 121 from left to right and from right to left. Example 2: Input: x = -121 Output: false Explanation: From left to right, it reads -121. From right to l..

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would have exactly one solution, and you may not use the same element twice. You can return the answer in any order. Example 1: Input: nums = [2,7,11,15], target = 9 Output: [0,1] Explanation: Because nums[0] + nums[1] == 9, we return [0, 1]. Ex..

SPA, Single Page Application -> react, next ... router로 같은 페이지 안에서 영역 이동하여 보여준다 app.tsx에서 지도 불러오기(지도 미리 다운받아서 그려준 후 영역 이동시 보이도록) -> 지도가 안 들어간 페이지에서도 지도를 다운받기 때문에 비효율적이다 kakao.maps.load 사용

결제 프로세스 구조 일반결제 ) (카드결제, 계좌이체, 무통장입금(가상계좌)) 가상 계좌에 입금 / 환불 시 데이터베이스에 계좌를 입력받아 환불 결제 업체/API도 있어서 계약하면 자동화 가능 결제 솔루션(아임포트, 부트페이) payment gateway(NHN, 나이스페이, KG이니시스) 결제가 완료되면 해당하는 아이디값을 받아온다 (imp_uid 형태?) 받아온 아이디를 백엔드에 전달하면 백엔드에서는 아이디를 데이터베이스에 저장한다. 부분취소도 가능... PPT를 만들어서 test login 계정을 넣고 어디서 어떤 버튼을 누르면 결제가 된다 결제프로세스를 만들어서 pg사에 전달하면 카드사에 전달해준다. 이러한 서류작업까지만 약 2주~한달 걸리며 기능개발시간은 더 많이 추가된다. 카드사에서 rejec..

브라우저 저장소에 임시저장하는 공간(오늘 본 상품) 웹 에디터 결제 프로세스 지도(카카오맵, 구글맵, 네이버맵) 우리는 카카오맵 사용! REST 파라미터 const child={ name: "철수", age: 8, school: "다람쥐초등학교", money: 2000, hobby: "수영" }money와 hobby를 지우고 싶을 때? delete child.money delete child.hobby그러나 원본이 변경되기 때문에 좋은 방법이 아니다! const { money, hobby, ...rest } = child // rest {name: "철수", age: 8, school: "다람쥐초등학교"}브라우저 저장소 브라우저에 임시에 저장할 수 있는 저장소가 로컬스토리지, 세션스토리지, 쿠키 등이 있..

객체의 구조분해할당 const child = { nmae: "철수", age: 7, school: "공룡초등학교" } const {name, age, school} = childconst useQeury=()=>{ // 아무 내용이나 작동시키기(백엔드에 데이터 요청) return { data: "이것은 데이터입니다!", refetch: "이것은 리페치입니다!", fetchMore: "이것은 페치모어입니다!" } } useQuery() const {data} = useQeury()const classmates = ["철수", "영희", "훈이"] const [child1, child2, child3] = classmatesconst useState=()=>{ // 이런저런 로직 return ["데이터", ..

graphQL useQuery를 사용하면 화면이 그려지면 화면 안에 자동으로 요청하여 가져온다. axios는 요청하면 결과값을 result에 넣어서 받아와서 화면이 그려지면 데이터를 그려준다. graphQL방식이 편리할 수 있으나 상황에 따라서 axios 방식이 필요한 경우가 있다. mutation은 사용이 가능하지만 이외의 hook들은 함수 안에서 사용할 수 없으므로 이슈가 생길 수 있다. 원하는 곳에서 실행하고 원하는 곳에 담아오고 싶을 경우에는 useApolloCilient를 사용한다. useLazyQuery는 useMutation처럼 원할 때 실행하면 데이터를 불러오게끔 해줄 수 있다.. useQuery는 페이지가 시작되자마자 데이터를 불러오기 시작한다... 폼라이브러리 리액트 훅 폼 비제어 컴포..