react3 포트폴리오 웹사이트에서 이력서 PDF 자동 생성하기 포트폴리오 통합 관리의 필요성취업을 준비하는 개발자로서 관리해야 할 것들이 많다. GitHub, 블로그, 이력서, 포트폴리오... 각각 따로 관리하다 보면 내용이 서로 달라지기 마련이다. 경력사항을 업데이트하면 이력서도 고치고 포트폴리오도 고치고 여기저기 흩어진 정보를 하나하나 동기화해야 한다.이 문제를 해결하기 위해 포트폴리오 웹사이트를 직접 만들었다. React + TypeScript + Vite 기반의 SPA로 스킬, 프로젝트, 경력, 수상 내역 등 모든 정보를 한곳에서 관리한다. 모든 콘텐츠 데이터는 data/ 폴더에 분리해두었기 때문에, 내용을 수정할 때 데이터 파일 하나만 고치면 웹사이트에 바로 반영된다.이력서도 자동으로 관리하고 싶다웹사이트에 모든 정보를 모아두고 나니 자연스럽게 다음 생각이.. 2026. 2. 13. 포트폴리오 사이트 미디어 최적화하기 들어가며포트폴리오 사이트에 프로젝트 캐러셀 기능을 추가하면서 이미지 35장과 시연 영상 1개를 넣었습니다.무작정 이미지와 영상을 넣은 결과 총 209MB의 미디어 파일과 함께 느려터진 로딩 속도, GitHub의 경고 메시지가 저를 맞이했습니다.이 글에서는 실제로 적용한 최적화 과정과 각 방법의 trade-off, 그리고 실제 성능 개선 수치를 공유합니다. 1. 문제 상황이미지 문제파일 형식: PNG (무손실, 고용량)개별 용량: 3~6MB총 35장: 139MB증상: 모달 열 때 로딩 지연, 슬라이드 전환 시 버벅임영상 문제파일 용량: 70MB (MP4)GitHub 경고: 권장 최대 크기 50MB 초과배포 후 404 에러: base URL 경로 불일치remote: warning: File public/vi.. 2026. 2. 8. [React] React 게시판 프로젝트에서 웹 에디터 api를 활용해보자 나는 요즘 우리 학교 컴공과 홈페이지를 리뉴얼하는 프로젝트를 진행하고 있다.이번에 개발중인 기능은 게시판 글 쓰기 기능인데 요구 페이지는 아래와 같다.이걸 생으로 만들어볼까 하고 찾아봤는데https://www.youtube.com/watch?v=xdj0xrS_FTE&t=915s이 영상을 보고 포기했다. 깊은 프론트 개발 경험이 없고 이번 프로젝트에 저걸 구현 할만큼의 시간을 쏟을 수도 없기 때문이다.그럼 남은 방법은 오픈소스 API를 활용하는 것이다. 후보는 4개로 추렸다.1. NAVER SmartEditor2https://github.com/naver/smarteditor2 GitHub - naver/smarteditor2: Javascript WYSIWYG HTML editorJavascript WY.. 2025. 3. 19. 이전 1 다음
