괘종소리 세기

시맨틱 태그(Semantic Tag) 란? 태그처럼 block element지만, 와 다르게 의미를 포함하고 있는 HTML 태그. HTML5부터 등장함.※ 참고 : 태그는 inline element라고 하며, 줄바꿈이 없습니다.   시맨틱 태그를 이용하여 얻는 장점1. HTML5 기반 웹 페이지 일관성 향상 -> 음성 서비스 등 접근성 서비스들에 정보 제공2. 코드 가독성 향상3. SEO(Search Engine Optimization, 검색 엔진 최적화) 향상 -> 검색엔진 크롤링 봇에게 정보 제공   : 페이지 링크들이 모여 있는 네비게이션 바 : 배포가 가능한 콘텐츠(게시글) : 게시글에 포함된 미디어 콘텐츠 : 의 캡션 : 사이드바 메뉴 : 콘텐츠들을 특정 몇 개의 주제별로 묶을 때 사용

특정 시간이 현재 시간보다 이전에 일어난 일인지 초단위로 확인할 때, 아래와 같은 SQL문을 쓴다. SELECT CASE WHEN timestampdiff(SECOND, "2024-03-02 06:00:00.000", CURRENT_TIMESTAMP()) > 0 THEN "y" ELSE 'n' END FROM users; 단위는 초단위(SECOND) 말고도 연(YEAR), 분기(QUARTER), 월(MONTH), 주(WEEK), 일(DAY), 시간(HOUR), 분(MINUTE) 단위로도 설정할 수 있다.

코딩애플 여고생입니다 www.youtube.com 제가 평소에 즐겨보는 유튜버입니다. 채널은 여고생(?)이 운영하고 있습니다. 1. 번들링 툴 (Webpack, Vite 등) 웹 개발시 라이브러리를 쉽게 사용하기 위해 npm을 사용함. npm init으로 npm을 설치함. (이때 package.json 생성됨) npm을 사용하면 node_modules의 용량이 너무 큰데, 번들링 툴을 이용하면 실제 필요한 코드만 하나의 .js 파일로 합쳐주기 때문에 거의 반필수적으로 사용됨. Webpack은 느리지만 Vite는 esbuild(Go로 만들어짐)를 써서 빠름 npm create vite@latest로 사용 (출처: https://youtu.be/iX3Nu1FcZKA?si=zPpVDq5-z9gnuzbh) 2...

최근 아무 이유 없이 Windows 설정에 들어가서 스피커랑 헤드폰을 전환하기가 귀찮아졌습니다. 피시방에 가면 스피커와 헤드폰을 빠르게 전환할 수 있도록 바탕화면에 아예 버튼이 만들어져 있지요. 이걸 한번 만들려고 시도해보았습니다. 1. NirCmd를 다운받습니다. https://www.nirsoft.net/utils/nircmd.html NirCmd - Windows command line tool NirCmd v2.86 Copyright (c) 2003 - 2019 Nir Sofer See Also Description NirCmd is a small command-line utility that allows you to do some useful tasks without displaying any ..

네이버 메일 등과 달리 Gmail에서는 display: flex; 속성은 되지만 flex의 하위 속성은 반영되지가 않는다. 예를 들어 flex-direction: column; 이라든가 align-items: center; 등의 속성이 적용되지 않는다. 그래서 보통은 display: block; 속성으로 하되, 요소를 담은 박스를 가운데 정렬을 하기 위해서는 align="center" 과 table을 이용한다. 검은색 테두리가 메일의 전체 영역이라고 했을 때, 빨간색 테두리 부분은 가운데 정렬을, 파란색 테두리 부분 안에 있는 요소들은 왼쪽 정렬을 하고 싶을 때 쓸 수 있는 방법이다.

프론트엔드 개념 중 많이 헷갈리는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)에 대해 알아보겠습니다. SSR 일반적으로 MPA(Multi Page Application)에서 사용합니다. MPA는 각 페이지마다 파일이 존재하여, 페이지를 이동할 때마다 새로고침이 발생하는 방식입니다. 이미 렌더링된 HTML을 서버로부터 받아옵니다. 아래 사진을 보면, 개발자 도구에서 확인한 응답 결과인데 이미 정적 리소스가 렌더링된 것을 볼 수 있습니다. (이미지는 제외) JS는 그 다음에 다운로드합니다. HTML을 받아온 후와 JS를 받아오기 전 공백 시간은 사용자가 상호작용할 수 없는 껍데기만 있는 상태입니다. (하지만 보통은 매우 짧음) 상호작용은 할 수 없어도 이..

보통은 JPA나 Mybatis를 쓰겠지만 정적 쿼리문을 가볍게 쓸 때 사용합니다. JdbcConfig.java @Configuration public class JdbcConfig { @Bean public DataSource dataSource() { DriverManagerDataSource dataSource = new DriverManagerDataSource(); dataSource.setUsername("test"); dataSource.setPassword("test123"); dataSource.setDriverClassName("org.mariadb.jdbc.Driver"); dataSource.setUrl("jdbc:mariadb://192.168.0.123:3306/TESTDB"); ..

Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.springframework.web.client.ResourceAccessException: I/O error on POST request for "https://www.xxxx.xxx": PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target] with root cause sun.se..

Oracle과 Eclipse 연동은 끝났었으니 Oracle의 테이블을 웹 화면에 띄우는 작업을 할 수 있습니다. 이를 위해 Apache Tomcat을 써서 진행합니다. 아파치 톰캣에 대해 간략히 설명하자면 Apache는 정적인 웹 콘텐츠인 HTML을 돌리는 웹 서버이고, Tomcat은 동적인 데이터를 처리(DB 연동도 얘가 함) 하는 WAS(Web Application Server) 입니다. Apache Tomcat은 이 두 가지가 합쳐져 있다고 생각하시면 됩니다. 0. Oracle, Tomcat 포트 충돌 사전 확인 Tomcat은 기본적으로 8080 포트를 사용합니다. Oracle도 똑같이 8080 포트입니다. (주의!: Oracle 리스너 포트는 1521입니다) 보통 Tomcat을 8080으로 설정하..

※ SQL Developer와 SQL*Plus 의 2가지 방법을 모두 정리합니다. ※ SQL*Plus에서 작업한 후엔 commit; 명령을 통해 커밋해줘야 SQL Developer에서 새로고침을 했을 때 정상 반영이 됩니다. 1. 테이블 생성 (SQL Developer에서) (SQL*Plus에서) create table reservation_tbl ( lentno varchar2(3) primary key, custname varchar2(20), bookno varchar2(3), outdate date, indate date, status char ); 2. 데이터 추가 (SQL Developer에서) (SQL*Plus에서) insert into reservation_tbl values(1, '김한국..