C-log

UTF-은 무엇인가 UTF는 Universal Character Set (UCS) Transformation Format의 약자로, 유니코드 문자를 인코딩하기 위한 가변 길이 문자 인코딩 형식이다. UTF는 전 세계의 모든 문자를 나타내기 위해 설계된 국제 표준 문자 인코딩 방식 중 하나이다. UTF-8은 가변 길이 문자 인코딩 방식으로 ASCII 문자는 1바이트로 인코딩되고 그 이상의 문자는 2바이트 3바이트 또는 4바이트로 인코딩된다. 이러한 특성 덕분에 UTF-8은 다양한 언어와 문자 집합을 효율적으로 지원할 수 있다. * : HTML 문서 내에서 "action"을 수행하는 태그이다. 이러한 태그들은 주로 사용자의 입력에 의해 작동하며, 사용자와 상호작용하는 요소를 생성하거나 웹 페이지의 동적인 부..

Document.execCommand() - Web API | MDNHTML 문서가 designMode로 전환되면 문서에서 execCommand 메서드를 사용할 수 있게 되는데 이것을 이용해서 문서의 편집 가능한 영역을 변경할 수 있습니다. 대부분의 명령어는 문서의 선택 영역에 영developer.mozilla.org현재 execCommand 앞으로 지원이 중단될 예정이다. execCommand를 대신할 라이브러리들은 무수히 많지만 원하는 형태와 코드 유지 보수가 매우 불편하기 때문에 가급적 라이브러리를 사용하지 않고 툴과 에디터를 제작하기로 했다. 개발을 하면서 execCommand를 사용하지 않고 개발을 시작했지만 생각보다 많은 고려를 해야해서 우선은 execCommand 를 사용해서 개발을 진행 후..

const [imageFiles, setImageFiles] = useState([]); // 이미지 파일들을 저장할 배열 상태 const [imageUrl, setImageUrl] = useState([]); ... // 에디터가 업데이트될 때 이미지 삽입 useEffect(() => { if (editorRef.current && imageFiles.length > 0) { const file = imageFiles[imageFiles.length - 1]; insertImageDate(file); } }, [editorRef.current, imageFiles]); const handleImageSelect = (e) => { const files = e.target.files; if (!!file..

앞서 포스팅에서 react-quill을 사용하지 않고 직접 에디터와 툴바를 제작하기로 결정 했다. 그러기 위해서는 두가지를 알아야 한다. 첫 번째로 contentEditable과 execCommand이다. # contentEditable contentEditable은 HTML 요소의 속성(attribute) 중 하나로, 사용자가 해당 요소의 내용을 직접 편집할 수 있게 하는 기능을 활성화하는 역할을 한다. 따라서 원하는 태그에 contentEditable="true"를 기입하게 되면 웹 페이지나 웹 애플리케이션에서 텍스트 입력 상자나 편집 가능한 컨텐츠가 된다. 사용하는 방법은 아래와 같다. 따라서 div태그가 편집을 할수 있게 된 것이다. 사용자가 입력을 직접 기입할 수 있는 에디터로 지정이 된 것이다..

JSP의 역할은 톰캣을 기반으로 동작하며 크롬에서 HTTP request 프로토콜을 받아서 처리하여 HTTP response 프로토콜을 만들어서 크롬에 전달한다. 크롬 V8을 기준으로 js와 html,css가 돌아가는 것이다. # 한글 표기를 깨지지 않고 잘 돌아 갈 수 있게 코드를 작성 contentType 디렉티브 태그 text/html : HTML 출력 charset=utf-8 : 문자 인코딩 contentType 디렉티브 태그 text/html : HTML 출력 charset=utf-8 : 문자 인코딩 이렇게 두가지 방법이 있지만 첫 번째 디렉티브는 브라우저에 전송되는 콘텐츠의 타입과 해당 콘텐츠의 문자 인코딩을 설정하는 반면, 두 번째 디렉티브는 JSP 페이지 내의 소스 코드의 인코딩을 설정합니..

* 대면 수업 내용 더보기 model view controller dispatcher servlet contextloadlistener Maven을 사용하는 이유와 장점 * 싱글톤 패턴을 알아야한다. # MVC 생성(Controller&View) ### pom.xml은 무엇인가 더보기 * HomeController.java package kr.ac.hansung.cse.controller; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.s..

1. DOM(Document Object Model)이란? DOM은 웹 페이지의 구조를 노드의 상속 관계를 맺는 트리 구조로 이루어져 있습니다. 각 노드는 요소(element), 속성(attribute) 등을 나타내며, 부모-자식 관계에 따라 구성됩니다. JavaScript의 를 통해 `document` 객체를 통해 웹 페이지의 요소에 접근하여 동적으로 변경할 수 있습니다. 이러한 노드를 읽고 조작할 수 있으며, 이를 통해 웹 페이지는 브라우저가 이해할 수 있는 구조로 만들어지며, JavaScript를 사용하여 웹 페이지의 요소를 동적으로 조작할 수 있습니다. keyword : 웹 페이지의 구조, 트리 구조로 이루어져 있다, 상속관계, 요소, 속성, js의 documnet 객체 2. DOM과 Virtua..