🍃 오늘은 Swagger에 대해 알아보자 😀 Swagger란? API 문서화와 테스트를 지원하는 오픈 소스 프레임워크로, RESTful 웹 서비스의 설계, 빌드, 문서화, 소비자 테스트 등을 더 쉽게 만들어주는 도구이다. Swagger는 RESTful API의 개발 및 관리를 단순화하고 문서화를 자동화하는 데 도움이 된다. 😀 Swagger의 주요 기능과 개념 1) API 문서화 Swagger를 사용하면 API 엔드포인트, 요청 및 응답 모델, 파라미터, HTTP 메서드, 예제 요청 및 응답 등 API에 대한 자세한 문서를 자동으로 생성할 수 있다. 이 문서화는 Swagger UI를 통해 사용자 친화적인 HTML 또는 JSON 형식으로 제공된다. 2) API 디자인 Swagger를 사용하여 API의 설계..

Quill은 Editor 라이브러리로 타 Editor에 비해 기능은 많이 없지만 가볍다는 장점이 있다. 🍃 사용 방법 1) Quill 설치 npm install react-quill npm install quill-image-resize #이미지 리사이즈를 위한 설치 2) import import useMemo from 'react'; import ReactQuill from 'react-quill'; //React QUill 에디터 import ImageResize from 'quill-image-resize'; //이미지 크기 조절 3) Formats 지정 const formats = [ 'header', 'font', 'size', 'bold', 'italic', 'underline', 'strik..

팀원 중 회원 파트를 맡은 친구가 회사를 병행하면서 하느라 많은 시간을 할애하지 못한다. 문제 쪽을 맡은 친구도 내일부터 여행 약속이 잡혀있어서 일단 선행으로 한 부분을 보고 참고하여 한다고 한다.시간이 좀 걸려서 그 전까지 회원이 들어가지 않는 부분은 전부 완성하려고 한다. 현재 완료 항목 1. 게시글 리스트 조회 - 글 번호 내림차순으로 변경 - 게시글 조회수 추가 2. 게시글 작성 - 제목에서 Tab 키보드 클릭 시 속성창이 아닌 내용으로 가도록 커스텀 3. 게시글 상세 조회 - 게시글 수정, 게시글 삭제 - HTML 형식으로 불러오기 - 추가 간격 조정 4. 댓글 - 총 댓글 수 조회 - 수정, 삭제 가능 - 댓글 내용 입력칸에 아무 내용도 없을 시 작성 버튼 비활성화 추가 5. 답글 - 답글 작..

인터넷 사용 중 많이 본 404 Not Found 에러 무슨 뜻일까? HTTP 상태 코드를 알아보자 😀 HTTP란? HTTP(Hypertext Transfer Protocol)는 웹 서버와 웹 클라이언트 사이에서 데이터를 주고받기 위해 사용하는 통신 방식으로 TCP/IP 프로토콜 위에서 동작한다. 즉, 웹을 이용하려면 서버와 클라이언트는 각각 필수적인 IP 주소를 가져야 한다는 의미이다. HTTP는 HTML이나 XML같은 하이퍼 텍스트 뿐만 아니라 이미지, 음성, 동영상, JavaScript, PDF같은 각종 문서 파일 등 컴퓨터에서 다룰 수 있는 데이터라면 무엇이든 전송할 수 있다. 서버에서의 처리 결과는 응답 메시지의 상태 라인에 있는 세자리 수 상태코드를 보고 파악할 수 있는데, 첫 번째 숫자는 H..

🍃 a 태그란? 태그는 HTML에서 사용되는 "앵커" 요소(anchor element)이다. 앵커란 웹 페이지에서 다른 웹 페이지로 이동하거나 같은 페이지 내에서 특정 위치로 스크롤 하는데 사용되는 링크를 뜻한다. 이 요소를 사용하여 하이퍼링크를 생성하며, 사용자가 클릭하면 지정된 URL로 이동하게 된다. 이것은 링크입니다 🍃 예시 아래 태그에서 그냥 사용하게 되면 이렇게 밑줄과 색이 자동으로 지정된다. 수정 🍃 a태그 밑줄 없애기 때문에 밑줄을 없애고 싶다면 아래와 같이 textDecoration none css를 적용시켜주면 밑줄이 사라지게 된다. 수정)} 🍃 색 바꾸기 색을 바꾸고 싶다면 color를 넣어주면 된다. 수정)}

1. 요소에 style 지정해주기(Inline CSS) - style{{쓰고싶은 것}} 링크 handleEditCommentClick(comment)}>수정)} 2. 모듈 - 컴포넌트마다 고유한 스타일을 유지하고 적용할 수 있다. // Button.module.css .link { text-decoration: none; } // Component.jsx import React from 'react'; import styles from './Button.module.css'; const Component = () => { return ( 링크 ); } export default Component; /* custom-quill-styles.css */ /* Quill 에디터 컨테이너 스타일 */ .quil..