본문 바로가기

react57

[React] store 사용하지 않고 페이지 이동할 때 정보 저장하는 법(graphQL 사용, useNavigate, useLocation 활용) 안녕하세요! 저는 오늘은 Redux store를 사용하지 않았을 때 정보를 저장해서 다음 페이지에 보내는 법에 대해 고민을 하는 시간을 가졌습니다. 제가 지금 graphQL을 사용하여 구현중인데, 익숙한 Redux를 사용하지 않으니 아주 간단한 기능에서부터 헷갈리는 것들이 있더라구요. 오늘은 그 중, store로 데이터를 저장하지 않았을 때의 상황에서 페이지를 이동할 경우 어떻게 정보를 보낼 수 있는지에 대해 기록하려고 합니다. 1️⃣ useState로 state 관리하기 const [nameValue, setNameValue] = useState(``); state관리하는 것까지는 간단한 과정입니다. 2️⃣ input 스타일링 당연한 거지만, 시작하시는 단계의 계신 분들은 위 내용도 그대로 따라하시는 .. 2023. 6. 21.
TypeScript, React 비밀번호 정규식 확인 코드 안녕하세요! 이번에 비밀번호 변경을 하는 코드를 구현하면서, 에러 처리를 위한 정규식도 만들고 graphQL을 사용한 경험을 정리하고자 기록을 하게 되었습니다! 1️⃣ 새 비밀번호, 새 비밀번호 확인 input 만들기 // 새 비밀번호 input // 새 비밀번호 확인 input input을 먼저 스타일링 해줄게요! 2️⃣ state 만들기 // 새 비밀번호 const [newPasswordValue, setNewPasswordValue] = useState(``); // 새 비밀번호 확인 const [confirmNewPasswordValue, setConfirmNewPasswordValue] = useState(``); 3️⃣ input의 value 값 설정 4️⃣ onChange 이벤트 만들어주기 .. 2023. 6. 16.
TypeScript 시간 몇 시간 전, 날짜 표시하는 방법 오늘은 날짜를 표시하기 위한 작업을 했다. 1. 하루 전 데이터일 경우엔 ex) 3시간 전 이렇게 표시하기 2. 하루 이상 된 데이터일 경우엔 ex) 03.05 이런 식으로 표현하고 싶었다. import { format, isToday, differenceInHours } from 'date-fns'; export const formatCreatedAt = (createdAt: string) => { const date = new Date(createdAt); if (isToday(date)) { const hoursDifference = differenceInHours(new Date(), date); return `${hoursDifference}시간 전`; } else { return format(.. 2023. 6. 12.
Apollo GraphQL - 연습 1일차 왜 Apollo GraphQL을 사용하게 됐을까? - 새로운 프로젝트에 프론트엔드 개발자 1인으로 투입되었다. - 굉장히 큰 회사의 프로젝트인데, 처음 밑바닥부터 끝까지 만들어야 하는 구조였다. - 서버와의 통신에서 효율적인 것을 찾는 과정에서 팀의 리더의 Redux와의 차이, 처음부터 프로젝트를 만들었을 때 GraphQL을 도전하는 것, 왜 사용해야 하는가에 대한 이야기를 듣게 되었다. - 서버, 클라이언트 모두 GraphQL을 사용하게 되면서 도전을 시작한다. 1. 설정 - Create React APP을 통해 새로운 React 프로젝트를 생성해주었다. 2. Install dependencies yarn add @apollo/client graphql // yarn npm install @apollo.. 2023. 5. 23.
[React] 파일 다운로드 하는 법(TypeScript) 이미지나 동영상 파일 다운로드 하는 걸 어떻게 구현해야 하는지 고민했는데, 진짜 엄청 쉬운 기능이었다. 블로그 정리들도 잘 되어 있고 한번 익히면 금방 할 것 같다! 1️⃣ 클릭 이벤트 함수 const onClickImgLink = useCallback((srcUrl: string, name: string) => { fetch(srcUrl, { method: 'GET' }).then((res) => res.blob()).then((blob) => { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = name; document.body.appendChild(.. 2023. 4. 14.
Tex 문법 정리 처음으로 Tex를 사용해보았다. import TeX from '@matejmazur/react-katex'; import 한 후 사용하면 되고 예시로 두 점 B와 C를 이으면 ABC가 된다. 이렇게 사용하면 된다. Tex 문법 내용이 너무 많은데, 위키백과에 다 없는 내용들이 있어서 모든 자료를 참고하고 있다. 1. 위키백과 : https://ko.wikipedia.org/wiki/%EC%9C%84%ED%82%A4%EB%B0%B1%EA%B3%BC:TeX_%EB%AC%B8%EB%B2%95 위키백과:TeX 문법 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 이 문서는 한국어 위키백과의 정보문입니다.이 문서는 정책과 지침은 아니지만, 위키백과의 규범과 관습 측면에서 공동체의 확립된 관행.. 2023. 4. 10.

티스토리툴바