나의 디딤돌

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>

깃허브에 로컬과 원격 저장소를 연결하기 위해

git remote add origin 주소

이렇게 입력하면 

fatal: remote origin already exists.라는 오류를 보실 수도 있습니다.

이 해결 방법은 간단합니다.

먼저 터미널에 다음 순서대로 입력해주시면 됩니다.

1. git remote rm origin 

2. 이후 처음부터 설정을 해주시고 다시 순서대로 하시면 됩니다.

이후부터는 가독성을 위해 왼쪽 정렬로 하겠습니다.

git config --global user.name "유저네임"

git config --global user.email "깃허브 메일주소"

--- 저는 따로 디렉터리를 만드는게 아니라 바로 설정하도록 하겠습니다.

git init //처음 깃허브를 하면 디렉토리를 만들게 됩니다.

git status // 현재 상태를 보는 명령어입니다.

git add 파일.확장자

또는 처음이라 다 올리려면 git add . 이렇게 입력하시면 됩니다. 다만 git add 파일.확장자 처럼 하게 되면

올리고 싶은 것만 할 수 있습니다.

git commit -m "설명"

git remote add origin 주소

이렇게 해주어서 저는 오류가 해결되었습니다.

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

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

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

저는 일단 그 방법을 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()는 이벤트를 중지시켜주는 것인데,

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

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

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

안녕하세요 오늘은 저번 글에 이어 이번엔 강아지상 테스트에 대한 글입니다.

이전 고양이 글에 대한 정보는 링크와 함께 글 아래에 남겨두겠습니다.

강아지상 테스트 링크입니다.

https://dogfacesite.netlify.app/

방법은 고양이상 테스트와 같습니다.

똑같이 가운데 드래그 부분을 클릭한 후

사진을 선택하시면 됩니다.

 PC에선 사진을 넣고, 스마트폰에선 직접 찍을 수도 있으며,

앨범에서 선택할 수도 있습니다.

테스트 사진으로는 치와와가 나오네요.

아래 공유하기 같은 경우는 결과가 공유되는 것이 아닌

사이트가 공유됩니다.

이렇게 간단하게 사진을 넣고 내가 강아지라면 어떤 강아지인지

나오는 서비스입니다.

강아지상 테스트 이 외에 고양이상 테스트도 관심이 있으시다면

아래 글을 보시면 되겠습니다.

https://didimdol20.tistory.com/101

사이트 링크

https://catface.netlify.app/