본문 바로가기

typescript17

[React] 새 창 HTML 미리보기, HTML 데이터를 로드하고 창이 닫힐 때 데이터를 제거하는 로직 구현하기 안녕하세요. 제니입니다!오늘은 새 창 html 미리보기 구현을 한 내용을 정리해보려고 하는데요.쉽게 생각해서, 제목, 내용을 입력하고 이메일을 보내는 양식이 있다고 가정할 때,이런 경우 프론트에서 발송하는게 아니라 서버측에서 발송을 하게 됩니다.백엔드 개발자가 html 양식을 가지고 있을거고그 양식을 받아 미리보기로 보여주는 화면을 만들어야 하는 상황이 발생되어서 정리하게 되었습니다.   원하는 결과는새 창에서 HTML 데이터를 로드하고 창이 닫힐 때, 데이터를 제거하는 로직을 구현하는 것이었습니다!   1. response 는 html을 string 형태로 반환api를 반환하는 걸 html 파일로 받게 되면 다운로드가 되므로,백에서 response 값을 html 그대로 넘겨주면 됩니다.   2. get.. 2024. 6. 14.
[코드 블럭] highlight 라이브러리 사용해서 code block 적용하기 (React, Typescript) 안녕하세요, 제니입니다! 오늘은 코드블럭을 구현하는 법에 대해 정리하려고 합니다. 요즘에 프로젝트에 1인 프론트엔드 개발자로 투입되어 있어서 (벌써 2번째,,,) 여러모로 해야하는 기능과 UI가 많아져서 좋네용,,,,,! 코드블럭 구현을 위해 오늘은 highlight라는 라이브러리를 사용하려고 합니다. 제 개발 환경은 React, TypeScript, yarn 입니다! 1. highlight 설치 https://highlightjs.org/ yarn add highlight.js 위 링크를 통해 공식문서도 확인하실 수 있습니다. 1-1. import import hljs from 'highlight.js'; import 'highlight.js/styles/a11y-dark.css'; css 파일도 동시.. 2024. 4. 4.
[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.
JavaScript 절댓값 변환 결론부터 이야기하자면 Math.abs(A - B) 형식으로 작성하면 됩니다! 1-1. 절댓값으로 변환하지 않을 때 사실 외울것도 없이, 너무 심플한 내용인데 기록하는 이유는 자꾸 놓치는 부분이 발생되어서 입니다..ㅎㅎ 개발 경험 1년 넘어가고 있다고 구글링이 많이 줄어들었는데 그러다보니, 생각 없이 코드를 짜게 되는 경우가 종종 있다는 걸 요즘 많이 느끼고 있어요. 포인트와 마일리지를 동시에 사용할 수 있는 상황이었는데 포인트가 마일리지보다 클 수도 있고 마일리지가 클 수도 있는 조건이 있기 때문에 처음에 별 생각 없이 이런식으로 코드를 짠 거죠.. 사실 이런 코드가 문제가 되는 건 없다고 생각은 하는데, 문제는 함수가 너~~무 길어지고 조건이 많아질수록 프론트 개발자로는 한 눈에 안 들어오는 코드가 될.. 2023. 11. 23.

티스토리툴바