본문 바로가기

제니의 개발일지/도움이 되었던 것 정리46

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.
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.
스쿼클 Squircle css 하는 법 - 트러블 슈팅 기록 디자이너들은 다 안다는 스쿼클 도형은 카카오톡 프로필에 쓰이고 있는 둥근 사각형 모형을 생각하면 된다. 이번에 회사 디자이너님이 웹 사이트에 적용하고 싶어 하셔서, 적용을 하는 과정에 엄청난 트러블 슈팅들이 생겨났고 자료도 많이 없어서 기록을 시작했다. 1️⃣ svg로 이미지를 다운하기 디자이너님이 만들어 놓은 피그마 도형을 클릭해서 먼저 svg로 Export를 한다. 이 이미지를 쓰는 것은 아니고 이미지 안에 있는 형태를 사용해야 하는 것이다. 👌 예를 들어, 50x50 사이즈의 스쿼클 svg를 다운했다고 한다면, 이런 svg 코드가 나온다. 이걸 이용을 해서 시작해야 한다. 2️⃣ 재사용을 해야 하기 때문에, 컴포넌트 하나 만들어 놓기 예를 들면, 이렇게 만들면 된다. 내가 만드는 웹 사이트의 프로필.. 2023. 3. 30.
[TypeScript] useRef 모달 바깥 영역 클릭 이벤트 오랜만의 블로그 포스팅 매일 회사에서 코딩을 하면서 정신없는 시간을 보내다 보니 정리를 못했는데, 시간 날 때마다 유용하게 써먹었던 코드를 정리하기는 해야겠다. 반복적으로 쓰이는 코드들은 다시 내 코드를 찾아보는 경우가 많은데 몇 달사이에 그나마 코드 리팩토링을 하게 되는 나를 보면서 아주 조금의 배움과 반성을 함께 하는 중!! 옆에 사수님이 계셔서 정말 감사하고 도움이 많이 된다. 그 동안, 모달 바깥 영역을 구현했던 방식은 useState로 open이면 true가 되고 이런식의 코드였는데 그렇게 되면 발생되는 문제는 ❗ 영역 바깥을 클릭했을 땐 꺼지지 않을 수 있다는 것! 물론, position fixed를 해서 모달을 띄운다거나 할 경우엔, 여러 가지 방법을 통해서 모달을 끌 수는 있지만 번거롭다... 2023. 3. 27.

티스토리툴바