C-log

지난번 포스팅에서 지적했던 문제 제한 관련해 보안한 부분의 코드들을 리뷰하려고 한다. 먼저 문제를 가져오는 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를 기준으로 보았을 때 이다. 사용..

이번 시간에는 박스 모델에 관해서 포스팅을 할 것이다. 박스 모델에는 3가지 개념을 알아야 하는데 border, padding, margin 이렇게 있다. 우선 코드를 살펴 보면 아래와 같다. DOCTYPE html> Document Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti voluptates sunt voluptate Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti voluptates sunt voluptate p { border: 10px solid red; padding: 20px; margin: 40px; } 개발자 도구에서도 앞서 말한 3가지를 확..