C-log

현재 백엔드로 부터 아직 완벽한 api를 전달 받지 않았다. 백엔드에서 아직 이미지를 가지고 오는 것이 완료되지 않았다. 뿐만아니라 css를 적용하기 위해서 각 이미지들의 className도 api로 제작하기로 했다. 그래서 직접 샘플로 제작된 json파일을 직접 수정 해보려한다. 더 나아가서 글자 사이에 이미지가 삽입되는 경우도 있다. 이런 부분들을 샘플로 작업해 보려고 한다. 우선 내가 수정한 json파일은 아래와 같다. { "sample": [ { "id": "1", "question": "다음 중 총중량 1.5톤 피견인 승용자동차를 4.5톤 화물자동차로 견인하는 경우 필요한 운전면허에 해당하지 않은 \n것은?", "options": [ "① 제1종 대형면허 및 소형견인차면허", "② 제1종 보통면..

지난번 포스팅에서 지적했던 문제 제한 관련해 보안한 부분의 코드들을 리뷰하려고 한다. 먼저 문제를 가져오는 useEffect부분을 보면 아래와 같다.(branch/7) useEffect(() => { fetch('http://localhost:3001/sample') .then(res => res.json()) .then((data) => { // 데이터를 가져온 후, 제한된 개수만큼 자르고 섞음 const limitedData = data.slice(0, limit); const shuffledData = shuffleArray(limitedData); setData(shuffledData); }) .catch((error) => { console.error("Error fetching data:", ..

버튼을 눌렀을 때 문제가 섞일 수 있는 기능을 구현하고자 한다. 우선 랜덤으로 문제를 섞기 위해서는 피셔 예이츠 알고리즘을 사용해야 한다. 코드는 아래와 같다. // shuffleArray(Fisher-Yates) 알고리즘을 사용하여 배열을 섞는 함수 function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } 주어진 배열의 길이를 기준으로 역순으로 반복하면서 각 인덱스와 랜덤으로 선택된 인덱스를 교환하여 배열을 섞는다. 이 과정을 통해..

마크다운을 이용해서 시험지의 이미지와 시험 자료들을 불러 올 수 있는 방법들을 모색하다 마크다운 라이브러리를 이용하고자 했다. 예시로 아래와 같은 정렬된 모습을 구현하려고 했다. 왼쪽 해당 정렬된 모습은 리액트에서 마크다운이 아닌 css로 구현한 것이다. 오른쪽은 마크다운과 Html과 혼용해서 css로 구현한 것이다. 이러한 정렬을 마크다운 라이브러를 활용해서 구현하면 좋겠다고 생각했다. 마크다운 라이브러리 중 가장 많이 사용하고 많은 자료를 가지고 있는 react-markdown을 사용했다. 간단한 사용 예시는 아래와 같다. import ReactMarkdown from "react-markdown"; const markdown = ` # Heading 1 This is a **bold** text a..

이번 포스팅은 지난번 border 값을 제거했을 때 해당 요소가 밀리는 margin 겹침/중첩 현상을 다루어 볼 것이다. 우선 코드를 살펴보면 아래와 같다. DOCTYPE html> Document normal #empty { margin-top: 50px; margin-bottom: 100px; border: 1px solid tomato; } #normal { background-color: powderblue; margin-top: 100px; } 현재 normal요소에 margin-top을 100px를 주었을 때 아무런 변화가 없다. 이는 중첩 현상 때문이다. 따라서 normal 요소가 움직이게 되려면 100px보다 크다면 아래로 움직이게 될 것이다. 여기까지는 우리 모두가 알고 있는 부분이다. ..

이번 포스팅에서는 부모와 자식 요소간의 margin 겹침/중첩 현상을 다루어 볼 것이다. 코드는 아래와 같다. DOCTYPE html> Document Hello World #parent { border: 1px solid tomato; margin-top: 100px; } #child { background-color: powderblue; margin-top: 50px; } 위와 같은 결과가 나온다. 이러한 결과가 나오는 것을 어느 정도 예측이 되었을 것이다. 부모 border안에 Hello World는 부모에 자식 요소로 존재하기에 부모 border 안에 잇는 것이다. 아직은 margin 겹침 현상이 일어 나지 않았다. 그 이유는 border대문인데 border를 주석 처리하고 다시 살펴보면 아래와..

이번 시간에는 margin 겹침/중첩 현상에 관해서 포스팅 하겠다. 아래 코드를 살펴 보자. DOCTYPE html> Document Hello, world Hello, world h1 { border: 1px solid red; margin: 100px; } 위의 코드의 결과를 개발자 모드로 각 margin들의 위치를 살펴보면 아래와 같다. 이와 같은 현상을 확인 할 수 있는데 각 요소들의 margin들이 겹쳐 있음을 알 수 있다. 이것이 바로 margin 겹침/중첩 현상이다. 여기서 우리는 각 margin들을 조절 할 수 있는데 서로 기본 margin의 값들이 접촉이 되어 있는 크기 100px 이상부터 크기를 늘려야 아래 또는 위의 요소들로 부터 거리가 벌어진다. 만약 100px 이하로 둘 중 하나의..

이번 시간에는 box-sizing에대한 포스팅을 할 것이다. 중첩된 margin에 대한 포스팅은 이번 다음 시간에 작성할 예정이다. 우선 코드와 결과물을 살펴보자. DOCTYPE html> Document Hello Hello div { margin: 10px; width: 150px; } #small { border: 10px solid black; } #large { border: 30px solid black; } 이 두 박스 중 어떤 박스가 커보이는가? 당연히 아래에 있는 박스가 훨씬 더 커보일 것이다. 하지만 현재 padding의 영향으로 두 번째 박스가 더 커보일 뿐이지 사실상 해당 element는 동일 한 크기의 사이즈 인것이다. 하지만 이것은 언제나 css를 기준으로 보았을 때 이다. 사용..