# Daily study

64개의 포스트

JWT

참조: https://www.youtube.com/watch?v=1QiOXWEbqYQ로그인: 보안에 직결로그인 상태를 유지 → 토큰, 세션인증(Authentication): 로그인특정 페이지에 권한이 있는 사람임을 확인인가(Authorization)한번 인증

2022년 7월 12일
·
0개의 댓글
·
post-thumbnail

Day 28) 1. 결제 API 테스트할 신용/체크카드 준비 됐지?!=> Iamport 2. 결제 시간? new Date() 하는거 아니었어?! => Advanced-Date-Issue 3.setTimeout()...! 이거 사기당했네! => EventLoop/ TaskQueue

PG사 = patment Gateway( NHN, Nicepay, KG이니시스 )PG사 랑 계약을 해야한다.만약 NHN이랑 계약을 한뒤 바꿀려 하면 굉장히 복잡한 과정을 다시 따라야한다.그래서 결제솔루션 회사가 나왔다.결제솔루션은 각 결제회사에 대한 api를 만들어놔서

2022년 6월 16일
·
0개의 댓글
·
post-thumbnail

Day 27) 1. 그냥 텍스트 말고, 웹에디터로 꾸며줘! => Web-Editor 2. 로컬스토리지는 위험해 => Cross-Site-Script(XSS) 3. 하이드레이션에서 CSS 문제 발생 => Hydration-Issue

웹에디터: wysiwyg 라고 불린다.많이 쓰이는 wysiwygtoast-ui-editor 가 좋은듯.React-Quill 을 사용하겠다.React-Quill onChange는 html onChange가 아닌 만든 사람의 onChange여서 event가 들어가지 않는다

2022년 6월 15일
·
0개의 댓글
·
post-thumbnail

Day 23) 1. Next.js 렌더링에 이런 원리가 있다니!=> Deiffing / Hydration 2. 자바스크립트에 이런것이?! => Closure 3. 잠깐! 이것 먼저 실행해줘! => HOC / HOF

Token 은 변수에 담아줬기 때문에 새로고침을 하면 사라지는 것이다refreshToken을 배우면 그걸 이용하지만 배우기 전까지 임시로 localStorage를 이용해 Token을 담아주겠다.localStorage 는 보안상의 문제가 있어 권장하지 않는 방법이다.새로

2022년 6월 9일
·
0개의 댓글
·
post-thumbnail

Day 22) 1.로그인을 이해하려면 역사를 알아야돼! - Login 2. JWT토큰?? 이건 또 뭐야?! - JWT 3. 로그인 인증 토큰은 어디에 저장해?! - Recoil

백엔드에 로그인 기능이 있고 브라우저에서 email/pw 를 넘긴다.백엔드에서 DB에서 일치하는 이메일과 비밀번호가 있는지 확인하고있으면 그 유저가 로그인 했다 기록을 한다.( 백엔드 메모리 세션에 저장 )메모리: 램에 저장( 컴터 껐다 키면 사라짐 )디스크: 영구저장

2022년 6월 8일
·
0개의 댓글
·
post-thumbnail

Day 21) 1.뭐?! Rest와 Graphql 차이가 또 있다고? 2. 글로벌 스테이트?! props가 필요 없대!

1교시 포트폴리오 리뷰 검색부분도 컴포넌트로 나눠준다. 페이지도 리페치 해줘서 없는 페이지는 안보이게 한다. 2교시 props ![](https://v

2022년 6월 7일
·
0개의 댓글
·
post-thumbnail

Day20) 1. 검색을 이해하려면 다양한 DB를 알아야돼!-> Database 2. 검색 결과를 페이지네이션과 연결해야해!=> Search / pagination ,3. 검색하기 버튼 없이 검색을 한다고?! => Debouncing/ Throttling

업로드를 컴포넌트로 나눠준다.fileUrls 배열 안에 3개의 빈 문자열을 만들어준다.인풋타입 file은 display: none으로 숨김처리하고,fireRef로 uploadButton이 클릭됐을 때 ref로 클릭 시켜줘onChangeFile: checkValidati

2022년 6월 6일
·
0개의 댓글
·
post-thumbnail

Day 19) 1. 이미지 저장 과정을 알려주세요! => image-Process 2. 이미지? 데이터베이스에 저장하면 안돼?!=> Clound-Storage 3. 그 이미지는 문제가 있어요!

파이어베이스 페이지uuidv4 는 키값이 없을 때 사용하는 값uuid를 import 해줘야한다.타입스크립트도 설치이미지, 동영상 저장을 시키기 위해다른 회사에서 제공해주는 컴퓨터( 구글을 사용 )<input type = "file /> 을 사용하면 선택 버튼이 나

2022년 6월 2일
·
0개의 댓글
·
post-thumbnail

Day 18) 1. CORS? 이것 때문에 짜증나 죽겠네 => CORS 2. Graphql-API가 이렇게 쉽게 만들어지다니! => Grapthql/ Apollo-Server 3. 백엔드 개발자가 없을땐 이걸 써봐! => Firebase/ BAAS

BAAS : Backend as a service 1교시 포트폴리오 리뷰 맵을 이용하면 onClick이벤트도 하나만 주면 되고 새로 추가 할때도 한줄만 추가 하면 페이지 이동까지 할 수 있다. useState 타입 주는 방법 ![](https://velog.

2022년 6월 1일
·
0개의 댓글
·
post-thumbnail

Day 17) 1. API를 무료로 제공해 준다고?!=> Open-API / Public-API 2. 같이 데티어베이스 구경해볼래?=> Database / ORM 3. Node.js를 활용해서 백엔드 서버 만들자! => Node.js

구글 public api 검색open api를 이용해 백앤드 개발자 없이 만들어 볼 수 있다.HTTP / HTTPS 배포할 때 배우지만 HTPP는 주의요함이라 뜸AUTH 무료이지만 회원가입이나, 절차를 진행해야지 쓸 수 있음CORS NO: 브라우져에서 사용 불가능 (모

2022년 5월 31일
·
0개의 댓글
·
post-thumbnail

DAY 16) 1. 클래스컴포넌트?? 근데, 클래스는 또 뭐야?? => Class-Component 2. This ?! 뭔데 이게 자꾸 말썽인거야! => this 3. 컴포넌트가 살아 숨쉬나? 생명주기가 있대! => Component-Lifecycle

백엔드를 만들어 본다.fireBase를 이용하면 백엔드 개발자 없이 프로젝트 만들 수 있다.hasMore가 true일 때 마우스 스크롤이 내려갈 때 loadMore이 실행된다.마우스를 내리면 (1~20) (21~30) 까지의 데이터를 불러와 10개씩 계속 추가 된다.데

2022년 5월 30일
·
0개의 댓글
·
post-thumbnail

Day 15)1. 객체와 배열이 복사가 이상해.. => Shallow-Copy 2. 스크롤 형태의 페이지네이션 만들자! => Infinite-Scroll

오늘 목표 다음 페이지 클릭했을 때 2교시 댓글 수정 ![](https://velog.velcdn.com/images/songinho96/post/f2b54

2022년 5월 27일
·
0개의 댓글
·
post-thumbnail

Day 14) 1. 다른 페이지도 보여줘! => Pagination 2. State좀 나눠줘! => Lifting-State-Up

14일 차 수업스프레드 연산자 주석치리 한 것을 흩뿌려준다는 의미import Slider from "react-slick"; 타입 오류가 난다.타입 스크립트 쓸 때 추가해서 오류 없애기id를 이용해 onClick 을 똑같이 준다.refetch 를 onClick에 넣어주

2022년 5월 27일
·
0개의 댓글
·
post-thumbnail

Day 13) 1. UI의 전체적인 구조를 잡아놓자! => Layout 2. 모든 페이지에 동일한 CSS를 주자! => Global-Styles

인풋 창에는 벨류값이 존재한다.value 는 창에 나타나는 글내가 안된것: 우편번호 검색을 한후 수정할 때 zipcocde,address 디폴트값 가져오기해결 방법:defaultValue 는 value가 없을 때 작동한다. 그래서 value가 빈문자열로 있으니 디폴트가

2022년 5월 25일
·
0개의 댓글
·
post-thumbnail

Day 12) 1. 알림창이 예뻐졌어요=> Modal 2. 주고, 우편번호를 검색해보자 => React-Daum-Postcode 3. setState에 이런 기능이??! => prevState

유튜브좋아요/싫어요댓글(별)유튜브 스타일 주기!! 이중 부정연산자있으면 true, 없으면 false{props.data?.fetchBOard.writer}const writer = "철수" 를 boolean 타입으로 변경하고 싶으면{!!writer} 을 쓰면 true가

2022년 5월 24일
·
0개의 댓글
·
post-thumbnail

Day 11) 1. 클릭이 이상해... => Event-Bubbling / Event-Delegation 2. 이미 만들어 놨다고? 땡큐! => Library

이번주 핵심: 라이브러리3주차 커리큘럼오늘 목표:리뷰는 정답이 아니다.( 다양한 방법이 있다. )외워서 할 수는 없다. ( 안보고 할려면 5년 정도 걸림. )댓글 목록을 불러올 때는 댓글 게시글의 ID가 필요하다. 떄문에 variables로 아이디를 가져옴.BoardL

2022년 5월 23일
·
0개의 댓글
·
post-thumbnail

Day 10) 1. API로 받는 데이터 타입은? => garaphql-codegen 2. 유틸리티 타입도 배워보자! => Utility-Type 3. 협업하는데 규칙이 있어야지! => Eslint / Prettier / Husky

비밀번호는 보안상 불러오지 않고 보내기만 하면 알아서 틀렸을 시 백엔드에서 에러 처리 해줌return = 함수의 종료early exit 틀린거 먼저 종료하기리팩토링 패턴alert("asdfconfirm("입력")prompt("비밀번호 입력해주세요")const mypas

2022년 5월 21일
·
0개의 댓글
·
post-thumbnail

Day 09) 1. 이걸 쓰면 더 안전하다고? => typescript 2. 기존의 javascript 를 typescript 로 바꾸자!

디폴트값 보여주기수정하값 보여주기defaultValue 초기값수정할 때 입력을 안하면 빈칸으로 받을 때 방법.1\. mutation에서 제외하기2\. state 디폴트값에 props 넣기1번을 쓰는 방법이 좋음2번을 쓰게 되면 수정할 때 바꾸지 않아도 모두 들어가서 네

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

Day 08) 1. 컴포넌트를 재사용 해보자! 2. 등록 컴포넌트를 수정에 재사용하자

git stash 수정했을때 다시 풀포트폴리오 리뷰 / 컴포넌트 재사용 / 등록하기,수정하기인덱스 활용key는 중복되는 키가 들어가면 안된다.index는 들어가기 적절하지 않다.삭제하면 아래있는 인덱스가 올라오게 된다.버튼 클릭했을 때 페이지 이동id={el.\_id}

2022년 5월 18일
·
0개의 댓글
·
post-thumbnail

Day 07) 1. setState가 이런 원리였다고?! => SetState 2. 최신 데이터 다시 가져와줘! => refetch 3. 왜 목록에서 삭제가 안되지??! => key / index

깃 다시props drilling: props를 부모가 자식에게 물려주고 자식이 그 자식에게 물려주는 방식 많다고 좋은것은 아니다파일을 나누면서 container : 자바스크립트 영역 presenter : HTML ( JSX ) 영역기능을 연결시켜 주기 위해

2022년 5월 17일
·
0개의 댓글
·