본문 바로가기

분류 전체보기

(78)

[ WEB ] iOS에서 SVG 이미지가 깨져 보일 때 해결 방법 회사에서 iOS개발 파트에 이슈 티켓이 발행되었는데, AOS에서는 이미지가 정상적인 해상도로 노출되는 반면, iOS 에서는 이미지가 깨져 보이는 이슈가 있었다. 해당 이미지는 SVG 벡터 이미지라 이론상으로 당연히 깨지는 이슈가 없어야 하는 게 맞는데 참 이상했다. iOS개발자 분이 해당 화면은 웹뷰라고 웹프론트 파트에 이슈 티켓을 넘겨주어 함께 찾아보았는데, 구글링을 통해 사파리 웹뷰에서 SVG깨짐 현상이 발생하고 있다는 사실을 알았고, 방법을 찾아보았다. 태그를 이런 식으로 object 태그를 사용하면 간단하게 해결할 수 있다. (, 도 가능) 구글링을 해본 결과 위의 방법이 가장 쉬워 보였다. 하지만 모든 SVG 이미지를 로 사용하기는 실질적으로 어려웠다. (서버에서 이미지..

[ Dev Tools ] 개발 툴 추천. Lazy Git 오늘은 회사 동료분이 추천해 준 개발 툴, Lazy Git에 대해 포스팅하려고 한다. Lazygit은 이름처럼, git을 더욱 편리하게 사용할 수 있도록 도와주는 도구이다. CLI를 이용하여 git을 사용하는 개발자들이 보다 편리하게 사용할 수 있도록 만들어졌는데, 대표적인 기능은 다음과 같다. Stage Individual Lines ( 스테이지 개별 선택 기능 ) 스페이스를 눌러 선택한 라인을 스테이징 하거나, v를 눌러 라인 범위 선택을 할 수 있다. 또한 a를 눌러 현재 hank 전체 선택도 가능하다. Interactive Rebase ( 양방향 리베이스 ) i를 누르면 양방향의 리베이스가 시작된다. 그런 다음 스쿼시(s), fixup(f), drop(d), edit(e), move up(ctrl..

[Docker] Docker 와 CI CD <01> 이라는 인프런 강의를 들으며 복습 및 정리를 위한 포스팅. 도커란 무엇일까? 도커란 컨테이너를 사용하여 응용 프로그램의 생성, 배포, 실행을 더 쉽게 할 수 있도록 설계된 도구이며, 컨테이너 기반의 오픈소스 가상화 플랫폼 & 생태계이다. 도커를 사용하면 프로그램을 다운받는 과정을 엄청 간단하게 만들 수 있는데, 이렇게 간단하게 만들 수 있는 이유는 애플리케이션과 그에 필요한 모든 종속성을 하나의 컨테이너로 묶어 환경을 일관되게 유지하고, 어디서든 동일한 환경에서 실행할 수 있게 되어, 각각 로컬의 서버, 패키지버전, 운영체제 등등에 따라 발생할 수 있는 여러가지 에러를 없앴기 때문이다. 컨테이너란 무엇일까? 컨테이너의 일반적인 개념은, 우리가 선박이나 차량, 기차등의 운송수단으로 짐을 옮길 때, 여러가지..

[ TS ] TypeScript 5.4 새로운 기능 알아보기. 2024년 1월 24일 타입스크립트 5.4 베타 버전 발표가 있었다. 이 포스팅은 해당 블로그를 보고 공부하고자 파파고와 함께 번역하며 옮긴 글이다. (※오역 주의) 우선 TypeScript 5.4 beta 버전은 아래의 명령어를 통해 다운받을 수 있다고 한다. npm install -D typescript@beta TypeScript 5.4의 새로운 기능을 간략하게 소개하면 아래와 같다. 1. Preserved Narrowing in Clousures Following Last Assignments 마지막 할당 후 클로져에서 범위가 좁아지도록 타입을 유지(보존)하다. 2. NoInfer Utility Type NoInfer 유틸리티 타입 3. Object.groupBy and Map.groupBy O..

[ WEB API ] Geolocation API를 통해 위치 정보 가져오기. 브라우저에서 사용자의 위치 정보를 받아오려면 어떻게 해야할까? Geolocation API를 통해서 사용자의 동의를 받아 위치 정보에 접근할 수 있다. 이를통해 웹 애플리케이션에서 사용자의 위치 정보를 받아서 지도에 표시하거나, 사용자의 위치 기반 서비스를 제공할 수 있다. Geolocation API는 navigator.geolocation 을 통해 접근할 수 있다. if ("geolocation" in navigator) { /* 위치정보 사용 가능 */ } else { /* 위치정보 사용 불가능 */ } 브라우저는 사용자에게 위치 정보 권한을 요청하고, 사용자가 동의하면 현재 장치에서 사용 가능한 최선의 방법(GPS등)을 통해 위치 정보를 가져온다. - Geolocation.getCurrentPos..

[ LocalStorage ] localStorage에서 배열(Array)다루기. 최근 작업 할 부분이 client측에서 `localStorage`를 통해 배열을 저장, 수정, 삭제하는 기능을 구현해야 해서 정리해 보았다. (localStorage는 웹 브라우저의 클라이언트 측에 데이터를 저장하는 데 사용되는 웹 스토리지) 1. 배열을 `localStorage`에 저장하기: // 예시 배열 const myArray = [1, 2, 3, 4, 5]; // 배열을 JSON 문자열로 변환하여 localStorage에 저장 localStorage.setItem('myArray', JSON.stringify(myArray)); * localStorage는 value에 문자열만 가능하기 때문에, JSON.stringufy()를 이용하여 배열을 문자로 바꾸어 저장해야한다. 2. `localStor..

[ CSS ] white-space 속성 /* Single keyword values */ white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces; /* white-space-collapse and text-wrap shorthand values */ white-space: collapse balance; white-space: preserve nowrap; /* Global values */ white-space: inherit; white-space: initial; white-space: revert; white-space: revert-layer; white-..

[ CSS ] list-style-type알아보기. list-style은 css속성 중 하나로, HTML의 목록 요소(``, ``, ``)등의 리스트에서 리스트 항목들의 마커(marker) 모양을 지정하는 CSS 속성으로, 텍스트 앞에 사용되는 숫자, 문자, 이미지 등의 마커 모양을 지정할 수 있다. `list-style-type` 속성은 다양한 값을 가질 수 있으며, 일반적으로 다음과 같은 값들이 사용된다. 1. `none` 목록 항목에 마커를 표시하지 않는다. 즉, 번호나 불릿 기호가 나타나지 않는다. 2. `disc` 원형 불릿 기호를 사용한다. (default) 3. `circle` 빈 원 기호를 사용한다. 4. `square` 네모 상자 기호를 사용한다. 5. `decimal` 1부터 시작하여 숫자로 번호를 매긴다. 6. `decimal-lead..

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

티스토리툴바