"Modal"과 "drawer"는 웹 디자인 및 사용자 인터페이스에서 자주 사용되는 용어입니다. 이들은 각각 다른 유형의 사용자 인터페이스 컴포넌트를 가리키는데 사용됩니다. 다음은 modal과 drawer의 주요 차이점을 설명해 드리겠습니다. Modal: Modal은 일반적으로 사용자와의 상호작용을 위해 모달 창이라고도 불리는 작은 팝업 창을 나타냅니다. Modal은 사용자에게 어떤 작업을 요청하거나 정보를 제공하기 위해 주로 사용됩니다. Modal이 나타날 때, 일반적으로 배경을 어둡게 만들어서 Modal 외부의 컨텐츠에 초점을 맞출 수 있도록 합니다. 사용자는 Modal 창 외부의 컨텐츠를 클릭하거나 닫기 버튼을 눌러서 Modal을 닫을 수 있습니다. Modal은 일반적으로 빠른 작업을 수행하기 위해..

버튼 안에 들어가는 글자를 "버튼 레이블(button label)" 또는 "버튼 텍스트(button text)"라고 합니다. 이것은 일반적으로 버튼을 클릭하면 수행되는 작업을 나타내는 짧은 설명 또는 명령어를 포함합니다. 예를 들어, "확인" 또는 "취소"와 같은 단어나 구문이 일반적인 버튼 레이블입니다. HTML 요소는 다음과 같은 옵션을 가질 수 있습니다: accesskey: 버튼에 할당 된 액세스 키를 나타냅니다. autofocus: 페이지가 로드될 때 버튼에 자동으로 포커스를 설정합니다. class 또는 classname: CSS 클래스를 지정하여 버튼 스타일을 적용할 수 있습니다. disabled: 버튼을 사용하지 못하도록 만듭니다. form: 버튼이 속한 폼을 지정합니다. formaction:..

리액트에서 긴 글 목록을 처리하는 방법은 여러 가지가 있습니다. 이 중에서 대표적인 방법은 다음과 같습니다. 페이징(Paging): 긴 글 목록을 여러 페이지로 나누어서 보여주는 방식입니다. 사용자가 페이지를 이동하면 해당 페이지에 맞는 글 목록이 보여지도록 합니다. 이 방식은 사용자가 긴 목록을 한 번에 볼 수 없는 단점이 있지만, 서버 측에서 데이터를 처리하므로 빠른 속도로 데이터를 불러올 수 있습니다. 무한 스크롤(Infinite Scroll): 긴 글 목록을 한 페이지에 모두 보여주는 대신, 사용자가 스크롤을 내리면 자동으로 추가적인 글 목록이 불러와지는 방식입니다. 이 방식은 사용자가 원하는 만큼 스크롤을 내리면 계속해서 새로운 글 목록을 불러올 수 있으므로 사용자 경험이 좋습니다. 하지만 데이..

마지 할시 겹치는 것만 직접 선택한후 재 커밋

재사용성: 컴포넌트는 재사용 가능한 코드 조각입니다. 따라서 컴포넌트를 만들 때 재사용성을 고려해야 합니다. 이를 위해 컴포넌트는 작고 단순하게 만들고, 다른 컴포넌트와 결합하여 새로운 기능을 만들 수 있도록 설계해야 합니다. 모듈화: 컴포넌트는 모듈화된 코드입니다. 따라서 컴포넌트를 만들 때 모듈화를 고려해야 합니다. 이를 위해 컴포넌트는 다른 모듈과 상호작용할 수 있도록 인터페이스를 제공해야 합니다. 일관성: 컴포넌트는 일관성 있는 UI/UX를 제공해야 합니다. 따라서 컴포넌트를 만들 때 일관성 있는 스타일과 레이아웃을 사용해야 합니다. 유지보수성: 컴포넌트는 유지보수 가능한 코드여야 합니다. 따라서 컴포넌트를 만들 때 가독성과 확장성을 고려해야 합니다. 이를 위해 컴포넌트는 문서화되고, 테스트 가능..

https://velog.io/@heka1024/%EB%82%B4%EA%B0%80-Django%EC%97%90%EC%84%9C-Class-Based-View%EB%A5%BC-%EB%8D%94-%EC%84%A0%ED%98%B8%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0 내가 Django에서 Class Based View를 더 선호하는 이유 나는 왜 Class-based View를 더 사랑하는가? velog.io CBV의 장점 GET, POST 등 HTTP 메소드에 따른 처리 코드를 작성할 때 if 함수 대신에 메소드 명으로 코드의 구조가 깔끔하다. 다중상속 같은 객체지향 기법을 활용해 제너릭 뷰, 믹스인 클래스 등을 사용해 코드의 재사용과 개발 생산성을 높여준다. 각각의 장단점이 존..

import { Form, Input, Button } from 'antd'; const MyForm = () => { const onFinish = (values) => { // 폼 데이터 전송 시 처리 로직 // '이름' 필드의 값을 제외하고 처리 const { name, ...otherValues } = values; console.log(otherValues); }; return ( {/* 다른 폼 필드들 */} 전송 ); }; export default MyForm;

setFormFinishHandler 함수를 호출할 때에는 함수의 이름을 사용하거나, 함수를 호출하는 새로운 함수를 생성하여 전달하는 두 가지 방법이 있습니다. 1. setFormFinishHandler(codePostHandler) 형태로 함수의 이름 codePostHandler를 직접 전달하는 경우: setFormFinishHandler(codePostHandler); 이 경우 formFinishHandler가 codePostHandler 함수로 설정됩니다. 2. setFormFinishHandler(() => codePostHandler) 형태로 함수를 호출하는 새로운 함수를 생성하여 전달하는 경우: setFormFinishHandler(() => codePostHandler); 이 경우 formF..

function camelToSnakeCase(str) { return str.replace(/([a-z])([A-Z0-9])/g, '$1_$2') .replace(/([0-9])([a-zA-Z])/g, '$1_$2') .toLowerCase(); } function camelToSnakeCase(str) { return str.replace(/([a-z\d])([A-Z])/g, '$1_$2') .toLowerCase(); } function snakeToCamelCase(str) { return str.replace(/([-_][a-z])/g, (match) => match.toUpperCase().replace(/[-_]/g, '')); } function snakeToCamelCase(str) { ..

스네일 카멜 전환과정중 미리 협의가 없음면 etcRmkCn1 이 etc_rmk_cn_1 혹은etc_rmk_cn1 바뀔수 있음