본문 바로가기
728x90

JavaScript97

[React] 리액트 라우터 해시링크(React Router Hash Link) 사용하기 react-router-dom을 사용하는 동안 부드러운 페이지 스크롤을 구현하는 것은 React.js에서의 문제였다. react-router-hash-link 패키지를 이용하여 부드러운 수직 스크롤을 구현해보자. 부드러운 스크롤은 웹 페이지를 더 유용하게 만들고 브라우저에서 더 나은 사용자 스크롤 경험을 제공하는 기능이다. react-router-hash-link 부드러운 스크롤이 작동하려면 react-router-dom에서 BrowserRouter를 사용해야 한다 . react-router를 설치한 후 해시링크 hash-link 를 설치해야 한다. npm i react-router-dom npm install --save react-router-hash-link 적용 할 파일을 열고 해시링크를 가져온다.. 2023. 5. 27.
[jQuery] 제이쿼리 사용하기 라이브러리란?(library) 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들 jQuery란? 엘리먼트를 선택하는 강력한 방법과 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공하는 자바스크립트 라이브러리 제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정할 수 있다. 특징 ① 크로스 플랫폼을 지원하는 jQuery는 어떠한 브라우저에서도 동일하게 동작한다. 이것은 브라우저 호환성을 고려하여 대체 코드를 작성할 필요가 없다. ② 네이티브 DOM API 보다 직관적이고 편리한 API를 제공한다. CSS 스타일의 selector를 사용할 수 있으며 조작 또한 유연하게 할 수 있다. ③ 이벤트 처리.. 2023. 5. 25.
[JavaScript] 자바스크립트 대화상자 명령어 html 기본 명령어 alert()와 confirm() 삭제삭제 2023. 5. 23.
[React] 컴포넌트 외부에서 하면 안되는 것 리액트에서 절대 하면 안되는 것이 하나 있다. 컴포넌트 함수 밖에 let 으로 변수 선언을 하면 절대 안 된다. 컴포넌트를 페이지당 1개 쓸 때는 크게 문제가 없을 수도 있지만, 컴포넌트 밖 중복되는 이름의 let 변수가 있을 때 해당 변수를 공유하게 될 수 있다. 컴포넌트를 import 해서 사용할 때, return 영역에서 해당 컴포넌트의 hook function 만 반복 실행하는 거고, 컴포넌트 위에 선언한 변수들은 import 할 때 한번만 scan되기 때문에 호출한 컴포넌트 hook은 각각의 컨텍스트를 가지니까 hook 내부 변수는 그 hook에서만 유효한데 반해, 컴포넌트 바깥에 선언한 변수는 해당 파일 내에서 전역 컨텍스트와 비슷하게 정의 된다. 각각의 hook 들에서 해당 변수명을 호출할 .. 2023. 5. 22.
[JavaScript] 구글 지도 만들기 google maps API 구글 지도(Google Maps)는 구글에서 제공하는 글로벌 지도 서비스다. 네이버나 카카오에서 제공하는 지도 서비스와 달리 국내 지도 뿐만 아니라 해외 지도까지 제공하기 때문에 전 세계 사용자를 대상으로 하는 애플리케이션을 개발할 때 특히 유용하게 사용할 수 있다. API 키 발급 받기 구글 Maps API를 사용하려면 우선 구글에서 발급해주는 API 키가 필요하다. 아래 구글 클라우드 콘솔(Google Cloud Console) 링크로 들어가면 API 키를 발급받을 수 있다. 한글: https://developers.google.com/maps/gmp-get-started?hl=ko 영문: https://console.cloud.google.com/google/maps-apis/start Google.. 2023. 5. 18.
[JavaScript] this 이해하기 this? this는 함수에서 나타나는데, this키워드를 사용하면 그 함수를 호출한 주체(객체)를 가리키게 된다. 쉽게 말해서 '누가 이 함수를 불렀느냐'가 된다. const myObject = { printThis: function() { console.log(this); } } function printThis() { console.log(this); } myObject.printThis(); // {printThis: ƒ} printThis(); // Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …} 위 코드를 살펴보면, this를 콘솔에 출력하는 printThis라는 함수가 두 개 선언되어 있다. 첫 .. 2023. 5. 10.
[JavaScript] 이벤트리스너(EventListener) 동적인 웹 애플리케이션의 구현을 위해서는 사용자의 다양한 이벤트에 맞춰 데이터를 핸들링해야 된다. Javascript 이벤트 객체에 대해 알아보자. JavaScirpt 이벤트란? DOM에서 특정 이벤트가 발생되면 우리는 JavaScript 이벤트 객체에서 이를 확인할 수 있다. DOM 구조에서 이벤트는 매우 다양하지만, 자주 쓰는 이벤트는 아래와 같다. 포커스 이벤트(focus, blur) 폼 이벤트(reset, submit) 뷰 이벤트(scroll, resize) 키보드 이벤트(keydown, keyup) 마우스 이벤트(mouseenter, mouseover, click, dbclick, mouseleave) 드래그 앤 드롭 이벤트 (dragstart, drag, dragleave, drop) 이벤트 .. 2023. 5. 9.
[React] 리액트 풀페이지fullpage.js 적용하기 풀페이지 기능으로 만들어진 웹사이트는 스크롤 하면 페이지 단위로 화면이 스크롤 된다. 설치 npm i react-full-page react-full-page는 기능을 적용시키는 화면은 모두 풀페이지 스크롤 기능이 적용되어야 한다. 사용 import React from 'react'; import { FullPage,Slide} from 'react-full-page'; export default class FullPageExample extends React.Component{ render(){ return( Inner slide Another slide ); } }); html css body { margin : 0; } .section-common { width : 100%; height : 100.. 2023. 5. 7.
[React] 리액트 컴포넌트 라이브러리 Material-UI Meterial-UI Material-UI 홈페이지 : https://material-ui.com/ 설치 npm install @mui/material @emotion/react @emotion/styled Material-UI는 Github에서 가장 인기있는 React 오픈 소스 컴포넌트 라이브러리이다. 간단하고 가벼우며 Google의 Material Design 사양에 따라 제작되었다. @material-ui/style로 컴포넌트를 스타일링 할 수 있고 CSS-in-JS 솔루션은 빠르고 확장 가능하며 스타일링 된 컴포넌트와 동일한 이점을 제공한다. Material-UI는 다른 주요 스타일링 솔루션과도 상호 운용이 가능하므로 스타일링을 사용할 필요가 없다. 사용법 1. 사용하고자 하는 항목을 impor.. 2023. 5. 4.
[JavaScript] 자바스크립트 라이브러리 핵심 정리 Vue.js Vue.js는 사용자 인터페이스(특히 단일 페이지 웹 애플리케이션)를 빠르게 구축하는 데 도움이 되는 무료 컴팩트 오픈 소스 라이브러리다. Vue의 장점 중 일부는 다른 것보다 배우고 흡수하기 쉽다는 것이다. 프레임워크에서 문서는 매우 상세하고 이해하기 쉽다. Angular.js AngularJS를 사용하면 웹 및 모바일 애플리케이션을 쉽게 구축할 수 있다. Google, Forbes, IBM, Microsoft 등과 같은 많은 대기업에서 신뢰하고 사용한다. jQuery jQuery는 프런트 엔드 개발자가 가장 일반적으로 사용하는 라이브러리 중 하나다. AJAX, 손쉬운 DOM(CSS, HTML) 조작, 이벤트 처리, 애니메이션 효과 등과 같은 웹사이트 개발에 유용한 많은 기능을 제공하는 소.. 2023. 5. 3.
728x90

티스토리툴바