본문 바로가기

react57

[React] 새 창 HTML 미리보기, HTML 데이터를 로드하고 창이 닫힐 때 데이터를 제거하는 로직 구현하기 안녕하세요. 제니입니다!오늘은 새 창 html 미리보기 구현을 한 내용을 정리해보려고 하는데요.쉽게 생각해서, 제목, 내용을 입력하고 이메일을 보내는 양식이 있다고 가정할 때,이런 경우 프론트에서 발송하는게 아니라 서버측에서 발송을 하게 됩니다.백엔드 개발자가 html 양식을 가지고 있을거고그 양식을 받아 미리보기로 보여주는 화면을 만들어야 하는 상황이 발생되어서 정리하게 되었습니다.   원하는 결과는새 창에서 HTML 데이터를 로드하고 창이 닫힐 때, 데이터를 제거하는 로직을 구현하는 것이었습니다!   1. response 는 html을 string 형태로 반환api를 반환하는 걸 html 파일로 받게 되면 다운로드가 되므로,백에서 response 값을 html 그대로 넘겨주면 됩니다.   2. get.. 2024. 6. 14.
[React] router 페이지 이동 시 스크롤 최상단 이동 안녕하세요. 제니입니다!오늘 정리할 내용은 전 프로젝트에서도 사용했는데, 놓쳤었던 것 같아서정리해보려고 합니다!   일단, 페이지를 이동할 때 useNavigate를 사용하고 있는데, navigate 함수로 이동할 때, 스크롤이 하단에 있으면 이동하는 페이지도 하단에 위치한 상태로이동되는 것을 확인하실 수 있으실 거에요.   지난 번 프로젝트 때는, 해당 내용을 방지하기 위해서 navigate를 사용하는 함수마다 사용해줬는데, 더 효율적인 방식이 있더라구요!   1. util 함수 만들어주기일단, scroll-to-top.ts util 파일을 생성해주었습니다.   import React, { useEffect } from 'react';import { useLocation } from 'react-rou.. 2024. 6. 7.
Ios safari input focus zoom-in 현상 막기 안녕하세요. 제니입니다!사실 해당 기록은, 미리부터 참고했어야 하는데 제가 어느정도 간과한 게 있었던 것 같아요.Ios는 늘 번거로운 css 수정기가 있는데 그 중 가장 귀찮은게 zoom-in 현상이었는데요..!이번에 맡은 프로젝트는 프론트 1인이었기도 하고나름 선배가 돼서 책임감도 있어가지구 조금은 더 세밀하게 보고 있었,,답니다..!    그러다 safari 테스트를 하는데, 로그인 페이지 input이 zoom-in이 되어서 굉장히 별로더라구요.역시 이 걸 체크해야지 하는게 좀 있었고다른 개발자들은 어떻게 하나 찾아보면서 여러가지 잘 정리된 개발자들의 글을 볼 수 있었는데   https://devsoyoung.github.io/posts/ios-input-focus-zoom/ focus 시 자동 zo.. 2024. 6. 7.
[코드 블럭] 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.
[CSS] 글자 말 줄임 처리(feat. 반응형) 안녕하세요. 제니입니다! 오늘은 자주 쓰는 글자 말 줄임 처리에 대해 정리해보려고 합니다. 기존에 많이 사용하고 있긴 했는데, 다시 사용할 때마다 구글링을 해서 적용을 했었는데요. 대부분의 구글링에서 적용하는 방법을 하게 되면 width를 고정해서 정리해두었거나 또는 max-width로 해두었지만 반응형이 고려되지 않는 경우더라구요. 그렇게 되면, 처음에는 문제가 없지만 추후 화면이 줄어들었을 때 줄어들지 않는 문제가 생길 수 있습니다! 1. 코드를 비교해보기 1-1. 구글링했을 때 많이 나오는 코드 방식 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vert.. 2024. 3. 26.
[React] assets image 폴더 리팩토링 안녕하세요. 제니입니다! 요즘 초기 셋팅부터 작업을 쭉 하다보니 코드 리팩토링까지 자율적으로 할 수 있는 기회가 많아서 동료분의 조언을 받아 진행 된 image 폴더 리팩토링을 정리해보려고 하는데요! 그 동안은 이렇게 assets안에 페이지나 컴포넌트별 폴더를 만들어서 이미지를 보관하고 있었는데요! 나름 생각하면서 정리하고 있었는데 재사용성이나 import 할 때의 이슈가 있었어요. 같은 폴더안에 넣어두어도 import의 문제가 있었고 나중에 다른 페이지에 추가될 때 재사용성에도 다시 찾아야하는 번거로움이 있었습니다! 1-1. image 폴더 내 index.ts 파일 추가 이렇게 image로 사용하는 폴더 내 index.ts 파일을 만들어두고 위 사진처럼 export를 모두 해줄 건데요 export { .. 2024. 3. 22.

티스토리툴바