profile
프론트엔드 개발자 도전기
post-thumbnail

[TIL] 22.12.23 - PWA / gitflow-workflow

모바일 앱(React-Native) 보다 PWA를 사용하면 모바일 페이지를 쉽고 빠르게 효율적으로 만들 수 있다홈페이지 만들기모바일 웹 만들기모바일 웹에 PWA 추가\-> 앱을 다운로드 받지 않고 접속하기만 해도 바탕화면에 아이콘 생성, push알림, 로고, 오프라인

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

[TIL] 22.12.19 - 테스트 코드 (Jest, snapshot, mocking)

기능 구현시 테스트 코드는 필수클릭해주는 기능마우스로 클릭하는거 대신해주는 코드 작성API 요청 등버전 업데이트 시, 이전 버전에서 테스트하던 페이지에 문제가 발생 (현재 기능들과 연관된 페이지들)\-> 이전 버전의 버튼들을 다시 테스트 해봐야 함\-> 테스트 코드로

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

[TIL] 22.12.15 - Optimistic-UI, SSR

옵티미스틱 UI란 요청이 서버에 도달하기도 전에 화면의 값을 바꿔버리는 것좋아요 기능의 경우 likeBoard를 요청하기도 전에 화면에 숫자를 바꾸고 계속해서 요청을 보낸다.그리고 요청이 성공해서 13이 응답으로 돌아올텐데 그때 다시 화면을 업데이트한다. 하지만 이미

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

[TIL] 22.12.14 - 이미지 미리보기(FileReader), PreLoad, Prefetch

페이지네이션에서 lastPage 계산 부분 -> useMemouseEffect에서 setState 부분이 있으면 useMemo로 변경해보기이미지 불러오기기존 이미지 업로드 방식을 효율적으로 개선브라우저에서 파일을 업로드 하고 백엔드에 전송 -> 백엔드에서 스토리지를 통

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

[TIL] 22.12.13 - 성능최적화 (Memoization - useMemo, useCallback, memo), Reflow / Repaint, Preload / Prefetch

countState를 버튼을 클릭해서 값을 변경하면 화면이 리렌더가 되면서 let으로 선언한 변수는 초기화가 된다.자식 컴포넌트가 return에 있을 경우, 부모가 리렌더 될때마다 자식도 같이 리렌더 되기 때문에 비효율적이다.useMemo로 변수를 기억한다.컴포넌트 리

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

[TIL] 22.12.12 -RefreshToken, Observable

refreshToken은 accessToken을 1시간마다 자동으로 인가해준다.accessToken을 만드는 과정에서 accessToken과 똑같지만, 2주 정도의 기간을 유지하는 refreshToken을 생성함accessToken은 payload로 전달, refres

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

[TIL] 22.12.09 - Callback / Promise / Async-await, 매크로-태스크큐 / 마이크로-태스크큐

callback함수 : 함수의 인자로 들어가는 함수api 요청 -> callback함수콜백 지옥코드 유지보수가 어렵다.콜백 지옥을 개선하기 위해 Promise가 나타남axios 요청\-> return 값이 new Promise()\-> 원래 .then, .catch을

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

[TIL] 22.12.08 - Iamport 결제, EventLoop / TaskQueue

PG사 (Payment Gateway) 결제 대행사 <-> 카드사PG사마다 PDF를 만들어 가이드를 제공했으나, 너무 번거로움결제솔루션 : PG사로 부터 pdf를 받아 결제 API 코드를 만듦\-> 결제 연동이 편리해짐\-> 아임포트 / 부트페이브라우저에서 상품

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

[TIL] 22.12.07 - Web-Editor (Reactquill), XSS, Dompurify, Hydration-Issue

텍스트 말고 웹에디터로 꾸미기react-quill 라이브러리설치yarn add react-quillreact-quill을 사용하면 pre-rendering으로 인한 document is not defined 문제가 발생함ssr: false\-> 프론트엔드 서버사이드에서

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

[TIL] 22.12.06 - Map, Link태그, SPA/MPA, Cache-Modify

카카오 지도 연동하기import Head from "next/head";html의 Head부분에 적용됨script태그를 통해 다운로드 받으면 window에 저장된다.\-> window.kakao그러나, 다른 페이지에서 위의 코드가 있는 페이지로 버튼 클릭으로 이동시 k

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

[TIL] 22.12.05 - 구조분해할당, Custom-Hooks (로그인검증, search, Usequery 등), Generic 타입

구조분해할당(비구조화할당)객체의 구조분해할당에서 순서는 중요하지 않다.대신, 이름(키 값)이 중요하다.배열의 구조분해할당에는 이름은 상관없지만, 배열이기 때문에 순서가 중요하다.\-> 사용하지 않는 변수는 ,를 사용해서 빈값을 입력해줘야 순서에 맞게 적용시킬 수 있다.

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

[TIL] 22.12.02 - 비회원 장바구니 기능 / React-Hook-Form /

폼 자동으로 만들기validation 라이브러리재사용을 위한 공통 컴포넌트 만들기

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

[TIL] 22.12.01 - Diffing / Hydration, 로그인 검증, Closure, HOF / HOC

로컬스토리지 저장 시 객체를 넣지 못하므로, JSON.strigify해서 문자열로 넣어주고,다시 가져올 때 JSON.parse해준다이렇게 하면 localstorage가 undefined 라고 오류가 발생한다.Next.js는 총 두 번 렌더링 된다.브라우저에서 주소를 입

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

[TIL] 22.11.30 - 로그인 기능

로그인 기능

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

[TIL] 22.11.29 - Under / Over - Fetching, 글로벌 스테이트, Recoil

검색어 결과 페이지 보여주기\-> 페이지네이션에서 boards count를 가져와서 count로 넘겨준다.페이지네이션, 검색창, 이미지 업로드 폴더 나누어주기count에는 page가 없음\--함수형 컴포넌트는 원래 함수prev도 매개변수이기 때문에 이름 변경이 가능하다

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

[TIL] 22.11.28 - 이미지 업로드 리뷰, 검색 기능, Debouncing

BoardWrite.containerBoardWrite.presenter이미지 uploads 폴더를 따로 분리해준다.onChangeFileUrls에서 index를 사용하는 이유\-> 이미지 등록 부분이 3개\-> fileUrls state에서 배열 안에 3개가 존재하기

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

[TIL] 22.11.24 - 이미지 업로드

이미지 업로드

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

[TIL] 22.11.23 - Server, Firebase

rest-api 서버 : expressgraphql-api 서버 : apollo-serverapollo-server, graphql 설치yarn add @apollo/server graphql서버API-Docs 타입API 함수하나의 함수로 실행하면 url이 만들어지고,

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

[TIL] 22.11.22 - CORS, Database

open API 사용 map : return이 있고 속도가 forEach 보다 느림 forEach : return이 없고 반복용, 속도가 map보다 빠름 -> forEach로 9번 요청 -> 기존에 있는 이미지를 덮어쓰게 되므로 setImgUrls에 prev와 스프

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

[TIL] 22.11.21 - spread연산자 활용해서 리팩토링, Class-Component, useEffect

isEditdefaultvalue \-> el={props.el}defaultvalue 주기props.setIsEdit?.(false) : 수정하고 수정 화면 사라지게 하기\-> props.setIsEdit이 있으면(?.) false로 해줘 \-> BoardCommen

2022년 11월 21일
·
0개의 댓글
·