Portfolio

당신이 모를 6가지 프론트엔드 코딩 팁

프론트엔드 개발자를 위한 유용한 코딩 팁

서론

프론트엔드 개발은 최근 들어 굉장히 중요한 영역이 되었고, 프론트엔드 개발자가 해야할 일은 매일같이 많습니다.

프론트엔드 개발자라면 수많은 HTML, CSS, 자바스크립트 코드를 작성하기 마련인데요, 몇몇 코딩 팁을 알고 있으면 매우 유용하게 사용할 수 있습니다. 따라서 이번 글을 통해, 아마 많은 분들이 모르셨을 프론트엔드 코딩 팁을 공유하고자 합니다.

1. HTML 요소 숨기기

자바스크립트를 사용하지 않고도 HTML 요소를 숨길 수 있다는 것을 알고 계셨나요?

hidden 속성(attribute)을 사용하면 자바스크립트에 의존하지 않고도 손쉽게 HTML 요소를 숨길 수 있습니다. 결과적으로, 해당 요소는 웹 페이지에 표시되지 않게 됩니다.

여기 코드 예시가 있습니다.


<p hidden>이 문단은 보여지지 않을 것입니다. 이는 HTML에 의해 숨겨진 상태입니다.</p>

💡

역주 : 이는 css의 display: none 과 완전히 동일합니다! (= 렌더링 트리에 포함되지 않아 레이아웃도 차지하지 않습니다.)

2. CSS의 inset 단축 구문 사용하기

CSS 코드를 간소화하기 위해 단축 구문(shorthand)을 사용하는 것은 언제나 좋은 습관입니다. CSS의 inset 프로퍼티는 top, left, right, bottom 의 네 가지 속성을 줄여서 표현할 때 유용합니다.

만약 네 개의 속성이 모두 같은 값을 가질 경우, inset 프로퍼티를 사용하면 코드를 보다 깔끔하게 표현할 수 있게 됩니다.

여기 코드 예시가 있습니다.

나쁜 예시:


div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

좋은 예시:


div {
	position: absolute;
	inset: 0;
}

3. 인터넷 속도 파악하기

자바스크립트의 네비게이터 객체를 사용하면 인터넷 속도를 쉽게 파악할 수 있습니다. 이는 아주 간단합니다.

여기 예시 코드가 있습니다.


navigator.connection.downlink;

위에서 볼 수 있듯, 7(역자 환경)이라는 숫자는 썩 좋지만은 않은 결과를 보여줍니다.

💡

역주 : navigator.connection.downlink 는 메가비트 단위를 의미합니다. (참고 링크) 또한, 사파리나 파이어폭스 등 메이저 브라우저에서도 아직 완전히 이식이 완료되지 않은 실험적인 기능입니다!

4. 휴대폰 진동 울리기

다시 돌아와서, 네비게이터 객체의 vibrate() 메서드를 사용하면 쉽게 휴대폰의 진동을 울릴 수 있습니다.

여기 예시 코드가 있습니다.


// 500ms만큼 기기를 진동시킴

window.navigator.vibrate(500);

위 코드를 실행했다면 기기는 500 밀리초동안 진동할 것입니다.

💡

역주 : ios 크롬, 사파리에서는 실행이 불가능한 것으로 확인됩니다. 😂 안드로이드 환경 브라우저에서만 제한적으로 실행이 가능한 것으로 보입니다. (참고 링크)

5. 당겨서 새로고침 비활성화

모바일 기기에서 화면을 위로 당겨 새로고침하는 동작을 CSS만으로 구현할 수 있습니다. overscroll-behavior-y 프로퍼티를 사용하면 되며, contain 값을 사용하면 됩니다.

여기 예시 코드가 있습니다.


body {
    overscroll-behavior-y: contain;
}

💡

역주 : 마찬가지로 ios 크롬, 사파리에서는 실행이 불가능한 것으로 확인됩니다. 안드로이드 환경 브라우저에서만 제한적으로 실행이 가능한 것으로 보입니다. (참고 링크)

6. 사용자의 텍스트 붙여넣기 방지하기

사용자가 입력창에 값을 (복사 후)붙여넣는 것을 방지해야 하는 상황이 있습니다.

paste 이벤트 리스너를 활용하면 자바스크립트로 이를 쉽게 구현할 수 있습니다.

여기 예시 코드가 있습니다.


<input type = "text"></input>

<script>
	// input 태그을 선택합니다.
	const input = document.querySelector("input");

	// paste 이벤트 리스너를 활용해 사용자가 텍스트를 붙여넣는 것을 방지합니다.
	input.addEventListener("paste", function(e) {
		e.preventDefault()
	})
</script>

💡

역주 : 브라우저에 관계없이 잘 동작합니다! 상황에 따라 유용하게 사용할 수 있는 팁이 될 것 같습니다.

위 코드를 추가하면, 이제 사용자는 복사한 텍스트를 입력창에 붙여넣을 수 없게 됩니다.

결론

지금까지 제가 당장 알려드릴 수 있는 몇가지 팁을 소개해 보았습니다. 이 팁들은 매우 유용하고, 여러분에게 도움이 될 것이라 생각해 이번 글을 통해 공유하게 되었습니다.

읽어주셔서 감사드리며, 이 글이 여러분에게 유용했기를 바라겠습니다.

당신이 모를 6가지 프론트엔드 코딩 팁

목차

당신이 모를 6가지 프론트엔드 코딩 팁

서론

1. HTML 요소 숨기기

2. CSS의 inset 단축 구문 사용하기

3. 인터넷 속도 파악하기

4. 휴대폰 진동 울리기

5. 당겨서 새로고침 비활성화

6. 사용자의 텍스트 붙여넣기 방지하기

결론