grace's dev_note

IDC DevOps 개발자가 배포운영까지! 하지만 서비스가 커질수록 DevOps팀이 분리되어진다. HTTP(HTML, HyperTextMarkupLanguage) JSX, Javascript XML, Extensible MarkupLanuage SMTP FTP ** scrapping ** og(openGraph) 웹에서 특정 주소를 입력했을 때 미리보기를 제공해주고싶을 경우 meta tag에 작성하여 웹 주소의 title, image, description 등을 미리 보여주는 것. @ twitter도 있음 서버사이드렌더링과 서버사이드렌더링이 아닌 것의 차이! 우리가 axios.get을 할 때 받아오게되는 소스코드는 useQuery까지 기다려주지 않고 처음 받아온 데이터만 화면에 그려주게된다. 만약 다이나..

https://domain.gabia.com/regist/today_domain https://cloud.google.com/free graphql vs REST-API 기존 REST-API READ axios.get(api주소) put, post, delete graphql은 endpoint가 하나인 REST-API이며 항상 POST방식을 사용한다 { "query": "mutation createBoard { createBoard(createBoardInput: {writer:철수, password: 1234, title:제목, contents:내용}) {_id, title, write, contents}}" } optimistic ui 작업량이 적은API 99% 이상 성공 가능한 API 만약에 실패하..

/* 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 자바스크립트 객체 표기법)) 탈취가능성있어..

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는 페이지가 시작되자마자 데이터를 불러오기 시작한다... 폼라이브러리 리액트 훅 폼 비제어 컴포..

로그인 이미지업로드 배포는 내용의 흐름이 있기 때문에 정말 중요하다!!! 로그인 프로세스 프론트엔드에서 html,css,js를 가져와 브라우저에 그려준 후 사용자가 데이터를 입력하면 백엔드로 데이터가 이동하고 데이터베이스에 데이터가 저장되며 저장된 데이터는 이후에 사용자가 데이터를 요청하면 백엔드가 데이터베이스에 데이터를 요청하여 가져와 브라우저에 그 내용을 그려준다. scale up 메모리세션을 사용해서 데이터를 저장 그러나 세션이 달라지기 때문에 한계가 발생, 트래픽이 점점 커짐 RoundRobin 한명씩 접속하게하는 방법 Redis 인증테이블 파티셔닝 수직파티셔닝 수평파티셔닝(샤딩) JWT 토큰 JSON WEB TOKEN 데이터베이스에서 데이터를 긁어오지 않아도 되게끔 해주는 것 아이디와 비밀번호를..