HaileyKim

In Powershell, you can use the ni command, for example: ni test.js

Model and View 

detail페이지

반복패턴을 * 로 쓸수있다.

*에 detail이 들어가면 

detail()의 setVieName과 tiles과 맵핑된다.

attribute는 *위치에 오는것은 {1}로  쓴다.

reg 페이지 tiles와 연결하기

tiles.xml은 자동으로 맵핑되니까 jsp랑 콘트롤러만 수정하면된다

-reg.jsp에서 main만 빼고(바디부분) 다 지우기

-NoticeController.java reg()메소드추가 , 리턴값에 tiles연결

순서를 따져야한다.

특화된건 위에 써준다.

반복을 줄이려면 ?

detail의 제목을 바꾸려면 ?

레이아웃의 내용을 바꾸려면 ?

기본제목을 달수있게 해보자

레이아웃에서는 제목, css, js등 바꿔줘야한다.

그 값이 바뀌어야한다.

라이브러리 추가할것

스프링부트가 너무느리다면 .. 

alt + enter : create Test 

멤버컨트롤러가 멤버서비스를 통해서 회원가입하고 멤버서비스를 통해서 데이터를 조회한다 (의존관계)

멤버컨트롤러가 멤버서비스를 의존한다

스프링 빈을 등록하는 2가지 방법

컴포넌트 스캔과 자동 의존관계 설정

 -컴포넌트 스캔 : @Controller @Service @Repository

컴포넌트 스캔 원리

@Component 애노테이션이 있으면 스프링 빈으로 자동 등록된다.

@Controller 컨트롤러가 스프링 빈으로 자동 등록된 이유도 컴포넌트 스캔 때문이다.

@Component 를 포함하는 다음 애노테이션도 스프링 빈으로 자동 등록된다.

-@Controller

-@Service

-@Repository

아무클래스에 @어노테이션을 붙여도될까 ?

No. package에 포함된 하위애들을 찾아서 작동한다 

자바코드로 직접 스프링빈 등록하기

생성자주입 (권장)

필드주입

세터주입

아무나 세터를 통해 변경을 할 수있다.

실무에서는 주로 정형화된 컨트롤러, 서비스, 리포지토리 같은 코드는 컴포넌트 스캔을 사용한다. 그리고 정형화 되지 않거나, 상황에 따라 구현 클래스를 변경해야 하면 설정을 통해 스프링 빈으로 등록한다

회원 웹 기능 - 조회

06/02

사용자가 전달한것을 받는방법 

쿠키란 ?

경로도 값이 될수있다.

rest방식 : url자체가 데이터를 찾아가는, url다르게 표현

경로에 id라는 변수를 넣어서 사용 

파일 입출력하는 방법

Restcontroller붙이는 객체화시킴

1.파일하나만올라가는경우 (비동기적)

2. 여러개 

application properties 

파일을 2개얻어온다면

뷰(문서)는 홈디렉토리에 두면안되고 웹인포안에 둔다 (노출되지않도록)

컨트롤러가 기본어플리케이션

뷰는 출력하면 쓰는 옵션

사용자가 볼수없게한 용도 , 경로로 url로 접근못한다. 

컨트롤러를 통해서 jsp를 호출한다. 사용자가 직접요청할수없게 고쳐야한다

ex : 뷰에넣지않으면 edit.jsp를 아이디값없이 열수있게된다. 컨트롤러를 통해서만 열수있도록하고 사용자가 선택한 게시물의 id값을통해서만 열릴수 있도록한다. 

https://haileykim2014.tistory.com/238

뷰단을 제공하는것을 탑재하지않았다.

선택적으로 추가해줘야한다.

타임리프를 설정해야한다.

시간걸리므로 직접받아보기 https://mvnrepository.com/artifact/org.apache.tomcat.embed/tomcat-embed-jasper/9.0.46

CSS, 이미지,js폴더 static에넣기

페이지를 조각내고 집중화

Tiles 라이브러리 설정하기

헤더,어사이더,푸터는 공유하게된다

레이아웃부분만 따로 분리하는 도구가 생김

분리된 중첩된내용 + 작성해야할 페이지를 붙여서 반환

헤더,어사이드,푸터를 조각낼것

지시사항을 정할것 (ex customer.notice.list)

list.jsp 에서 푸더잘라내고 footer.jsp에 넣기

aside는 페이지별로 바뀔수있으므로 inc에넣으면 각각이름을 구분해줘야한다 -> 어드민에넣기

노티스 : 리스트(메인영역)

helloController의 리턴"hello"가 templates의 hello.html을 찾아 랜더링한다

spring-boot-debtools 라이브러리를 추가하면 , 'html' 파일을 컴파일만 해주면 서버 재시작없이 view파일 변경이 가능

뷰 : 화면을 그리는데 집중

컨트롤러 : 내부역할 집중, 서버, 비지니스

mvc방식에서 뷰를 찾고 템플릿엔진을 통해 화면랜더링 html을웹브라우저에 넘겨줌

1. html

2. API방식으로 데이터를 넘기냐(객체반환)

@ResponseBody : http에서 바디부에 데이터를 직접넣어주겠다는 의미(return)

return에 객체를 넘기면 httpMessageConverter가 동작한다. ->

JsonConverter -> 키 값으로 변환해서 브라우저로보냄

클래스명에 마우스 위치후 alt + enter ==> Test Case 생성

겟요청의 쿼리값 받기

쿠키활용

다음에도 그대로 유지되서 문서를 만들기원한다면

서버에 전달하기위한 방법ㅇ ㅣ필요하다

현재값을 유지하려면 지금값을 꽂아줘야한다

1. 쿼리스링조작 

2. 상태가 유지될수있도록, jsp안에서 요청할때마다 계속꽂혀야하는값이있다.

 쿠키를 통해 쓰지않아도 올떄마다 가져오게한느방법

쿠키 : 클라이언트가 올떄마다 가지고오는 , 브라우저가 알아서가져옴, 페이지요청시 그값이온다. 

서버 4대저장소 페이지콘텍스트,리퀘스트,세션,어플리케이션

쿠키사용방법

클라이언트에게 다음부터가지고다녀라고 요청하는것

응답으로보내줌

쿠키 : 브라우저가 닫힐때까지 (브라우저가 쿠키를 기억함)

        쿠키로 사람을 식별하면 위조가능(보안적으로는위험)

         쇼핑몰에서 장바구니,   

        비회원에서 장바구니이용하면 브라우저에게 요청     

        사용자가 협조적이어야 ...

세션 : 서버는 연락이오고 연락이끊기면 브라우저와 상관없이, 마지막요청이 있고난 후 세션타임아웃이 제로가되면 

자원을해제한다.

       세션이 비대해지면 자원이 비대해지면 장소부족으로 부담이생긴다

       서버자원을많이쓰면 서버메모리많이씀

       회원이 장바구니이용

파람이라고하면 4대저장소가아닌 파라미ㅌ어ㅔ서찾는다

쿠키설정:

1생명주기 

2가시영역(어느범위내에서?)

브라우저는 프로세스가 닫혀야한다

브라우저창의 여러탭중에 탭을끄면 쓰레드하나끄는것뿐

브라우저 닫았다가 다시실행하면 query cookie : null

브라우저닫아도 담게하려면 ?

쿠키 가시영역

자식디렉토리에서는 같이쓸수있다.

상위(전체)에서쓰러면 범위를 넓혀야한다

쿠키는 무조건 문자

쿼리스트링에쓸 수있ㄴ느값만가능

쿠키가져오기

restAPI

id를 경로로 씀

나머지쿼리값은 그전처럼사용

https://deeplify.dev/back-end/spring/port-is-already-in-use

작업관리자 - 세부정보 - 자바파일 작업끝내기

netstat -ano

taskkill /f /pid 12345

서비스란 

내가필요한 서비스를 만들어야 돈이 된다.

업로드한 파일 이용하는 방법

빈공백이없는 엘리먼트만대상으로할때 firstElementChild

텍스트노드빼고!

파일업로드의 진척도표시

눈에보기쉽게 바로 진척도를 나타낸다면 ?

파일경로를 출력해보자

서버에서 인코딩설정

편집기

윗칸은 작성하고있는내용을 미리보여주는칸

아랫칸이 실질적으로 전송되는 내용 

아랫칸이 숨김으로되면 작성자는 작성한내용자체가 전송되는것처럼보인다.

첨부파일의 파일선택은 서버에 안올라갔지만 이미지가 나오게한다.

파일이 선택되면 ->이미지추가

이미지첨부파일을 선택하면 미리보기가 나타난다.

콘텐트에 이미지가 보인다면 저장할필요없다. 콘텐트에 경로를 입력할것이기때문에

컬럼이들어간건 별도의 첨부파일만 씀

파일즈 : 파일이 여러개 올라갈수있다

파일의 목록을 구분자로넣어서 파일하나를 다룬다

시퀄보다는 자바라던지 제어문으롲 ㅣ워야한다 

장점 :삽입할때편하다

여러개파일일경우는 ?

여러개파일을 업로드 하는경우는 ?

파일을 두개이상 보낸다면 ?

같은이름으로 보내도된다 name = f

하나의 파일즈컬럼에 두개의파일을 담을것

한 열에 파일두개를 등록할것

쉼표를 이용해서 두개의 파일을 디비에 등록

총 12글자(길이)에서 11글자만넣어야하므로 -1해준것

파일을 전달하지않으면 에러발생 널이전달

내가 한 게시글에서만된다

forTokens는 문자열을 쪼갠다. 쪼갠문자열을 반복한다

데이터베이스는같이쓰지만 웹서버는 각각다르므로 다른사람의 첨부파일을 클릭하면 404에러가난다

자기웹서버의 디렉토리에있으므로..

라스트가 아닐경우에만 포함

인덱스로적용

파일명에 마우스오버하면 절대위치가보인다. 어드민인지 확인할것

아티클쓰는 중간에 저장하려면 

페이지내에서 화면이뜬다

드래그드랍으로 업로드

문제점 :

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

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이 잘안된다.. 내일은 이걸로 시간 다보내겠구나 

-톰캣구동시 오류발생

[Tomcat 에러]Several ports (8005, 8080, 8009) required by Tomcat v9.0 Server at localhost are already in use. The server may already be running in another process, or a system process may be using the port. 

-기본포트 (8080,800,8005)가 이미 사용중이라 발생

-cmd창에서 pid 삭제하기

netstat -p tcp -ano :연결된 pid 확인

-로컬주소 8080, 8009, 8005찾기

-해당 포트 pid 번호확인 : 9608

-9608삭제 taskkill /f/pid 9608

-pid 목록 재확인 

DIRTY WORKTREE

merge된 worktree가 바르지않다면 오류가 발생.

수정된내용을 STAGED CHAGNES로 옮기기 -> COMMIT

프로젝트명 옆 화살표 - commit -push -non-fast forward발생

다시  team - pull (fetch+merge)

fetch(bring data) -merge(into workspace)

아예 브랜치를 새로 만들어야하는 경우가 발생할 수있다.

rejected non fast forward

기존업데이트에다가 머지하면 오류

충돌발생

commit-push(오류) non fast (또다른 최신버전존재)-> 화살표안내 (머지필요) pull

최신상태에서 commit-push

1. Dynamic Web Project 생성

2. Context root : ROOT를 자동으로 Document Root로 되므로 "/"로 바꿔준다.

3. 테스트할 html파일 생성

4. 새로운 서버설정

5. html실행 및 확인

6. 해당 프로젝트선택 -> 마우스오른쪽 클릭->team -> share project

   create a new git repository

7.  Project Explorer에서 해당 프로젝트에 물음표가 생긴다.

8. 해당프로젝트선택 ->마우스오른쪽 -> team -> add to index

폴더는 *로 html파일은 +로 바뀐다.

9. team->commit ->메세지작성 -> commit 

10. staged changes가 커밋 후 사라진다.

project explorer에서 폴더 및 파일의 표시도 노란색 박스모양으로 바뀐다.

11. 6. 깃허브에 새로운 레파지토리생성 및 레파지토리 주소복사

12. git staging 에서 push를 누르면 git repository 창에 복사란 url에 자동으로 들어가있다. 

13. 해당 깃 레파지토리를 새로고침하면 확인가능

정규화 :

정규화1,2,3을 외우는게아니라 느낌으로 속성만보고 구별,의심이 가야함
중복제거

1정규화란 ?
하나의 컬럼값만 넣어야한다. (원자성)
특정컬럼이 두개이상 가질 가능성이있다면 중복유발
속성중에 2개이상 들어갈 수있는것 ? 

ex : 댓글내용,댓글등록일자
공지사항입력할때 제목은 하나만 넣는가 ?
작성자 이름은 하나만 넣는가 ?
댓글이 여러개 달릴 수있는가 ?

컬럼은 방이다. 
댓글컬럼이 늘어난다면 ? 100개의 댓글컬럼을 만들겠다 -> X  
컬럼은 유동적이지않다. max값을 생각해야함
연회장처럼 하객에 따라 써야함
데이터는 수직으로늘려야한다.
ex 댓글 : 공지사항과 같은 테이블에 담아야한다면 공지사항의 아이디,제목,작성내용이 중복발생한다.

공지사항 - 댓글

1:N형태

컬럼이 2개이상 가질가능성이있다면 업무자에게 물어봐야한다.

ex 업무자가 원테이블식당이라고하면 테이블번호는 1정규화위반이 아니다.

3정규화

아이디가 달라져도 형태,지역명은 이전데이터가 쓰인다. ( 아까 넣은 데이터가 또 들어가는것)

올드한데이터중복

3정규화위반 : 작성자이름,작성자연락처,등급

앞의 레코드를 다음에넣을때 또 넣을 수있는 가능성찾기

첨부파일용도가 정해진 키워드라면 3정규화위반가능

2정규화 :

부분 함수 종속성을 없앤다

작성자에 대한 정보가 필요하면 참조.

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로 다시묶어서 하니까 소스가 간결해지고 수정할 부분도 적어졌다.

설계란 ?
 내가 말하고싶은것을 그린것(디자인)

IT기술에만 국한해서 생각하지말것

개념설계 :

ER 다이어그램

논리설계 :

관계형 ,테이블형태 (공통분모형태)

물리설계: 

물리적으로 DBMS선택해야함

실질적으로 물리적 공간에 저장하기위해 각각에 대해 정의

키의 종류
1. 주키(primary key) : 식별키,일련번호, 아이디
2. 후보키 : 기본키 처럼 식별용으로 쓸 수 있는 키
3. 대체키 : 후보키에서 기본키 이외의 키

4. 슈퍼키 : 2개 이상의 컬럼이 모여 기본키로 사용

5. 외래키 : 두 테이블을 서로 연결하는 데 사용되는 키

키의 종류

- 실선(Identifying): 식별관계

-> 부모 테이블의 기본키를 자식 테이블이 가지고 있으며 이를 기본키로 사용하는 경우

-> 부모가 있어야 자식이 생기는 경우

ex) Issue 테이블과 IssueComment 테이블이 있을 경우, IssueComment는 Issue가 존재해야지만 있을 수 있음

- 점선(Non-Identifying): 비식별관계

-> 부모 테이블의 기본키를 자식테이블이 가지고 있지만 이를 기본키로 사용하지 않을 때 

-> 부모가 없어도 자식이 생기는 경우

ex) User 테이블과 Process가 있을 경우, User가 담당 프로세스가 있다고 하더라도, Process는 User없이도 존재할 수 있음

정규화 : 

normalization 표준화,정상화

무결성 -> 데이터 중복제거
중복이 발생하는 패턴에서 중복제거

1정규화 : 모든 도메인이 원자값으로만 이루어져야만 한다. 
    도메인 : (유효한) 값의 범위

              ex이메일 : 123 (X)
    원자값 : 하나의 값만 이루어져야만 한다. 

              ex기업고객의 아이디가 하나만

속성을 봤을때 1개가 만들어갈지 n개가 들어갈지 또는 n개까지인지 찾아보기.

1개만 받는다면 원자값 , 여러개면 원자값이 아니다.

(전화번호 여러개인지 ?, 설립일이 여러개인지 ? )

1정규화 위반되는것 찾기 (테이블로뽑을지, 구분자로 구분할지선택 )
*노하우 - 이미지
*일기- 키워드
*공지 - 파일

3정규화

아까들어갔던 내용이 계속 들어가는것(ex 여고괴담처럼 자꾸 졸업앨범에나타남)

책임자이름,매니저이름,매니저연락처,매니저이메일  ->중복제거 (자식을만들어야함)

올드데이터 : 미리있어야하는것이므로 별도 테이블 생성 ->외래키가 늘어나게된다. 

설계할때는 한글로쓰기 (영어를 쓰면 의미가 왜곡될 수있다.)

회원 - 구매 - 상품 (n;n )

한 회원이 여러개의 상품을구매할 수있다.

한 상품이 여러 회원에 의해 구매된다.

식별자 : 언더라인

속성,관계고치기

사용자행위로서의 관계

사용자구성으로의 관계

행위자, 행위, 키 구분

-반려동물을 선택한 후에 일정이뜬다면 구성

-댓글은 행위. 기존에 있던것에 대한 행위. 노하우,일기에 대한 댓글

-노하우가 있어야만 댓글이 달릴 수있다. (키가 될 수 없다)

-좋아요도 행위, 대상이 될 수없다.

-회원이 여러 노하우글에 댓글을 달 수있다.

-노하우에 여러회원들이 댓글을 달 수있다.

좋아요는 행위다.
회원 - 좋아요 -리뷰 (n : n)

회원 - 댓글 - 노하우 

회원 -친구(신청) : 바로신청되는모습

논리 : 테이블형태 (공통분모형태)
물리설계: 물리적으로 DBMS선택해야함
탭으로왔다갔다

for in , for of 차이

동일 html에 적용했을때 비교 

    <h1>
        <span>R</span>
        <span>A</span>
        <span>I</span>
        <span>N</span>
        <span>B</span>
        <span>O</span>
        <span>W</span>
    </h1>

for...in (객체순환)

index return

        const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
        let span = document.querySelectorAll('span');
        for(let i in colors){
            span[i].style.color = colors[i];
            console.log(i);// in : 0,1,2,3,4,5,6 인덱스번호
         
        }

for...of (배열 값 순환)

해당 value return

        const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']; 
        let span = document.querySelectorAll('span');
        for(let i of colors){
            span[i].style.color = colors[i];
            console.log(i);//of : red, orange, yellow, green, inigo // span[red] 이므로 오류 
        }

데이터베이스 모델링

테이블정하기

속성쓰지말고

테이블명으로 사용할수있는것들

메뉴를 뽑는게아니라 역할을 뽑아야한다

쇼핑몰에서의 역할자

회원이 등록하는 대상

개인정보,

장바구니,

비회원이 등록하는 대상[데이터베이스 모델링]

DBMS 종류
-RDBMS, OODBMS, ...

RDBMS : Relational DBMS
관계형 DB 

무결성 : -> 데이터 중복을 제거하는 방식으로 -> 파일(뷰)-> 쪼갬(집중화) -> 테이블

사용할 때는 :
테이블 -> 합쳐서 (뷰)-> 파일

테이블을 합칠 때 기준?
객체지향DB, RDBMS:관계

관계가 무엇인가요?
: 행위를 말한다.


주어(테이블) 동사(행위:관계) 목적어(테이블)

[회원:주어]이 [게시글:대상]을 등록[행위:관계]하다.


[제일 먼저 해야 할 가이드 1]
주어를 찾는 것.==주체를 찾는 것==행위자를 찾는 것==역할자를 찾는 것

사람수 != 역할자수

---------- ICODA를 보면서 이 사이트에서의 역할자를 찾으시오 ---------
회원
비회원
관리자
판매자

------ 역할자를 찾았으면 등록이라는 행위를 하게 되는 대상을 찾으시오.-----
-회원(이) [  ]를 등록하다.

관심상품 X : 회원이 상품을 등록하진않는다.

행위는 두개넣지말기

-관리자(이) [  ]를 등록하다. 

판매자관리

-판매자(이/가) [  ]를 등록하다. 

------ 위의 문제에 대한 리뷰 -------------
회원이 등록
- 회원정보 (주소, 이름, 전화번호,,)
- 장바구니 (X) ==> 등록하다에 어울리는 대상은 아님  ~에 "담다"를 말하는 행위에 더 어울림
- 관심 상품  ==> 합성어는 단위를 쪼개서 처리해야 함. 행위를 명사에 붙여서 표현하면 모든 것이 대상이 될 수 있음.
- 상품 평
-           상품정보 ==> 정보라는 어휘는 생략하는 것이 바람직함.
- 상품 문의 (질문) 

<가이드>
1. 합성어는 분리하고 분리한 어휘에서 행위는 제거하시오.
2. 정보라는 단어는 제거하시오.
3. 그 후에 남은 어휘가 등록이라는 대상에 어울리는지 확인하시오.
4. 속성명은 그것의 구조화된 데이터로 변경하시오.

-------------------------------------------------------------------
회원이 [글]을 등록하다.
관리자가 [이벤트/공지사항/배너광고] 등록하다.
판매자는 [상품]을 등록하다.

데이터베이스 설계

개념설계

논리설계

물리설계

개념설계(Concept..)

Entity-Relation 

키를 뽑는다.

관계를 찾는다. (등록, 수정, 다른동사 찾기)

등록이 데이터가쌓이거나, 삭제내역이쌓이면,조회내역이쌓이면(레코드가 쌓이면) ->데이터베이스에 관계표시

임시데이터는 데이터베이스를 사용하지않는다.

[ 회원 ]이 [ 배너광고 ]을 [ 조회 ]하다

=== < 리뷰 > =========================================================

행위를 뽑아서 보면… 다음과 같은 것들을 체크해야 한다.

1. 업무적으로 다루는 내용인가.
2. 행위가 데이터를 누적하는가? 추가로 누적되는 데이터가 없다면  관계로 보지 않는다..

예) 수정/삭제 -> 위키를 아시나요? 위키에서는 글을 수정하면 누가?언제?무엇?..을 저장해요. 그러면 이렇게 수정된 내역이 추가된다면 그것은 관계로 간주한다.

관계는 데이터베이스에 등록되는 것만을 대상으로 한다.

1. 위의 내용을 만족하기는 하나 데이터를 별도의 파일이나 저장소를 이용하는 경우는 데이터베이스의 관계에서 제외된다.

데이터베이스를 사용하지 않고 다른 저장소를 선택하는 기준이 있느냐?

• 임시 데이터
• 수정/삭제/등록 과 같은 조작을 수반하지 않고 읽기 전용 데이터를 기록하는 경우

[판매자]가 [상품]을 [등록/수정/삭제/조회]하다.

[회원]이 [상품]을 [구매/찜/조회/평가]하다.

[관리자]가 [상품]을 [등록/수정/삭제/조회]하다

문제점 : 

• #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연동