[ITWILL : JSP]영역객체scope

ITWILL학원 : 14강 JSP기초 BY 정규태강사

참고로 교재는 p209부터임.

1. 영역객체(scope)

영역 객체(Scope) , 속성(Attribute)

내장객체 (8+1)중에서 해당 유효한 범위안에서 데이터를 서로 공유할수있는 객체
이때, 그 공유되는 범위를 ‘영역(Scope)’라고한다. 그때의 공유되는 값 ‘속성(Attribute)’라고한다.

영역 영역처리 객체
page pageContext
request request
session session
application application

왼쪽의 영역을 처리하기 위해서는 오른쪽의 객체를 사용해야한다.
내장객체 8가지 중에서 위의 4가지들은 서로 데이터를 공유할 수 있다.
page에서 application으로 영역이 내려올수록 영역의 범위/크기가 커진다.

1. page 영역 : 해당 페이지가 클라이언트에 정보를 제공하는 동안

해당 페이지가 클라이언트에 정보를 제공하는 동안 페이지 영역이라는 공간에서 데이터를 주고받을 수 있다.

  • pageContext 객체사용가능 : JSP페이지 정보를 저장하는 객체

  • 사용 : 다른 내장객체를 호출하거나, 페이지흐름제어하거나, 에러데이터 처리할 때 주로 사용한다

2. request 영역 : 클라이언트 요청이 처리되는 동안

여러개의 페이지를 이동할때 정보를 저장해서 사용
page 영역과 request영역 차이
request영역은 주소창에 주소를 치는 동안의 영역이다.

  • request 객체사용가능 : 페이지 요청시 정보를 처리하는 객체

  • 사용 : 페이지 이동시 주로 사용한다.

3. session 영역 : 세션이 유지되는 동안 (브라우저당 세션 1개씩 생성이되고 기본값은 30분)

예를 들어 크롬창을 키는 순간부터 30분동안 세션에 정보가 저장된다.

  • session 객체사용가능 : 하나의 웹 브라우저가 정보를 유지하기위한 시간동안 사용되는 객체

  • 사용 : 사용자인증처리에서 주로 사용한다.

4. application 영역 : 웹 애플리케이션이 실행되고있는 동안

즉 서버가 실행중일때의 영역이다.
서버의 설정정보나 자원에 대한 정보, 애플리케이션실행시 발생하는 이벤트정보등이 저장된다.
4가지영역중 가장 큰 영역이다

  • application 객체사용가능 : 웹 애플리케이션의 Context 정보를 처리객체

  • 사용 : 홈페이지 방문자수 카운트 등에 주로 사용한다.

[ITWILL : JSP]JAVA DATATYPE, Integer.parseInt(문자열), 동일한 파라미터의 값을 가지는 데이터가 여러개있을 경우 변수로 가져오기

ITWILL학원 : 14강 JSP기초 BY 정규태강사

1. JAVA DATA TYPE 자바데이터타입

기본형 8가지를 기억하면 나머지는 전부다 참조형이다.

1. 기본형 :8가지

    1. boolean : 1byte
    1. char : 2byte
    1. byte : 1byte
    1. short : 2byte
    1. int : 4byte
    1. long : 8byte
    1. float : 4byte
    1. double : 8byte

2. 참조형 : 엄청 많음

  • String
  • Scanner
  • 등등

2. 형변환

1. 묵시적 형변환

메모리공간의 크기가 작은 곳에서 큰 곳으로 자동변환.

  • 예시 : int(4바이트) -> double(8바이트) 자동으로 변환되는 것을 말한다

누가 자동으로 형변환을 해줄까?
정답은 컴파일러!!
문제가 없기때문에 컴파일러가 자동으로 형변환을 해준다.

2. 명시적 형변환

메모리공간의 크기가 큰 곳에서 작은 곳으로 변환.

왜 컴파일러가 자동으로 형변환을 해주지않을까?
메모리공간의 차이로 데이터손실이 발생하기때문에 자동형변환을 해주지않는다.

  • 예시
    인티저.파스인트(스트링)
    Integer.parseInt(문자열)은 문자열을 정수형(int)로 변경해준다.
1
2
3
4
5
6
7
8
// 이전페이지에서 정보를 받아오기
System.out.println("입력숫자 : " + request.getParameter("num")); //콘솔에서 출력
out.println("입력하신 숫자는 " + request.getParameter("num")); //html화면에서출력

//form태그에서 get방식으로 정보를 전달할시 모든 데이터는 string타입으로 변경되어 전달되기때문에
//숫자데이터 출력을 원하면 형변환Integer.parseInt()해줘야한다
int num = Integer.parseInt(request.getParameter("num"));
정수형값 : <%=num %> <br>

3. 파라미터값 한글처리

form get방식과 달리 post방식을 사용하면 한글이 깨지는 문제가 발생한다.
따라서 body태그 바로 밑에 파라미터 한글처리 코드가 필요하다.

1
2
3
4
<!-- form post방식을 사용하면 한글이 깨지는 문제가 발생하기때문에 파라미터 한글처리 코드가 필요하다  -->
<%
request.setCharacterEncoding("UTF-8");
%>

4. 동일한 파라미터의 값을 변수로 가져오기

사용자가 radio박스를 클릭하면 해당 데이터를 변수로 가져올수있다.

request.getParameter("") : 큰따옴표안에 name속성을 넣으면된다.

정보를 입력하는 페이지는 아래와 같이 radio버튼을 만들어놓았다.

1
2
3
4
5
6
7
<form action="정보출력페이지.jsp" method="post" name="fr">
<label>성별 : </label>
<input type="radio" name="gender" value="womyn"> 여성
<input type="radio" name="gender" value="men"> 남성

<input type="submit" value="제출">
</form>

정보를 출력하는 페이지는 아래와 같이 코딩하면 된다.

1
2
3
4
5
6
7
8
9
<h1>변수가져오기</h1>
<%
String gender = request.getParameter("gender");
%>

<h1>사용자정보출력</h1>

입력하신 정보를 아래에서 확인해주세요
성별은 <%=gender %>입니다 <br>

5. 동일한 파라미터의 값을 가지는 데이터가 여러개있을 경우

일반적으로 4번방법을 이용하면되지만 checkbox처럼 중복데이터가 가능한 경우는 어떻게 해야할까?
동일한 파라미터의 값을 가지는 데이터가 여러개있을 경우 배열을 통해서 데이터를 저장해야한다.

사용자가 몇개를 선택할지 모르지만 변수로 가져오고 싶다면 request.getParameterValues("")을 이용한다.

request.getParameterValues("") : 큰따옴표안에 name속성을 넣으면된다.

정보를 입력하는 페이지는 아래와 같이 checkbox버튼을 만들어놓았다.

1
2
3
4
5
6
7
8
<form action="정보출력페이지.jsp" method="post" name="fr">
<label>취미 : </label>
<input type="checkbox" name="hobby" value="game"> 게임
<input type="checkbox" name="hobby" value="movie"> 영화감상
<input type="checkbox" name="hobby" value="workout"> 운동

<input type="submit" value="제출">
</form>

정보를 출력하는 페이지는 아래와 같이 코딩하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<h1>변수가져오기</h1>
<%
// String hobby = request.getParameter("hobby");
//중복데이터 변수로 가져오기 불가능. 첫번째꺼데이터만 출력가능
//동일한 파라미터의 값을 가지는 데이터가 여러개있을 경우 배열을 통해서 저장해야한다.
String[] hobbyarr = request.getParameterValues("hobby"); //중복데이터 변수로가져오기가능
%>

<h1>사용자정보출력</h1>

취미는
<%
if(hobbyarr == null){ //취미를 선택 안한경우 처리
out.println("선택안함");
}else{
for(int i=0;i<hobbyarr.length;i++){
%>
<%=hobbyarr[i] %>
<%
}
}
%>
입니다<br>

[ITWILL : JAVA]배열과 함께쓰는 메서드

ITWILL학원 : 10강 JAVA BY 윤미영강사

1. for each문

향상된 for문인 for each문은 기존 for문과 비교해서 초기값과 증감식을 사용하지 않으며 배열이 가지고 있는 요소들을 특정 변수로 바로 할당해서 사용할 수 있게한다

1
2
3
for(데이터타입 변수명 : 반복할 배열명/컬렉션){
//반복할 문장
}

이 반복문은 내부적으로 배열의 인덱스 0번부터 배열의 길이만큼을 반복한다.

  • 장점 : 전체적으로 for문을 훨씬 간결히 작성할 수 있다.

  • 단점

    • 인덱스를 사용하지않고 사용불가능.
    • 반복 처리할 범위를 지정불가능.
  • 결론 : 따라서 인덱스를 써야하거나 특정범위를 반복해야하는 경우는 전통적인 for문을 쓰고 아닐 경우 for each를 쓰면 된다

아래 for문과 for each문의 예시를 보자.
랜덤한 짝수를 3개를 뽑은 뒤 그 합을 구해보자.

랜덤한 짝수 3개뽑기는 index를 사용해야하기때문에 for each를 쓸 수 없다.
뽑은 짝수합을 구하는 경우 index도 필요없고 특정범위반복도 필요없기때문에 for each를 쓰면 한결 간결해진다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
int[] evendatas = new int[3];

//랜덤한 짝수 3개 뽑기
for(int i=0;i<evendatas.length;i++){
evendatas[i] = rd.nextInt(8)+1;
if(evendatas[i]%2 !=0){
evendatas[i] = evendatas[i]+1;
}
System.out.print(evendatas[i]+"\t");
}

//뽑은 짝수합구하기
evenSum = 0;
for(int data : evendatas){
evenSum+=data;
}
System.out.print("랜덤한 짝수의 합 : "+evenSum);

2. 배열 데이터의 정렬

배열과 같은 자료구조에 대해서는 정렬에 대한 요구사항이 빈번하다.
정렬을 구현하기 위한 알고리즘은 버블 정렬, 선택 정렬, 삽입 정렬 등 여러가지 방식이 있다.

Arrays.sort() 오름차순정렬

Arrays클래스 API를 이용하기 위해 import java.util.Arrays;해줘야한다.
만약 문자열을 관리하는 배열이 파라미터로 들어온다면 대문자->소문자의 사전순으로 정렬한다.

1
2
3
4
5
6
7
8
9
10
int[] data = {5, 7, 2, 9, 1};
Arrays.sort(data);

//정렬 후 출력
for(int x : data){
System.out.print(x + "\t");
}

//출력값
1 2 5 7 9

3. 배열 데이터의 출력 : Arrays.toString(arr)

배열데이터를 출력하기 위해서 for문을 이용해도 되지만 Arrays클래스 API를 이용하여 출력할수있다.
Arrays.toString(arr)사용하기 위해서는 import를 먼저 해야한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
String [] arr1 = {"JAVA", "is", "Not", "bad"};
Arrays.sort(arr1);

//배열출력1 : for each이용
for(String s :arr1){
System.out.print(s + "\t");
}
//배열출력2 : Arrays클래스 API이용
System.out.println(Arrays.toString(arr1));


// 출력값
JAVA Not bad is
[JAVA, Not, bad, is]

4. Arrays 로또 만들기

배열에 무작위 숫자로 구성된 로또를 만들고 정렬 후 출력하는 게임을 만들어보자.
로또는 1~45사이의 숫자로 구성되며 6개의 숫자를 랜덤으로 뽑느다.
그리고 모든 숫자의 중복 x.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
int[] selected = new int[6]; //로또를 저장할 배열
int[] fullBall = new int[45]; //모든 공의 정보를 가지고 있는 배열

int cnt= 0;
Random rd = new Random();
while(cnt < 6){ //총 6개의 공을 선택할 조건
int index = rd.nextInt(45); //0~44사이의 정수
int ball = fullBall[index];
if(ball ==0){ //중복체크
selected[cnt] = index +1;
fullBall[index] = -1;
cnt ++;
}
}
Arrays.sort(selected);
System.out.println(Arrays.toString(selected));
}
  1. random.nextInt(n)
    이는 0~(n-1)개의 정수를 랜덤하게 생성한다.
    그렇다면 여기선 random.nextInt(45)이므로 0~44사이의 랜덤한 정수를 생성하게된다.
    왜그럴까?
    selected된 공은 index에서 +1해주기때문이다
    if문을 보자.
    랜덤으로 index가 0이 걸리면 선택된 공은 1이되고
    랜덤으로 index가 44가 걸리면 선택된공은 45가된다.

  2. ball if문으로 중복체크
    ball = 0이 참이면 이 fullBall[index]가 한번도 뽑힌적이 없는 숫자라는 의미이다.
    그리고 선택되어지고 selected[cnt] = index +1을 준다.
    그리고 이미 뽑힌 수는 -1로 값을 준다.
    그렇게되면 다음번에 또 뽑혔을때 -1이기때문에 거짓이 되어 selected가 되지않는다.

1
2
3
예를 들어
fullBall[2]가 처음뽑혔으면 if문이 참이므로 selected[1]가 되고 로또숫자는 3이다.
그리고 난 뒤 fullBall[2] = -1로 바뀌어서 다음번에 뽑혀도 if문에서 거짓으로 팅겨나간다

5. System.arraycopy()

배열은 한 번 생성되면 메모리의 연속성때문에 그 크기를 변경할 수 없다.
하지먼 프로그래밍을 하다 보면 처음 예상했던 데이터의 개수보다 더 많은 데이터를 관리해야할 경우가 있다.
이를 예방하기위해 처음부터 배열의 크기를 크게 지정해버린다면 불필요한 메모리를 낭비하는 꼴이다.

필요에 따라 배열의 길이를 늘이기 위해서는 기존배열의 길이를 늘일수는 없고
배열의 길이 큰 새로운 배열은 만들고 기존 데이터를 복사해 넣은 다음 새로운 데이터를 추가해야한다.

첫번째 방법 : for문과 Arrays.toString()이용

1
2
3
4
5
6
7
8
9
int[] source = {1,2,3};
int[] newSource = new int[7]; //원하는 배열길이만큼의 숫자입력

for(int i=0; i<source.length; i++){
newSource[i] = source[i];
}System.out.println(Arrays.toString(newSource));

//출력값
[1, 2, 3, 0, 0]

두번째 방법 : System.arraycopy()와 Arrays.toString()이용

System.arraycopy(기존배열명, 카피할데이터인덱스, 새로운배열명, 데이터붙여넣을시작인덱스, source.length);

아래처럼 데이터붙여넣을시작인덱스에 2를 넣었기때문에 출력값은 인덱스2번부터 [0, 0, 1, 2, 3, 0, 0]부터 붙여넣기가 된다.
만약 0을 넣었다면 출력값은 인덱스0번부터 [1, 2, 3, 0, 0, 0, 0]이 된다.

1
2
3
4
5
6
7
int[] source = {1,2,3};
int[] newnewSource2 = new int[7] //원하는 배열길이만큼의 숫자입력
System.arraycopy(source, 0, newnewSource2, 2, source.length);
System.out.println(Arrays.toString(newnewSource2));

//출력값
[0, 0, 1, 2, 3, 0, 0]

5. Integer.parseInt(파라미터)

GUI환경에서 가장 잘 사용하는 메서드이다.
정수의 형태인 파라미터를 int로 변경해 리턴한다.
만약 파라미터가 정수형태가 아닐 경우 NumberFormatException 에러가 난다.

[ITWILL : JSP]내장객체

ITWILL학원 : 13강 JSP기초 BY 정규태강사

JSP 내장객체

서블릿(JSP -> JAVA로 변환하는 것)을 실행할때 필요한 정보를 저장하고 있는 객체이다.
원래 객체는 외부에 있기에 import를 추가해야하지만,
내장객체의 경우 기본적으로 포함되어있기때문에 따로 객체를 생성하거나, import로 추가할 필요가 없다.

자주사용하는 객체 6가지는 무조건 암기할 것!

내장객체는 총 9가지이다.

  • java.servlet 패키지 8가지

    1. request : 클라이언트의 Http 요청 정보를 저장하는 객체
    2. response : Http 요청을 처리하는 응답 정보를 저장하는 객체
    3. session : 해당 클라이언트의 세션정보를 저장하는 객체
      • 예시 : 은행웹접속하면 10분지나면 ‘로그인세션이 만료하였습니다’
    4. pageContext : 페이지가 실행할때 필요한 컨텍스트 정보를 저장하는 객체
      • 컨텍스트정보 = 프로젝트정보
    5. out : 응답페이지에 전송하기위한 출력스트림 객체
      • 버퍼링 : 버퍼라는 공간을 채우는 작업이 버퍼링이다. 데이터가 큰 경우 전체 데이터를 작은 단위로 잘라서(버퍼) 먼저 데이터를 보여주는 것이다. 이것이 발전된 형태가 스트림이다.
      • 스트림 : 데이터를 글자단위로 보내는 것이 아니라 스트림단위로 보낸다. 물흐르듯 데이터를 계속 보내는 것을 스트림이라고 한다.
        • 예시 : 음악스트리밍
    6. application : 해당 애플리케이션의 정보를 저장하는 객체
      • 헷갈릴수있는게 스마트폰등의 안드로이드 앱이 아니라 응용프로그램전체라는 의미이다.
        • 개념을 분리하자. jsp에서는 애플리케이션의 정보를 저장한 객체이다.
        • 예시 : 누적페이지방문수를 표시할때 application객체를 이용한다
    7. config : 페이지의 서블릿설정 정보를 저장하는 객체
      • 서블리설정 = 초기화값
    8. page : 페이지의 서블릿 객체
  • java.lang 패키기 1가지

    1. exception : 예외처리를 다루는 객체

2. 자주 사용하는 내장객체 : request객체

클라이언트의 Http 요청 정보를 저장하는 객체이다
js에서 객체는 아래와 같이 만들었다.

1
let 참조변수a = new 객체();

HttpServeltRequest 클래스를 객체로 구현한 뒤 request 이름(참조변수a)으로 사용한다.
웹페이지에서 사용하는 왠만한 데이터들은 다 request객체로 가져 올 수있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
서버도메인명 : <%= request.getServerName() %><br>
서버포트번호 : <%= request.getServerPort() %><br>
URL : <%= request.getRequestURL() %><br>
URI : <%= request.getRequestURI() %><br>
클라이언트호스트명 : <%= request.getRemoteHost() %><br>
클라이언트IP주소 : <%= request.getRemoteAddr() %><br>
프로토콜정보 : <%= request.getProtocol() %><br>
요청정보방식(전송방식) : <%= request.getMethod() %><br>
컨텍스트경로(프로젝트경로) : <%= request.getContextPath() %><br>

물리적경로 : <%= request.getRealPath("/") %><br>
- 물리적경로란? 하드디스크의 어디에 저장하는 지가 물리적경로<br>

Http헤더(user-agent) : <%= request.getHeader("user-agent") %><br>
- Http헤더(user-agent)란? 이용자가 사용하고있는 웹사이트 정보<br>

Http헤더(accept-language) : <%= request.getHeader("accept-language") %><br>
Http헤더(host) : <%= request.getHeader("host") %><br>
Http헤더(connection) : <%= request.getHeader("connection") %><br>

3. 자주 사용하는 내장객체 : response객체

Http 요청을 처리하는 응답 정보를 저장하는 객체이다.

1
2
3
4
5
6
7
8
9
10
11
<%
response.setHeader("해더이름", 값);
response.addCookie("쿠키값");
response.setContentType("타입");
response.sendRedirect("주소");

//예시

response.sendRedirect("httl://www.naver.com");
//코드를 작성한 html파일에서 실행했지만 자동으로 네이버로 이동됨
%>

4. 자주 사용하는 내장객체 : session객체

해당 클라이언트의 세션정보를 저장하는 객체
세션은 만들어지는 시간, 최종시간등을 확인할 수 있다.

  • 예시 : 은행웹접속하면 10분지나면 ‘로그인세션이 만료하였습니다’
1
2
3
4
5
6
7
8
9
10
세션 ID : <%=session.getId() %><br>
세션 생성 시간 : <%=session.getCreationTime() %>
세션 최종 접속시간 : <%=session.getLastAccessedTime() %> <br>
세션 유지시간 : <%=session.getMaxInactiveInterval() %> <br>
- 세션 유지시간 default값 : 1800초 = 30분<br>
<%
// 세션 유지시간 변경 :30-> 60분
session.setMaxInactiveInterval(3600);
%>
변경된 세션 유지시간 (3600초,60분): <%=session.getMaxInactiveInterval() %> <br>

5. 자주 사용하는 내장객체 : application객체

해당 애플리케이션의 정보를 저장하는 객체
헷갈릴수있는게 스마트폰등의 안드로이드 앱이 아니라 응용프로그램전체라는 의미이다.
개념을 분리하자. jsp에서는 애플리케이션의 정보를 저장한 객체이다.
예시 : 누적페이지방문수를 표시할때 application객체를 이용한다

1
2
3
서버정보 : <%=application.getServerInfo() %><br>
물리적경로 : <%=application.getRealPath("/") %><br>
-슬러시(/)는 root라는 의미로 최상위경로를 의미한다.

6. 자주 사용하는 내장객체 : out객체

응답페이지에 전송하기위한 출력스트림 객체

  1. 버퍼링 : 버퍼라는 공간을 채우는 작업이 버퍼링이다. 데이터가 큰 경우 전체 데이터를 작은 단위로 잘라서(버퍼) 먼저 데이터를 보여주는 것이다. 이것이 발전된 형태가 스트림이다.

  2. 스트림 : 데이터를 글자단위로 보내는 것이 아니라 스트림단위로 보낸다. 물흐르듯 데이터를 계속 보내는 것을 스트림이라고 한다.

    • 예시 : 음악스트리밍

버퍼사이즈를 다 사용하면 출력에 문제가 생길수있다. 입출력작업자체가 자원을 많이 사용하므로 out객체를 사용하고나서 out.close()매서드를 사용해야한다

1
2
3
4
5
6
7
8
9
<%
out.print("out객체 사용<br>");
%>
버퍼 사이즈 : <%=out.getBufferSize() %> BYTE<br>
사용후 남은 버퍼사이즈 : <%=out.getRemaining() %> BYTE<br>
- out객체를 사용하고나서 out.close()매서드를 사용해야한다
<%
out.close(); //자원해제
%>

[패스트캠퍼스python] DB에 만든 app 연결, admin페이지 출력 문자열 한글로 변경

파이썬 인강 자기계발 챌린지 30회차 미션

만들어놓은 DB에 내가 만든 앱 연결해보자.
이는 admin.py를 이용해서 진행해야한다.

1. admin.py 작성

데이터를 추가,수정한 뒤 migrate를 한 상태에서 상위 앱폴더에서 admin.py폴더를 찾는다.
그리고 migrate한 models안에 있는 내용을 import해온다.
pass는 아무것도 안하겠다는 의미이다.
그 뒤 아래와 같이 빈 클래스를 만들어 admin에 두가지(Fcuser, FcuserAdmin) 다 등록(register)한다.

1
2
3
4
5
6
7
from django.contrib import admin
from .models import Fcuser

class FcuserAdmin(admin.ModelAdmin):
pass

admin.site.register(Fcuser, FcuserAdmin)

2. python3 manage.py runserver

  1. 명령어입력
    잘 반영되었는지 runserver명령어롤 틍해 실행해보자.
    터미널에 아래 코드들이 출력되고 그 중 http://127.0.0.1:8000/를 ctrl를 누른상태에서 click하면 바로 인터넷창이 오픈된다.
1
2
3
4
5
6
7
8
9
(fcdjango_venv) C:\경로\fc_community>python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 21, 2020 - 14:47:46
Django version 3.0.7, using settings 'fc_community.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
  1. 주소창에 admin/ 추가입력 후 enter.
    인터넷창이 오픈되면 주소뒤에 admin/을 붙여준다.
    그러면 장고에서 기본적으로 제공하는 site가 출력되면서 로그인페이지가 나타난다.
    아직 첫 아이디를 만들지 않았으므로 인터넷창을 닫아주고 터미널창에 ctrl+c 명령어를 입력하여 돌아가던 server를 멈춰준다.

3. python3 manage.py createsuperuser

  1. manage.py명령어를 통해 첫 user를 생성한다.
    자동적으로 아이디와 이메일주소, 비번과 비번확인 총 4단계의 입력과정을 거치면 드디어 생성!!

  2. 다시python3 manage.py runserver를 통해 http://127.0.0.1:8000/admin/으로 들어가서 방금 생성한 아이디와 비번으로 로그인을 한다.
    그러면 아래와 같이 사이트가 뾰로롱 생성된다.

파란색띠가 app을 나타내며

  • Authentication and Authorization 은 장고에서 제공하는 기본 앱이고
  • 내가 만들었던 fcuser앱이 정상적을 출력되고 그 아래에 만들었던 Fcusers모델이 잘 등록되어있는 것을 확인할 수 있다.
  1. add를 누른뒤 사용자명과 비밀번호를 입력하면 아래 이미지처럼 Fcuser object(1)가 생성되고 그 안에 추가로 만든 사용자명과 비밀번호를 확인할 수 있다.

이렇듯 장고는 데이터베이스를 건들이지않아도 웹페이지에서 데이터베이스를 쉽게 다룰 수 있어 정말 편리하다.
조금 아쉬운 점이 있다면 유저명이 Fcuser object(1) 이렇게 생성되어서 어떤 유저인지 한눈에 확인하기 어렵다. 이를 바꿔주는 설정을 해보자.

4. DB웹상 유저명 보기 쉽게 변경

파이썬에는 기본 문자열을 반환해주는 언더바 두개로 감싼 내장함수( str )를 가지고 있다.
이를 이용하여 문자열을 원하는대로 바꿀수있다.
fcuser앱 아래의 models.py에서 class 안에 아래 코드를 추가해주면된다.

1
2
def __str__(self): 
return self().username

5. DB웹상 다양한 유저정보 출력

원하는대로 Fcuser object(1)에서 유저명으로 변경되었다.
하지만 뭔가 좀 아쉽다.
더 많은 정보들이 한눈에 보였으면 좋겠다. 이럴때 해줄 수 있는 방법이 있다.
fcuser앱 아래의 admin.py에서 class 안에 아래 코드를 추가해주면된다.
password말고도 다양한 내용을 추가입력하면 아래 이미지처럼 한눈에 보기좋게 출력된다.

1
2
class FcuserAdmin(admin.ModelAdmin):
list_display = ('username', 'password') #튜플로 만듬

유저명 위의 카테고리설명줄도 FCUSER -> 사용자명, 비밀번호로 변경된 것을 확인할 수 있다.
이는 처음 클래스를 만들때 verbose_name="비밀번호"속성을 추가했기 때문이다.

6. admin페이지 출력 문자열 변경

admin page에서 만든 fcuser앱의 하위의 fcusers도 변경해보자.
fcuser였는데 s가 붙은 이유는 기본적으로 장고에서는 복수형태로 자동변환해서 출력해주기때문이다.

fcusers가 뭘 뜻하는지 알기 쉽게 한글명으로 변경하려면 fcuser앱 아래의 models.py에서 class안의 class Meta:에서 verbose_name을 속성을 주면 된다.

1
2
3
4
class Meta:
db_table = "fastcampus_fcuser"
verbose_name = "패스트캠퍼스 사용자"
verbose_name_plural = "패스트캠퍼스 사용자"

위에서 말했듯이 장고에서 자동적으로 복수형을 기입하기 때문에 verbose_name_plural입력하지 않는 경우 아래 이미지와 같이 패스크캠퍼스 사용자s라는 한국어에서 듣도보도 못한 문법으로 출력된다ㅋㅋㅋㅋㅋ

[ITWILL : JSP]JSP 주석과 JSP directive, JSP 스크립트 요소

ITWILL학원 : 13강 JSP기초 BY 정규태강사

jsp는 html과 java를 합쳐서 사용하는 것이기때문에 주석을 두가지를 사용할 수 있다.

1. JSP주석 <%– – %>

%로 시작하는 주석은 jsp주석이다. 이는 엘리먼트요소이다.
html 주석문과 <!– –> 과 차이점은 html주석은 개발자도구에서 보이지만 JSP주석은 개발자도구에서 보이지않는다.

1
2
HTML주석 : <!-- <h1>에이치티엠엘yo!</h1> --!> 
JSP주석 : <%-- <h1>제이에스피yo!</h1> --%>

2. JSP가 어떻게 JAVA와 연결되어있을까?

연결성을 알기 위해서 아래 경로를 찾아가보자.

경로 : D:\JAVA저장경로.metadata.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\JSP7\org\apache\jsp\JSP1

해당 폴더에는 내가 생성한 적 없는 아래 파일 두개가 들어가있다.

  • 파일명.java
  • 파일명.class

해당 폴더안에 .java파일을 열어보면 내가 만들었던 .jsp파일이 내부적으로 .java파일을 생성하고 그 뒤 .class파일을 실행시키는 방식으로 연결되어있다.
이런 .java파일을 서블릿이라고 부른다.

즉, 내가 .jsp파일을 만들면 컴파일러가 알아서 서블릿이라는 형태인 .java파일을 만들고 그 뒤 .class파일을 실행시킨다.

3. JSP 디렉티브(directive)

jsp 디렉티브(directive)는 jsp페이지가 실행될때 필요한 정보를 지정하는 것이다.
jsp페이지는 사용자가 페이지를 요청할때 실행된다.
<%@ 내용내용블라블라 %> 형태로 사용한다.
크게 3가지 지시어가 존재한다.

1. JSP 디렉티브(directive)의 page지시어 속성

아래는 page예시이다.

  1. import
1
2
3
<%@ page import="java.util.*" %>

<%-- import란 외부로부터 다른 파일(클래스/객체)가져와서 추가해서 지정할수있다. --%>
  1. contentType

사용자의 요청을 응답할때 응답할 페이지의 MIME타입을 지정하기위한 속성이다.
따라서 css나 aac오디오, azw전자책등등 다양한 종류의 페이지타입을 만들수있다.

contentType 종류

1
<%@ page contentType="text/html; %>

5. JSP 스크립트 요소

JSP 스크립트요소에는 총 3가지가 있다.

  1. 선언문 : 변수, 매서드(함수)를 선언해서 사용한다.
  2. 스크립틀릿 : 자바코드를 작성(변수와 매서드 사용가능)해서 사용한다.
  3. 표현식 : 화면에 출력할 내용을 작성하여 사용한다.

1. 선언문

선언문 형태 : <%! %>
변수, 매서드(함수)를 선언해서 사용하기때문에 배열은 생성할수없다. 배열을 생성하고싶으면 스크립틀릿안에 써야한다.
멤버변수(전역변수)형태로 사용가능.

1
2
3
4
5
6
<%!
//자바코드를 사용해서 변수,메서드 사용(전역변수)
public void Method(){
System.out.println("안녕하세요");
}
%>

2. 스크립틀릿

스크립틀릿 형태 : <% %>
자바코드를 작성(변수와 매서드 사용가능)해서 사용한다.
지역변수형태로만 사용가능.

1
2
3
4
5
6
7
8
<%
//java
System.out.println(name);
System.out.println(a);

// html 영역의 출력
out.print("안녕하세요(html)");
%>

3. 표현식

표현식 형태 : <%= 자바의 값 %>
화면에 출력할 내용을 작성하여 사용한다.
즉 표현식은 값 또는 자바변수의 값을 화면에 출력가능한 코드이다.

1
2
3
4
5
6
7
<%
for (int i=0; i<strArr.length; i++){
%>
<%= i%>는 <%= strArr[i]%> <br>
<%
}
%>

표현식으로 테이블만들기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%
String[] strArr = new String[5];
strArr[0] = "java";
strArr[1] = "jsp";
strArr[2] = "web";
strArr[3] = "DB";
strArr[4] = "spring";
%>

<table border="1">
<tr>
<td>인덱스</td><td>값</td>
</tr>

<%
for(int i=0;i<strArr.length;i++){
%>
<tr>
<td><%=i %></td><td><%=strArr[i] %></td>
</tr>
<%
}
%>

4. 선언문과 스크립틀릿 차이

선언문은 전역변수로 사용가능하지만 스크립틀릿은 지역변수로만 사용가능하다.
자주 사용할 것은 선언문보다 스크립틀릿이다.

ITWILL : js로 간단한 회원가입페이지 작성하기

ITWILL학원 : 12강 JS기초 BY 정규태강사

이때까지 배웠던 내용을 가지고 회원가입페이지를 작성해보자

회원가입페이지에서 구현해볼 기능.
1. 모든정보입력시 회원가입가능
2. 각항목의 입력값이 없을 경우 해당 요소의 알림과 함께 포커싱
3. id는 최소 4자리에서 최대10자리만 허용
4. 비밀번호확인시 두개의 값이 같은 경우 회원가입가능, 다른경우 비밀번호 확인창에 포커싱 후 경고창띄우기
5. 주민번호를 입력받으면 성별자동체크
6. 취미 선택안된경우 1번 옵션 선택
7. 과목 선택안된경우 경고창

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<form action="itwill.com" name="fr" method="get" onsubmit="return checkall();">
<table border="1">
<tr>
<td>아이디</td>
<td><input type="text" name="id" minlength="4" maxlength="10"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="pw"></td>
</tr>
<tr>
<td>비밀번호 확인</td>
<td><input type="password" name="repw"></td>
</tr>
<tr>
<td>이름</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>주민번호</td>
<td><input type="text" name="idnum1" maxlength="6"> - <input type="password" name="idnum2" maxlength="7"></td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="radio" name="gender" value="여">
<input type="radio" name="gender" value="남">
</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox" name="hobby" value="reading">독서
<input type="checkbox" name="hobby" value="swmming">수영
<input type="checkbox" name="hobby" value="breathing">침대에서숨쉬기
</td>
</tr>
<tr>
<td>좋아하는 과목</td>
<td>
<select name="sel">
<option value="">선택</option>
<option value="자바">JAVA</option>
<option value="js">JavaScript</option>
<option value="db">DataBase</option>
</select>
</td>
</tr>
<tr>
<td>하고싶은 말</td>
<td><textarea rows="5" cols="30" placeholder ="자유롭게 입력하세요" name="txt"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="제출">
<input type="reset" value="초기화">
</td>
</tr>
</table>
</form>

위는 html태그이고 아래는 js태그이다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<script type="text/javascript">

function checkall(){ //데이터유효성체크
let id = document.fr.id.value
let pw = document.fr.pw.value
let repw = document.fr.repw.value
let name = document.fr.name.value
let idnum1 = document.fr.idnum1.value
let idnum2 = document.fr.idnum2.value
let womyn = document.fr.gender[0]
let men = document.fr.gender[1]

if(id == ""){
alert("아이디를 입력하세요")
document.fr.id.focus();
return false;
}

if(pw == ""){
alert("비밀번호를 입력하세요")
document.fr.pw.focus();
return false;
}

if(pw != repw){
alert("비밀번호가 일치하지않습니다.")
document.fr.repw.select();
return false;
}

if(name == ""){
alert("이름을 입력하세요.")
document.fr.name.select();
return false;
}

if(idnum1 == ""){
alert("주민번호를 입력하세요.")
document.fr.idnum1.focus();
return false;
}

if(idnum2 == ""){
alert("주민번호를 입력하세요.")
document.fr.idnum2.focus();
return false;
}

if(womyn.checked == false && men.checked == false){
if(idnum2.charAt(0) == 2 || idnum2.charAt(0) == 4){
womyn.checked = true;
return false;
}

if(idnum2.charAt(0) == 1 || idnum2.charAt(0) == 3){
men.checked = true;
return false;
}
}

if(document.fr.hobby[0].checked == false
&& document.fr.hobby[1].checked == false
&& document.fr.hobby[2].checked == false){
alert("취미를 선택하세요");
//document.fr.hobby[0].focus(); //사용자의 입력을 기다림
document.fr.hobby[0].checked == true; //사용자입력안할시 자동으로 0번을 선택함
}

if(document.fr.sel.selectedIndex == 0){
alert("과목을 선택하세요")
document.fr.sel.focus();
return false;
}

if(document.fr.txt.value == ""){
alert("메모를 입력하세요");
document.fr.txt.focus();
return false;
}

}
</script>

[패스트캠퍼스python] 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다의 윈도우7해결, DB관리

파이썬 인강 자기계발 챌린지 29회차 미션

아래는 강사님이 python3 manage.py makemigrations명령어를 입력하고 난 뒤의 터미널 출력모습이다.

강사님 터미널

그리고 아래 이미지는 내 터미널에서 출력한 모습이다.

그대로 따라한 내 터미널

내가 뭐 터미널에 치는 코드들이 툭하면 자꾸 은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.라는 출력이 떴다.

너무나 빡쳐!!!!

빡치고있는 와중에 구글링해보니 위의 에러는 환경변수에 의해 발생하는 에러라고 한다.
내가 컴퓨터가 두대가 있는데 하나는 윈도우 10을 쓰지만 다른 하나는 윈도우 7를 쓴다.
그래서 두 OS에 python과 vscode 그리고 가상환경을 사용할 수 있는 환경변수 설정방법을 기록하려고 한다

1. python과 vscode 그리고 가상환경을 사용할 수 있는 환경변수 설정방법

1. 윈도우10 환경변수

window키를 누르고 검색창에 고급 시스템 설정 보기를 검색한다. 띄어쓰기에 유의하자.

윈도우10의 환경변수창

윈도우 10의 경우 환경변수를 추가할 수 있게끔 예쁜 GUI가 나온다.
새로만들기를 클릭하고 아래를 추가해준다

  • 변수 값 : C:\Users\파이썬저장한경로\Python\Python38\Scripts;

위의 값은 파이썬에서 가상환경을 사용하기 위한 내용이다.
이 밖에도 python과 vscode를 추가해주면 되는데 사실 프로그램을 다운로드할때 자동적으로 추가가되어있을 것이다.
깔끔하게 해결!!

2. 윈도우7 환경변수 설정

하지만 윈도우7의 경우는 거지같이 나온다.
일단 환경변수 설정에 들어가보자.
window키를 누르고 검색창에 고급 시스템 설정 보기를 똑같이 검색한다. 띄어쓰기에 유의하자.

윈도우 7의 환경변수창

새로만들기를 클릭하고 아래 값을 그대로 입력했다

  • 변수이름 : path
  • 변수 값 : C:\Users\파이썬저장한경로\Python\Python38\Scripts;

왜지? 윈도우10은 리스트에 추가된 행이 바로 나오는데 윈도우7은 전혀 그런게 보이지않았다.
내가 잘못했나?
다시 path의 값 전체를 삭제하고 파이썬의 가상환경을 사용하기위해서 아래를 입력했다.
꼭 자신이 파이썬과 vs code, 가상환경을 다운로드한 경로를 지정해야한다.
C:\Users\파이썬저장한경로\Python\Python38\Scripts\;를 붙여넣었다.

3. 설치위치 찾기

만약 python과 vs code, 가상환경을 어디 설치했는지 경로를 모르겠다면?
걱정 할 필요없다!
window에서 모든 프로그램을 클릭한 후 python을 찾은 뒤 우클릭한다.
그리고 속성을 클릭하면 대상에 경로가 설정되어있다.
그 경로 그대로 복붙하면 된다!

윈도우 7의 환경변수창

그리고 새로만들기를 눌렀는데 아무런 변화가 없다?!?!
그래서 변경을 누르고 기존 path를 아예 삭제하고 다시 등록해보았다.
그.런.데.
알고보니 path의 기존경로는 절대 지우면 안되고 그 뒤에 세미콜론(;)으로 붙여서 입력해야한다는 것이다.
window의 기본 path는 건들면 절대 안된다고 한다!
나는 그것도 모르고… 이미 지워버렸다…
멘붕왔다가 잠시 진정하고 다시 환경변수 기본값을 찾는 여정부터 이어나갔다.

4. 환경변수 기본값 찾기

환경변수의 기본값은 찾는 방법은 아래와 같다.
cmd를 열고 regedit명령어를 입력한다.
레지스트리편집기가 자동으로 open될텐데 아래 위치로 찾아간다.

HKEY_LOCAL_MACHINE\SYSTEM\ControlSet002\Control\Session Manager\Enviroment\Path

그리고 path를 더블클릭하면 변경되기전이 값이 저장되어있다.
복붙해서 환경변수에 한꺼번에 등록했다. 휴- 살았다!


2. Database관리

데이터베이스를 관리해보자.
데이터를 수정,추가한 경우에 항상 1번부터 2번까지 반복을 해주면 데이터베이스버전이 새로 생성되고 관리된다.

  1. python3 manage.py makemigrations명령어를 입력한다
    내 경우에는 ‘python3’은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.에러가 사라지지않았다…
    하지만 python명령어는 위의 환경변수 세팅을 통해 잘되었으므로 3을 뺀 python manage.py makemigrations를 입력했다. 다행히 성공적으로 create model이 되었다.

  2. python3 manage.py migrate
    위와 마찬가지로 3을 뺀 뒤 실행했더니 잘 진행되었다.

1번과 2번을 통해 우리는 명령어 sqlite3 db.sqlite3등을 이용하여 직접 sqlite를 만질 필요가 없다. 왜냐면 장고가 다 알아서 데이터베이스의 테이블을 자동으로 생성해주기때문이다.

M계층 DB관리

[ITWILL : JSP]JSP 첫 프로젝트 톰캣과 연결

ITWILL학원 : 12강 JSP기초 BY 정규태강사

기존 html코드에 java를 추가한 것이 바로 jsp이다.

  1. Project Explorer 우클릭

  2. new > dynamic web project > 프로젝트이름을 적어주고 next > next 후 Generate web.xml deployment descriptor를 꼭 틱해주고 Finish클릭

  3. 새로만든 프로젝트 우클릭 > new > jsp file 클릭 : 코드가 이미 있는 파일이 만들어졌다

이제 JSP 프로젝트를 톰캣서버와 연결해야한다.

  1. 새로 만든 프로젝트 우클릭 > properties 클릭 > java build path > libraries > server runtime 클릭 후 next를 눌러준다

  1. tomcat을 클릭해주고 finish를 눌러준다

  1. jsp파일에 첫번째행에 밑줄이 쳐져있던 것이 깨끗하게 사라진걸 확인할 수 있다 > 서버와 연결 끝!

혹시나 안된다면 이클립스를 껐다 키거나 최상단 project 탭에 clear클릭하여 메모리를 한번 정리해준다