profile
안녕하세요

[TIL] 10월 21일 Optimistic UI

자유게시판의 좋아요 기능을 클릭했을시의 동작을 살펴보면 아래와 같다.사용자가 좋아요 버튼을 누른다.onClick 함수가 실행되고 서버에 mutation 요청을 보낸다.서버에 보낸 요청이 완료될 때까지 await으로 기다린다.완료가 되었으면 refetch로 좋아요 갯수

5일 전
·
0개의 댓글

[TIL]10월 20일 Memoization

state를 사용할때 state값이 변경되면 컴포넌트가 다시 렌더되게 된다.이런 과정에서 꼭 다시 그려줘야하는 state가 있고 다시그려주지 않아도 되는 state가 있다고 할때 다시그려주지 않아도 되는 state까지 다시 그린다는건 불필요한 낭비일수 있다.Memoiz

5일 전
·
0개의 댓글

[TIL] 10월 19일 RefreshToken

로그인시 사용자의 정보를 AccessToken에 저장해 로그인기능을 구현했었고, 이 AccessToken은 일정시간(대략 1시간 ~ 2시간)이 지나면 만료되어 다시 로그인을 하도록 구현했었다. AccessToken의 만료시간 1분전에 로그인했다면 무조건 1분뒤에는 로

5일 전
·
0개의 댓글

[TIL] 10월 18일 Callback,promise,async/await

Callback? Api문서를 찾아보거나, 개념적인 내용을 찾아볼때 Callback 함수란 말을 많이 접할수 있게된다. Callback 함수의 의미는 크게 2가지 이다. 다른 함수의 인자로 이용되는 함수 이벤트에 의해 호출되는 함수 >다른함수의 인자로 인용될때

5일 전
·
0개의 댓글

[TIL] 10월 15일 결제모듈(IMPORT)

배달의민족에서 주문을 하거나, 쿠팡에서 물건을 살때 우리는 모두 웹사이트나 어플리케이션에서 결제를 한다. 결제도 예전처럼 어렵고 여러가지 많이 입력해야 하는것이 아니라 터치 몇번만으로 아주 간편하게 결제가 된다. 또한 넷플릭스나 유튜브 프리미엄등을 이용할때 매월 정해진

2021년 10월 21일
·
0개의 댓글

[TIL] 10월 14일 Kakao Map

맛집을 검색하거나, 여행을 갈때, 어떠한 위치를 찾을때 지도가 나오는경우가 많다.내가 검색한 주소에 대한 위치를 표시해서 보여주고 싶을때는 지도 라이브러리를 사용해야 하는데 크게 3가지 라이브러리가 있다.1.구글 라이브러리2.네이버 라이브러리3.카카오 라이브러리이중에서

2021년 10월 18일
·
0개의 댓글

[TIL] 10월 13일 WebEditor

네이버 블로그나 벨로그등을 보면 게시글 입력시 다양한 기능(글씨크기, 정렬, 글씨색 등등..)이 추가되어 있는 WebEditor가 있다.네이버블로그velog물론 네이버블로그와, velog는 자체개발한 내용이겠지만 웹에디터를 제공해주는 라이브러리가 있다.html태그인 t

2021년 10월 18일
·
0개의 댓글

[TIL] 10월 12일 브라우저장소

로그인관련 실습시 accessToken을 로컬스토리지에 저장해 accessToken 여부를 판단해 권한분기 작업을 진행했다.브라우저에 저장하는 방법의 경우 3가지가 있다.cookie, localStorage, sessionStorage브라우저 저장소 간단요약cookie

2021년 10월 12일
·
0개의 댓글

[TIL] 10월 8일 refetchQuery 보완방법

useMutation을 사용하고 바뀐내용을 다시 받아오기 위해서 refetchQuery라는것을 사용했다.댓글등록 완료후 등록된 댓글내용을 새로고침하지 않아도 자동적으로 받아오는 기능이다.리패치쿼리 예시이렇게 리패치쿼리를 이용함으로써 새로고침없이 바로바로 업데이트되는것처

2021년 10월 11일
·
0개의 댓글

[TIL] 10월 7일 ReactHookForm(yup)

게시글 입력, 로그인, 회원가입 등의 과정을 구현하면서 공통적으로 사용되었던 내용들중 하나가 바로 검증이다. 이메일 입력부분에 입력이 되었는지, '@'가 필요한지, 최소 자리수를 만족하는지 등등 이러한 조건들을 사용하려면 if문으로 제어를 해줘야 했고, 정규표현식을

2021년 10월 11일
·
0개의 댓글

[TIL] 10월 6일 권한분기(HOC,HOF,클로저)

로그인페이지를 구현했다면 생각해야 하는것이 누구에게 어떤 페이지를 보여줘야 하는지, 허용된 페이지가 아니라면 어떻게 처리해줘야 하는지를 생각해야 한다. >권한분기 작게는 비회원, 회원 크게는 비회원, 구매자, 판매자, 중개관리자 등등 여러가지의 회원 유형이 있을수

2021년 10월 7일
·
0개의 댓글

[TIL] 10월 5일 LoginProcess

프론트엔드 개발자에게 가장 중요한 part를 생각해보면 바로 LoginProcess이다. 로그인 과정에서 백엔드로 어떠한 정보를 넘겨주고, 어떤 방식으로 넘겨주고, 로그인 세션을 얼마만큼 유지해야 하고 등등 회원가입,로그인페이지는 모든사이트에 있지만 절대 간단한 기능

2021년 10월 5일
·
0개의 댓글

[TIL] 10월 1일 정규표현식

정규표현식은 문자열 데이터가 있을때 데이터가 적합한 용도인지 체크하는 기능이다.보통 홈페이지 회원가입 페이지에서 많이 사용된다.비밀번호 체크로직(예시)첫 문자가 영문자로 시작해야 한다.총 길이는 8글자 이상 16글자 이하여야 한다.비밀번호에 숫자가 하나 이상 들어와 있

2021년 10월 2일
·
0개의 댓글

[TIL] 10월 1일 Context-API, GlobalState

Props에 대해서폴더구조를 나눈 다음부터 주로 자식요소에서 주로 props로 부모요소로 부터 전달받아 사용을 많이 하였는데 이부분에서 비효율적인 부분이 있다.index에서 정의한 함수를 presenter 파일에서 사용하고 싶다면 아래와 같은 props 과정을 거쳐야

2021년 10월 2일
·
0개의 댓글

[TIL]9월 30일 검색(Lodash Debounce)

자유게시판, 물품판매게시판, 커뮤니티 대부분의 게시글을 사용하는 사이트들은 모두 검색기능을 지원하고 있다. 설정에 따라서 제목만 검색하거나, 내용만 검색하거나 제목 + 내용을 검색하거나 아니면 복잡한 필터를 사용해 검색하는 경우도 있다. >기본적인 검색기능 >검색

2021년 10월 2일
·
0개의 댓글

[TIL] 9월 28,29일 ImageUpload(2)

Image를 게시글에 성공적으로 등록하였지만 뭔가 부족한 느낌이다. Image는 text보다 용량도 크기때문에 용량제한도 하며 스토리지 저장소를 사용한다. 기존에 Image 등록방식 태그를 다시 살펴보면 다음과 같다. 위 태그를 보면 미리보기 상태에서도 스토리지

2021년 9월 30일
·
0개의 댓글

[TIL] 9월 28,29일 ImageUpload(1)

웹사이트, 어플들 특히 게시판 기능이 있는 사이트를 이용하다 보면 이미지를 업로드할 경우가 많다. 일반적인 텍스트를 업데이트 하는것이 아니라서 파일형식, 용량등 신경써야 할부분이 많이 있다. >이미지 업로드의 기본적인 방식 이미지 업로드는 기본적으로 html in

2021년 9월 29일
·
0개의 댓글

[TIL] 9월 27일 PostgresQL

프론트엔드 과정중 백엔드 실습을할 기회가 생겼다. 프론트엔드 컴퓨터에서 입력한 값은 백엔드 컴퓨터로 이동되고 백엔드 컴퓨터에서 데이터 베이스 컴퓨터로 이동된다. 또한 프론트엔드 컴퓨터에서 백엔드컴퓨터로 특정한값을 요청하면 백엔드 컴퓨터에서 데이터 베이스 컴퓨터에서

2021년 9월 27일
·
0개의 댓글

[TIL] 9월 23일 API 적용!!

오늘은 API 적용 방법에 대해서 배웠다.API 란?만약 오늘의 날씨정보를 사이트에 보여주고 싶다면 어떻게 해야할까?무식한 방법으로 생각해보면 네이버에서 날씨를 검색해 그때마다 사이트에 입력해 주는 방법이 있다.하지만 이런 방법은 너무 비효율 적이다.이럴때 날씨정보를

2021년 9월 23일
·
0개의 댓글

[TIL] 9월 17일 무한스크롤, state 끌어올리기

오늘은 어제에 이어서 무한스크롤 설정방법, 그리고 하위컴포넌트에서 상위컴포넌트를 제어할수 있게 하는 state 끌어올리기에 대해서 배웠다.State 끌어올리기react의 데이터 흐름은 단방향 이다.즉 부모컴포넌트에서 자식컴포넌트를 변경할수 있고 자식에서 부모를 변경할수

2021년 9월 19일
·
0개의 댓글