- 전체보기(60)
- React(27)
- JavaScript(12)
- 알고리즘(4)
- typescript(2)
- ts(2)
- 구조분해할당(2)
- CS(2)
- 네트워크(2)
- 타입스크립트(2)
- http(2)
- 배열(1)
- cors(1)
- 깊은복사(1)
- API(1)
- 이벤트버블링(1)
- proxy서버(1)
- 호이스팅(1)
- 무한스크롤(1)
- 결제프로세스(1)
- 이미지(1)
- 옵티미스틱UI(1)
- 객체(1)
- 통신(1)
- state끌어올리기(1)
- Class Component(1)
- lazyload(1)
- react hook form(1)
- 라우팅(1)
- preload(1)
- globalState(1)
- 서버(1)
- useEffect(1)
- prevState(1)
- pagination(1)
- graphql(1)
- ESLint(1)
- Prettier(1)
- Debouncing(1)
- observable(1)
- 카카오map API(1)
- refresh_token(1)
- 업로드(1)
- 조건문(1)
- https(1)
- REST API(1)
- Optimistic UI(1)
- docker(1)
- 얕은복사(1)
- Husky(1)
- 폼라이브러리(1)
- 카카오map(1)
- props children(1)
- Sort(1)
- 리팩토링(1)
- this(1)
- 렌더링(1)
- Promise All(1)
- 결제방식(1)
- binding(1)
- HoF(1)
- restapi(1)
- 글로벌스타일(1)
- 페이지네이션(1)
- 단축키(1)
- HoC(1)
- GRAPHQL-API(1)
- State Lifting(1)
- Throttling(1)
- life cycle(1)
- closure(1)
- vscode(1)
- 생명주기(1)
- prefetch(1)
- sop(1)
- Infinite Scroller(1)
- ant Design(1)
- 로그인(1)
- destructuring(1)
Promise all, lazyload, preload, prefetch
현재의 이미지 업로드 방식의 비효율적인 부분은 1\. 이미지 찌꺼기가 남는다2\. 이미지 미리보기가 느리다.그냥 Promise로 함수를 만들어서 실행하게 되면, result1 → result2 → result3이 순차적으로 실ㄹ행되게 되고, 약 6초의 시간이 소요된다.
[React] 카카오 MAP API 사용하기
카카오 개발자사이트 (https://developers.kakao.com) 접속개발자 등록 및 앱 생성웹 플랫폼 추가: 앱 선택 – 플랫폼 – Web 플랫폼 등록 – 사이트 도메인 등록사이트 도메인 등록: 웹 플랫폼을 선택하고, 사이트 도메인 을 등록 (예:
구조분해할당(Destructuring)
객체의 구조분해할당시에는 순서는 중요하지 않지만 이름이 중요하다! (key값이 중요)배열의 구조분해할당시에는 순서가 매우 중요하고, key는 중요하지 않다! 특정 객체에서 지우고 싶은 데이터가 있을 때 어떻게 할까?❌ delete를 통해 원본을 건드리는 일은 바람직하지
[React] 폼 라이브러리
폼 라이브러리를 사용하면 굉장히 간편하게 코딩을 할 수 있다. 폼 라이브러리는 검증을 대신해주는 폼, state를 대신해주는 폼 등 종류가 매우 다양하다.제어컴포넌트 : setState발생 ⇢ 리렌더링, 버벅거림, 성능 느림비제어컴포넌트 : 리렌더링 발생하지 않음, 버
[React] HOF / HOC
HOF > High Order Function, 더 높은 순위에 있는 함수, 함수를 리턴하는 함수 aaa가 bbb보다 먼저 실행되기 때문에 더 높은 순위에 있는 함수(HOF)라고 할 수 있다. HOC > High Order Component , 상위에 있는 컴포넌
[React] Closure
classComponent : HOC(Higher Order Component)functional : custom-hooks stack(LIFO구조) : Last In First Out, 나중에 들어온게 가장 먼저 실행되는 구조 queue(FIFO구조) : First
[React] 렌더링 방식
로그인을 위한 accessToken을 변수에 넣고 global State로 사용했다.하지만 새로고침을 하게 되면 로그인 정보가 모두 날아가서 매번 다시 로그인을 해야한다.(⇢ 새로고침을 할 때, 새로운 html, css, js를 다시 받아오기 때문. 이전에 그려준 st
[React] 로그인 이해하기
변수에 저장하는 것은 RAM : 껐다가 키면 사라지지만 대신 빠름 DISK : 껐다가 켜도 사라지지 않지만 느림 인증정보를 계속해서 저장하게 되면 메모리가 꽉차게 되고 그렇게 지속되다 보면 서버가 터지게 된다. 이를 해결하기 위한 방법 두가지 scale-in : 메
[React] global State
글로벌 스테이트? 여러컴포넌트에서 사용되는 state 하나의 state가 여러 페이지에서 필요한 경우, 매번 props로 내려주는 것이 아닌 글로벌 스테이트를 사용하게 된다. props없이 여러 컴포넌트로 보내서 사용할 수 있다. fetchPolicy 백엔드에 AP
[React] 검색프로세스, debouncing, throttling
게시판에 들어오는 값들을 단어로 쪼개서 검색전용Board를 따로 만들고 그 단어가 몇 번 게시물에 있는지 게시물 번호를 저장해 놓은 뒤, 해당 단어로 검색이 들어오면 검색전용Board에 저장되어있는 Board의 값을 보여주는 형태로 보통 검색이 이루어진다.토크나이징 :
[React] 이미지 업로드 하기
uploadFile이라는 api가 존재할 때, 파일을 선택하고 uploadFile을 요청하게 될 경우, backend에서 storage로 파일을 전송하게 된다. 이미지를 저장할 때 실제 이미지는 DB에 저장되지 않고 storage에 저장 된다. storage에 저장될
[React] useEffect
함수형 컴포넌트에서의 생명주기관련 훅은 = useEffectcomponentDidMount 대괄호는 의존성 배열이라는 뜻componentDidUpdatecomponentWillUnmount하나로 합치기 가능추가렌더링 발생 가능무한루프 발생 가능count의 값을 변경하
[React] Class Component, this, binding
Class? > 객체이자 물건 만드는 설명서 class안에는 함수와 변수를 넣을 수 있고, new를 통해 생성할 수 있다. 클래스에서 함수와 변수를 사용할 때는 를 붙이지 않는다. 클래스에서 만들어진 함수를 메소드라고 한다. getFullYear, getMonth
[React] 글로벌 스타일
우리가 만들고있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일글로벌스타일은 \_app.tsx에 적용시켜주어야 한다.글로벌스타일은 선언해주는 곳과 사용해주는 곳이 다르다. FOIT (Flash Of Invisible Text): 브라우저가 웹 폰트를 다운로드하기 전에
[React] props-children
props.children자식들도 props로 넘길 수 있다.<부모컴포넌트><자식 컴포넌트>
[React] prevState
리액트에서는 setState로 상태 값을 여러번 변경해도 즉각적으로 state 에 변경된 상태값을 적용시키지 않는다.때문에 이렇게 작성을 해도 count는 하나씩만 증가하게 된다. 의도한대로 count가 5개씩 증가되도록 하려면?prev라는 임시저장공간을 사용하여 작성