우선 사용자가 페이지 안에서 스크롤을 사용해 이동하는 경우 어떤 방법을 사용할까요?

1.마우스의 휠 버튼을 사용하는 경우
2.키보드의 커서키를 사용하는 방법
3.스크롤 바 위에 마우스를 올려 드래그하여 이동하는 방법


이처럼 세가지 방법이 가장 보편적입니다. 이 중에서 오늘은 스크롤을 사용한 이동시 이를 블락하는 방법을 알아보겠습니다. 먼저 스크롤을 막는 것이 왜? 그리고 언제 필요할까요?

# 스크롤의 이동을 막는 것이 필요한 경우
언제 스크롤을 사용한 페이지 이동을 막아야할까요? 먼저 중요한 콘텐츠 화면 영역에서 빠른 스크롤 이동에 의하여 의도한 콘텐츠를 다 못보여주는 경우도 생각해볼 수 있습니다. 이런 경우는 예를 들면... 페이지 스크롤에 따라 화면이 동적으로 변하는 웹사이트의 경우가 이에 해당합니다. 동적으로 변하는 웹사이트를 보여주기 위해 사용자의 스크롤 이동을 강제하는 것이 필요할 수 있습니다.

또 다른 이유로 스크롤이 화면에 고정되야 하는 경우입니다. 햄버거 버튼을 누른 뒤거나 아니면 모달 형식의 팝업창을 띄운 경우가 좋은 예 입니다.



# 스크롤을 고정하는 방법 예제 소스보기
아래의 소스 코드를 봐주세요. 이코드는 스크립트와 CSS를 사용하여 사용자의 페이지 이동을 강제적으로 막고 있습니다. 우선 스크롤이 생기지 않게 하기 위하여 html과 body 태그에 overflow 속성을 사용하였고 그 값으로 hidden을 주었습니다.

또한 해당하는 요소의 브라우저 기본 이벤트를 피하기 위해 아래의 이벤트 함수를 사용합니다. preventDefault()는 이벤트 내장함수의 실행을 막아 의도한 동작만을 방문자에게 보여줍니다. 또한 발생 가능한 아벤트 버블링을 피하기 위해 stopPropagation()을 추가하였습니다. 해당 자바스크립트는 아래와 같이 사용합니다.
event.preventDefault();
event.stopPropagation();

아래 코드를 직접 실행해 보면서 익혀보시기 바랍니다. 코드는 제이쿼리(jQuery)를 사용하여 만든 예제소스입니다.
$('html, body').css({'overflow': 'hidden', 'height': '100%'});
$('#element').on('scroll touchmove mousewheel', function(event) {
  event.preventDefault();
  event.stopPropagation();
  return false;
});

위 코드는 스크롤과 터치이동, 마우스휠의 이벤트 발생시 동작하지 않도록 제거합니다. 각각 scrolll, touchmove, mousewheel 이벤트 코드가 추가되어 있습니다.


# 스크롤 이동을 다시 허용하기
만약 다시 스크롤을 허용해야한다면? 이 경우 기존의 마우스 스크롤이벤트의 핸들러를 제거해야하므로 해제방법이 필요할 것입니다. 이때는 등록된 이벤트를 해제하여 주는 off() 메소드를 사용하여 가능합니다. 아래 코드의 예제를 봐주세요.
$('#element').off('scroll touchmove mousewheel');

여기까지 스크롤의 사용자 화면전환을 강제로 막는 방법을 알아보았습니다.



http://relation.co.kr/images_board/board_system_publishing/211/index.php/

With the rapidly changing technologies, developers are being provided with incredible new tools and APIs. But it has been seen that out of the 100+ APIs, only 5% of them are actively used by developers.

Let’s take a look at some of the useful Web APIs that can help you skyrocket your website to the moon! 🌕🚀

1. Screen Capture API

The Screen Capture API, as the name suggests, allows you to capture the contents of a screen, making the process of building a screen recorder a piece of cake.

You need a video element to display the captured screen. The start button will start the screen capture.

<video id="preview" autoplay>
  Your browser doesn't support HTML5.
</video>
<button id="start" class="btn">Start</button>

const previewElem = document.getElementById("preview");
const startBtn = document.getElementById("start");

async function startRecording() {
  previewElem.srcObject =
    await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true,
    });
}
startBtn.addEventListener("click", startRecording);

2. Web Share API

The Web Share API allows you to share text, links, and even files from a web page to other apps installed on the device.

async function shareHandler() {
  navigator.share({
    title: "Tapajyoti Bose | Portfolio",
    text: "Check out my website",
    url: "https://tapajyoti-bose.vercel.app/",
  });
}

NOTE: To use the Web Share API, you need an interaction from the user. For example, a button click or a touch event.

3. Intersection Observer API

The Intersection Observer API allows you to detect when an element enters or leaves the viewport. This is exceptionally useful for implementing infinite scroll.

NOTE: The demo uses React because of my personal preference, but you can use any framework or vanilla JavaScript.

4. Clipboard API

The Clipboard API allows you to read and write data to the clipboard. This is useful for implementing the copy to clipboard functionality.

async function copyHandler() {
  const text = "https://tapajyoti-bose.vercel.app/";
  navigator.clipboard.writeText(text);
}

5. Screen Wake Lock API

Ever wondered how YouTube prevents the screen from being switched off while playing the video? Well, that’s because of the Screen Wake Lock API.

let wakeLock = null;

async function lockHandler() {
  wakeLock = await navigator.wakeLock.request("screen");
}

async function releaseHandler() {
  await wakeLock.release();
  wakeLock = null;
}j

NOTE: You can only use the Screen Wake Lock API if the page is already visible on the screen. Otherwise, it would throw an error.

6. Screen Orientation API

The Screen Orientation API allows you to check the current orientation of the screen and even lock it to a specific orientation.

async function lockHandler() {
  await screen.orientation.lock("portrait");
}

function releaseHandler() {
  screen.orientation.unlock();
}

function getOrientation() {
  return screen.orientation.type;
}

7. Fullscreen API

The Fullscreen API allows you to display an element or the entire page in full screen.

async function enterFullscreen() {
  await document.documentElement.requestFullscreen();
}

async function exitFullscreen() {
  await document.exitFullscreen();
}

NOTE: To use the Fullscreen API too, you need an interaction from the user.

https://tapajyoti-bose.medium.com/7-javascript-web-apis-to-build-futuristic-websites-you-didnt-know-12b737ccf594

Simple chatbot UI for the Web with JSON scripting

github.com/ngio/chat-bubble

Simple chatbot UI for the Web with JSON scripting 👋🤖🤙

• Quick set-up & implementation.
• Works with or without Natural Language Classifiers.
• 1KB GZipped. No dependencies. Written with ES5 (compatible with IE11+).

Installation

Yarn/NPM

yarn add chat-bubble or npm install chat-bubble

프론트엔드 추천 자료 모음

https://velog.io/@ansrjsdn/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%B6%94%EC%B2%9C-%EC%9E%90%EB%A3%8C-%EB%AA%A8%EC%9D%8C

사이트

MDN - 가장 유명한 MDN
모던 javascript 튜토리얼 - JS 튜토리얼로 정말 좋음.
타입스크립트 핸드북 - TS 공식문서 번역본
웹팩 핸드북 - 캡틴판교님의 웹팩 핸드북
fontawesome - 다양한 ICON을 가져올 수 있는 사이트
flatuicolors - 다양한 색들을 가져오기 편한 사이트
CSS Dinner - 다양한 css 선택자들을 게임을 통해 배울 수 있는 사이트
FLEXBOX FROGGY - css의 FLEXBOX를 게임을 통해 배울 수 있는 사이트
GRID GARDEN CSS의 grid를 게임을 통해 배울 수 있는 사이트

블로그

Velopert velog - velog를 만든 velopert님의 velog로 정말 좋은 글들이 많음.

제로초 블로그 - 다양한 JS 관련 지식들이 있음.

Jbee 블로그 - 다양한 프론트엔드 관련 지식들

TOAST UI - FE 관련 지식들과 여러 글들

캡틴판교 블로그 - JS 및 VUE 관련 글들이 많음.

Evan moon 블로그 - 다양한 프론트엔드 관련 글들

NAVER D2
우아한형제들 기술 블로그
라인 기술 블로그 - 프론트

깃허브

주니어 개발자 채용 정보 - 주니어 개발자들이 지원 할만한 다양한 채용 정보 모음.

고퀄리티 개발 모음 - 다양한 개발에 대한 지식들을 모아 둔 곳.

Technical Interview Guidelines for Beginners - 다양한 면접 관련 질문들을 모아둔 곳.

취준생이 반드시 알아야 할 프론트엔드 지식들 - 프론트엔드 개발자들을 위한 지식들. 면접에 많이 나옴

유튜브

노마드 코더 Nomad Coders - 우리의 니꼴라스 선생님. React를 배울 수 있고 프로그래밍의 전반적인 내용들을 배울 수 있음.

드림코딩 by 엘리 - 기초부터 자세하게 배울 수 있음. 일주일에 1강 정도 꾸준히 올라옴. 애청자입니다 ㅎㅎ

ZeroCho TV - 기초부터 React, ts까지 배울 수 있음. 무료 강좌들은 유튜브에 있고 유료 강좌들은 인프런에 있음. 유료 강좌는 유튜브에서 찍고 있을 때 들으면 무료입니다.

코드 스피츠 - js의 깊은 부분까지 가르쳐 주는 곳인거 같습니다. 아직 들어보진 않았음. 좋아 보여서 들을 예정.

김버그 Kimbug - 프론트엔드 개발자 일상이라던지, 공부 추천 같은 영상들 올라옴. 요즘은 프린이들 코드 리뷰 영상 올라와서 매우 공감 됨.

DarkCode - 외국 유튜버인데 html, css만 가지고 많은 화면들을 만듦. 따라 치면서 html, css 공부하기 좋음.

Minjun Kim - velopert님 유튜브. 요즘은 방송 안 하시지만 velog 만들 때의 영상을 볼 수 있음.

프론트엔드 개발 환경의 이해 - 김정환
Vue.js 개발 입문 - 캡틴판교
javascript로 함수형 프로그래밍 배우기
함수형 프로그래밍과 ES6+ - 유인동
NAVER TECH CONCERT 2019 - FRONT END

기타

벨로퍼트와 함께 하는 모던 자바스크립트
벨로퍼트와 함께 하는 모던 리액트
리액트를 다루는 기술(개정판)
실용주의 프런트엔드 개발
TypeScript Cookbook
DevFest WebTech CodeLab 2019

TypeScript is a superset of JavaScript that compiles to clean JavaScript output. http://www.typescriptlang.org

https://github.com/Microsoft/TypeScript

Open Source

TypeScript is being developed on GitHub. The TypeScript compiler is implemented in TypeScript and can be used in any JavaScript host.

• Read the specification on GitHub or download it as a docx or pdf.

• Play with the bits and file bugs.

• Join the #typescript Twitter discussion and follow the GitHub project.

Documentation

• Quick tutorial
• Programming handbook
• Language specification
• Homepage