Skip to content

Latest commit

 

History

History
106 lines (84 loc) · 2.83 KB

1005.md

File metadata and controls

106 lines (84 loc) · 2.83 KB

2022. 10. 05

json에 id 달기

const qlist = {
  quiz: [
    // ...
  ],
};

// quiz의 내용은?
qlist.quiz;
//(26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

// quiz의 첫 번째 값은?
qlist.quiz[0];
// {class: '2022년도 2회차 기출', type: '1', quizContent: '따뜻하고 풍요로운 이미지와 차갑고 쓸쓸한 이미지 두가지를 연출해 보세요.', condition: '(3색상 이상 10칸 이상)'}

// 그대로 복사
qlist.quiz.map((q) => ({ ...q }));
//(26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

// 복사한 값에 index를 id로 추가
qlist.quiz.map((q, index) => ({ ...q, id: index + 1 }));
// {
//   class: "2022년도 2회차 기출"
//   condition: "(3색상 이상 10칸 이상)"
//   id: 1
//   quizContent: "따뜻하고 풍요로운 이미지와 차갑고 쓸쓸한 이미지 두가지를 연출해 보세요."
//   type: "1"
// }

// id가 추가된 quiz를 JSON 문자열로 직렬화
JSON.stringify(qlist.quiz.map((q, index) => ({ ...q, id: index + 1 })));

주소의 path variable(params)에 따라서 페이지 렌더링

//use params 문서 보기 (react router dom문서에서)

//index.tsx
<Route path="/quiz/:quizId" element={<TestForm />} />;
{
  /* /problem/:problemId */
}
{
  /* /problem/1 */
}
{
  /* /problem/2 */
}
//Testform.tsx

const params = useParams(); // url에 있는 파라미터(path variable, dynamic routes)를 가져옴!
// ?? 널 병합 연산자. 왼쪽이 null이나 undefined면 오른쪽의 값을 fallback으로 써라
const quizId = parseInt((params["quizId"] as string | undefined) ?? "1"); // ex 1
const quiz = QuizList.quiz[quizId - 1]; // index는 0부터 셈으로...
<Link to={`/quiz/${Math.min(Math.floor(Math.random() * 26 + 1), 26)}`}>
  무작위 문제 보기
</Link>
<div className="quiz-paragraph">
  <a className="category" href="">
    {quiz.class}
  </a>
  <h1 className="text-2xl mb-2">Q. {quiz.quizContent}</h1>
  <h2 id="condition" className="text-lg">
    {quiz.condition}
  </h2>
</div>

랜덤 버튼을 클릭하면 무작위 id로 이동

// 0부터 1사이의 값
Math.random();

// 0부터 26사이의 값
Math.random() * 26;

// 1부터 27 사이의 값 (소수 포함)
Math.random() * 26 + 1;

// 1부터 27사이의 정수 (27이 나올 가능성이 매우매우 적음)
Math.floor(Math.random() * 26 + 1);

// 1부터 26사이의 값
Math.min(Math.floor(Math.random() * 26 + 1), 26);

필요한 것

  • 문제 번호, 문제 id
  • daisy ui 컬러
  • 마이페이지, 메인 페이지, 랜덤버튼, 다크모드 버튼