오늘의 나는 무엇을 배웠을까?
어제에 이어 React Router에 대해 정리해 보려고 한다.
React Router (2)
URL 파라미터와 쿼리 스트링 이용하여 페이지 주소 정의하기
페이지 주소를 정의할 때 유동적인 값을 사용해야 하는 경우가 있다. 이 때 URL 파라미터와 쿼리 스트링을 사용하게 된다. 이 둘의 예시는 다음의 볼드체 부분과 같다.
- URL 파라미터 : velog.io/write
- 쿼리 스트링 : velog.io/write?id=12bb123
URL 파라미터는 주소의 경로에 유동적인 값을 넣는 형태이고, 쿼리 스트링은 주소 뒷부분에 ? 를 붙이고 키:값 형태로 값을 정의하며 & 로 키:값 쌍을 구분해 준다.
이 두가지를 사용하는데 정해진 규칙은 없다고 한다. 다만, 일반적으로 파라미터는 특정 id나 이름으로 조회를 할 때 사용하고, 쿼리 스트링은 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용된다고 한다.
먼저, URL 파라미터를 사용하여 동적인 경로를 만드는 방법을 알아보자.
(동적인 경로란? Route 컴포넌트의 path prop에서 변수와 같이 값을 넘겨주어 변하는 경로)
useParams
useParams Hook은 리액트 라우터가 제공하는 커스텀 Hook이다. useParams 는 URL 인자들의 key: value 쌍들을 반환하는데, Router 컴포넌트에서 정해준 파라미터가 key, 실제 경로로 이동할 때 기입된 인수가 value가 되는 쌍이다. 사실 이렇게 설명하면 잘 이해가 되지 않는다. 나도 그랬으니까. 예시 코드를 보며 자세히 살펴보자.
URL 파라미터를 사용하기 위해서는 파라미터를 Router 컴포넌트의 path에서 : 를 사용하여 설정해 줘야 한다. 이 때 파라미터는 경로에서 사용하는 동적인 값이다.
<Routes>
<Router path="/" element={<Home />} />
<Router path="/example/:parameter" element={<Example />} />
</Routes>이렇게 설정해 주면 : 뒤의 parameter가 useParams 가 반환하는 객체의 key가 되고 실제 페이지 이동을 했을 때 /example/ 뒤에 붙여주는 것이 value가 된다.
예를 들어, 사용자가 /example/hello 라는 페이지로 이동을 했다고 하면, {parameter: "hello"} 라는 객체를 반환해주는 것이다. 이렇게 파라미터를 사용하면 페이지 주소를 동적으로 정의할 수 있을 뿐만 아니라, element에서 useParams 가 반환한 객체의 값을 활용할 수도 있다.
useSearchParams
useSearchParams Hook 또한 리액트 라우터가 제공하는 커스텀 Hook이다. 이 Hook은 다음과 같이 사용한다.
const [searchParams, setSearchParams] = useSearchParams();이전에 배운 useState 처럼 배열 구조분해를 통해 값을 받고 각 값에는
searchParams: searchParams 객체setSearchParams: searchParams 객체를 변경해주는 함수
가 들어간다.
searchParams 객체에는 get() 메소드가 존재해서 내부의 값을 가져올 수 있다.
만약
const keyword = searchParams.get("keyword");
console.log(keyword)
// 위와 같은 코드가 있고
// example?keyword=something 이라는 페이지로 이동하면?
//콘솔에 something이 출력된다.내일 마저 NavLink와 Navigate 컴포넌트에 대해 정리해 보아야 겠다.
5/11 애자일 방법론 특강
Waterfall 방법론
단계별 개발 방법론
설계→디자인→개발→테스트→배포 과정이 순차적으로 진행되는 방법론
이전 단계로 되돌아 갈 수 없다.
장점
조정이 덜 필요하다 (비용,시간적 장점)
프로젝트 비용을 예측할 수 있다
단점
속도가 느리고 유연하지 않다
⇒ 빠르게 변화하는 고객의 요구에 민첩하게 대처하지 못한다는 문제가 대두되어 애자일 방법론이 대두
Agile 방법론
고객 요구 사항에 민첩하게 개발하는 방식
프레임워크
대표적인 것이 칸반과 스크럼
칸반
간판 → 작업중인 작업 수에 제한을 두어서 흐름을 개선하여 걸리는 시간에 중점을 둔다.
프로세스를 개선하는 것이 중심
스크럼
고객 피드백을 빠르게 수집하고 통합할 수 있는 학습 루프를 지속적으로 개선
스프린트마다 공통의 목표를 정한다. 정해진 간격을 통해 제공 가능한 작업을 완료
스크럼의 가치
- 용기 - 팀원 간 갈등과 도전을 통해 작업할 수 있게 도와줌
- 집중 - 약속한 것의 실천에 전념
- 약속 - 약속한 것을 확실히 실현하는 것
- 존중 - 자신과 다른 사람에게 경의를 표하는 것
- 열린 마음 - openness
장점
유연한 변화 : 팀원간 신속한 협조와 조율이 가능, 신속하게 목표와 결과 추정이 가능, 변화 시도가 용이
스프린트마다 실행 가능한 제품을 배포 → 사용자와의 의견 교환에 용이
스프린트 반복을 통해 문제를 도출하고 해결해 나가 더 완성도 높은 결과물을 낼 수 있음
스크럼에서의 역할
제품 책임자 : 제품에 대한 책임을 지고 의사 결정, 이해관계자의 의견을 받아 정리하고 우선순위를 조정
스크럼 마스터 : 스크럼 팀원들의 가이드, 데일리 스크럼 주관, 이슈나 방해요소를 공론화하여 해결하도록 돕는 역할
개발 팀 : 위의 두 역할 이외의 나머지 구성원
스크럼의 절차
백로그 작성 → 스프린트 플래닝 → 스프린트 운영 → 스프린트 데모(제품) → 스프린트 회고(프로세스)
Q&A
스크럼 시 주의점
애자일의 참뜻이 무엇인지 항상생각하면서 스크럼을 진행하면 좋을 것 같다
좋은 프로세스를 만들기 위해 노력하자
스프린트 내에 계획도 수정이 되는지
원칙적으로는 스프린트 내에는 계획을 수정하지 않는다. 고로, 목표한 결과물이 도출되지 않을 것 같아도 계획은 수정되지 않는다.
조직마다 다르긴 한데, 원칙은 그렇다고 한다.
오늘의 나는 어떤 어려움이 있었을까?
오늘 2차 평가가 있었는데, 평가를 보는데 어려움이 있었다. 정확히 개념을 알지 못하는 부분도 있었고 글로 설명을 하자니 어떻게 작성해야 할지 모르겠었다. 데일리미션을 통해 이미 정리해 본 내용도 헷갈리는 것을 보면
- 정리만 했다고 확실히 알고 넘어간 것이 아니다.
- 정리를 한 후 추가적인 학습이 필요하다.
는 결론이 나오는 것 같다. 데일리 미션에 중요한 개념과 내용이 많이 출제되는 만큼 한번 할 때 단순히 자료를 정리하는 식이 아닌 이해를 하고 내 것으로 만들어야겠다는 생각을 했다.
내일의 나는 무엇을 해야할까?
- 프로젝트 계획
- 리액트 라우터 나머지 부분 정리하기
- 2차 평가 문제 일부 정리
