HaileyKim

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.

캡슐화

비슷한 역할을 하는 속성과 메소드들을 하나의 클래스로 모은것을 캡슐화 라고 한다. 캡슐화에 속한 개념으로 정보 은닉이라는것이 있는데, 캡슐 내부의 로직이나 변수들을 감추고 외부에는 기능(api)만을 제공하는것을 의미한다.

상속

상속이란 클래스를 재사용 하는것이다. 상위 클래스를 하위 클래스에서 상속 받게 되면 상위 클래스의 멤버변수나 메소드를 그대로 물려 받을 수 있다. 상속이 있기 때문에 코드를 재활용할 수 있고 그렇기 때문에 생산성이 높고 유지보수 하기가 좋다. 

추상화

추상화라는것은, 어떤 실체로부터 공통적인 부분이나 관심 있는 특성들만 한곳에 모은것을 의미한다. 예를들어서, 지구를 본따 만든 지구본을 예로 들 수 있다. 지구본은 실제 지구로 부터 관심 있는 특성들(대륙의 위치, 위도,경도)만 뽑아서 만든것이다. 지구를 추상화해서 지구본을 만들었다.

객체지향에서의 추상화는 어떤 하위클래스들에 존재하는 공통적인 메소드를 인터페이스로 정의하는것을 예로 들 수 있다.

다형성

다형성은, 같은 모양의 함수가 상황에 따라 다르게 동작 하는것을 의미한다. 오버로딩과 오버라이딩이 있는데, 오버로딩이란것은 함수의 이름은 같으나 함수의 매개변수 숫자, 타입등을 달리해서 다르게 사용하는것을 의미하고, 오버라이딩은 상위 클래스의 메소드를 하위 클래스에서 똑같은 이름으로 재정의 하는것을 의미한다.(덮어씌우기) 이렇게 되면, c++의 경우에는 상위 클래스 타입 변수에 하위 클래스를 담은 상태에서 메소드를 호출하면 상위 클래스의 메소드가 호출되고, 하위 클래스 타입 변수에 하위 클래스를 담으면 하위 클래스의 메소드가 호출된다. 즉, 메소드의 이름은 똑같은데, 상황(상위 클래스의 참조 변수냐 하위 클래스의 참조 변수냐)에 따라 호출 되는 메소드가 다른것이다.

웹호스팅 링크 정리

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 에러)

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

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명 추가

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

DNS의 목적

Domain Name System

호스트명과 IP 주소 매핑을 수행하는 시스템

-ip주소는 0이나 1이 32번 반복되는 비트의 나열이므로 기억하기 힘들다. -> 사람이 알기쉽게 하고자 컴퓨터에 호스트명을 붙이고ㅓ 통신상대를 지정하게 만든것

호스트명으로 통신상대를 지정하더라도 변함없이 통신상대의 IP주소가 필요하므로 호스트명에 매핑된 IP주소를 가져오는 시스템, 이름해석이 필요

DNS의 구조

리소스 레코드 : 호스트명과 IP주소의 매핑

도메인과 존 

도메인 : 호스트명의 집합

http://www.naver.com/ 

www.naver.com :웹서버의 의 호스트명

www.naver.com의 IP주소를 알아내기 위해서 자동으로 DNS서버에 질의

DNS서버의 IP주소가 잘못 지정되어있다면 DNS서버에 네임쿼리가 도달하지않음->이름해석x->접근불가

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태그를 감싸는 부모태그에 하이라이트속성이 담긴 클래스명이 추가된다.
• 조건설정시 콘솔에 입력하면서 작동되는 지 확인하면서 작성
• 첫번째 암호와 확인암호가 불일치 할 경우 안내메세지를 출력한다.

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

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

프로그래밍 :프로그래밍언어로 문서작업하는 행동

개발자 : 프로그래밍 언어를 통해 운영체제 위에 돌아가는 프로그램을 만드는 사람, 컴퓨터에게 일을 시킨다. 

컴파일러 :프로그래밍 언어를 사용해 컴파일러에게 명령을 전달하면 컴파일러가 그 명령을 기계어인 0과 1로 변환해 컴퓨터에게 전달을 하는방식

IDE : 개발자들의 작업을 도와주는 기능들이 있는 프로그램 , 통합 개발 환경 Intergrated Development Environment

     개발하기위한 모든것들을 제공해주는 환경

ex, 안드로이드 위에 올라가는 애플리케이션을 만들기위해서는 안드로이드 스튜디오 IDE사용

프로그래밍언어를 구분하는 하나의 기준:

-고수준 : 인간 친화적인 언어, 저수준보다 작동이 느리다(사양에 따라 다름) ,스마트폰, 데스크탑

-저수준 : 컴퓨터 친화적인 언어 , IPTV,스캐너,프린터,프로젝트

컴퓨터 구성요소

 메인보드에..

-CPU : 컴퓨터의 머리역할 (프로그램의 실행)

-메모리(RAM) :CPU의 개인 작업공간  (CPU가 더이상 보조기억장치에 필요한 데이터를 요청하지않고, 데이터뭉치를 보조기억장치에서 메모리로 한번에 옮겨놓고 메모리안에서만 작업)

-하드디스크(HDD) : 컴퓨터의 창고

-보조기억장치(SSD) : 컴퓨터의 창고 (바탕화면에서 포토샵더블클릭, 보조기억장치에 저장된 프로그램실행)

운영체제 : 하드웨어관리 (하드웨어의 용량, 보조기억장치관리, 프로그램 설치,실행) , CPU와 메모리등을 관리

-윈도우 by 마이크로소프트 :C#, visual basic, c++, JavaScript

-맥 OS, IOS by 애플 : Object-c, swift

-안드로이드 by 구글 : java,kotlin

JVM(Java virtual machine) : 각 운영체제 위에 JVM이라는 소프트웨어가 만들어짐

자바로만 프로그램을 만들어도 모든 운영체제에서 사용 할 수있다

네트워크

LAN : 컴퓨터가 연결된 작은 지역  Local Area Network

MAN : Metropolitan Area Network, 도시의 여러 LAN을 하나로 연결

WAN : 도시와 도시, 나라와 나라를 모두 연결

앱스토어에서 카톡다운로드시 : 나의 스마트폰 "카톡설치파일보내줘" -> 컴퓨터가 연결되어있는 네트워크 "142,203,124,152주소로 카톡설치파일보내줘" -> 애플이 켜놓은 컴퓨터"파일이거받아 - >컴퓨터가 연결되어있는 네트워크 - >나의 스마트폰

서버 : 클라이언트 요청에 응답하는 컴퓨터, 데이터를 주는 컴퓨터

리눅스 : made by 리누스 토발스 (깃도 만듬)

리눅스 위에서 서버프로그램을 돌린다

리눅스 : 하드웨어를 관리해서 사용자가 프로그램을 사용하기 쉽게 도와주는 윈도우나 맥같은 운영체제, 그래픽 UI없이 명령어로 동작

우분투 : 리눅스 버전중 하나

안드로이드 : 리눅스의 개량버전 

호스팅업체 : Cafe 24, 가비아 . 아마존의 AWS 등 , 서버제공

API: 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계

API는 서버 개발자가 개발하고 ,클라이언트 개발자는 그 API를 사용

ex, 서버주소/A라고 신호를 보내면 서버가 로그인 기능을 수행하고 응답

API를 통해 요청과 응답을 주고 받을때는 데이터도 같이 담긴다

CRUD : 데이터를 다룰떄 기준이 되는 요청

C : creat  타임라인에 사진을 올리는 요청

R :  read 타임라인에 사진을 불러오는 요청

U : upgrade 바꾸는 요청

D : delete

CRUD관심에서 데이터를 바라봐야한다

RESTful API : Representational State Transfer, 상황마다 다양한 방식으로 변형해서 사용

Creat : POST

Read : GET

Update : PUT(전체) / PATCH(일부)

Delete : DELETE

클라이언트에서 요청을 보내면 서버는 응답을한다. 이때 잘됐어, 잘안됐어에 체계가있다.

잘됐어는 200번대

잘안됐어

-클라이언트의 요청때문 : 400번대

-서버내부적문제 : 500번대

404 : 보통 정의되지 않은 요청을 보낼때 나타난다. 서버는 문제없이 돌아가는데 요청이 이상하다는 얘기

API : 소프트웨어가 다른 소프트웨어의 기능을 쓰기위해 중간에 필요한 체계.

  기능을 사용하기 위해 주소로 요청을 보내면 응답을 해주는 소프트웨어끼리의 체계

내 소프트웨어 "API요청"-> 다른소프트웨어 "한글번역기능"응답

SDK : software development kit 의 약자

소프트웨어를 개발할때 도움을 주는 다른 소프트웨어

ex. 내소프트웨어에 구글지도 SDK설치, 구글지도 SDK에서 제공해주는 API사용

요청과 응답을 주고 받을때의 형식

XML

JSON : 중괄호로시작, 키와 값으로 이루어짐, 키와 값은 콜론으로 구분 

클라와 서버는 요청과 응답을 주고받고, 그때 필요한 데이터들을 JSON형식으로 주고받는다

애플리케이션 : 운영체제위에 올라가는 프로그램, 설치해야하는 프로그램, 응용프로그램, 어플, 앱 

웹

HTTP :운영체제나 프로그램에 상관없이 일정한 형식이 언제나 동일하게 보이도록 하는 개념등장

태그 ; HTML을 구성하는 코드

HMTL: 브아루저가 볼 수있는 문서를 적는 언어

Javascript :  사용자가 a를 쳤단느 것을 감지 -> a에 해당하는 실시간 검색어 목록을 조회하는 API요청을 네이버 서버로 보냄(GET요청)->네이버서버가 a에대한 실시간 검색어 목록을 정리해서 응답(JSON형식)->javascript는 그 응답을 열어서 HTML로 바꿈

관계형 데이터 베이스 관리 시스템 (RDBMS) : 관계형 데이터베이스의 철학으로 만들어진 관리시스템

MS SQL, Oracle DB, MySQL, MariaDB

-로컬,대부DB,네이티브, 클라,프론트

-서버,API,DB,백

프레임워크 : 각종 라이브러리와 코드들이 모여 프레임워크가 된다

라이브러리 : 더 작은 개념 가위같은 도구

깃: 개발 단계별로 깃발을 꽂을 수있다. 그 행위를 커밋이라고 한다

커밋로그 : 무슨개발했는지 적어두는 메모

체크아웃 : 깃발이 꽂힌 부분의 코드로 옮겨다닐수있다.

브랜치 : 새로운 가지를 뻗는것

새로운 방향의 개발을 추가할때 기존개발에 이어서 작업하지않고, 새롭게 가지를 쳐서 작업

머지 : 코드 합치는 기능 

데이터를 주고받는 주체

데이터를 송수신하는 통신의 주체는 애플리케이션

애플리케이션간의 통신은 양방향이다.

애플리케이션간의 통신 방식은 클라이언트 서버 애플리케이션 과 피어두피어 애플리케이션으로 분류된다

통신에서 이용하는 언어

통신하기 위한 데이터 형식 등의 규칠을 프로토콜이라고 부른다

복수의 프로토콜을 조합한 네트워크 아키덱처에 기반하여 통신한다

현재는 네트워크 아키덱처로서 TCP / IP를 이용한다

네트워크의 구성

PC나 서버, 네트워크 기기에는 네트워크에 접속하기 위한 인터페이스가 갖추어져 있다.

인터페이스끼리 전송매체로 연결하고 링크를 구성해서 네트워크를 만든다.

인터페이스는 0,1 의 디지털 데이터와 물리적인 신호의 경계다.

프로토콜 : 통신하기위한 규칙

헤더 : 데이터를 보낼때 필요한 정보를 데이터에 추가한 정보. 저장되거나 전송되는 데이터의 맨앞에 위치하는 추가적인 정보데이터. 데이터의 내용이나 성격을 식별 또는 제어하는데 사용  

캡슐화 : 데이터를 상대방에게 보낼때 각 계층에서 헤더를 포함하여 나가는것 <->역캡슐화