'분류 전체보기' 카테고리의 글 목록

본문 바로가기

분류 전체보기

[vue.js] storybook 도입 한 서비스를 여러 개발자가 거쳐가다보니 비슷한 성격의 공통컴포넌트가 여러 개 생기고 관리가 안되는 불상사가 생겨버렸다...(+문서화의 중요성을 깨달았다.)공통 컴포넌트 관리를 위해 스토리북도 도입해서 ui 컴포넌트, 기능 컴포넌트 분리하여 관리해보고자 한다. 이번 개발 Feature 는 대용량 파일 업로드 시 진행 상황 프로그래스바 다이어로그를 띄워주는 작업이다.해당 개발을 진행하기에 앞써, 스토리북도 같이 진행하려고 한다. 필요성컴포넌트 관리 효율화: 여러 개발자가 개발한 비슷한 컴포넌트들을 통합하고 관리하기 위해 필요재사용성 향상: 공통 컴포넌트를 만들어 다른 프로젝트에서도 재사용할 수 있다.시각적 테스트 용이성: 컴포넌트를 독립적으로 시각적으로 테스트할 수 있어 개발 및 디자인 프로세스를 향.. 더보기

웹 폰트 최적화 (Feat. cdn.jsdelivr.net 에러 사태 - 20240502) 20240502 운영 서버 에서 woff2 웹 폰트 가 Error 가 나서 사이트의 폰트적용이 안되는 이슈가 나타났다- 다른 압축 형식인 대체 폰트도 설정안해놔서 폰트 적용 안됨 (브라우저에 폰트가 캐싱이 되어 있어서 유저들은 몰랐을 수도..) 로컬에서 다운 받은 파일을 불러와서 해결 해당 이슈 몇시간 후인 GeekNews 에 올라왔다.. 다들 원인 파악 못하고 있었던 듯..https://news.hada.io/topic?id=14613 인증서 문제로 인한 cdn.jsdelivr.net 접속 불능 사태 | GeekNews생각보다 크리티컬한 이슈인데, 별도 언급이 없는 것 같아 공유드립니다.전 세계적으로 가장 큰 오픈소스 프로젝트 CDN 서비스인 jsDelivr의 엣지 도메인 중 하나인 cdn.jsd.. 더보기

AWS S3 + CloudFront 배포 생성 실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFront ? AWS 에서 제공하는 CDN 서비스. 캐싱을 통해 사용자게에 좀 더 빠른 전송 속도를 제공함을 목적으로 한다..html .css. .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이다.CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다. 콘텐츠를 전.. 더보기

Bitbucket 배포 환경 만들기 AWS S3 + CloudFront + Bitbucket 배포 환경 구성을 이어서 적어보았다. 이전의 글 참고 🔽https://eonhwa-theme.tistory.com/185 AWS S3 + CloudFront 배포 생성실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFronteonhwa-theme.tistory.com 🍒 Bitbucket pipeline 이 뭔데?🍒 AWS S3+CloudFront + Bitbucket 연동 🍒 Bitbucket tag base 배포 .. 더보기

jsPDF 이미지파일 pdf에 추가, 한글 깨짐 문제 (base64) Vue3 프로젝트에서 운행내역, 급여명세서, 재직증명서 등 pdf 다운받는 기능이 있다.테이블 형식으로 표출하는 내용이라 jspdf , jspdf-autotable 라이브러리 사용해서 구현해놓은 상태이다. jsPDF 함수 정리해놓은 github 참고 https://artskydj.github.io/jsPDF/docs/module-AcroForm-AcroFormComboBox.html#setOptions AcroFormComboBox - Documentation(PDF 1.5) If set, the new value shall be committed as soon as a selection is made (commonly with the pointing device). In this case, supp.. 더보기

[백준-Gold4] 11404 플로이드 - javascript https://www.acmicpc.net/problem/11404 11404번: 플로이드 첫째 줄에 도시의 개수 n이 주어지고 둘째 줄에는 버스의 개수 m이 주어진다. 그리고 셋째 줄부터 m+2줄까지 다음과 같은 버스의 정보가 주어진다. 먼저 처음에는 그 버스의 출발 도시의 번호가 www.acmicpc.net [풀이] 노드 --------간선-------> 노드 (도시) 버스 (도시) 예제) 도시 5개 버스 14개 시작점 끝점 비용 1 2 2 ... * 플로이드 알고리즘 설명 참고 : https://eonhwa-theme.tistory.com/178 [코딩테스트 알고리즘] 플로이드-워셜 - javascript ﹅ 플로이드-워셜 알고리즘 (Floyd-Warshall Algorithm) 모든 노드에서 다른.. 더보기

[알고리즘] 플로이드-워셜 - javascript ﹅ 플로이드-워셜 알고리즘 (Floyd-Warshall Algorithm) 모든 노드에서 다른 모든 노드까지 가는 최소비용 start → mid → end 표[2차원 배열]를 만들어 중간 경유지에 따라 값을 계속 갱신시킨다. 시간복잡도 : O(V^3) 다익스트라 : 한 노드 → 다른 모든 노드, O(ElgV) 플로이드 워셜 알고리즘은 다익스트라 알고리즘과는 달리 "모든 노드 쌍" 에 대해 최단거리를 구하고, 음의 가중치를 가지는 그래프에서도 쓸 수 있다는 것이 특징이다. 💡 그래프 알고리즘에 대해 읽어볼 좋은 글 https://yozm.wishket.com/magazine/detail/2411/ ﹆ 작동 원리 1 → 4 로 바로 가는 방법은 존재하지 않지만, 중간 노드 mid 를 3으로 둔다면, 1 → .. 더보기

[프로그래머스 level03] 순위 - javascript https://school.programmers.co.kr/learn/courses/30/lessons/49191 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [풀이] 문제의 예제를 보면 [4,3]은 4가 이긴거고 [3, 2]는 3이 이긴거다. 4 -> 3 -> 2 이므로 4는 2를 역시 이기게 된 게 된다. 해당 풀이를 모든 노드에서 모든 노드까지 최소비용을 구하는 "플로이드" 알고리즘을 써서 풀어보는게 나을꺼 같다. (이전의 글 참고: https://eonhwa-theme.tistory.com/178) ﹅ 문제 해결 방식 이차원 배열에 각 선수들의 .. 더보기

[프로그래머스-level2] 조이스틱 - javascript https://school.programmers.co.kr/learn/courses/30/lessons/42860 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr [풀이] AAA -> JAZ 로 만들기 위해서는 "▲ 커서" 9번 조작 : A→"J" "◀ 커서" 1번 조작 : 맨 뒤의 문자로 커서 이동 "▼ 커서" 1번 조작 : A→"Z" 총 11번 이동으로 만들 수 있다. 💡 고려 사항 1️⃣ 상하 이동 ▲ or ▼ 알파벳의 아스키 코드를 이용해서 13번째 값인 N 을 기준으로 짧은 이동 구한다 for(let i = 0; i < name.length; i+.. 더보기

"모던 프론트엔드" 에 대해 회사에서 담당하는 서비스는 Vue.js 를 사용하고 있다. 같은 프론트엔드 팀의 다른 서비스를 맡고 있는 팀원들은 React 를 사용하고 계시다. 담당하는 서비스가 다르더라도 매주 수요일마다 프론트엔드 세션을 하는데 이해도를 높이기 위해서 나름대로 둘 다 스위칭이 가능할 정도로 학습이 필요하다고 생각했다. 더 나아가 왜 이러한 프레임워크를 사용하며, 그 전에 바닐라 자바스크립트, HTML, CSS 기본이 되는 것들을 잘 이해한다면 어느 프레임워크를 사용하던지 잘 적응이 될거라 믿는다. 그런 점에서 프론트엔드 생태계에서 롱런하기 위해 프레임워크 같은 도구에 너무 매몰되지 말아야 한다. ﹆﹆ 모던 프론트엔드 란? 코파일럿 에게 물어보길 "Modern Frontend"는 일반적으로 Frontend 웹 개발에 .. 더보기

이전 1 2 3 4 ··· 15 다음

티스토리툴바