The CodeDeploy agent did not find an AppSpec file within the unpacked revision directory at revision-relative path "appspec.yml". The revision was unpacked to directory "/opt/codedeploy-agent/deployment-root/7a4336d8-06e1-4025-abe0-192e0bffa4e1/d-L0T638J4B/deployment-archive", and the AppSpec file was expected but not found at path "/opt/codedeploy-agent/deployment-root/7a4336d8-06e1-4025-abe0-192e0bffa4e1/d-L0T638J4B/deployment-archive/appspec.yml". Consult the AWS CodeDeploy Appspec documentation for more information at http://docs.aws.amazon.com/codedeploy/latest/userguide/reference-appspec-file.html

 

디렉토리문제

프로젝트폴더 안에 pom이없고  프로젝트폴더 - 프로젝트폴더2 - pom.xml으로 

경로맵핑때문에 오류가났었다.

 

디렉토리구조를 프로젝트폴더 - pom.xml로 바꾸니까 해결 !

The overall deployment failed because too many individual instances failed deployment, too few healthy instances are available for deployment, or some instances in your deployment group are experiencing problems.

 

 

웹호스팅 링크 정리

  1. AWS계정 생성 및 인스턴스 생성 https://jiwontip.tistory.com/43?category=367314
  2. EC2 인스턴스에 java 설치 https://yhmane.tistory.com/23?category=773048
  3. openjdk 환경변수 https://eodevelop.tistory.com/42
  4. jar파일 생성 https://jhleeeme.github.io/create-jar-with-maven-in-vscode/
  5. maven 환경변수 설정 https://devpad.tistory.com/19
  6. ubuntu 파일질라 연결 https://onlyfor-me-blog.tistory.com/121
  7. ubuntu에서 jar파일 백그라운드로 실행하기 https://kyome.tistory.com/44
  8. S3버킷 https://velog.io/@reedfoxy/AWS-S3-SDK-2.0-for-Java
  9. S3 업로드 https://leveloper.tistory.com/46
  10. https://victorydntmd.tistory.com/334

 

 

 

분명 간단하다고 들었는데 끝이 없다.. 

로컬서버에서 연동되던 것들이 웹서버에서는 오류가 발생했다.

viewResolver가 prefix와 suffix를 결합해주는데 이때 중간에 절대경로로 넣은 '/'가 두번들어가게되서 오류나는거라고 천재 고라니가 말해줬다..

배포 완료 된 줄 알고 자려고 누웠을때 폰으로 웹서버에 접속했더니 푸터연결이 끊겨서 접속이 안되는것..백그라운설정 후 실시간 접속이 가능해졌다.

이제는 이미지 저장소 연결 문제가 남았다. 사용자가 업로드한 이미지를 저장할 서버를 따로 만들어야한다. 보통 EC2와 S3를 같이 쓴다고해서 버킷만들고 서비스,컨트롤러 만들었는데 테스트페이지에서 에러가 난다.

디펜던시오류인가..프라퍼티즈설정 오류인가... 자바코드 오류인가..............ㅠㅠㅠㅠ

멀티파일을 파일로 변환하지못하고있고,, 아마존클라이언트도 인식못하고 있는것같다. 

SDK도 다시찾아봐야겠다.

 

https://about.weverse.io/ko.html

https://www.youtube.com/watch?v=6P6HoumuTOw&list=PLuHgQVnccGMCFHj64mNZxlbeNWOYUpua4

 

원래있던거 삭제하고 새로운거 넣기

root@ip-172-31-5-40:/var/lib/tomcat9/webapps# ls -l


root@ip-172-31-5-40:/var/lib/tomcat9/webapps# rm bootPrj-1.0.jar (원래있던자르파일없애기)
root@ip-172-31-5-40:/var/lib/tomcat9/webapps# ls -l


root@ip-172-31-5-40:/home/ubuntu# mv bootPrj-1.0.jar /var/lib/tomcat9/webapps

 


1 .자르파일 만들기

2 . home/ubuntu에 옮겨주기(파일질라에서 더블클릭)

3. 홈 우분투에있는거를 웹앱스로 옮기기 (이때 기존것 삭제하고 옮기기)

webapps 

 

java -jar 파일명.jar 자르파일이있는데서 자르실행

 

 

 

문제점 :

너무많은 오류를 만나서 뭐부터 적어야할지 모르겠네..

  1. 웹에서 수정사항을 입력하면 에러발생 : 내부 표기로 변환할 수 없습니다/ 열명이 부적합합니다.
  2. 품종이 Pet이 아닌 breed테이블에있으므로 사용자가 직접 접근하지않게 해야한다.
  3. 웹에서 수정사항입력후 버튼누르면 콘솔에만 출력되고 DB에 반영안됨. 반려견이 여러마리일 경우 사용자가 원하는 반려견에 대해서만 수정적용하고 싶었다..
  4. 톰캣 포트에러(Tomcat 에러)

수정한 값이 DB에 저장되고 업데이트된 내역이 다시 조회된다.

해당 강아지 아이디정보 보내기

 

JSP 

hidden input 추가

<input type="hidden" name="id" value="<%=p.getId()%>" class="hiddenId">

PetEditController 수정

사용자가 보낸 강아지 id값(req.getParameter("id"))을 받는다

해당 강아지의 정보를 불러와(get(id)) pet객체에 대입

updatePetProfile(pet)에 꽂기.

		PetService petService = new JdbcPetService();
		Pet pet ;

		try {
			pet = petService.get(id_);//펫id
			pet.setId(id_);
			pet.setName(name);
			pet.setGender(gender);
			pet.setBirthday(birthday);
			pet.setPersonality(personality);
			// pet.setMemberId(id_);
			pet.setBreedId(breedId);
			petService.updatePetProfile(pet);


		} catch (Exception e) {
			resp.sendRedirect("exception.html");
		}

JdbcPetService.java수정

Pet테이블에 없는열이름으로 게터 세터하고있어서 '열명이 부적합하다'는 에러 발생

Pet테이블에 없는 애들 지우기

sql left join적용해서 getList()와 형식맞추기

	@Override
	public Pet get(int id) {
//		String sql = String.format("SELECT * FROM PET WHERE PET.ID=%d", id);
		String sql = String.format("SELECT P.*,B.NAME BREED,TO_CHAR(SYSDATE,'YYYY')-TO_CHAR(BIRTHDAY, 'YYYY')+1 AGE FROM PET P LEFT JOIN BREED B ON B.ID = p.breed_id WHERE P.ID =%d", id);
		
		try {

			String url = "jdbc:oracle:thin:@hi.namoolab.com:1521/xepdb1";
			Class.forName("oracle.jdbc.OracleDriver");
			Connection con = DriverManager.getConnection(url, "PETHARU", "1357");
			Statement st = con.createStatement();
			ResultSet rs = st.executeQuery(sql);
			
			rs.next();
	
			String name = rs.getString("name");
			String gender = rs.getString("gender");
			String birthday = rs.getString("birthday");
			String personality = rs.getString("personality");
			int age = rs.getInt("age");
	
			Pet pet = new Pet();
			pet.setName(name);
			pet.setGender(gender);
			pet.setBirthday(birthday);
			pet.setPersonality(personality);
			pet.setAge(age);

			rs.close();
			st.close();
			con.close();
			
			return pet;
			
		} catch (Exception e) {
			e.printStackTrace();
			throw new ServiceException();
		}
	}

Select option DB연동

강아지 품종테이블은 Pet과 별도이므로 

- DB : Breed 테이블에 품종 및 아이디 미리 insert후, 사용자는 breed_id만 사용

- JdbcPetService : Reg, edit 의 sql에 left join 적용

- JSP(HTML) : select 태그 입력, name = "breed_id" 적용

 


view table생성하면 left join의 번거로움을 줄일 수있고 sql도 간편해진다고하는데 , 뷰를 위한 left join을 일단 해야하는데 left join이 잘안된다.. 내일은 이걸로 시간 다보내겠구나 

Javascript Project 6. 탁구점수판

간단한 탁구 점수판
옵션에 11포인트까지 넣고, 각 포인트숫자에 도달하면 Player버튼이 disabled된다.

HTML & CSS

  • 프레임워크쓰니까 간단하고 빠르게 완성할 수있었다. 이렇게 편리할 수가 ....
  • 간격 넣을 지 말지, 툴열어서 계속 재보고, 고민하는 시간이 줄었다. 탁구img 고르는것보다 빨랐다...


JS

    • 각 점수가 해당 게임포인트숫자에 도달하면 점수입력버튼이 비활성화
    • 최종 점수가 이긴사람은 초록색, 진사람은 빨간색으로 표시된다.
    • 처음엔 단순하게 하나하나 querySelector로 지정했다가 Player 1에  속하는 것들, Player  Two에 속하는것들을 다시 object로 묶어서 처리.
    • 점수,버튼,display를 덩어리로 묶어 일괄적으로 함수에 반영
    • updateScores함수를 만들어 player1, player2를 매개변수로 넣고 동일한 함수활용.
    • addEventListener('change')를 사용해 다음 게임(option 변경)으로 넘어갈때 점수판 리셋.
    • reset 함수 : for of에 object 두개를 넣어 점수 리셋.


중복되어 계속 사용되고 관계있는것들을 object로 묶어서 사용하는게 익숙하지 않아서 어제했던 코드를 다시 쳐봤다..
같은 기능인데 object로 다시묶어서 하니까 소스가 간결해지고 수정할 부분도 적어졌다.

문제점 : 

  • #petId : documet is not defined 
  • 강아지 상세보기 ->수정하기 ->다시 상세보기를 누르면 프로필이 안뜸. d-none이 계속 적용되어 프로필이 안뜨는상태
  • 수정, 추가메뉴에 동일한 사진업로드기능이 수정에만 적용되고 동물추가에는 적용안됨
  • 같은 데이터를 2번불러오고 있음.
  • PetList.java에서 id 파싱오류

해결:

수정버튼을 누르면 선택한 강아지의 정보출력 & 수정팝업 후 상세내역이 사라지는 오류해결

documet는 오타였는데, 왜 안보였을까......

 

HTML :

기존 html코드가 분산되어있어서 for문을 두번 적용했다. (목록에서 1번, 상세내역에서 1번)

동일한 강아지에 대해 같은 정보를 두번씩 불러오는 상황.

불필요한 반복을 줄이기 위해 강아지 한마리 div안에 목록,상세,수정,삭제를 넣어 for문 한번만 반복하도록했다.

 

 

CSS :

입력사항 *표시 추가

 

JSP :

  • for문으로 list, profile,update,delete를 감싸서 한마리의 수정,삭제,상세내역 연결
  • 페이지를 로딩하면 선택한값이 없기때문에 null이다. 이 부분에 대해 조건처리가 되지않아서 오류발생 +petlist에서 id의 초기값설정도 없었고, null을 파싱하게되어 오류발생한것.
  • id =1 초기화 및 null이 아닐경우 파싱하는 조건추가
int id_ = 1;
if (req.getParameter("id") != null) {
Integer.parseInt(req.getParameter("id"));				
}
  • 사용자가 선택한 강아지의 상세정보,수정,삭제가 이루어져야한다.
  • 강아지 id가 필요한 태그에 <%=p.getId() %>추가
<div class="profile-popup" id="popup-1-<%=p.getId()%>">
<div class="popup-content">
<div class="close-btn" onclick="togglePopup(<%=p.getId()%>)">×</div>

 

 

Javascript

  • 프로필이 d-none(invisible)적용할 이유가없다. 모달태그이므로 클릭해야뜬다.
  • 기존 코드는 하나의 div안에서 프로필이 바뀌어야했다.
  • for문으로 이미 프로필div가 각각 만들어져있기 때문에 d-none을 삭제.
  • id를 파라미터로 넘겨주고 기존의 id형식을 지키되, 전달된 id를 사용할 수있게했다(`popup-2-${id}`)
  function confirmPopup(id){
    console.log("confirmPopup");
	console.log(id);
    document.getElementById(`popup-4-${id}`).classList.toggle("active");
    //if(e.target.contains("cancel"))
    //document.getElementById(`popup-4-${id}`).classList.remove("active");
  }
  • 수정과 추가에 같은 사진upload 기능이 있는데, querySelector를 해서 상대적으로 위에있는 수정 upload만 적용되었다.
  • querySelectorAll로 선택후 for문으로 반복문을 돌려 같은 클래스명인것은 모두 적용되게했다.
	var fileTriggetButtons = document.querySelectorAll(".file-trigger-button");//가 클릭되지만
console.log(fileTriggetButtons);
	for(let i = 0; i < fileTriggetButtons.length; i++) {
		fileTriggetButtons[i].onclick = function() {
			var event = new MouseEvent("click", {
				'view': window,
				'bubbles': true,
				'cancelable': true
			});

 

다음 할일..

1. onclick을 이벤트리스너로 바꾸기

2. 히든인풋 벨류이용해서 함수 재정의

3. c,u,d DB연동

 

문제점 :

데이터베이스에있는 강아지목록중에 선택한 강아지의 상세보기가 안되고,

한 팝업창에 3마리의 정보가 한꺼번에 나열되었다.

백엔드 연습중이어서 자바를 수정해야했다.

 

해결 : 

-DB, JSP, JS 모두 수정

 

 

DB :

DB의 목록중 특정 행의 자료를 끌고와야한다.

식별할 수있는 ID컬럼추가 및 ID명 추가

DB의 강아지정보를 잘 불러오고있다 !!

JSP

강아지프로필 불러올 태그에 자바코드 부여

1. jsp 파일에 반복할 for문넣기

2. 선택한것을 식별하기위한 id값넣기 (div)태그추가

3.div태그에 클래스명 부여 "pet-id- [p.getId()]"

<%for(Pet p : list){ %>
<div class="pet-id-<%= p.getId() %> d-none">
<div class="detail-name">
<h2><%=p.getName() %></h2>​

팝업 close버튼에 hidden input 태그넣기

프로필 팝업 3가지중 특정 팝업만 id부여

<div class="profile-popup" id="popup-1">
	<%-- <%for(Pet p : list){ %> --%>
		<div class="popup-content">
			<div class="close-btn" onclick="togglePopup()">×</div>
				<input type="hidden" id="petId" name="petId" value="">

Javascript

js 팝업함수 재정의

1. hidden input태그 선택

2. if조건문 : id가 있다면 input태그의 value에 id값을 넣기

3. 클래스명이 pet-id-숫자 인것을 선택

4. 해당 클래스의 d-none을 지운다.

//상세보기
function togglePopup(id) {
	console.log("profile");
	console.log(id);
	document.getElementById("popup-1").classList.toggle("active");
	//var detail = document.querySelector('.dog-info .detail');
	//var petId = '.pet-id-' + id
	//console.log(petId);
	var petId = document.querySelector('#petId');//hidden input태그 선택
	var pet;
	if (id) petId.value = `${id}`;	
	
	pet = document.querySelector(`.pet-id-${petId.value}`);
	//console.log(petId);
	//console.log(pet)
	//if(petId.value) pet = document.querySelector(`.pet-id-${petId.value}`);
	pet.classList.toggle('d-none');	
}

 

오늘 수업에 배운 input hidden을 적용했는데, 신기하다..

가려진 input태그로 id가 전달이 되서 그 id관련 정보만 출력된다. 

사진업로드 및 프로필수정적용,삭제 배우면 CRUD작업은 거의 마무리 되가는것같다. 빨리 완성하고싶다. 

Javascript Project 5 . 요리검색

요리를 검색할 수 있는 페이지

사용자가 요리를 검색하면, 관련 요리들이 리스트업된다.

랜덤버튼을 통해 자동으로 요리를 보여준다.

 

CSS

  • 검색정렬 grid를 이용
  • repeat을 통해 갯수,너비를 조정, grid-gap으로 간격조정
  • 해당 요리사진에 마우스를 대면 요리정보가 가운데 위치
  • 해당 요리사진을 클릭하면 목록하단에 상세내역이 펼쳐진다.
  • @media와 gird를 이용해 반응형적용

 

JS

  • const를 처음 선언하고 콤마로 한번에 처리.
  • fetch()함수로 API호출
  • join으로 배열연결해서 항목 한꺼번에 출력

 

 

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/join

www.daleseo.com/js-window-fetch/

Javascript Project 4 . 비디오 플레이어

비디오플레이어

비디오플레이어 완성

  • video태그의 control속성을 이용해 제어
  • 재생시에는 일시정지버튼으로 바뀌고, 일시정지일때는 재생버튼이 보이도록 설정
  • 비디오 시간과 슬라이드바를 일치시켜 현재의 재생시간 범위를 보여준다
  • input태그의 range속성을 이용
  • currentTime으로 비디오재생시간 불러오기.

 

 


참고 블로그

studyingych.tistory.com/44

hleecaster.com/html-form/

im-developer.tistory.com/55

developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime

Javascript Project 3 . 영화관 좌석 예약

영화관 좌석 예약

영화관 좌석 예약시스템 만들기

  • 이용자가 원하는 영화를 선택후 해다 영화금액에 맞춰 금액이 책정
  • 선택한 좌석의 수가 하단에 업데이트
  • 웹스토리를 이용해서 사용자가 선택했던 좌석을 임시저장 (새로고침해도 사용다시 재확인할 수있다)
  • 이미 예약된 좌석은 선택이 불가능

CSS

  • perspective를 사용해 스크린모양에 원근법을 적용
  • rotate를 이용해 스크린의 각도조절. 기울기조정
  • select박스 디자인변경 (네이티브지원모양 해제)

JS

  • localstorage 사용 : 키의  값을 사용해 이용자가 선택한 좌석 정보가 남아있게한다.
  • 로컬스토리지를 통해 읽어온 좌석정보를 자바스크립트 객체로변환

 

 

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

equality37.tistory.com/16

nykim.work/26

www.daleseo.com/js-web-storage/

gahyun-web-diary.tistory.com/80

Javascript Project 2 . 슬라이드 네비게이션 & 팝업 

슬라이드 네비게이션 및 회원가입 팝업창 만들기

웹프로젝트 중 가장 궁금했던 네비게이션 슬라이드와 팝업부분을 구현했다.

  • 햄버거 버튼을 누르면 네비게이션 슬라이드바가 열리고 닫힌다.
  • 가입버튼을 누르면 배경은 어두워지고 화면의 중간에 회원가입창이 뜬다.
  • 회원가입창의 닫힘버튼 외 영역에 클릭을하면 팝업창이 사라진다.

 

CSS

  • 메인색상 변수화해서 쓰기
  • 자바스크립트 대신 transform을  활용
  • rgba는 상속이되지않아 특정요소에만 적용할 수있다.

JS

  • toggle은 너무 유용하다. 온앤오프
  • 네비게이션은 toggle적용 , 팝업창은 직접 클래스명 추가 제거적용
  • 다양한 삼항연산자의 활용

참고 : 슬라이딩네비, translate, opacity

www.w3schools.com/howto/howto_js_sidenav.asp

www.tabmode.com/homepage/transform-translate.html#gsc.tab=0

webclub.tistory.com/231

www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/

youtu.be/iE_6pQ3RlZU

 

Javascript Project  1 .  회원가입양식 및 유효성검사

회원가입양식

 

사용자이름, 이메일, 비밀번호를 기입할 수있게 했다.

사용자가 입력한 값이 유효하면 초록색으로 하이라이트를 주고, 유효하지않으면 빨간색이 뜨며, 안내메세지가 해당칸 하단에 나온다.

이메일정규식을 넣어 이메일값의 유효성을 검사한다.

 

 

 

 

 

 

 

 

 

 

CSS

  • 사용자가 입력하기위해 input칸을 누르면 선택한 칸을 보여주기위해 보더강조한다.
  • 주요색상은 이름을 선언후 불러서 쓰기
  • 상위태그에 relative를 줘서 하위태그가 absolute적용 후 포지션기준을 잡을 수있게 했다.
  • 에러메시지는 기본적으로 가려주고, 에러상태에서만 나타나도록 설정.

JS

  • 이메일 정규식표현을 구글링 한 후 유효성검사 함수에 넣어줬다. 사용자가 입력한 이메일문자의 유효성을 검사한다.
  • 올바르게 입력했으면 input태그를 감싸는 부모태그에 하이라이트속성이 담긴 클래스명이 추가된다.
  • 조건설정시 콘솔에 입력하면서 작동되는 지 확인하면서 작성
  • 첫번째 암호와 확인암호가 불일치 할 경우 안내메세지를 출력한다.

개인프로젝트를 작게나마 매일 해야겠다.

자바스크립트기능을 넣을때마다 효과들이 눈에 보이니까 재밌다. 아직 백엔드기능이없어서 빈깡통느낌이지만, 빨리 주변지인들도 이용할 수있는 사이트를 완성하고싶어졌다.

 

+ Recent posts