나의 디딤돌

JavaScript에서 타이머 구현을 하기 위한 방법으로

setTimeout과 setInterval 두 함수 중 한 가지를 이용하면 구현이 가능합니다.

간단하게 비교하자면

setTimeout 같은 경우 일정 시간이 지난 후에 실행하는 방법

clearTimeout()으로 스케줄링 취소

setInterval 해당 시간 마다 주기적으로 실행하는 방법

clearInterval()으로 스케줄링 취소

문법

let timerId = setTimeout/setInterval(func|code, [delay], [arg1], [arg2], ...)

함수 후 delay 부분에 원하는 시간을 넣게 되면 해당 시간 이후 실행이 됩니다.

그리고 실제 setInterval으로 이용해서 타이머를 구현한 코드입니다.

let timer = setInterval(function(){
        console.log(time);
        
        if(time>=1){
            time = time - 1;
                
        }
        if(time==0){
            console.log("종료");
    
            clearInterval(timer);
        }
        time_text.textContent = time;
        },1000);

Error: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

리액트를 처음 공부하는 거라

클론 코딩을 통해 공부를 하다 보니 이런 오류가 떠서 막혔습니다.

해당 오류는 Routes 컴포넌트 안에는 자식 요소로 Route 또는 React.Fragment만 들어갈 수 있다는 뜻으로,

그 외에 코드가 들어가게 되면 오류가 뜹니다.

기존 코드같은 경우는 Switch를 이용하였는데 업데이트가 되면서 Switch대신 Routes를 사용한다고 합니다.

이후에 Route 컴포넌트 내에 element 속성을 이용해서 원하는 컴포넌트를 넣게 됩니다.

기존 오류 코드

1

<Switch>
                {isLoggedIn ? (
                    <>
                        <Route exact path="/">
                            <Home/>
                        </Route>
                    </> 
                ) : (
                    <Route exact path="/">
                        
                        <Auth />
                    </Route>
                )}

            </Switch>

2

            <Routes>
                {isLoggedIn ? (
                    <>
                        <Route exact path="/" element={<Home/>}>
                            <Home/>
                        </Route>
                    </> 
                ) : (
                    <Route exact path="/" element={<Auth/>}>
                        
                        <Auth />
                    </Route>
                )}

            </Routes>

여기에 Route 부분 안쪽에 <Home/> 또는 <Auth/>가 없어야 합니다.

변경 완료

<Router>
            <Routes>
                {isLoggedIn ? (
                    <>
                        <Route exact path="/" element={<Home/>}>
 
                        </Route>
                    </> 
                ) : (
                    <Route exact path="/" element={<Auth/>}>

                    </Route>
                )}

            </Routes>
        </Router>

안녕하세요 이번 글은 자바스크립트에서 버튼을 누르면

해당 위치로 스크롤이 이동하는 방법에 대해서알아보겠습니다.

한 번이라도 보셨는지는 모르겠으나,어떤 회사 사이트라던지 아니면 인터넷에 무수히 많은사이트 중, 버튼을 누르면 해당 위치로 스크롤을 이동하는 사이트를보셨을지 모르겠습니다.

저는 일단 그 방법을 scrollIntoView를 통해 구현해봤습니다.먼저 버튼 부분을 상수로 만들어준 다음.

이동하고 싶은 콘텐츠 부분을 만들어줍니다.저는 임의로 인라인 스타일로 만들어 주겠습니다.

<div class="div div1" style="background-color: red;"></div>
<div class="div div2" style="background-color: blue;"></div>
<div class="div div3" style="background-color: green;"></div>

간단하게 div로 만들어준 다음 크기는 저는 css부분에서 공통적으로 

주기 위해 div라는 클래스를 공통으로 주었습니다.

이후 크기는 width:100% height:100%으로 주었습니다.

이후 a 태그 또는 button 태그를 통해 각 이동할 버튼을 만들어줍니다.

이후 버튼을 const를 통해 먼저 변수로 만들어줍니다.

예를 들어

const DIVRED = document.querySelector("div-btn");

이런 것처럼요. 

이후 해당 버튼에 이벤트를 만들어줍니다.

DIVRED.addEventListener("click",(e)=>{
    let div1 = document.querySelector(".div1");
    div1.scrollIntoView({behavior:'smooth'});
    e.preventDefault();
});

let div1 같은 경우 red div부분입니다.

3개의 div 중 첫 번째 div입니다.

버튼을 누르게 되면 div1 콘텐츠 부분으로 스크롤이 이동하게 되는데

smooth 속성을 통해 부드럽게 이동하게 됩니다.

e.preventDefault()는 이벤트를 중지시켜주는 것인데,

이 코드를 추가시키지 않는다면

테스트를 위해 여러 번 클릭을 하게 되는 경우에는

원하시는 동작이 나오지 않을 수도있습니다.

안녕하세요 이번엔 자바스크립트 함수 선언 방식을 먼저 알아보고 이벤트 적용하는 방법을

알아보도록 하겠습니다.

먼저 자바스크립트에서 함수를 만드는 방법으로 3가지를 알아보도록 하겠습니다.

대표적으로 사용하는 방법인 1번은

1. function test(){

//코드

}

이렇게 function를 통해 사용하고자 하는 함수명과(파라미터)를 이용해서 만드는 방법이 있고

실행하는 방법은 함수명을 그대로 써주시면 됩니다.

test();

2.  이 외에 키워드를 통해 만드는 방법도 있습니다.

var test = function(){

//코드

}

이렇게 해서 만드는 방법이 있고 이 역시 실행하는 방법은

test(); 

이렇게 함수명만 써주시면 됩니다.

3. 익명함수

그리고 마지막으로 익명 함수를 이용하는 방법이 있습니다.

익명 함수는 이름이 없는 함수로 즉시 실행을 하기 위해 사용합니다.

(function(){

//코드

})();

이렇게 사용하게 되는데요 아마 addEventListener에서 따로 함수명을 만들지 않고

사용하실 때 사용을 하시게 될 것입니다.

그럼 addEventListener를 통해 이벤트를 등록하는 방법을 알아보도록 하겠습니다.

addEventListenr은 이벤트를 등록하는 함수이고 DOM을 이용해 이벤트를 적용을 할 것인데

이전에 작성한 버튼 가져오기 / 버튼 클릭 시 동작하는 글을 보고 오시면 이해가 빠르게 될 것 같습니다.

아래 링크 남겨두도록 하겠습니다.

https://didimdol20.tistory.com/76?category=1032931

일단 간단하게 코드를 작성해보자면

HTML 코드

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">확인</button>


    <script src="js.js"></script>
</body>
</html>

이렇게 작성하게 되면 css를 등록하지 않은 상태라 덩그러니 확인 버튼만 나오는 것을

확인하실 수 있습니다.

그렇다면 선언한 함수와 익명 함수를 각 각 적용하는 방법을 알아보겠습니다.

1. 함수 적용 방법

(변수명).addeventListener("click",함수명)

함수명에는()를 붙이지 않는다는 점 꼭 기억해주시고 이용하시면 되겠습니다.

아래는 코드입니다.

var btn = document.getElementById("btn")


btn.addEventListener("click",btn_test)

//test 함수
function btn_test(){
    alert("확인");
}

간단히 설명드리자면 먼저 btn 변수에다가 html 파일에 있는

버튼을 Id를 통해 연동시켜주는 것입니다.

이후 addEventListener를 이용하여 이벤트를 등록해주는 상태이고 btn_test라는 함수는 버튼을 클릭 시

확인이라는 알림 창이 뜨게 되는 것입니다.

버튼을 클릭하게 되면 다음처럼 창이 뜨게 됩니다.

2. 익명 함수 적용 방법

익명 함수는 다시 설명드리자면 이름이 없는 함수입니다.

이번엔 다른 방법으로 적용하자면 변수를 선언하지 않은 방법으로 적용하는

방법으로

document.getElementById("id또는 class명").addEventListener("click",function(){

});

방법으로 이용하시면 됩니다.

위에 함수를 선언하는 3번 방법이 여기서 나오게 됩니다.

document.getElementById("btn").addEventListener("click",function(){
    alert("확인");
    
});

이렇게 해도 역시 같은 결과가 나오는 것을 확인하실 수 있습니다.

1번 방법처럼 그냥 변수를 선언해서 document.getElementById 부분 대신에 변수명을 통해 사용할 수도 있으나,

간단하게 적용할 수 있는 방법도 알려드리고자 2번에선 이 코드로 작성해보았습니다.

비교해보자면 1번 방법이 변수를 통해 연동하고 따로 함수를 만들어서 적용하는 단계를 거친다면

2번 방법은 각 단계를 거치지 않고 바로 이벤트를 적용하는 점입니다.

다만 간단한 점은 있으나 해당 코드를 자주 사용하고 수정을 해야 한다면 

함수를 통해 이용하시는 게 좋고 간단하게 수정 없이 사용한다면 익명 함수를 이용하는

방법도 좋을 것 같습니다.