본문 바로가기

제니의 개발일지74

svg data url 형식 변환 base64 인코딩 적용법(cf. 이미지 경로 오류) 안녕하세요. 제니입니다!오늘은 svg를 data url 형식으로 변환했던 기록을 남기려고 하는데요.html에 적용을 해야하는 페이지가 있어서, img 태그에 적용을 해야 하는데이미지 경로를 어떻게 해야할지 고민되는 분들께서 참고하시면 좋을 것 같아요!   1. encoder for SVG먼저, url로 바꾸는 작업부터 진행하게 될 텐데, 이걸 가능하게 해주는 좋은 사이트가 있습니다!   https://yoksel.github.io/url-encoder/ URL-encoder for SVG yoksel.github.io   무료 사이트구요!      해당 사이트에 가지고 계신 svg 파일을 끌어서 업로드 해주면      Ready for CSS에 data 형식으로 변환이 되는 것을 확인하실 수 있어요.  .. 2024. 5. 24.
[Node.js] express.js 시작, get 요청 - 1일차 안녕하세요. 제니입니다! React를 정말 사랑하는 프론트엔드 개발자인데, 여러모로 성장을 하는 방향을 고민하다 상사분께서 좋은 스터디 모임을 만들어주셔서 Node.js 스터디에 참여하게 되었어요! 이번 기록은 까먹지 않기 위한 저만의 기록이라서 혹시 같이 공부하실 분이 계시다면 참고해주셔도 될 것 같아요! 아주 심플한 과제를 주셨는데, express.js를 시작하는 것부터 막혔던 ^_^ 저는 https://velog.io/@kimhyo_0218/Node.js-express.js-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 [Node.js] express.js 시작하기 express.js는 node.js를 빠르고 쉽게 이용할 수 있게 해주는 프레임워크 입니다.설치 후 package... 2024. 4. 11.
[코드 블럭] 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] TOAST UI Editor 셋팅 + 커스텀 하는 법 안녕하세요. 제니입니다! 오늘은 Editor를 구현하게 되어서 해당 기록을 남겨보려고 합니다! NHN 사의 TOAST-UI 라이브러리를 사용했고 프로젝트 환경은 React, TypeScript, yarn 입니다 1. TOAST-UI 설치 yarn add @toast-ui/react-editor 1-1. TOAST-UI 셋팅 import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/toastui-editor.css'; 먼저 import를 해주세요. 코드의 전체 모습은 위와 같습니다. import React from 'react'; import { Editor } from '@toast-ui/react-editor'; import '.. 2024. 3. 27.
[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.

티스토리툴바