개발일지, 개인 또는 단체 포트폴리오 등
스켈레톤 로딩(Skeleton Loading), 스켈레톤 스크린 최근 여러 웹 사이트나 앱 등에서 유행하는 로딩 화면(프로그레시브 인디케이터)으로 스켈레톤 스크린이라는 것이 있습니다. 단순히 로딩 스피너나 막대기를 보여주는 대신, 화면의 레이아웃을 유지하면서 진행 상황을 표시하기 때문에 사용자의 입장에서 체감 로딩시간이 줄어든다는 장점이 있습니다. 구현 단계 실제 서비스에서는 훨씬 더 복잡하겠지만, 대략적인 구현 단계는 더보기…
carbon.now.sh 가끔 개발자 블로그를 돌아다니다 보면 문법 하이라이팅(syntax highlighting) 된 이미지 형태로 코드가 업로드되어 있는 것을 볼 수 없습니다. 복사 붙여넣기가 불가능하므로 경우에 따라 코드 복붙이 필요한 경우 원망스럽기도 하지만 디자인이 잘 되어 있어서 보기에는 좋다는 장점이 있습니다. carbon.now.sh 라는 웹 서비스에서 이러한 이미지를 제작할 수 있습니다. 다양한 테마와 언어를 더보기…
Swift: 배열의 reduce 스위프트(Swift)에서 배열(Array)의 reduce 기능은 배열을 순회하면서 누산기(accumulator)에 값을 계속 쌓아놓고 최종적으로 누산기의 값을 반환하는 reducer의 기능을 수행하는 고차 함수입니다. reducer의 사전적 의미와 매칭이 잘 안되는데 어떤 물질에서 원액(누산기의 값)만 추출한다는 의미로 생각하면 될 것 같습니다. 누산기의 값은 줄어들지 않으며 리턴식은 누산기에 합산됩니다. 그리고 마지막까지 순회한 후 최종적으로 누산기의 값만을 반환한다는 특성을 더보기…
원문 Tutorial: Convert Images to Grayscale in Swift 개요 이 글에서 이야기하는 Swift의 이미지에 그레이스케일 적용하는 세 가지 방법은 다음과 같습니다. 그레이스케일로 변환 가능하지만 화질을 유지하려면 시간이 걸리는 CIFilter 시간이 덜 걸리고 한 번에 여러 이미지에 적용할 수 있지만 투명한 요소(transparent elements)를 색상으로 바꾸는 CoreGraphics 필터 Swift UI에서 View에 더보기…
타입스크립트(TypeScript): HTML 요소에 이벤트 추가 이벤트 할당 방법은 자바스크립트와 본질적으로는 동일하지만, 일반 자바스크립트와 다른 점이라면 타입스크립트 코드에서는 변수가 어떤 타입인지를 명시해야 한다는 점입니다. 타입을 제대로 지정하지 않을 경우 코드상에서 빨간 밑줄로 표시되는 에러가 발생합니다. 1: Typescript 프로젝트를 생성합니다. npm과 vite를 이용하면 타입스크립트 프로젝트를 만들 수 있습니다. 첫 vite 프로젝트 더보기…
MD(마크다운 Markdown) 이미지 넣기 alt text – 대체 텍스트 (이미지가 나오지 않을 경우 대체할 텍스트 또는 이미지에 대한 설명, 비워도 무방)  이미지가 md와 같은 폴더에 있는 경우 ./파일이름 형식 사용합니다.  이미지 파일이 저장소에 저장되어 있는 경우 이미지의 raw 주소를 직접 사용할 수도 있습니다.  더보기…
아마존 웹 서비스를 처음 가입하면 1년 동안 프리티어(Free Tier) 기간이라고 해서 특정 인스턴스를 무료로 이용할 수 있는데, 이 때 게시했던 서비스 3개 (게시판, 미디 플레이어, 게임 정보 사이트)가 있습니다. 서비스 당시에는 웹에서 바로 접근해서 모든 기능을 사용할 수 있었습니다만, 지금은 인스턴스를 전부 삭제했기 때문에 접속이 불가능합니다. 당시에 그냥 없애기는 좀 더보기…
순서 기본 아이콘 및 추가 아이콘 이미지 파일 사이즈별로 준비 아이콘 변경 UI 만들기 info.plist 파일 변경 UI의 컨트롤러에 아이콘 변경 기능 부분 코드 추가 Swift(스위프트): 앱 아이콘 변경 기능 만들기 iOS 10 버전부터 아이폰/아이패드 홈 스크린의 앱 아이콘을 동적으로 변경할 수 있는 기능이 추가되었습니다. 이 기능을 추가하면 앱 더보기…
CSS MASK-IMAGE 아래와 같은 이미지를 마스킹(마스크 적용)하는 방법입니다. 참고: 이미지 마스킹(마스크)이란? 마스킹으로 덧씌울 PNG 이미지 파일을 준비합니다. 이 마스킹 이미지를 씌우면 투명한 부분은 표시되지 않고, 검은색 부분은 표시가 됩니다. HTML 파일에서 적용하고자 하는 요소에 다음 CSS를 삽입합니다. img { -webkit-mask-image: url(“ddmask.png”); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-image: 더보기…
Iron Galaxy 인터뷰 지연 기반 및 롤백 솔루션이 어떻게 작동하는지 설명하는 것 외에도 여러 프로젝트에서 롤백 작업을 수년 간 진행해 온 게임 개발자들의 의견과 관점을 듣고 싶었습니다. Iron Galaxy 소프트웨어 엔지니어이자 네트워킹의 주역인 Ramón “krazhier” Franco와 Iron Galaxy 디자이너 Adam “Keits” Heart와 함께하게 되어 매우 기쁘게 생각합니다. 그들에게 롤백에 대해 몇 더보기…