C-log

json-server api를 담당하고 있던 useEffect를 커스텀 훅으로 만들어 관리하기 위해서 분리하던 도중에 발생한 에러이다. Too many re-render 에러가 발생하는 이유는 대표적으론 uesEffect에 의존성 배열을 삽입하지 않았을 경우에 발생한다. 하지만 나의 경우 커스텀 훅에는 useEffect의 의존성 배열이 문제 없이 잘 삽입 되어 있다. 그렇다면 현재 커스텀 훅의 문제가 아니라 커스텀 훅을 불러오는 컴포넌트(LabExam)에 문제가 있다고 판단했다. 아래 코드는 나의 커스텀 훅이다. * useLabExamAxios.js import { useState, useEffect } from "react"; import axios from 'axios'; export default ..

최근 잦은 회의와 변동되는 api의 코드들이 많아 자주 push 하지 못했다. commit만 들어 났고 깃허브 잔디는 텅텅비어 있어서 아쉬움이 조금은 많이 남는다. api의 형태가 바뀌었다. 기존의 함수에서 이미지를 파싱하지 못하는 문제가 발생하였다. 그 이유는 api의 구조가 바뀌었기 때문이다. 우선 기존 함수와 변경된 함수의 차이를 살펴보면 아래와 같다. 기존 outside image를 렌더링하는 함수는 다음과 같다. 단순히 이미지의 image가 배열일 때 해당 api를 불러오는 방식이다. (아래 더보기로 이전 api의 형태를 확인해 보면서 비교하면 좋을 것 같다.) 더보기 "images": [ "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistoryFblo..

*이 글은 회의를 토대로 작성된 글이다. 참고로 여기에 작성된 url들은 모두 존재하지 않는 url임을 미리 알린다. API에 들어가야할 정보들을 FE에서 수정하기로 했다. API가 변경 될때 마다 포스팅을 따로 하진 않았지만 잦은 API가 변경되었다는 점을 고려해서 앞으로 FE가 어떻게 개발을 해야하는지 방햐성을 되짚어 보려고 한다. 기존에 있는 API에는 일반 images가 urls정보를 제공할 때 일반 문자열로 이루어져 있었다. 하지만 여러 이미지가 들어갈 수 있다는 점을 고려해서 배열로 이루어지로 했다. "images": [ "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog..png", "https:/..

앞서 포스팅에서 dangerouslySetInnerHTML을 사용했을 때 발생할 수 있는 문제점들을 포스팅 했었다. 다시 상기가 필요하다면 아래 링크를 통해서 마지막 하단 부분을 읽어 보길 바란다. [FE]json파일로부터 각 문제 이미지 띄우기(1) 현재 백엔드로 부터 아직 완벽한 api를 전달 받지 않았다. 백엔드에서 아직 이미지를 가지고 오는 것이 완료되지 않았다. 뿐만아니라 css를 적용하기 위해서 각 이미지들의 className도 api로 제작하 hi-code.tistory.com dangerouslySetInnerHTML을 사용하지 않고 html을 어떻게 랜더링 할 수 있는지 고민하다 찾은 라이브러리가 html-react-parser이다. parseImageTag함수는 변함이 없다. 변화가 되..

이번 포스팅에선 앞서 말했던 이미지가 여러개 있을 기준으로 코드를 구현을 해보려고 한다. 변경된 json파일은 아래와 같다. { "sample": [ { "id": "1", "image": "https://png.pngtree.com/thumb_back/fh260/background/20230609/pngtree-three-puppies-with-their-mouths-open-are-posing-for-a-photo-image_2902292.jpg", "question": "다음 중 총중량 1.5톤 피견인 승용자동차를 4.5톤 화물자동차로 견인하는 경우 필요한 운전면허에 해당하지 않은 것은?", "options": [ "① 제1종 대형면허 및 소형견인차면허", "② 제1종 보통면허 및 대형견인차면허",..

앞 포스팅에서 직접 샘플로 제작된 json파일을 직접 수정 해보았다. 이번에는 이미지파일을 json파일로 넣어 놓고 해당 파일을 불러올 것이다. 내가 수정한 json파일은 아래와 같다. { "sample": [ { "id": "1", "image": "https://png.pngtree.com/thumb_back/fh260/background/20230609/pngtree-three-puppies-with-their-mouths-open-are-posing-for-a-photo-image_2902292.jpg", "question": "다음 중 총중량 1.5톤 피견인 승용자동차를 4.5톤 화물자동차로 견인하는 경우 필요한 운전면허에 해당하지 않은 \n것은?", "options": [ "① 제1종 대형면허..

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