1. 회원의 등급을 정한다( 고객님의 요구사항에 따라서!)
ex)
A매니저
B중간매니저
C우수회원
D일반회원
E비회원
F탈퇴회원
2. 회원가입 -> insert
3. 회원 탈퇴시 ? -> delete해도되고 update해도되지만? 보통은 update해서 회원등급을 탈퇴한 회원으로 바꾼다. 회원수자체가 그 사이트의 역량이 되기도하고. 정보를 가지고있는것-
1. 회원의 등급을 정한다( 고객님의 요구사항에 따라서!)
ex)
A매니저
B중간매니저
C우수회원
D일반회원
E비회원
F탈퇴회원
2. 회원가입 -> insert
3. 회원 탈퇴시 ? -> delete해도되고 update해도되지만? 보통은 update해서 회원등급을 탈퇴한 회원으로 바꾼다. 회원수자체가 그 사이트의 역량이 되기도하고. 정보를 가지고있는것-
1. session에는 시간이라는 개념이있다.
내가 직접 remove해주지 않아도 시간이 만료되면(세션이 만료되면) 자동으로 없어짐. 톰캣의 경우 30분이 디폴트값으로 셋팅되어있음. invalidate()따로 부르지 않아도 자동소멸된다는점이 특징. 그래서 로그인-로그아웃에 활용하기 좋다.
2. 처음에는 session에 유저 정보가 없음. 로그인하면 -> 해당 유저에게 sessionID부여. -> 유저는 해당 sessionID을 가지고 서버에 접근. context를 유지시켜 준다.
(의문) 비회원이어도 장바구니에 담은 상품계속 남아있는건 세션이 아니라 아예 DB에 비회원용으로 저장해두는 것인가? 흐음..
https://ryulstudy.tistory.com/55<<<참고가 되었다!!!
https://zero-gravity.tistory.com/299<<< 오.. 신기하다.
세션랜덤ID생성-> db 장바구니 저장 & 쿠키 send -> 유저 재접속시 쿠키값 확인 -> db안의 데이터 불러옴
아하. 장바구니는 세션만으로 구현하는게 아니고 쿠키도 쓰는구나... 호오... 하긴 상품담은정보는 유저정보랑은 다르니까.. 쿠키를 써도 보안적으로 괜찮은 건가- 흐음!
3. 브라우저를 다르게 하면- session은 달라짐. 서버는 다른 유저라고 인식하는것이다. 그래서 수강신청할때 폰으로 접속하고 컴으로 접속해서 이중접속하면 한쪽 세션 끊어버림 ;;
4. session 시간 설정등.. 이런 중요한 설정은- 프로젝트 전체가 공유하고 합의한 룰이 있어야함. => web.xml에 설정해두기(모든 프로젝트의 공용). 한글필터등도 설정가능... 흐음....
저번부터 갑자기 오라클developer를 실행하면 제대로 running되지 않고 혼자서 꺼져버리는 오류가 발생했다.
conf파일에 제대로 setHome을 했음에도 불구하고.. 자바를 못찾는 현상.
jdk를 다시 설치해야하나? 했으나... 충돌날것이 두려워서 최대한 그건 피하고. 다른 해결책을 모색하였다. 계속 잘되던 developer가 갑자기 안되는 것은 자바path의 문제는 아닐것이다 생각했음.
위 사이트를 참고해서 폴더삭제후 다시 jdk버전을 넣어주니 잘된다!!!!!
신난다!!! 이제 cmd의 sqlplus안해도된다. ㅜㅡㅜ!! GUI감사합니다.
1. Servlet Context란?
유저가 요청한 정보를 저장하기 위한 공간. 그렇게 함으로써- 유저는 로그인을 유지하는등.. 계속해서 context -즉 문맥의 흐름을 유지하면서- 웹을 이용할수있게 되는 것이다.
Servlet Context의 종류(크기에 따라?) : application, request, session,( cookie )
2. Servlet이란?
-> 페이지들을 총괄해주는 녀석.
유저로부터의 요청정보를 총! 관리해준다. 그럼으로써 네트워크상의 자료들을 총괄관리. 호오호오.
3. session이랑 cookie는 역할은 동일함. cookie는 유저측에 저장하는 거라서- 보안문제있음. 둘중에 하나만 쓰면됨. 서버에 저장하냐 클라이언트에 저장하냐만 차이있음. 로그인할때 보통 근데 세션에 저장하지.. 쿠키에저장하진않을듯함..(내생각) 보안위험..
4. application이라는 공간은 단 하나. 따라서 모든 유저가 같은 값을 공유.
5. session은 윈도우를 바꾸어도 존재함. 각 유저마다 다른값.
6. 페이지 이동방법
1) <a href
2) <form action=""...
3) 자바스크립트 location.href이용
-----------------------------------------------------//여기까지는 application, session만 동일. 프론트단
BUT!!
4) forward : 페이지 이동이 되었을때 request값 유지한다!!!
-> jsp action태그사용할수도있고, requestDispatcher사용할수도 있음(참.. 스프링을 쓰면 편할텐데... 흑흑흑...)
5) redirect : 페이지 이동이 되었을때 request값 유지 X
7.
1) forward: url바뀌지않음. 부모페이지에 종속적. 그래서 request값을 유지하는 것임.
2) redirect: url바뀜. 부모페이지랑 손절. 그러므로 redirect하면서 값도 유지하고싶으면 session에 저장하거나 . 스프링에서는 - rttr로 보낼수도있구. 훗훗
그러므로 전달하는 값에 따라서 어떤 메소드를 사용할지 고려해주어야함!!
이전까지의 JPA프로젝트로 다시 h2를 돌려보니 테이블이랑 연결되어 잘나온다.
지금과의 차이라면 user repository를 추가했다는 점 뿐인데.. 여기서 뭔가 에러가 나고있다는 것일터이다.
4.
1) crsf에서- h2-console은 허용하도록 설정하고 .csrf().ignoringAntMatchers("/h2-console/**")
2) iframe을 사용하는 사이트를 허용하도록 설정한것 .headers().frameOptions().disable();
검색어가 있을시 count할때 WHERE 절을 추가해서 SELECT해온다
<오늘 배운것들>
1. 다층형 게시판의 구현 :
1) group number: 조상글과 동일
2) indent : 조상글 +1, view를 위해 사용
3) level number : 조상글 +1 && 내 밑의 다른 level number update . 같은 조상을 가진 그룹 내의 order순서 조정해서, 제일 새로올라온 글이 최상단에 위치하도록한다.
그외) 정책에 따라 필요하다면 reference number컬럼을 추가해서- 원글 삭제시 on delete cascade로 함께 삭제하도록 만들수도 있다.
기본적으로 컬럼은 order by group desc, level asc로 한다.
2. 검색기능의 추가 : 검색키워드 & 검색워드를 받아서, 조건문으로 분기해서 처리한다. null 일경우의 고려가 필요.
1.
0) 검색 창 view에 만들기 ( form입력)
1) form 안의 키워드 null체크하고. null이면 ""으로 빈문자열 처리해서 dao에 보냄
2) 내용있을경우 -> if~else로 분기해서 where문 만들고. 없으면 그냥 select
3) list를 다시 뷰로 보내기
그외) 유저가 아무내용없이 검색할 경우 javascript로 alert경고창 한번 띄워준다.
2. 이런 흐름으로- 만약 검색이 없는경우에는 where문이 생성되지 않는다( 그냥 화면)
3. 검색이있으면 - null체크후 where 절이 생성되어 list가 만들어짐
흑흑 노가다... 명확해서 좋긴하다... 근데 이런 로우레벨 코딩말구 더더 어렵고 재밌는거 하고싶음 ㅎㅎ
1. 찬반순/ 인기순/ 최근순 : database에서 가져올때 orderby로 조절
2. 부모글과(원본글) 자식글(댓글)
3. 글은 글인데- 원본글에 달린 글 : 부모글과 공유하는 값 설정 필요 - group number로 묶어준다.
4. indent(들여쓰기) 필요 - 테이블 설계할때 넣는다
5. 테이블 설계에 필요한 넘버 : 1) primary key넘버 2) 그룹넘버 3) indent넘버
6. 댓글의 정렬( 굳이 넣고싶다면) 을 위한 컬럼 추가할 수 있음. 하지만 어짜피 writedate등으로 정렬할수있으므로 필수는 아님.
7. 그룹번호를 어떻게 설정하는가??<<<중요!!!!
부모글에 넣은 그룹번호 = 자식글에 넣은 그룹번호
8. indent 설정: 1) 0일 경우: 나는 부모글이다 라는 뜻. default 0으로 테이블 설계
2) 자식글 : 1
3) 손자글 : 2...
9. 글 순서 (answer number) : 댓글의 정렬을 위한 컬럼. 부모글의 글순서 + 1
DB에 데이터가들어갈때는 아무렇게나 들어감- 따라서 키값을 이용해서 정렬해주어야함
10.
insert할 당시에는 아직 한개도 번호가 없으므로 1이들어간다(그룹번호)
들여쓰기 = 부모글 들여쓰기 +1. 들여쓰기 숫자에 따라서 들여쓰기 기호갯수맞추어 넣기
글순서= 부모글 글순서+1
번호 제목 그룹번호 들여쓰기 글순서
1 title1 max(번호)+1=1 0 0
7 ▶son2 1 1 1
6 ▶son 1 1 1-> 2로 바뀌어야함
2 title2 2 0 0
5 ▶son1 2 1 1
3 title3 3 0 0
4 title4 4 0 0
글순서=부모글+1 한 후에. 재조정이 필요함- 자식들끼리의 순서조정
UPDATE tb_bbs SET ansno=ansno+1 WHERE grpno= 동일넘버 and anasno>=ansno+1
하면되겠다!!
11. 신경써야 할것들
1) 들여쓰기넘버: 부모글 + 1 , 해당 숫자만큼 들여쓰기 기호 넣어서 view에 출력.
손자글의 경우 부모글 +1+1 이된다. 그룹넘버는 동일함
2) 글순서: 같은 그룹넘버를가진 게시글 내에서의 구분. 부모의 순서 + 1 .
중간에 끼어들경우- 다른 게시글의 순서조정필요함.
3) 그룹넘버: 다른 게시글과의 구분을 위한 넘버. 조상의 그룹번호를 공유.
ㅋㅋㅋ계속 javascript 함수가 안찾아져서. 미간찌뿌리고 대체 왜냐~~~ 하고있었는데
함수를 함수안에 써서 등록이 안된거였음 ㅜ ㅎ
java에서 코딩할때. 항상 class안에다가 함수선언하니까 그 버릇이 남아서
}안의.. 다른 함수안에다 함수를 작성하고 있었던 것이었다 ㅎ
이제 잘 찾아집니다.
팁) 소스보기 -> js script파일 클릭해서. 제대로 내가 쓴 js파일이 잘 업데이트 되었는지 확인할수있다. 일반 크롬에서는 쿠키때문에 안먹는 경우도 많으니. css / js파일은 시크릿모드에서 확인하기.
mockMVC를 활용해서 그걸 해결할수있는 방법을 알았다!!!
do(print()) 메소드를 활용하면 - 해당 url안에 있는 모든 정보를 알수가있다!!!(너무좋아~~)
일일이 object를 콘솔로찍어보지않아도 된다.. 세상에!
perform에서 post로 한다음에 -> 객체 생성해서 보내고-> print()로찍으면서 디버깅하는것도 가능하겠다는 생각이 들었다.
단일테스트로 하고싶으면 - @WebMvcTest 하면되고.
스프링이 만들어주는 컴포넨트 등등 합쳐서 통합테스트로 하고싶으면
@SpringBootTest + @AutoConfigureMockMvc해서
MockMvc객체를 쓰면된다.
1 contextpath접근방법
1) request에서 getContextpath로 불러오기
2) Utility 클래스를 만들고 . 멤버변수에 contextpath명 private으로 한후.
getter함수만들어서 - static하게 부른다
2. 공유가 많이 되는 함수 : synchronized를 하면- 동기화? 왜 거는 걸까?? 안정적으로 클래스 실행해서 혹시 값이 변경되는것 방지. - 비선점
3. 숫자 포맷함수
DecimalFormat이용한다.
4. Utility클래스 하나 만들어서 다 static함수로 만들면서.
날짜포맷팅등등.. 번거로운일들 다 모아놓고 갖다쓰기
1. @RequestParam : 파라메터 어노테이션
리퀘스트요청으로넘어온 파라메터 받을때 사용.
2. @ModelAttribute
: 1) 파라메터를 개발자가 만든 객체로 바인딩해서 받을수있다.
2) 전역함수로 쓰면 spring이 구동되기전에 초기화된다(?) -> 활용 방식을 잘 모르겠음
3. @SessionAttributes
: 파라메터를 세션 단위로 저장할수있다. 여러번에 걸쳐서 request요청을 받을때 사용.
4. @RedirectAttribute
-> 특히 유용한건 addFlashAttribute. 세션에 저장하되 바로 리다이렉트 후 바로 삭제해줌
1. spring - jpa를 pom.xml에 의존성 추가
2. jpa를 이용할수있도록 entity어노테이션 및id컬럼지정. 필요하면 table name속성도 지정. order의 경우 예약어이므로 Order_Tacos로 바꿈.
@OneToMany , ~~~어쩌구 등등 관계속성 지정에 유의.
@prePersist어노테이션을 활용해서. persist되기전에 자동으로 입력될 메소드를 만들수있다. 이걸이용해서 - Date속성 컬럼을 입력하는 메소드작성
3. interface 를 만든다. jparepository 또는 crudrepository를 상속한다. 첫번째 파라메터는 해당 entity타입이고. 두 번째 파라메터는 Id컬럼의 타입이다.
4. find/read/get -동일. select역할
delete update다 부를수 있고. 뒤에 오는 서술어도 jpa가 entity에 맞게 만들어준다. orderby도 할수있고 between, greaterThan, Isnull등등.. 다양한 조건 넣을수있다.
5. CommandLineRunner을 이용해서 스프링부트 어플리케이션 시작전에 넣을 데이터를 미리 셋팅해둘수있다
그외에 커스터마이징쿼리를 @Query어노테이션 이용해서 날리는 것도 가능.( 이 문법은 일반 쿼리랑은 좀 다른듯. 더 쓰고싶다면 추가학습이 필욧~)
1. 개발환경확인
1) jdk 11이상(나는 15사용중)
2) oracle 11g xe
3) 톰캣 8이상(나는 9사용중)
4) 이클립스 ee
2. 메인카테고리 (대분류)
1) 기본CRUD게시판 + 댓글달기기능
2) 공지사항
3) 회원메뉴: 가입/ 로그인/정보수정/탈퇴/ 아이디비번찾기
4) 사진파일첨부게시판 (포토갤러리)
5) 메일보내기기능
3. UI 디자인 - 대분류에 기준하여.
1) 인트로 페이지(index.jsp)
2) 게시판 페이지
3) 로그인 페이지
4) 포토갤러리 페이지
5) 메일보내기 페이지
1. 해결~~!!
1) 전제: orderController 와 TacoDesignController는 세션스코프를 공유한다. 따라서
SessionAttribute어노테이션으로 "order"라는 Order오브젝트 지정
2) TacoDesignController에서 Taco를 만든 후, ModelAttribute로서 새로운 Order오브젝트를 만들어준다. 그리고 Session에 저장되고- redirect된다.
3) redirect 된 get요청의 페이지에서는, 이제 새로 Order object를 만들 필요가 없고, session안에 있는 order오브젝트를 받아서 쓴다. 따라서 model오브젝트 만들필요없이 바로 페이지 보여준다.
이제 Taco 오브젝트와 Order오브젝트가 잘 연결되어, taco객체가 order오브젝트 안으로 잘 들어간다.
Taco save -> Order save -> Order와 Taco의 연관관계 save.
2. 남은 의문점) 지금은 order하나당 taco하나가 저장되고있는데
order하나에 taco여러개를 넣고싶으면 어떻게 해야하지??
즉- 한번에 여러개의 타코를 주문하고 싶을 수도 있지 않나.
내가 뭔가 놓치고 있는 부분이 있는걸까?!!!
session을 넘나드는 object의 경우 어떻게 처리해주어야 하는가??
한개의 order는 여러개의 tacos를 가질수있다.
order는 session을 넘나들며- orderId는 taco_order_tacos테이블에 같이 저장되어야함
but..화면에와 같이... 해당 order의 taco를 확인해보면 - gettacos를 했을때 taco가 하나도 저장되어있지 않음을 알수있다-
우선 세션단위가 아닌 평범한 taco와 ingredients는 잘 받아진다.
taco한개는 여러개의 ingredients를 가질수있고, taco가 저장되면 taco의 getingredient안에있는 해당 ingredientsId는 tacoId와 함께 taco_ingredient테이블에 저장된다. (1:n, n:1관계를 해결하기위한 테이블)
order 객체 그 자체도 잘 받아진다...
문제는 order와 taco의 연관관계테이블이다.
taco_order_tacos테이블에 데이터가 전혀 저장되어있지않다..
교재대로 잘 따라한것같은데.. 어디서 안받아진걸까?
sessionattribute를 어떻게 구현하는가... 이에 대한 이해가 아직 부족한것같다.
그리고 h2는 기본적으로inmemory데이터베이스로돌아가서- 가벼워서 좋다. 데이터가 계속 리셋된다는 것도 좋고. 동시에 테스트데이터를 data.sql같은걸로 써서 넣을수도 있겠다는 생각도 든다. 인메모리가 어떤것인지에 대한 정리도 조금 더 된것같다!! url을 지정해주지 않으면 spring에서 무작위로 생성해주는 url으로 들어가야하는데. properties파일에 url을 지정해주면 해당고정된url으로 접속할 수 있다.
UI화면에서 계속 하나하나 데이터를 넣고 확인하는 작업에서 시간이 넘 소요된다. test케이스를 하나 작성해서 계속 실험해보아야겠다는 생각이 든다!!
아예 온클릭 메소드에 이렇게 href대놓고 하드코딩할수있다
자바스크립트 함수연결안하고 직접쓰기.
이때 이동경로는 jsp자신 기준 상대경로이다(/로부터 안썼으니까.)
ㅇ이렇게 절대경로로 써도 같은 결과.
1. MVC패턴으로 가기위한 노력~~~ 후후
2. <%@ page import %>를 통해서 만든 클래스를 import할 수 있다
3. [jsp 액션태그]
jsp안에서 동적인 페이지를 만들어주기위해 사용하는 태그들.
page import를 해서 패키지.클래쓰 임포트 가능
page forward 다른페이지로 이동시켜줌
page include 다른 페이지 결과화면 포함시켜줌(동적인 결과 포함) ex) 헤더풋터등 계속 반복되는 페이지 넣고싶을때.
4. 자바빈즈
jsp:useBeans태그 이용해서 자바오브젝트를 편리하게 다룰수있음. + 해당 페이지 이외의 scope에서도 사용할수있게해줌. scope는 기본 page, application, session, request - 이있음
5. 1) 자바빈즈를 사용하지않고 걍 import만 해서 그 페이지 내에서만 사용하거나
2) 자바빈즈를 사용해서 스코프 조절하면서 오브젝트 사용가능.
6. 페이지 분리
MVC패턴을 이용하여 좀더 간결하고 깔끔한 페이지 작성
1) VIew페이지는 (되도록이면) html코드만으로 넣고
2) Model - 즉 DTO를 따로 만들어서 필요한 데이터를 함축해서 가지고 있는 자바오브젝트 클래스를 새로 만들고
3) 데이터베이스에서 모델을 가져와주는 DAO클래스 , data access object를 만들고
4) DB연결만 담당하는 utility 패키지도 따로 만든다. utility 는 해당 application전체가 공유하는 녀석들.
->tip: dbclose때릴때 똑같은 함수명으로 파라메터만 다르게 받아서(오버로딩해서) 만들면 간편. static클래스로 만들어서 아무데서나 갖다쓸수있도록 클래스 작성!!!! 멋져!!!
5) 즉 로직과 뷰. 데이터를 분리한다. 페이지는 페이지가 할일(보여주는일)만 하고. 데이터가져오는 일만하고. 비지니스로직은 클래스로 만들어서 정리해준다!!
1. CRUD게시판
목록페이지 만들고 (반복문for사용 뺑뺑이) ->상세보기 페이지(반복문x) 만든다
insert페이지 만들고 ->update, delete페이지 만든다.
(이런 흐름으로 하면 쉽게 만들수 있다. )
2. 독립적인 페이지들의 연관관계 : sno라는 프라이머리키를 이용해서 연결.
사실 각자각자 따로따로의 페이지 인것.. ajax가 아닌한.
1. form 에서 post요청으로 받은 유저의 정보를 ->
2. 서버에서 getParameter로 받는다.
3. 받은 파라메터를 -> db에 저장한다
1) db정보 설정 .
2) connection으로 접속
3) sql문을 String으로 작성 -
4) ? 값에 preparedstatement이용해서 인자 전달
5) execute등 적절한 메소드 이용해서 - String 으로 만든 문장을 sql로 전환
6) resultset으로 결과 받기
4. javascript구문 이용해서 ( 스크립트 태그 하드코딩 ;;) ㅎㅎ alert로 확인창 날려주고 다른 페이지로 이동( location.href)
1. jdbctemplate활용하기
1) query 메소드 : 모든것을 가져온다 selectAll
2) Iterable로 가져왔음(collection의 상위객체)
주의!! iterator와 Iterable은 완전히 다른녀석이다. iterator는 collection소속이아님!! java8로 오면서 collection을 좀더 쉽게 다룰수있게 되었고- 이녀석의 필요성이 다소 감소? 하지 않았을까 싶다(저는 그렇게 느꼈어요)
3) queryforObject : 1개 가져온다 select one
2. 아예 쌩으로 코딩했을땐(순수 jdbc)
하나하나 커넥션 연결하고,
ResultSet직접 만들어서 statement에 넣은 sql실행하고,
resultset에 직접 값을 하나하나 셋팅하고,
new 해서 빈 객체 만든다음,
다시 resultset을 뺑뺑돌리면서 (hasnext어쩌구) 값을 빼와서 - 객체에 저장했었다.
-> jdbctemplate을 이용해서 반복 코드를 줄인다.
https://velog.io/@seculoper235/RowMapper%EC%97%90-%EB%8C%80%ED%95%B4 <참고 사이트!!> 이해가 증진되었다.
3. 이때 중요한 것이 - rowMap이라는 메소드를 구현하는 것.
객체에 바인딩하기위해서는- 이 메소드를 구현해야해주어야한다.
query에넘기는 파라메터중 하나- rowMap인터페이스.
functionalinterface로서, 함수를 한개만 가지고 있다.
원래는 이 인터페이스의 함수를 구현한 클래스를 파라메터로 넘겨야 하는데-
자바8의 도움을 얻어서 이걸 람다로 넘길수도 있고.
함수로 넘길수도있다( 실은 함수자체를 넘기는게 아니고- 인터페이스를 구현한 것을 생략해서 함수를 넘기는 것처럼 보인다. )
교재에서는 this::mapToIngredient 라고- 메소드 참조를 이용해서 넘겼다.
구현을 새 클래스 안만들고 그냥 클래스안에서 해줘도 되는군...
메소드 참조하는 새로운 방식도 알게되었다. 클래스명::메소드이름
4. 이것을 autowired로 controller에 주입한다.
Iterable 을 stream이용해서 람다식 foreach로 가져올 수 있다.
1. request : 유저의 요청에 대한 모든 것이 담겨있다
2. enctype: 기본적으로는 form encoded (POST)
3. textarea 의 엔터 반영하는 법
1) <pre>태그이용하기
2) String의 replaceAll()메소드 이용하기 . replaceAll("\n","<br>")
4. checkbox에 체크하지않은경우 - 객체 null로 됨(이걸로 if로 제어할수있다... 근데 내생각엔 굳이 이걸 서버단까지 안가져오고. 걍 클라이언트 단에서 javascript로 유효성검사 해주는게 좋을것같음. 선택사항체크표시 아니라면..)
5. checkbox에 value안 넣었을경우 - on이라는 값이 들어간다
6. request에는 - getparameter뿐만아니라. getparametervalues라는 메소드도 있다. 이걸 이용해서 String[]배열로 받을 수있음.
7. enctype을 추가하면 - request에서 값을 가져올때 주의해야함. NullPointerException이뜬다-
request.getParameter로 받은 값은 단순 String, 즉 첨부파일의 이름일 뿐이다
따라서 첨부된파일을 가져오려면 다른 방식으로 request에 접근해야함.
8. 내생각)
enctype="multipart/form-data"로 지정안하고
단순 파일명만 string으로 받아서 저장하구
실제 파일은 ajax로 처리하면 되지 않을라나~~>???
9. request에서 뽑아온 uri정보로부터 - 명령어별로 분기해서 유저의 요청을 처리할수있다.
10.request.getRealPath()메소드를 통해서 실제 "물리적"경로를얻을수있다. 첨부파일을 저장할 때 필요하다. 웹상에서 접근하는 논리적주소가 아니라 물리적 경로!!
11. 그런데 이클립스상에서 돌아가는 톰캣은 - 실제 톰캣이 아니고. 서버를 복사해서 실행하는 패턴으로 돌아간다. ->metadata에 저장된다. 실제 서비스 경로가 아님
=>실제 서버에 프로젝트를 올리는경우와 경로가 달라진다.
실제서버의 스토리지에 유저가 올린 파일을 저장해야 하니까.. 실제로 프로젝트를 서비스하려면 이 경로로 바꾸어주어야함. 지금은 학습용이니까!!
12. getRealPath()는 request에도 있고 application객체에도 있는데. request용 getRealPath()는 deprecated되었으므로application에서 뽑는것을 추천함.!! 서버를 이용하는 유저 전체가 공유하는 주소인것이다.
13. request 에 setAttirbute로 저장하는 값 -> object타입이다. set으로 저장하고 - get으로 가져온다 (Object타입. )
getParameter는 유저가 submit해서 던진값.
setAttribute() , getAttribute()는 서버안에서 던지고 받는값. request 변수.
14.
enctype의 종류~
ajax는 일반 문자열 데이터(text/plain)
post방식은 form-urlencoded로 패키지화되어서 전달된다. get보다 안전(상대적으로, 왜냐면 uri에 유저가 보낸 값이 노출되지않으므로)
파일첨부는 멀티파트이용.
소스파일은 src에 저장되고
output파일 (즉, .class파일) 은 build\classes에 저장이된다.( 이건 이클립스 내에서 보이지 않음)
내가 jsp페이지를 만들면 - 톰캣이 알아서 .class를 만들어준다 ( run on server를 했을때 )
.jsp -> .java -> .class순으로 만들어지고 실행!
내가 만들지 않았는데!! 톰캣이 자동으로!!
워크스페이스의 .metadata~~ 어쩌구저쩌구 안에 만들어짐
톰캣이 알아서만들어준 파일들
1. 프로토콜이란?
네트워크에서 주고받는 규약, 약속!
ex) http 프로토콜 (http://~~~) : 크롬이라는 브라우저를 이용해서 사용중
ftp 프로토콜 : 파일만 전문적으로 주고받을 때 사용함. Filezilla라는 전용프로그램을 이용해서 파일교환가능.
telnet프로토콜 : 멀리 떨어져 있는 pc와 원격으로 접속할 때 사용. putty 혹은 TeamViewer등의 프로그램을 통해 이용가능
2. C드라이브등에 저장한 파일은 - 나만 볼수있음. server에 html문서를 올려야- 프로토콜 기반으로 사용자가 요청했을 때 요청이 간다.
그 server위에 저장할 때 사용하는 폴더가 webapps인것이다!! = home directory, 또는 root라고 부른다.
3. 홈 디렉토리 접근방법 : http://(도메인명 혹은 ip주소):(포트번호)
구조
These are some of the key tomcat directories:
*.sh
files (for Unix systems) are functional duplicates of the *.bat
files (for Windows systems). Since the Win32 command-line lacks certain functionality, there are some additional files in here.Throughout the documentation, there are references to the two following properties:
/home/tomcat/apache-tomcat-9.0.10
or C:\Program Files\apache-tomcat-9.0.10
.CATALINA_BASE
property.If you set the properties to different locations, the CATALINA_HOME location contains static sources, such as .jar
files, or binary files. The CATALINA_BASE location contains configuration files, log files, deployed applications, and other runtime requirements.
1. 서버는 웹서버만 있는 것이 아님!! DB서버라든지.
클라이언트의 request에 응답할 수만 있으면 다 서버임
Mail server. 메일을 보내려면 메일서버가 있어야 해 - 우체통에 편지 집어넣듯이..
2. 서버가 서비스를 시작해야만 - 요청을 받고. 응답할 수 있게 된다
그래서 오라클 서버가 동작하고 있는지확인을 했던것이다 ( ms의 경우, service에서 확인가능 )
3. http 프로토콜로 요청 -> 응답 ( web서버)
수많은 서버들 가운데서 - 하나의 종류이다.
4. 반환해주는 형태 : html(문서) 형태로 응답해준다. 사용자는 html문서를 보게 됨.
5. http 프로토콜을 이용해서 접속할 수 있게 해주는 프로그램 = web브라우저. html를 해석해주고, 웹 서버를 이용할 수 있게 해준다 ( ex), 크롬, 엣지, 사파리, 파이어폭스 등등)
6. 서버는 html문서로 응답하고, 연결을 바로 끊는다 . 내가 f12열어서 body color바꾸고 한것은.. 내 브라우저에서만 보이는 것. 내가 웹서버의 html을 바꾼것이 아님.! 내자리에서만~~
7. 서버 구축이 필요!!
8. 서버 구축 방식?
1) 내pc를 서버로 만든다 ...->내가 24시간 365일 전부다 관리해줘야함
2) 서버 대여 : 대여해주는 쪽에서 서버를 관리해준다. ( 외부 서버) = 웹 호스팅(web hosting) 을 한다. ex) 카페24. 내문서를 카페 24에 올리고- 카페24가 대신 응답처리. 가장 일반적인 방법이다.
9. 웹서버/웹 어플리케이션 서버
10. 서버는 - html 정적인 문서도주고(웹서버)
DB랑 왔다갔다하거나. 메일작업을 위해서 메일 서버와 왔다갔다 하거나. (웹 어플리케이션 서버) Mail server. 동적인 문서를 만들어준다 - 그래서 사용자 요청에 응답할 수 있도록. 사용자에게 메일로 인증요청 보내거나? DB로 왔다갔다 하면서 로그인 확인하거나? 그런것들 .
웹서버를 베이스로 하되 - 웹 어플리케이션 서버 (was) 를 설치해서. !!
11. mail server(pop3, smtp)
web server(http 프로토콜 기반)
database server(oracle 11g xe, mysql db등)
12. tomcat : was. 무료. jsp ( java를 해석, 동적인 페이지로 만들어준다)
jboss/resin : 유료. jsp
php : 무료. 리눅스기반
IIS : 유료. asp. ms사
1. 여러개의 속성을 한꺼번에 변경할수도 있다. 그럴때는 JSON문법을 사용한다
ex) $("~~").css({속성명: 속성값,
속성명: 속성값,
속성명: 속성값,
속성명: 속성값,....}
);
2. nth를 지정하여 엘리먼트 셀렉트할 수 있다
ex) $("button:eq(1)").~~~
$("p").eq(1);
이런 문법도 있다
3. append()안에 요소 여러개 넣는것도 가능하고
append().append()해서 체인메소드 하는 것도 가능하구~
1. 배운것들
jQuery 셀렉터.
$(document).ready(
어쩌구 저쩌구
);
걸어주는 것이 좋다. 왜냐하면- 페이지가 전부 로드되기도전에 jquery가 실행되어서. 엘리맨트 못찾는 오류가 날 수도 있기 때문에 .
$(
어쩌구 저쩌구
);
일케 줄여서 써도 된다. 근데 명확한 표현을 위해 전자를 더 많이 사용한다.
2. jquery 는 val();으로 통일. 자바스크립트는 멤버변수로 value를 부르는데. jquery는 걍 text(),value(),html()로 다 통일되어 있어서 매우 편함.
3. button의 기본속성은 submit. 막기 위해서
1) preventDefault
2) form action지정안하고 있다가 버튼클릭시 액션 지정, form.submit();때리기
3) button 안에서 return false하기
등의 방법이 있을 수 있다.
* 쿠키 보안 취약점
- XSS(크로스 사이트 스크립트)공격
˙ 자바스크립트를 이용하여 document.cookie 값을 탈취할 수 있음
- 스니핑(Sniffing)공격을 이용
˙ 네트워크를 통해 전송되는 쿠키값을 암호화하지 않고 전송하는 경우 네트워크 스니핑 공격을 통해 쿠키값을 탈취할 수 있음
- 공용 PC에서 쿠키값 유출
˙ 영속성 쿠키는 하드디스크에 저장되며, 간단한 방법으로 접근 가능하기 때문에 공용PC 사용시 PC에 저장된 사용자 정보가 유출될 수 있음
1. mybatis는 constructor로 동작하고
2. html EL태그는 getter로 동작함 ( @Getter안붙였더니. 못찾겠다구 에러남)
3. 톰캣타니까 - 콘솔 한글꺠짐문제 (데이터는 잘 찾아지는데-) : 해결필요
4. 알고리즘이 좀 약한가 나는??
overflow : hidden
5. 다양한 window객체 .
6. setTimeout, setInterval 에 넣는 변수 - 함수쓸때 () 제외
걍 파라메터자체를 객체로 취급하나? 좀 특이한 문법인듯?
7. 3번 문제의 해결-
1) settings에서 utf-8로 전부 다 바꾸어주고
2) vm options 에 내용추가
참고 사이트:
https://thingsthis.tistory.com/328
많은도움이 되었다!!
다 셋팅하고 나서도 왜 안되지?? 하고 끙끙대고있었는데, 인텔리제이 재실행하니까 잘 뜬다.!!
묘~ 한 .. 채워지지 않는 갈증
지금 해야하는 것들?? 이 시간적으로 이리저리 ~ 얽히어 있어서?
약간 주저해버린다
이것도 해야할것같고 저것도 해야할것같구
일단은..
지금 할 수 있는것들/ 시간을 두면서 해야하는 것들을 나누고
조금씩 조금씩 처리해 나간다!
1. setTimeout(함수, 밀리세컨드) -> 한번실행
2. setInterval(함수, 밀리세컨드) -> 주기적으로실행
3. 해제하려면 - 각 함수를 변수로 받아서
clearTimeout(var) clearInterval(var) 해준다
4. setTimeout을 이용해 자기자신을 부르는 재귀함수로 - 전자시계를 만들 수 있다
1초마다 계속 내가 나를 불러서 -> 시계가 돌아가는!!!! 신기함
1. 전역변수 : 함수 밖에서 선언한 var
2. 지역변수 : 함수 안에서 선언한 변수
3. 특이한 점 - 전역변수는 어느위치에 선언하든 상관없이 쓸수있다
그래도 예쁘게 모아서 선언해주자.
4. script 태그안에서 function선언 시 전역변수의 위치에 따라 undefined할 수도 있다
5. 찾을수 없는 값(지역변수) 참조하면 콘솔에 에러뜸
1. Slf4j : simple log file for java
캘린더클래스의 getinstance같은역할인듯.
가지고있는 log있으면 - @Slf4j붙이는 것만으로 알아서 log땡겨와줌. 그러면 난 static임포트한것처럼 logger클래스 쓸수있다
2. application.properties(혹은 yml) 나 logback.xml파일을 작성해서 log를 커스터마이즈 할 수있다. 로그 파일을 디스크에 저장되도록 할 수도 있고- 로그의 출력형식을 지정할 수도 있다. 나는 xml작성안하고 편하게 그냥 properties에 작성했다.
logging.level.(패키지명)=info, warn,debug등..
으로 로깅레벨을 설정할 수 있다.
spring.output.ansi.enabled를 설정해서 로그를 예쁜색으로 출력할 수 있다.
1. 최소한도 걸러낸 데이터를 서버에게 보낸다. javascript & jQuery 로 한다
ex) 약관동의여부, 글자수체크, 숫자인지 문자인지 체크 등.
그래서 애초에submit자체를 못하도록!
2. 숫자데이터인지 확인하기 -> typeof쓰거나 . isNaN쓰거나.
onsubmit액션에 return false로 만들어줘서 submit자체를 못하도록하기-
3. 약관동의 체크했는지? -> ~~.checked ==false일경우 return false 해놓기
4. 혹은 - submit버튼자체에 조절해서. action속성을 조절하거나/ submit()함수 부르는 방식도 있음( 내가 주로 쓰던 방식- 버튼을 눌렀을때 - 걍 버튼은 버튼으로만 하구 함수로 처리해버리기!!)
5. 오류 있는곳 - focus()함수를 써서 좀더 상냥하게 여기입니다 알려주자!
1. javascript의 역할: 최소입력값이 null이 안되게 alert로 잡아주기
나머지- 값을 검증하기 - 는 server단에서 한다
서버는 바빠!! 최소한- 입력을 했는지 안했는지 정도는 프론트단에서 처리해주자
바리케이트!
submit이 되는 순간 -의 event를 잡아내서 - 값이 들어왔나 안왔나 확인!! 1차거르기~해서 서버에게로 보내기~ => ★onsubmit()★으로!!
2. onsubmit(return false)
오... 버튼 preventDefault이 아니라 이렇게 하는 방식도 있군...
3. array 이용하기
4. array iteration 이용하기 - (foreach, map, filter, find 등. 화살표 함수 얍얍!)
5. Math, String 의 메소드 이용하기
6. 다양한 이벤트 활용하기-
7. json객체 이용하기 : JSON.parse , JSON.stringify
제이슨 객체 iterater로 처리하기 가능
1. xml문법
- 여는태그와 닫는태그가 있다
-커스텀 태그가 가능하다 (만들어서 쓸 수 있다) <database> </database>
<username></username>같이~~
안드로이드에 들어가는 자바(모바일 플랫폼에) -> 주로 이 xml문법의 커스텀태그를 많이 쓰고있다.
워낙에 사용자 정의태그이다보니..룰이 없다는것이 단점. 데이터베이스 환경구축. pom.xml같은곳.. 및 안드로이드OS에 들어가는 java. 에서 많이 쓴다. 브라우저에서는 여전히 html강세
브라우저에서 xml으로 쓰게 된다면??-> 데이터 파싱할때 불편하다구함. JSON이 편해~~
굳이 커스텀태그를 만들면서까지 웹페이지를 만들일은 없음.. 잘 만들어진 태그를 야금야금 써주자!! 커스텀태그 지원 라이브러리이용
2.javascript 배열 관련 메소드: push, pop으로 뒤쪽 빼고 넣기, splice해서 중간에 껴넣고 껴빼기, shift, unshift로 앞쪽 빼고넣기
sort()로 소팅하기. reverse()하면 역소팅. 알파벳순.
숫자 소팅: sort(function(){a-b}) a가 b보다 작으면(뺐을때 음수) 더 앞으로 소팅됨
3. 데이터를 파싱한다 = 데이터를 꺼내온다.
JSON문법
키: 값
name:value
key:value
property:value
url: ~~
username: ~~
password: ~~
database{url: "http://~~", username : "system", password:"1234"}
해쉬맵과 비슷하다(key, value)
아~~~ 그렇군. key값으로 불러오면 되기때문에.. 데이터를 끄집어내기가 편함!!(파싱이 편하다)
4. array 메소드
: foreach 로 각각. map으로 새로운 배열 형성 등.. 함수를 인자로 넣어서~ 여러가지 결과값을 만들수있어~~ filter로 필터하기 우와//reduce로 값 한개씩 연산해서 없어지는( 이거 뭔가 자바8과비슷하군)
indexOf, find메소드.. 등등 오.. find좋은듯..
1. 하나의 row에는 총 12개의 col 이 있다
2. sm, md, lg등 디바이스 사이즈를 고려해서 지정가능
보통 sm과 md를 쓰고
.col-*-*으로 가운데는 첫번째는 사이즈, 두번째는 col몇개 들어가는지
갯수 안쓰면 자동으로 한 row안의 col 갯수 세서 - 균등 배분해짐
Ex) col-md-4
1. 컴퓨터의 구성 : 크게 나누어 하드웨어/ 소프트웨어
인간으로 치면.. 육체 / 영혼 같은 개념.
2. 소프트웨어의 종류 : 시스템소프트웨어 / 응용 소프트웨어
3. 시스템소프트웨어의 종류 : 운영체제 / 개발 환경을 제공하는 소프트웨어
4. 시스템 소프트웨어란?
인간으로 치면.. 숨쉬기.. 눈깜빡이기.. 같은 당연한 활동들을 지원하는 소프트웨어.
응용소프트웨어는 시스템소프트웨어 위에서 동작한다. 그래서 스스로 하드웨어를 각자가 따로따로 제어하지 않아도 됨.
따라서 응용소프트웨어는 시스템 소프트웨어에 의존한다. (종속적이다) macOS.. window.. linux등.. OS의 환경에 따라서 응용 소프트웨어가 돌아가기도 하고 안돌아가기도 할 수 있는 것이다. !!
5. 응용소프트웨어란?
어떠한 목적을 위해서 만들어진 소프트웨어. 인간으로 치면.. 온라인 강의를 듣는다! 공부를 한다! 같은~ 숨쉬기위해서 태어난 건 아니니까...
6. 시스템소프트웨어: 하드웨어를 제어할 수 있어야 하기때문에.. 하드웨어에 가까운 C나 어셈블리어를 사용
7. 응용소프트웨어: java, c,c++ , javascript등 다양한 언어 사용. 단 java는 OS에 독립적일 수 있도록 JVM이 OS위에 또 올라감
8. 운영체제의 역할 : CPU관리, 메모리관리, 파일관리, 입출력시스템 관리, 그외 보안관리등..
1. CSS의 세계... 심오하도다
background image를 사용해서 이미지 만들기
transition을 이용해서 애니메이션 처리하기
position : relative와 absolute를 사용, left top을 조절하면서 ~~ 위치 조정
레이아웃..
display: block/inline-block/block이용하기. none을 이용해서 숨기기( 혹은 visibility)
2. 반응형 웹 : 사용자가 어떤 디바이스를 쓰든- 레이아웃 예쁘게- !!
3. 내가 만든 페이지가 - 디바이스에 따라서 자연스럽게 레이아웃이 바뀐다. 예전에는 이렇게 하려고 페이지를 다 따로 만들었다구 함(세상에;;) .. 디바이스의 크기를 알아서 페이지가 알고 반응한다- => 미디어쿼리(Media Query)
4. Media Query : 보통은 스마트폰, 타블렛, PC로 세개 생각.
5. but... 부트스트랩을 써서 - media Query 안써두 된다~~!! ^▽^!!
6. 부트스트랩 그리드 시스템 : media 쿼리를 부트스트랩이 이미 만들어 놓았기 때문에- 디바이스 크기별 레이아웃을 위해- 써먹기만 하면된다! 내가 일일이 레이아웃 요소 하나하나 픽셀 계산하지 않아도 됨!!
1. display와 visibility를 이용해서 div를 숨겼다가 보였다가 가능
차이점은 visibility는 보이지만 않을뿐 그 영역칸은 차지함
display: none;하면 그 영역칸 자체가 없어짐
2. iframe : 외부문서를 끌어옴. 다른 페이지
3. overflow를 이용해서 div안의 내용을 스크롤로 구현 가능 : 이를테면, 약관같은 것!
overflow : scroll등등 옵션 이용하기. hidden하면 - 넘치는 내용 없어진다
4. block요소와 inline요소
블록은 한줄 전체 잡고. 인라인은 자기가 있는 곳만 잡는다 span태그 같은애들
5. html은 stack구조이다 (top, bottom)
뒤로가기 버튼 생각하면 쉽다
맨 마지막에 들어온게 젤 빨리 나감
6. https://material.io/design
마테리얼 디자인- 눈이 안아픈
1. border의 px까지 생각해서 container영역 잡아야 한다는 것
( 근데 넘 계산기 뚜들겨야하고 번거로움)
2. text-align은 엘리먼트 안의 텍스트 배열
3. float은 엘리먼트 자체 어떻게 배치하는가.
그대로 흘러가라~~left
4. 픽셀 계산 안하고- 콘테이너의 박스사이즈 내에서 해결하라
-> box-sizing: border-box
5. float속성은 아래 애들에게 전부 상속된다.
그러므로 clear을 때려줘야 배치가 제대로 된다
안그러면 요소의 위치가 뒤죽박죽..
--> 아니 근데 내가 왼쪽을지울지~오른쪽을 지울지~~ 어케 알아!!!
해서 걍 clear:both많이 쓴다
상속받은 left속성을지우는것~~~
디자인도 참... 만만치가 않구먼유.
6. 정리!!!
float 이용해서 페이지 레이아웃 잡는법
header - content - footer로 블록 잡아놓고
전체 (container) 로 픽셀 값 지정하고
box-sizing 으로 적절하게 border까지 생각해서 content의 width잡고!
float을 이용해서 흘러가도록 배치.
footer가 제대로 잡힐 수 있게 float을 클리어!
1. relative absolute (static) sticky inherit
relative랑 absolute차이를 모르겠음??
부모- relative . 자식 - absolute 로 하면
부모 기준으로 자식위치를 선정할 수 있다
음....
부모가 움직이면- 자식도 영향을 받는다
이정도만 알면 되나?
2. 이해했다!!!
relative는 페이지에서 해당 element가 원래 위치해야할 곳- 을 기준으로 자리잡는다
absolute는 화면을 기준(혹은 부모)으로 자리잡는다
w3school보다 mdn이 더 이해하기 쉬웠다
https://developer.mozilla.org/ko/docs/Web/CSS/position <-참고링크
3. absolute와 fixed의 차이:
absolute는 body라고 하는 좌표값을 기준으로 자리잡는다.
fixed는 유저에게 보이는 화면을 기준으로 자리잡는다
따라서 - 스크롤을 위로 아래로 옆으로 넘겨도 fixed는 계속 보임!!
반대로 absolute는 스크롤 내리면 안보임! 문서기준이라서!
4. sticky는 자기가 있어야할 위치를 유지하면서 고정됨
스크롤을 내려도 있다
근데 안먹는 브라우저도 있으니 주의.
sticky는 nav바 같은데서만 쓰고
나머지는 fixed로 하면 될듯!! ( 팝업창, 위로가기 버튼 등 . 그래야 사용자 화면에 계속 뜨니까!!)
sticky는 스크롤을 기준으로 생각하고
fixed는 모니터를 기준으로 생각하면 될듯
콘솔창: 나만본다
여러사람들( 사용자) 에게 보여주기 위해서 -> 인테리어를 하자!! (UI 의 중요성!)
View 를 신경쓰자!!
Model & Controller : 서버에서 움직이는 부분. 벡엔드. 사용자들은 몰라도 되는 공간. 사용자에게는 보여지지 않는 공간
View : 사용자에게 보여지는 단계. 어떤식으로 보여줄것인가. 프론트엔드.
[View단] 프론트엔드 . UI(User Interface) . 화면구현
[Server단] 벡엔드
사용자들이 보기 편하게끔 & 일관성과 맥락을 가지고 있어야함. 규칙성. 어느 곳에서는 글자 30p였다가 어느곳에서는 10p..면 맥락이 없는 것이다!
뷰단... 어디까지 관여해야하나. -> 웹 디자이너들의 역할이 좀더 크다( ajax등이 들어가면 달라지겠지만 ) 실제로 업무에 가보면- 디자이너들과 협업하게 된다. html주시요~~ 하구.
HTML, CSS, Bootstrap,...-> 주로 디자이너의 영역
JavaScript, jQuery
spring에서 제공하는 정적이미지 맵핑으로
<img src ="~~">라고 쓰면
resources안의 이미지를 찾아주는데
문제는 웹에서 띄울때, controller 에서 설정한 requestMapping 때문에
localhost8080 + requestMapping의 url + resources url
이렇게 추가가 되어서... 결국 이미지 파일을 불러오지 못하는 문제에 봉착
---> 해결!!!!
루트로부터 찾게끔 하면된다!!! (의외로 무지간단)
혹은
결과 : 잘 불러오는 것을 알수있다.
css도 잘 가져와진다!!
왜 갑자기 또 잘되는 것이여?
나랑 밀당하는 것이여 뭐여. 엉엉엉..
인상찌뿌린 나의 시간들아 미안....
Windows →Preferences->General →Workspace →Select “Refresh using native hooks or polling”
이렇게 했더니 다시 잘 나왔다.
원인이 무엇일까.. 아리송...
궁금한것
1 . 파일 찾아오기 잘됐다가 안됐다가 하는이유
2. application.properties 파일의 spring.servlet.multipart.location 과
실제 파일 저장경로가 다른데도 이미지 파일이 잘 저장되는 이유
3. spring.servlet.multipart.location 을 로컬프로젝트 내 실제 저장경로로 바꾸었더니, 설정불가능하다고 에러가 떴다. 왜일까??
1. 하드디스크를 붙인다. 2. fdisk -l로 하드디스크를 확인한다. - interactiive한 커맨드모드 사용하여 (m) 붙인 하드디스크의 파티셔닝을 한다. - 마지막에 w를 해야 실제로 반영이 된다. 3. mkfs를 하여 어떤 파일시스...