Code Monkey home page Code Monkey logo

wanted-pre-onboarding-challenge-fe-3's Introduction

React와 History API 사용하여 SPA Router 기능 구현하기

1) 해당 주소로 진입했을 때 아래 주소에 맞는 페이지가 렌더링 되어야 한다.

  • /root 페이지
  • /aboutabout 페이지

2) 버튼을 클릭하면 해당 페이지로, 뒤로 가기 버튼을 눌렀을 때 이전 페이지로 이동해야 한다.

  • 힌트) window.onpopstate, window.location.pathname History API(pushState)

3) Router, Route 컴포넌트를 구현해야 하며, 형태는 아래와 같아야 한다.

ReactDOM.createRoot(container).render(
  <Router>
    <Route path="/" component={<Root />} />
    <Route path="/about" component={<About />} />
  </Router>
);

4) 최소한의 push 기능을 가진 useRouter Hook을 작성한다.

const { push } = useRouter();

wanted-pre-onboarding-challenge-fe-3's People

Contributors

uhgenie7 avatar

Watchers

 avatar

wanted-pre-onboarding-challenge-fe-3's Issues

[1회차 과제] Not Found Route 이슈

이슈

Route가 복수(배열)이고, 없는 페이지를 탐색할 경우, 빈 페이지가 나타남

  • 조건문으로 처리했으나 Not Found Page에서 history.back()을 하면 깜빡이는 현상이 발생.
  • Link 컴포넌트를 쓸 경우 URL만 변경되고 렌더가 안 됨.

[1회차 과제] 페이지 이동을 할 때 anchor tag를 사용할까, button tag를 사용할까?

문제 직면

과제에 버튼을 클릭하면 이라고 쓰여있어서 무의식적으로 button 태그를 만들어두고 과제를 진행하였으나, 문득 SPA에서 라우팅 시 어떤 태그를 쓰는 게 옳은지 혼란이 왔다.

SPA에서는 '페이지 이동'이 없고, 앵커 태그를 e.preventDefault(); 로 막을 거라면 button 태그로 onClick을 쓰는 게 옳지 않을까? 라고 생각했지만 아니었던 모양이다.

Todo

  • button tag -> a tag로 바꾸는 작업...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.