Frontend

[코딩 컨벤션] 함수이름 앞에 언더바(_)를 쓰는 이유

함수 명 앞에 _ 언더 바가 있는 코드를 발견했다. 왜일까? var printArray = function() { function _print(targetArr) { //왜 print가 아니라 _print로 썼을까? //코드생략 } } _print(arguments[0]); }; 코딩 컨벤션(스타일 가이드) 함수명 앞에 _ 언더바를 붙여주는 것은 일종의 코딩 컨벤션이다. 코딩 컨벤션이란 프로그래밍 언어별로 권장하는 코딩 규칙(스타일)이다. 예를 들면 구글에서 권장하는 방식은 링크를 통해 확인할 수 있다. 반드시 따라야 하는 룰이라기 보다는 이해하기 쉬운 코드를 작성하기 위한 가이드 정도로 참고해서 활용할 수 있다. 보통은 지역변수나 sub function일 경우 이름앞에 언더바를 써 주는데 이는 자바스크..

[React-Hooks] React Hooks - useAxios

* useAxios HTTP 통신 라이브러리 Axios를 활용한 서버와 통신을 하게 해주는 hook * useAxois.js 파일 import defaultAxios from "axios"; import { useState, useEffect } from "react"; const useAxios = (opts, axiosInstance = defaultAxios) => { const [state, setState] = useState({ loading: true, error: null, data: null, }); const [trigger, setTrigger] = useState(0); const refetch = () => { setState({ ...state, loading: true, });..

[React-Hooks] React Hooks - useNotification

* useNotification useNotification는 알림이 실행되는 hook이다. Notification에 대한 정보는 https://developer.mozilla.org/ko/docs/Web/API/notification 해당 링크를 참조 const useNotification = (title, options) => { if (!("Notification" in window)) { return; } const fireNotif = () => { if (Notification.permission !== "granted") { Notification.requestPermission().then((permission) => { if (permission === "granted") { new No..

[React-Hooks] React Hooks - useFullscreen

* useFullscreen useFullscreen은 어떤 요소를 풀스크린으로 보여주는 hooks입니다. import { useRef } from "react"; const useFullscreen = (callback) => { const element = useRef(); const triggerFull = () => { if (element.current) { element.current.requestFullscreen(); if (callback && typeof callback === "function") { callback(true); } } }; const exitFull = () => { document.exitFullscreen(); if (callback && typeof callba..

[React-Hooks] React Hooks - useScroll

* useScroll 스크롤을 해서 무언가를 지나쳤을때 색상을 바꾸거나 어떤 행동을 하는 Hook이다. * useScroll 예시코드 import { useEffect, useState } from "react"; const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0, }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onSc..

[React-Hooks] React Hooks - useFadeIn & useNetwork

* useFadeIn useFadeIn은 어떤 요소를 시간이 지남에 따라 서서히나게 하는 hooks 입니다. * useFadeIn 예시코드 import { useEffect, useRef } from "react"; const useFadeIn = (duration = 1, delay = 0) => { const element = useRef(); useEffect(() => { if (typeof duration === "number" || typeof delay === "number") { if (element.current) { const { current } = element; current.style.transition = `opacity ${duration}s ease-in-out ${dela..