[Html/css/Javascript] 브라우저의 Scrollbar Width (스크롤바 크기)를 얻는 방법
1. Problem
Html/css/Javascript 프로그래밍을 하다보면, 브라우저의 Scrollbar Width (스크롤바 크기)를 얻어야할 때(ex. vw나 % 를 사용할 때, 가로 스크롤바가 생기는 현상 등)가 올 수 있습니다. 스크롤바 크기를 얻는 방법은 아래와 같은 Solution을 통하여 손쉽게 얻을 수 있습니다. js 를 사용하면 손쉽게 값을 얻어낼 수 있습니다.
2. Solution
const scrollbarWidth = window.innerWidth - document.body.clientWidth;
위와 같이 스크롤바가 있을 경우에 크기를 구하고 싶을 때가 있습니다.
...
[Zoned Datetime] 1970-01-01T00:00:00.000Z 의 의미? Unix 타임스탬프 기준시간
1. Problem
프로그래밍을 하면서 Zoned Datetime 을 사용하다보면 Date 1970-01-01T00:00:00.000Z 형식의 값을 많이 확인할 수 있습니다.
js 에서는 아래와 같이 new Date(0) 를 사용하면 위의 날짜가 출력되는 것을 확인할 수 있습니다.
new Date(0);
// Thu Jan 01 1970 09:00:00 GMT+0900 (한국 표준시)
1970-01-01T00:00:00.000Z 에 무슨 일이 있었길래 이 값을 컴퓨터에서는 많이 사용하는 것일까요?
2. Solution
1970-01-01T00:00:00.000Z는 유닉스 타임스탬프(epoch tim...
[JavaScript/JS] 배열(array)의 중복 값/원소/요소를 제거하는 방법
1. Problem
JavaScript/JS 를 사용하면서 배열(array)의 중복 값/요소를 제거 해야하는 경우가 있습니다. 효율적이고 빠르게 배열의 중복되는 값들을 제거하는 방법은 무엇일까요? 아래의 방법들 중 가장 자신에게 편리한 방법을 사용하시는 것을 권장드립니다!
2. Solution
2.1. Set을 이용한 방법
const arr = [1, 2, 2, 3, 3, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
Set 은 중복을 제거해주는 객체입니다. 위와 같은 방식으로 손쉽게 ...
[Visual Studio(VS) Code] 여러줄(가로&세로) 스크롤/드래그(멀티 커서) 다중 선택하기
1. Problem
Visual Studio(VS) Code 를 사용하면서 세로 스크롤/드래그로 여러줄 다중 선택을 해야하는 경우가 있습니다.
// before
const arr = [
a,
b,
c,
d,
];
// after
const arr = [
a1,
b1,
c1,
d1,
];
위의 예시와 같은 경우에 변수의 세로에 한 번에 1을 붙여야되는 요구사항이 있을 수 있습니다. 혹은 ‘이나 , 를 추가하는 등 다양한 작업을 할 수 있을텐데요. 일일히 하나씩 직접 수정하는 것은 매우 번거로운 일입니다. 특히 개수가 많으면 더욱 귀찮은 일이죠. 이 때, 한 번에 세로로 스크롤하여 해결할 수 있는 방법이 있을...
[html/css] 부모 크기(width) 무시하고 100% 크기 주기, vw로 브라우저 전체 크기로 width 설정하기
1. Problem
html/css 를 사용하면서 자식 html tag 가 부모 tag 를 크기(width)를 무시하고 100% width 크기를 주고 싶은 상황이 있습니다. 부모 width 가 100% 가 아닌 경우에 자식에 width 100% 를 주면 부모를 넘어설 수 없기 때문에, 화면 전체 width 를 차지할 수 없습니다. 아래와 같은 상황이 예시입니다. 어떤 방법을 사용하여 위의 문제를 해결할 수 있을까요?
<div>
<nav>width를 화면 전체로 하고 싶은 tag</nav>
</div>
div {
width:50%;
}
2. Solutio...
[Java/Spring Boot] IntelliJ 프로젝트 클린(Project clean)/캐시 제거(invalidate Caches)하는 방법, 오류 해결
1. Problem (문제)
IntelliJ 에서 Java/Spring Boot Project 를 사용하다 보면 빌드가 잘 되지 않는 문제가 발생할 때가 있습니다. 오류가 발생하면서 빌드가 되지 않고, 크게 수정한 코드가 없는데 이상이 발생하는 경우가 많습ㄴ디ㅏ.
갑자기 파일을 읽어오지 못하거나 빌드를 하지 못하는 케이스가 발생할 수 있습니다.
기존 빌드가 남아있을 때, 파일을 제거하거나 이동하는 등에 다양한 동작을 하고 나서 이러한 문제가 발생핧 가능성이 높습니다.
혹은 원인 모를 이유로 빌드가 잘 되지 않을 때, 아래와 같은 해결방법을 시도해보시면 도움이 되실 것입니다.
2. Solutio...
[Java/Spring Boot] IntelliJ Project 빌드 클린(build clean)하는 방법, 오류 해결
1. Problem (문제)
IntelliJ 에서 Java/Spring Boot Project 를 사용하다 보면 빌드가 잘 되지 않는 문제가 발생할 때가 있습니다. 오류가 발생하면서 빌드가 되지 않고, 크게 수정한 코드가 없는데 이상이 발생하는 경우가 많습ㄴ디ㅏ.
기존 빌드가 남아있을 때, 파일을 제거하거나 이동하는 등에 다양한 동작을 하고 나서 이러한 문제가 발생핧 가능성이 높습니다.
혹은 원인 모를 이유로 빌드가 잘 되지 않을 때, 아래와 같은 해결방법을 시도해보시면 도움이 되실 것입니다.
2. Solution (해결방법)
IntelliJ 우측 상단의 Gradle 탭을 클릭한다
...
[Android/React Native] 전체화면(Full-Screen Mode) 종류, lean back/Immersive/sticky immersive 개념 정리
Android/React Native 관련 개발을 하면 다양한 전체화면 관련 설정을 볼 수 있습니다. 전체 화면 모드(Full-Screen Mode) 종류는 어떤 것이 있을까요? 동영상, 게임, 이미지 갤러리과 같은 다양한 어플리케이션에서 유저들이 앱에 더 집중할 수 있게, 다양한 종류의 설정을 제공하고 있습니다.
lean back
lean back 모드는 사용자가 동영상을 시청할 때와 같이 화면과 거의 상호작용하지 않을 때 사용합니다.
시스템 표시줄을 다시 표시하려면 사용자는 화면 아무 곳이나 탭하면 다시 메뉴 확인 가능합니다.
Immersive
...
[React Native/RN/Android/IOS] 앱 실행이 제대로 되지 않을 때, JS Debugging 비활성화 하기(리액트 네이티브)
1. Problem
React Native/RN/Android/IOS 를 개발하다가 JS Debugging 때문에 앱 실행이 제대로 되지 않을 때가 있습니다. 한 번 디버깅을 위하여 이것저것 학습을 하다가 JS Debugging을 설치한 이후로, 앱 실행 시마다 JS Debugging 이 실행되어 앱 실행이 제대로 되지 않을 때가 있었습니다. 이 때, 디버깅을 비활성화하는 방법은 무엇일까요?
2. Solution
아래의 방법으로 해결할 수 있습니다. 저는 첫번째 방법을 사용하여 간단하게 해결했습니다.
기기(또는 에뮬레이터)에서 앱을 제거한 후, RN 명령어를 입력하여 앱을 다시 시작하면 원격 디버깅이 ...
[Javascript] 올림, 내림, 반올림 함수 (Math.ceil / Math.floor / Math.round) 사용 방법
자바스크립트(Javascript)를 사용하다보면 소수점 처리를 하기 위하여 올림, 내림, 반올림 함수를 사용하고 싶을 때가 있습니다. 이 때 어떤 함수를 사용해야 할까요? 간단하게 Javascript 의 Math 함수를 사용하면 됩니다. 사용 방법은 아래와 같습니다.
올림 (Math.ceil)
Math.ceil();
소수점 위에서 올림 처리를 하고 싶다면 위의 명령어를 사용합니다. 사용 예시는 아래와 같습니다.
let a = Math.ceil(1.3); // result : 2
let b = Math.ceil(1.5); // result : 2
let c = Math.ceil(1.7); // result ...
864 post articles, 87 pages.