C-log

*이 글은 회의를 토대로 작성된 글이다. 참고로 여기에 작성된 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:/..

이 포스팅은 학교 수업의 내용을 토대로 포스팅을 작성한 것입니다. 이 수업은 spring과 spring boot 그리고 jpa를 배운다. 기본적으로 java를 알아야하며 실무에 필요한 내용을 담고 있다. mysql도 다룰 것이다. mysql을 사용할 때 mysql 툴을 잘 사용해서 데이터 베이스를 제작하면 용이하다고 생각한다. 더보기 메시지 지향적(xml,json) 메시지 지향적(Message-Oriented)이란 소프트웨어 시스템이나 컴퓨팅 환경에서 메시지를 중심으로 동작하는 아키텍처 또는 디자인 패턴을 의미한다. 메시지 중심으로 동작한다는 것은 시스템의 구성 요소 간에 메시지를 주고받아 상호 작용하고 데이터를 교환하는 방식을 강조한다. 메시지 지향적인 시스템에서는 각 구성 요소가 독립적으로 작동하며,..

앞서 포스팅에서 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종 대형면허..