제니의 개발일지/도움이 되었던 것 정리46 [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. [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. [ngrok] Invalid Host header 에러 해결법 안녕하세요. 제니입니다! 오늘은 평소에 자주 사용하던 ngrok 에러 공유하려고 하는데요. 이상하게 1번 플젝에선 잘 사용되는데, 2번 플젝에선 안 되더라구요 ㅠㅡㅠ 제가 자주 사용하고 있기 때문에 기록하려구 합니다! ngrok은 배포 전에 화면에서 보고자, 사용하고 있습니다. 1-1. 기본적인 사용법 설치를 모두 했다는 가정하에, ngrok http 80을 하면 되는데 80은 포트 번호라서 3300을 쓰고 있다면 ngrok http 3300 으로 해주면 됩니다! 1-2. Invalid Host header 에러 이상하게 이번 플젝만 Invalid Host header 에러가 생기더라구요. 이걸 해결하기 위해선 공식문서에 있는 방법과 다르게 ngrok http 3300 --host-header="loca.. 2024. 1. 3. [React] SVG 이미지 커스텀, 재사용 하기 안녕하세요. 제니입니다! 저번에 통계 도구를 만들게 된 걸 공유하기 시작했는데요! 이번에 지난번에 블로그 포스팅했던 경험과 유사한 경험을 하게 되어 추가 포스팅을 하게 되었습니다. 전에 카카오톡의 프로필 원 모양인 스쿼클을 SVG로 만들어서 재사용하는 방법을 작성했었는데, 참고용 링크는 https://jenny0520.tistory.com/133 스쿼클 Squircle css 하는 법 - 트러블 슈팅 기록 디자이너들은 다 안다는 스쿼클 도형은 카카오톡 프로필에 쓰이고 있는 둥근 사각형 모형을 생각하면 된다. 이번에 회사 디자이너님이 웹 사이트에 적용하고 싶어 하셔서, 적용을 하는 과정에 jenny0520.tistory.com 이 링크입니다! 이것과 유사하면서도, 다른 방법으로 작성을 하게 된 내용을 시작.. 2023. 12. 13. 이전 1 2 3 4 5 ··· 8 다음
