profile
꾸준히 새로운 것을 알아가는 것을 좋아합니다.

[React] Mobile Password 구현

네이버에서 상품을 결제할 때, 위와 같은 화면이 나타나고, 숫자를 입력할 때마다 동그라미 안에 color 색상이 변경되어진다. 위와 같은 화면을 react를 이용하여 나만의 방법으로 만들어보았다.구현된 함수들은 Class 함수를 만들어서 import를 해오는 방법으로

2022년 4월 23일
·
0개의 댓글
·

[React] 페이지별 title 메타태그 설정하기

useEffect를 사용하여 html 안의 title 을 변경할 것이다.또 다른 방법으로는, react에서는 helmet를 사용한다. useEffect 가 mount 될 때, title 은 props으로 전달된 "New Title" 이 되는 것이다.

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

[React Query] useInfiniteQuery

useInfiniteQuery 를 사용하여 무한 스크롤을 구현해보자.useQuery를 쓸 때는, data가 API로 받은 data에 직접적으로 접근한다.반면에, useInfiniteQuery는 useQuery와 다른 구조인 pageParams와 pages 를 받게된다.

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

React Query 사용해보기

이전의 글에서 우아한테크세미나 강의를 듣고 React Query에 대하여 정리해보는 글을 작성하였다. 복습도 해볼겸, 현재 진행 중인 프로젝트에 react query를 적용시켜, server state 를 관리 해보고자 한다.현재 Next.js + TypeScript

2022년 4월 10일
·
0개의 댓글
·

React Query와 상태관리 (2)

2월 우아한테크세미나 강의를 듣고 작성한 글입니다.이전의 글에서는 Data fetching, updating을 알아보았는데, 이번 글에서는 Caching , Synchronization에 대하여 알아보자.cacheTime : 메모리에 얼마만큼 있을 건지 (해당 시간 이

2022년 4월 9일
·
0개의 댓글
·

React Query와 상태관리 (1)

2월 우아한테크세미나 강의를 듣고 작성한 글입니다.주어진 시간에 대해 시스템을 나타내는 것으로 언제든지 변경될 수 있음즉 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터개발자 입장에선 관리해야하는 데이터들 !UI/UX의 중요성과 함께 프로덕트 규모가 많

2022년 4월 9일
·
0개의 댓글
·

styled-components 를 emotion 으로 변환하기

지금까지는 CSS-in-JS 인, styled-components 를 사용해왔었다. 최근에 emotion 으로 사용하는 분들이 점점 늘어가는 추세인 것 같아서 나도 이번 기회에 emotion에 대하여 알아보려한다.styled-components와 매우 비슷하여 배움에

2022년 3월 28일
·
0개의 댓글
·

CRA 없이 React 환경설정하기

Github Commit 내역 입니다.npm init 을 하여 package.json 을 먼저 생성합니다.// .eslintrc{ "extends": "plugin:prettier/recommended", "react-app"}tsconfig.json 에 설정된 사항

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

[React] 하이픈 ("-") 자동 생성

회사 업무를 하던 도중, 휴대폰 번호를 입력할 때, 하이픈 ("-") 이 자동적으로 입력되게 해달라는 요청을 받았다. 라이브러리를 쓸까도 고민을 해보았지만 이 기능만을 위하여 쓰기에는 라이브러리보다는 직접 함수를 생성하는 게 낫겠다 싶었다.이 과정에서 개발하는 개발자

2022년 3월 16일
·
4개의 댓글
·

SPA & SSR & CSR

spa 방식에서는,브라우저 -> 프론트 request프론트 -> 브라우저 response (html, js, ..)브라우저 -> 백엔드 request2번의 프론트서버에서 받은 js 파일 안의 react, redux, saga, axios 관련 코드를 통해서 requse

2022년 3월 15일
·
0개의 댓글
·

[React] SVG 활용법

이미지는 웹 페이지에서 많은 부분을 차지하는 리소스이다. 홈페이지의 로딩 속도의 가장 영향을 많이 주는 것이 바로 이미지, 사진 파일이다. 그래서 단순히 코드를 몇 줄 줄이는 것보다, 이미지의 용량을 줄이는 것이 웹페이지의 성능을 높이는 데에 더 효율적일 것이다. SV

2022년 2월 14일
·
0개의 댓글
·