2021. 11. 18. 11:49ㆍ카테고리 없음
1. error: jquery.deferred exception: cannot read properties of null (reading 'add') typeerror: cannot read properties of null (reading 'add')
그런데 사실 slick (가로로 돌아가는 carousel ) 문제가 전혀!! 아니었다...
저번 프로젝트에서 하던대로, 매 view jsp 페이지마다 반복되는 header와 footer 작업을 한번에 하려고,
header.jsp와 footer.jsp 를 각각 따로 만들고서
<!-- header include start -->
<%@ include file="/WEB-INF/views/parts/header.jsp" %>
<!-- header include end -->각각의 view page마다 이런식으로 넣었는데...
그 이후부터... 잘되던 dropdown 메뉴가 안되는것이다..
미디어쿼리 적용되는 사이즈부터 모바일 메뉴 전부 다.. dropdown이 안됐다.
그리고 멀쩡한 slick이 위와 같은 에러를 일으키고 난리남..
그리고.. 결국 검색 끝에 해결책을 찾았다.
Dropdown list isn't working after importing another html file using jquery?
I'm trying to import header.html for avoiding file duplication. But in this situation, I can't use PHP. This is the head section of index.html file, <script src="https://code.jquery.com/
stackoverflow.com
answer
One possible reason for your problem would be that if you already have <html><head><body> tags in all header.html, footer.html and your master page. When you import those sub pages in your master page all those tags will come along with contents. If its true, delete those tags from your sub pages because your master page should only have one of specific tags
와... 원인은 나의 header.jsp와 footer.jsp 파일에 <html><head><body> 태그가 전부 있었기 때문.. 충격
그래서 아래와 같은 선언만 두고서 <html><head><body>와, <head> 안에 있는 css등등 경로 추가 태그<link>, 그리고 <body> 하단의 js 태그 <script scr="path"> 들을 전부 지웠다...
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>이 선언은 페이지 characterset 에러뜨길래(이클립스에서..) 남겨뒀다.
아무튼 나를 너무 힘들게 했던 에러가 사라져서 너무나 기쁘다...
결론: 페이지 include 쓸 때는 반드시 include되는 파일 내부의 <html><head><body>을 싹 다 없앨것!!!
2. 눈꼽만한 화살표로 이틀을 고생하기....
drop down 메뉴에서.. 서브 드롭다운은 오른쪽 화살표가 라인 맨끝에 생기게 되어있었는데..
메뉴랑 페이지 작업하고 나니까, 더 이상 화살표가 보이지 않았다..
font awesome 꺼라서.. 찾아보고 하는데도 해결이 안되고...
결국 해결했는데.. font-weight 문제였다.. 내가 쓰는 bootstrap 템플릿에서는
plugins/fontawesome/webfonts/fa-solid-900.xxx
파일들이 몇개 있었는데... 내가 잘 모르고서 해결하려다 보니까... FontAwesome이 font-weight를 400과 900으로 나눠제공하는걸 몰랐던 것... 애초에 ::after가 pseudo element인 것도 몰랐으니..
확실히.. 모르겠으면 내가 알고있는 얼마 안되는걸로 고민하지말고 당장 학습사이트랑 공식문서를 들어가봐야한다.
::어쩌구 로 쓰는 pseudo-elements
js 없이도 강력한 기능을 제공한다!
물론 jsp페이지 내에 정보가 안남기 때문에 data를 직접 content: 에 넣는것은 자제할 것..
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
Pseudo-elements - CSS: Cascading Style Sheets | MDN
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.
developer.mozilla.org
element::after
해당 element의 첫번째 자식에게 적용한다!
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
::after (:after) - CSS: Cascading Style Sheets | MDN
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
developer.mozilla.org
이것이 바로 나의 개고생한 파트...
.dropdown-submenu > a::after {
display: inline-block;
vertical-align: bottom;
float: right;
content: "\f105";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
/* plugins/fontawesome/webfonts/ 에... fa-solid-900 파일들 밖에 없어서.. */
/* font-weight 지정 안하면... 안보인다... 이걸로 이틀작업함.. */
margin-top: 0;
margin-right: 5px;
border: 0;
}
pseudo-element랑 fontawesome을 섞어서 사용하기!
매우 편리한 방식이지만.. 아주 큰 코 다치긴 했다...
https://fontawesome.com/v5.15/how-to-use/on-the-web/advanced/css-pseudo-elements
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
그리고 모질라 문서는 참 친절하고 이해하기 쉬운편!
https://developer.mozilla.org/en-US/docs/Learn/CSS
Learn to style HTML using CSS - Learn web development | MDN
Cascading Stylesheets — or CSS — is the first technology you should start learning after HTML. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the f
developer.mozilla.org
3. mapper.xml에다 where id = #{id} 같이 parameter를 전달할 경우,
Mapper Interface의 메서드 시그니처가 되는 parameter에 꼭! @Param("id") 를 붙여줘야 한다!
안그럼 뭐가 들어오긴했는데 모른다~ 식으로 에러가 뜬다.
arg[0], arg[1] 뭐 이렇게는 있는데 네가 말한 "id"는 없는데? 라고 에러가 뜨니깐..
annotation을 꼭 써주자..
글구 MyBatis 3 doc에는 없음.. 왜냐면 ibatis꺼라서.. 어이없다는 거지~
아래는 해당 MyBatis API 문서(java api 형식)
https://mybatis.org/mybatis-3/es/apidocs/org/apache/ibatis/annotations/Param.html
Param (mybatis 3.5.7 API)
value public abstract String value Returns the parameter name. Returns: the parameter name
mybatis.org
눌러보면 이렇게 쓰라고 나온다.
The annotation that specify the parameter name.
How to use:
public interface UserMapper {
@Select("SELECT id, name FROM users WHERE name = #{name}")
User selectById(@Param("name") String value);
}4. 데이터 매핑 잘 해서 게시판에서 select 문을 통해 list를 잘 가져왔는데..
list-view.jsp에서 번호를 출력할 때, rownum을 가져와야한다.
id를 가져오면 중간중간 삭제한 글은 비기 때문에..
oracle ROW_NUMBER()과 같은 기능을 MySql에서 수행하고 싶다면..
사용자 정의 변수를 쓰면 된다.
User-Defined Variables
https://dev.mysql.com/doc/refman/8.0/en/user-variables.html
MySQL :: MySQL 8.0 Reference Manual :: 9.4 User-Defined Variables
9.4 User-Defined Variables You can store a value in a user-defined variable in one statement and refer to it later in another statement. This enables you to pass values from one statement to another. User variables are written as @var_name, where the vari
dev.mysql.com
set으로 variable에 값 할당하기
https://dev.mysql.com/doc/refman/8.0/en/set-variable.html
MySQL :: MySQL 8.0 Reference Manual :: 13.7.6.1 SET Syntax for Variable Assignment
13.7.6.1 SET Syntax for Variable Assignment SET variable = expr [, variable = expr] ... variable: { user_var_name | param_name | local_var_name | {GLOBAL | @@GLOBAL.} system_var_name | {PERSIST | @@PERSIST.} system_var_name | {PERSIST_ONLY | @@PERSIST_ONL
dev.mysql.com
5. 정말 열심히 코딩했다..
그동안 front 를 하느라, 블로그에 글 올릴 일이 많지않았다.. 왜냐면 너무 힘들어서..
정말.. front 너무 어렵고..
그런데 글을 쓸수밖에 없는 대박 사건이 일어났다..
드디어 영상이랑 글 게시판 형태를 확정했다.. (3번의 갈아엎기 끝에.. constra의 services 바탕으로 박스그림자 주고 엄청 공들였다.)
그리고 코딩도 마쳐서 아름답게 완성했는데..
와.. 뭐 건든게 없는거같은데 그냥 갑자기!!갑자기!! 안되는거다.. 내가 수정한 부분만...
와 구글링을 진짜.. 모든 검색어를 다 넣어 해봤다
캐시 지우기? 당연히 했지
style.css?ver=1 이런것도 당연히 해봤지
css validator? 당연히!!!
내 코드에 오류가 없다는데... 근데 안되는거다............내가 수정한 부분만!!!!!!!!!!!!!!!
대체 왜???
힘들게 고생해서 다 만들어놨는데 갑자기 안되니까 지옥이었다. 검색을 3시간 넘게 하고.. 해결은 안되고..
오늘 다시 와서.. 템플릿 새로 검색해서 새로 할까?? 까지 생각하면서...
템플릿이나 검색하고 있었다...
(전에 플젝할때는 colorlib꺼 썼는데 확실히 걔네가 완성도 있음...
근데 충격인게 그때 받아놓은 템플릿이 지금은 유료.. 그래서 간만에 다시 들어가서 free template 전부 다운받아놓았다..
예전에 다 받아놓을걸 ㅠㅠㅠ)
아무튼.... 그러다가 해결은 해야하니깐...
내 파일에서 문제점 찾으려고 이클립스 메뉴를 뒤졌다...
뭔가 힌트라도 찾으려고..
근데..!!!!!!!!!!!!!!!!!!!!!
project 마우스 오른쪽 클릭 메뉴에!!! Restore from Local History가 있는거!!!!!!!!!!!!
이걸 이제 보다니!! 이걸 몰라서 어제부터 오늘 계속 와 그때당시로 돌아가고 싶다.. 이러고 있었다.
근데 이걸보고 바로 내가 완성한 시각의 파일을 긁어다가!!
css파일에다가 덮어씌웠다.
와.. 문제없이 작동 ㅠㅠㅠㅠㅠㅠㅠ너무 행복하다.. 이것이 바로 돌아온 탕자를 받아준 아버지의 마음??
이제 파일은 복원했으니.. 작동하는 css와 에러폭탄 css를 compare with - each other로 비교해야지...
와.. 충격 사건.... 비교했는데 차이점이 딱히 없다.. 차이를 못찾는걸수도..
그냥 작동이 되는거에 감사하고 일단 넘어가야겠다..
어차피 내 수준에서 지금 찾을 수 있는게 아님..
대체 왜 안됐던 걸까..? 괴담이 따로 없네..
6. 글 insert를 위해서 editor를 찾다가 GCP(Google Cloud Platform)의 google cloud storage에다 이미지를 업로드하는걸 찾아봤다. Spring과 연동해야하기때문에! 검색하다가 Spring에서 연동을 제공하는걸 발견했다!
Cloud Storage Objects As Spring Resources - 완전 내가 찾던거..
Spring Cloud GCP
Spring Cloud GCP provides support for Cloud Foundry’s GCP Service Broker. Our Pub/Sub, Cloud Spanner, Storage, Cloud Trace and Cloud SQL MySQL and PostgreSQL starters are Cloud Foundry aware and retrieve properties like project ID, credentials, etc., tha
googlecloudplatform.github.io
7. jsp 파일 경로를 수정하다가.. JSP파일명은 어떻게 지어야하는지 몰라서 검색함
Code Conventions for the JavaServer Pages Technology Version 1.x Language
https://www.oracle.com/java/technologies/naming-conventions.html
결론은 함수이름 짓듯이 lower case로 시작하는 camelCase..
Code Conventions for the Java TM Programming Language
https://www.oracle.com/java/technologies/javase/codeconventions-contents.html
이거는 진짜 자바 code convention의 모든것!!!!!!!!!!!
8. 갑자기 sts 응답없음이 뜨더니(나는 3.9.11 이용중..) 화면이 까맣게되고 정말 진짜로 응답이 없게 되었다...
이때 내가 정말 잘한점은 sourcetree를 켜고 있어서...
재빨리 소스는 멀쩡하게 저장된거 확인하고(나에겐 ctrl+shift+s를 계속 누르는 좋은 습관이 있다), 바로 commit하고 push했음..
어쨌든 전혀 작동하지않아서 컴터 다시시작했는데, sts를 누르면 그냥 연두색 로딩창이 뜨다가 사라졌다.
작업관리자에 가니까 백그라운드엔 있고....
https://blog.naver.com/moon-over/221786009031
[STS] 실행 시 무반응 해결 방법 | SpringToolSuite4 실행 안 됨 | Spring 실행 오류
STS에 Git 프로젝트 클론까지 마친 후, Getter / Setter를 자동으로 생성해 준다는 lombok까지 성공...
blog.naver.com
이거보고서 해봤더니 이제 되긴하는데
"Workspace in use or cannot be created, choose a different one.”
이라는 메시지만 뜨고... 내 워크스페이스에 들어갈수가 없었다.
구글링하니까 stackoverflow에서 .metadata/.lock이랑 .metadata/.log 삭제하래서 했는데 작동하지않았다.정말 개빡치는 일..그래서 거기서 알려준대로 워크스페이스 새로 만들고 .metadata 복붙했는데 ㅋㅋㅋㅋㅋㅋ똑같이 얘도 잠김.그래서 아.... 답이 없구나 하고서 그냥 ... 새로 workspace를 만들었다....encoding 설정하고.. 그리고 import project from local repository 눌러가지고 이미 있던 플젝 가져옴... 정말 다행쓰...git에 없었다면...? 정말 끔찍쓰...
run해보니깐 마지막 상태 그대로 잘 작동한다.. encoding도 안깨졌고...
9. slick slider가 적용된 페이지가 있는데..
width는 반응형인데 height은 고정이라 사람 정수리만 보이게 되는 문제가 있었다..
검색하니깐 vw, vh 등에 관한 멋진 글이 있어서 해결!
단순 css만으로 해결이 가능하다니 ㅠㅠ
암튼 보이는 화면을 나타내는 단위가 vw, vh이다. view width, view height인 것..
그래서 js를 안써도 자동으로 반응형이 된다.. 여기다가 calc()함수도 써주면 짱이라고 함
하지만 나는 그렇게는 필요없어서 vw만 썼다.
10. 위의 것을 vw로 퉁치면 대강의 조정은 가능한데 사진이 안잘리고 보이게 할수는 없음
bootstrap4를 이용하면 아래 예시와 같이 row 아래에 col-size-number div 박스 크기를 정할 때, 해당 요소(이미지든 박스든 상관없이!)가 responsive하게 변하는데, 범위마다 요소 너비는 고정되어있다!
<div class="row">
<div class="col-lg-8 col-sm-10 co-11">
...
<div>
<div>바로 이게 중요하다.
해당 view width 범위마다 div 너비가 계속 줄어드는게 아니라 고정되어있다는거.
flex로 위치를 고정해주어서 창이 줄어들면, 여백이(padding이나 margin을 따로 많이 주는거 아님) 점점 줄어들게 되는것.
이걸 알면 bootstrap4에서 정한 범위마다 media query를 따로 주어서 완벽한 사진 크기를 조정할 수 있다.
범위마다 고정된 너비를 가지는 것: 한마디로 Responsive breakpoints를 가진다는 것!!!
https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints
Overview
Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
getbootstrap.com
공식 문서에서 보듯이 아래처럼 이미지 height나 width를 고정하면 된다.
slick slider 쓸 때는 width가 안먹으니깐 height를 media query마다 명시하면 된다!
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }아래 코드는 slick-slider를 사용해서 이미지를 slide하고
이미지 크기를 조정한 것.
이미지 column은 col-lg-6으로 해서 글과 반반 나오다가 lg가 끝나는, 즉 view width < 992px 일 때, 밑으로 내려가도록 했다. 왜냐면 그 이하 설정을 따로 안할때 해당 div가 가지는 100%가 되기 때문
<section class="school-container youth1">
<div class="container">
<div class="row">
<div class="col-lg-6">
<blockquote class="blockquote">
<p> ..... </p>
</div><!-- Col end -->
<!-- 이미지 carrousel -->
<!-- 이미지: 600 x 450 -->
<div class="col-lg-6 mt-5 mt-lg-0">
<div id="page-slider" class="page-slider small-bg">
<div class="item" style="background-image:url(images/introduction/youth/youth1.png)">
</div><!-- Item 1 end -->
<div class="item" style="background-image:url(images/introduction/youth/youth2.png)">
</div><!-- Item 2 end -->
<div class="item" style="background-image:url(images/introduction/youth/youth3.png)">
</div><!-- Item 3 end -->
</div><!-- Page slider end-->
</div><!-- Col end -->
</div><!-- Content row end -->
</div><!-- Container end -->
</section><!-- Main container end -->/* 이미지 */
.youth1 .page-slider.small-bg .item {
/* 화면이 아무리 커져도 width >= 1200 에선 사진 width가 540 고정 */
height: 405px; /* 600:450 = 540:x */
max-height: 405px; /* 사진 원본비율에 맞는 크기 */
background-size: cover;
border-radius: 10px;
}
@media ( max-width : 1199px) {
.youth1 .page-slider.small-bg .item {
/* 화면이 아무리 작아져도 992 <= width < 1200 에선 사진 width가 450 고정 */
height: 337.5px; /* 600:450 = 450:x */
max-height: 337.5px; /* 사진 원본비율에 맞는 크기 */
}
}
/* 여기부터 밑으로 내려가: col-lg-6니까.. */
@media ( max-width : 991px) {
.youth1 .page-slider.small-bg .item {
/* 화면이 아무리 작아져도 768 <= width < 992 에선 사진 width가 690 고정 */
height: 517.5px; /* 600:450 = 690:x */
max-height: 517.5px; /* 사진 원본비율에 맞는 크기 */
}
}
@media ( max-width : 767px) {
.youth1 .page-slider.small-bg .item {
/* 화면이 아무리 작아져도 576 <= width < 768 에선 사진 width가 510 고정 */
height: 382.5px; /* 600:450 = 510:x */
max-height: 382.5px; /* 사진 원본비율에 맞는 크기 */
}
}
/* 이제부턴 그냥 1px씩 화면 작아질때마다 이미지 width도 1px씩 작아짐 */
@media ( max-width : 575px) {
.youth1 .page-slider.small-bg .item {
/* 양 옆 패딩이 15px임: width = 100vw-30px */
height: calc((100vw - 30px) * 0.75); /* 600:450 = 100vw-30px:x */
max-height: calc((100vw - 30px) * 0.75); /* 사진 원본비율에 맞는 크기 */
}
}
맨 처음 프로젝트 했을 때는 그냥 부트스트랩이라는게 있대~ 다들 쓴대 하고 썼는데 이렇게 활용하고 보니깐
진짜 멋진 친구다... 부트스트랩 ㅠㅠ 최고야..
11. 부트스트랩의 꽃 : Grid system
https://getbootstrap.com/docs/4.6/layout/grid/
이 문서의 하나하나가 다 너무너무너무 유용하다!!
Grid system
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
getbootstrap.com
그리고 정렬, flex에 관련된 페이지!
https://getbootstrap.com/docs/4.6/utilities/flex
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
getbootstrap.com
row 밑의 column을 딱 하나만 주고서 가운데 정렬 시키는 법!
<div class="row justify-content-center">
<div class="col-6">
....
</div>
</div>이렇게 row에다 justify-content-center를 주면 아래 있는 div가 화면 반정도인 col-6임에도 가운데 정렬 된다~~
justify-content-between는 하위 아이템을 양 옆으로 갈라준다!
<div class="tags-area d-flex align-items-center justify-content-between">
<div class="post-tags">
<a href="#">목록</a>
</div>
<div class="post-tags">
<a href="#">글쓰기</a>
<a href="#">수정하기</a>
</div>
</div>목록이랑 글쓰기 버튼 같은것들 양 옆으로 가를 때, 정말 짱 유용하다...
그리고 jsp에서 foreach 돌려서 목록에 들어갈 아이템 돌릴때...
제목이나 아이템의 내용 길이가 달라서 박스 height가 서로 다르고 난리난다.
그럴때!!! 각 줄 박스 높이 제일 긴 친구에게 맞추기!!!
equal height! => .h-100
When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.
아래 링크에서 스크롤 쪼금 내리면 있음..
https://getbootstrap.com/docs/4.6/components/card/#grid-cards
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
getbootstrap.com
12. 같은 페이지 내에서 Linking to an element on the same page
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page
<!-- <a> element links to the section below -->
<p><a href="#Section_further_down">
Jump to the heading below
</a></p>
<!-- Heading to link to -->
<h2 id="Section_further_down">Section further down</h2>id 주면 되는 것~~