본문 바로가기

react57

[React, Vite, TS] Vite alias 절대 경로 설정 안녕하세요. 제니입니다! 오늘은 vite 환경에서 alias 절대 경로 설정하는 법을 정리해보려고 합니다. 이런 식으로 기존에 경로가 길었던 것을 @/ 절대경로화 하는 과정인데요! 1-1. vite.config.ts 셋팅 먼저 vite.config.ts 파일을 셋팅해주어야합니다! 위에는 완성된 코드의 일부 예시 캡쳐입니다. // vite.config.ts export default defineConfig(({ mode }) => { return { base: '/embed/', build: { manifest: true, }, plugins: [react()], resolve: { alias: [{ find: '@', replacement: path.resolve(__dirname, 'src') }], .. 2024. 3. 22.
[React] 화면 저장, 캡쳐 기능 구현하기(TypeScript) 안녕하세요, 제니입니다! 오늘은 화면 영역을 저장 및 캡쳐하는 기능을 정리해보려고 합니다. 굉장히 간단하고 추후에 계속 사용할 수 있는 영역이라 한 번 정리해두면 유용할 것 같아요! 1-1. 저장 버튼 만들기 어떤 모양으로 만드셔도 상관 없고 일단 버튼 하나 심플하게 만들어주세요. 저는 디자이너님의 icon 이미지로 적용했습니다. 1-2. html2canvas javascript로 canvas 영역을 잡아서 캡쳐하는 방법도 있는데 여러가지 문제점이 발생되더라구요. 영역 width, height를 잘 잡아주어도 잡히지 않거나 화면 영역이 까맣게 나오는 현상들이 발생되어서 제가 정착한 방법은 html2canvas 라이브러리 입니다! 1-2-1. html2canvas 다운 yarn add html2canvas.. 2024. 2. 26.
[React] SVG 이미지 커스텀, 재사용 하기 안녕하세요. 제니입니다! 저번에 통계 도구를 만들게 된 걸 공유하기 시작했는데요! 이번에 지난번에 블로그 포스팅했던 경험과 유사한 경험을 하게 되어 추가 포스팅을 하게 되었습니다. 전에 카카오톡의 프로필 원 모양인 스쿼클을 SVG로 만들어서 재사용하는 방법을 작성했었는데, 참고용 링크는 https://jenny0520.tistory.com/133 스쿼클 Squircle css 하는 법 - 트러블 슈팅 기록 디자이너들은 다 안다는 스쿼클 도형은 카카오톡 프로필에 쓰이고 있는 둥근 사각형 모형을 생각하면 된다. 이번에 회사 디자이너님이 웹 사이트에 적용하고 싶어 하셔서, 적용을 하는 과정에 jenny0520.tistory.com 이 링크입니다! 이것과 유사하면서도, 다른 방법으로 작성을 하게 된 내용을 시작.. 2023. 12. 13.
[react-calendar] 프로젝트에 달력 적용하기 TypeScript, react-calendar webpack 문제 해결 안녕하세요. 제니입니다! 오늘은 react-calendar 를 프로젝트에 적용한 기록을 남기려고 합니다. 그동안 여러 프로젝트에 적용을 했지만, 할 때마다 미루게 됐었는데요 ..! 이번엔 잘 기록해 두려고 합니다 ㅎㅎ 1-1. react-calendar 라이브러리 // npm npm install react-calendar // yarn yarn add react-calendar 저는 yarn을 사용하기 때문에 yarn add로 라이브러리를 설치해주었습니다. 1-2. 초기 적용 참고: https://github.com/wojtekmaj/react-calendar/blob/main/packages/react-calendar/README.md react-calendar의 github을 참고하면 쉽게 적용할 .. 2023. 11. 1.
[React] styled-component 복잡한 스타일 코드 개선 안녕하세요. 제니입니다. 오늘 정리하고 싶은 내용은 복잡한 기능은 아니지만, 프론트엔드 개발자에게 필수 역량이라 할 수 있는 style 관련한 이야기를 하려고 합니다. 최근엔 Chakra UI로도 작업해봤지만, 평소엔 styled-components를 사용하고 있는데요. Chakra UI의 inline style의 장점도 느꼈다가 styled-components로 다시 작업하려고 보니 style 코드가 길어지면서 너무 복잡하더라구요. 사실 코드를 쓴 저는 또 금방 찾기는 하지만, 협업을 하니까 코드가 한 눈에 보이는 게 좋은 것도 있고 또, 저는 열심히 UI를 만들어 놨더라도 동료가 UI가 왜 그렇게 작성되었는지, 또는 재사용이 되었는지 체크를 하지 않았을 경우 UI가 무너지는 현상을 꽤 여러번 겪어서 .. 2023. 9. 8.
[React] 날짜, 시간을 type int 형일 때 unix 타임 스탬프 변환하여 서버에 보내주는 방법 안녕하세요. 오늘은 서버와 통신할 때, int 형으로 날짜 및 시간을 보냈던 기록을 남겨보려고 합니다. 프론트엔드 개발자들 입장으로 시간은 보통 받는 경우가 더 많으니까 예를 들어 createdAt처럼 만든 날짜! 이런식으로 ? 그러다보니 보내주는 경우에 어떻게 해야 할까 고민이 들었습니다. 왜냐하면, 일단 기획에서 만들어진 형태가 이런 형태였기 때문에, 날짜도 연, 월, 일 따로 받아서 넣어줘야 하고 시간도 시, 분을 나눠서 받아주어야 했기 때문에 조금 더 고민이 들었거든요. 물론 state 나눠서 정보를 관리하면 되긴 하지만, 16223344000 처럼 보내야 하니까 그걸 어떻게 보내야 하지? 라는 궁금증이 바로 생겼어요. 안 해봤기 때문에,,! 옙 제가 안 해봐서 열심히 또 구글링을 했습니다. (이.. 2023. 6. 22.

티스토리툴바