ABBO 기술 블로그

이미지를 로딩하면서 가져올 때 하나의 큰 이미지를 각각 뿌려주는 방법으로 이미지를 처리하곤 했는데요, 이렇게 되면 리소스적인 낭비가 있을 수 있습니다. 1. 각 해상도별 이미지 출력 그래서 이런 부분을 개선하고자 img 태그에서는 아래와 같은 방법으로 보여줄 수 있습니다. 2. Lazy Loading 그리고 이미지를 각 브라우저에 맞게 스크린에서 보여주는 방법이 있습니다. 이미지가 한 화면에서 100개정도 로드를 해야 하는 경우 모든 리소스를 브라우저에서 호출하기 때문에 다운로드를 진행하는 동안 다른 이미지가 보이지 않는 문제가 발생하는데 이런 경우에는 지금 보고 있는 화면에서 불러오는 이미지만 표시하는 방법도 있습니다. 이렇게 loading="lazy" 옵션을 적용하게 되면 abbo-1 이미지가 호출된..

이번 글에서는 Spinner라고 하여 Button에 애니메이션을 넣고 돌아가는 버튼을 구현해보려 합니다. 샘플 코드 샘플 코드는 Codepen이라는 것으로 보여지도록 처리하였습니다. HTML 삽입 미리보기할 수 없는 소스 HTML 버튼은 심플하게 일반 버튼 내에 span 태그가 있는 것으로 설정하였습니다. Save CSS 기본적인 스타일과 버튼의 이미지를 부여합니다. body { font-family: system-ui; background: #f06d06; color: white; text-align: center; } .button { position: relative; padding: 8px 16px; background: skyblue; border: 5px; outline: none; borde..

View transitions 라고 하는 속성이 추가되면서 이제 화면 전환을 조금 더 쉽게 가능할 수 있는 방법이 출시되었다고 합니다. 원본 영상은 노마드 코더님의 유투브 영상이고, 여기 영상에서는 더 많은 정보를 제공하고 있으니 자세한 도움이 필요하시면 아래 영상을 확인하시는 것이 좋을 것입니다. https://www.youtube.com/watch?v=ObT87Xu_CO0 1. 기본적인 View Transition 사용하기 View transition 을 사용하는 것은 meta 태그내에 name='view-transition' 속성을 추가해주면 됩니다. 위의 태그를 추가해주면 되고, 동작 원리는 다음 페이지의 스크린샷을 본떠 해당 화면을 뿌려주는 방법처럼 적용된다고 합니다. 2. 더 구체적으로 사용하..

오늘은 자바스크립트의 얕은 복사와 깊은 복사에 대해 알아보고 구현하는 방법에 대해 알아보려합니다. 얕은 복사(Shallow Copy) 얕은 복사는 기존 객체의 주소를 복사하여 변수로 사용하는 방법입니다. 얕은 복사를 하게 되면 참조가 가능하기 때문에 조회하는 값은 같지만, 파라미터로 받아서 데이터의 변조가 일어나는 경우 기존 주소에 담긴 값도 변하는 특성을 가집니다. 아래의 소스에서 확인해보겠습니다. let obj = { "A": "a", "B": "b" }; let copyObj = obj; copyObj.A = "C"; console.log(obj.A); // C 깊은 복사(Deep Copy) 깊은 복사는 얕은 복사와는 다르게 새로운 객체가 생성되어 이전의 데이터만 복사하고 주소는 다르게 사용하는 방..

자바스크립트 언어의 특징상 null을 undefined로 표현합니다. 그리고 자바스크립트는 자바 언어와는 달리 인터프리터 방식의 언어이기 때문에 빌드를 할 때 에러가 나지도 않습니다. (물론 자바에서도 null 값이 들어갈 때 에러가 안 나고 있다가 런타임 에러가 발생하면 NullPointerException 이 발생합니다.) 그럼 이렇게 표현될 때 최대한 방어를 할 수 있는 Java의 Optional 클래스와 같이 쓸 수 있는 방법이 있을까요? 1. 기본 파라미터 값 넣기 함수(function)를 호출하는 파라미터에서 기본값을 설정할 수 있습니다. function nullSafeMultiple(number = 1) { return number * 2; } let num = undefined; nullS..

이번에는 개발을 진행하며 가장 많이 사용하는 라이브 템플릿 (단축어로 클래스 만들기)을 설정해보는 시간을 가지려 합니다. 이전에도 작성한 글이 있지만, 인텔리제이에서도 라이브 템플릿을 설정하여 자동완성으로 코드가 작성되도록 진행을 한 적이 있습니다. 인텔리제이에서 필요하신 내용이 있으면 아래 글을 참조해주세요! https://abbo.tistory.com/341 IntelliJ 단축어인 Live Template 만들기 이번 글에서는 인텔리제이 사용자들의 개발 생산성을 더 도와주는 라이브 템플릿을 만들어보려고 합니다. 라이브 템플릿은 기본 몇글자만 사용을 하여도 자동으로 템플릿을 만들어주는 방법을 abbo.tistory.com Android Studio 에서 Flutter 개발 중 가장 많이 사용하는 기능..

이제 안드로이드 스튜디오를 설치하고 프로젝트를 새롭게 만든 뒤에 발생한 에러입니다. 이전에 flutter doctor 에서 나온 에러는 인증에 관한 에러였지만 이번에 나온 에러는 SDK 에 관한 에러네요. FAILURE: Build failed with an exception. * What went wrong: Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'. > Failed to install the following Android SDK packages as some licences have not been accepted. platforms;android-33 Android SDK Platform 33 To ..

Flutter 의 개요 Flutter는 Google에서 개발한 오픈소스 모바일 앱 개발 프레임워크입니다. Flutter는 Dart 언어를 사용하며, 모바일, 웹 및 데스크톱 플랫폼에서 앱을 빠르게 개발하고 배포할 수 있도록 도와줍니다. Flutter는 다음과 같은 이유로 인해 사용하는 것이 유용합니다: 크로스 플랫폼 개발: Flutter는 하나의 코드베이스로 안드로이드 및 iOS 앱을 개발할 수 있습니다. 이를 통해 시간과 비용을 절약하며, 효율적인 개발을 할 수 있습니다. 빠른 개발: Flutter는 빠르고 효율적인 개발을 가능하게 합니다. Hot Reload 기능을 통해 코드 변경사항을 실시간으로 반영할 수 있어 개발자들은 빠르게 반응하며 앱을 빠르게 개발할 수 있습니다. 화면 구성: Flutter는..