Dr.Mlem Blog

Q1.SpringBoot를 기반으로 한 MVC 패턴의 프로젝트를 하나 작성하려고 해. 이때, View로 쓰일 HTML 파일에 들어갈 태그들에 작성해줄 name 속성들은, 백엔드로서 기능할 Java기반의 Spring에서 인식하기 위한 값들인가?   A1.결론부터 이야기하자면, HTML 폼 요소들에 사용되는 name 속성은 Spring MVC에서 백엔드 단으로 데이터를 바인딩하기 위한 중요한 매개체이다. Spring MVC나 일반적인 서버 사이드 렌더링 기반 웹 프레임워크에서, 클라이언트의 태그 안에 있는 , , 등의 폼 요소에 name 속성이 지정되어 있으면, 폼이 제출될 때 해당 name 속성에 매칭되는 key-value 형태의 파라미터가 서버로 전송된다. 이 때 서버(Spring MVC 컨트롤러)는..

Q1.html에서, 시멘틱 요소라 함은 어떤 내용을 말하는 것이지?    A1.GitHub Copilot HTML에서 시멘틱 요소란, 그 이름만으로도 의미를 알 수 있는 요소를 말합니다. 이러한 요소들은 브라우저와 개발자, 그리고 검색 엔진이 웹 페이지의 구조와 내용을 더 잘 이해할 수 있도록 도와줍니다. 시멘틱 요소는 콘텐츠의 의미를 명확히 하여 접근성과 SEO(검색 엔진 최적화)를 향상시킵니다. 몇 가지 주요 시멘틱 요소는 다음과 같습니다:: 문서나 섹션의 머리말을 정의합니다.: 내비게이션 링크를 정의합니다.: 독립적으로 구분할 수 있는 콘텐츠를 정의합니다.: 문서의 일반적인 섹션을 정의합니다.: 문서의 주요 내용과 간접적으로 관련된 콘텐츠를 정의합니다.: 문서나 섹션의 바닥글을 정의합니다.: 문서의..

(10-09 image_ex/index.js 에서)Q1.내가 궁금한 점이라서 다시 한 번 확인 부탁해. document.querySelector(".viewer > img") 이 내용에서, .viewer > img 이렇게 선택하는 것은, .viewer의 직계 자식의 img 태그들 중 첫 번째 대상을 선택하는 거야?   A1.ChatGPT의 말: 네, 정확합니다! 🎯document.querySelector(".viewer > img")에서:.viewer > img는.viewer의 직계 자식 중에서 img 태그를 찾는 선택자입니다.CSS 선택자 >는 직계 자식 관계를 나타냅니다.따라서, .viewer 내부의 직계 자식 요소 중 첫 번째 img 태그를 선택합니다.결론.viewer > img는:클래스가 .vi..

Q1.e.preventDefault(); 이 코드로 링크로의 이동 또는 form 태그의 submit 이벤트가 즉시 실행되는 것이 막힌다면, 해당 동작들은 언제 실행이 되는거야? 예를 들어서, a태그에 어떤 주소값이 href로 주어졌다면, 그 주소로의 이동은 언제 이루어지게 되는거지?   A1.ChatGPT의 말:e.preventDefault()는 브라우저의 기본 동작(예: 링크 클릭 시 페이지 이동, 폼 제출 시 새로고침)을 막는 데 사용됩니다. 즉, 기본 동작이 실행되지 않도록 브라우저에 지시하는 역할을 합니다.기본 동작 실행 시점브라우저는 다음과 같은 순서로 이벤트를 처리합니다:이벤트 트리거:사용자가 링크를 클릭하거나 폼을 제출했을 때 이벤트가 발생합니다.이벤트 리스너 실행:해당 이벤트에 연결된 ad..

Q1.HTML만의 상황에서 설명해줘. HTML 구조에서 input 태그가 가질 수 있는 value 속성이, input 태그에 설정될 기본값인가? JS나 React의 경우 말고, 순수 HTML 문서에 대한 경우에 대해서 말해줘   A1.ChatGPT의 말:  순수 HTML에서 태그의 value 속성은 기본값을 설정하는 속성입니다. 사용자가 입력 필드에 값을 입력하거나 수정하기 전에, HTML 문서가 처음 로드될 때 해당 입력 필드에 표시되는 값이 됩니다.HTML에서 value 속성의 역할1. 기본값 설정value 속성은 HTML 문서가 로드될 때 입력 필드에 표시되는 기본값을 설정합니다.사용자가 입력 필드의 값을 수정하면 value 속성의 값은 브라우저의 메모리에 저장된 현재 값으로 바뀝니다.예를 들어:..

Q1.CSS를 공부하는 와중에, 가상 클래스라고 듣게 되었어.&:after{ content: '|'; display: inline-block; padding: 0 7px; color: #ccc; }이런식으로 &: 로 들어가는게 가상 클래스인거야? 그렇다면 일반적인 클래스들은 또 따로 칭하는 것이 있어?A1.CSS에서 **:after 같은 것은 "가상 클래스(pseudo-class)"가 아니라 "가상 요소(pseudo-element)"**입니다. 비슷해 보이지만 **가상 클래스(pseudo-class)**와 **가상 요소(pseudo-element)**는 서로 다른 개념이니, 이를 분리해서 이해하면 좋습니다.1. :after는 가상 요소 (pseudo-element)&:after는 정확히는..

Q1.react에서, 순수 html태그는 ()로 묶는거야?(아래는 10-04 MyPropsTypesSub.js의 코드)const MyPropTypesSub=({name, age, hobby}) => { return( MyPropTypesSub 안녕못한다. 네놈의 이름은 {name}, 나이는 {age}세. {hobby && (취미는 {hobby}냐?)} {/** hobby 값이 있으면 출력, (아마 순수???????)html태그 덩어리는 일단 괄호로 감싸준다는 생각 하자. */} );}; 이 안에서, (취미는 ..

Q1.html 에서 속성이라는 것은, name이라든가 id 라든가 class 같은 것인가?   A1.맞습니다! HTML에서 **속성(attribute)**은 요소(element)에 추가적인 정보를 제공하거나 동작을 정의하는 데 사용됩니다. 말하신 name, id, class 같은 것도 모두 HTML 속성의 대표적인 예입니다.HTML 속성이란?HTML 속성은 요소의 특성이나 동작을 설정하기 위해 사용됩니다. 속성은 항상 태그의 시작 부분에 작성되며, 보통 키-값 쌍 형태로 표현됩니다.속성의 구성:속성 이름(attribute name): 설정하려는 속성의 이름 (예: id, class, name 등).속성 값(attribute value): 해당 속성에 설정하는 값. 속성 값은 보통 **따옴표("")**로 ..

다만, 이 위의 사진에서, M과 F 값 자체는 잘 가져오고 있었음.Thymeleaf에서 char타입에 대한 비교 연산을 지원하지 않을 뿐,값 자체는 잘 읽어왔다는 말. 저 위의 에러가 나온 이유는,아무리 gender가 char 타입이였던 것을 String으로 수정하기 위해관련된 내용을 Spring 프로젝트에서 수정했다 하더라도,해당 내용이 저장된 MySQL 의 db세션 정보를 저장하는 spring_session에는,모델 객체가 char 타입으로 되어있던 내용이 남아있기에,해당 내용과 발생하는 충돌로 인하여서 로그인이 튕기는 것. 그러기에 spring_session 테이블의 내용을 비워야 한다. spring_session_attributes의 내용은 고치지 않아도 되는 이유가,해당 테이블은 spring_s..

보호되어 있는 글입니다.