Archive

2021-03-08 TIL - 1차 팀 프로젝트 회의

08 Mar 2021 | 로그포스

2021-03-08 TIL - 1차 팀 프로젝트 회의

  • 오늘 한 것
    1. 팀 프로젝트 1차 회의 - 주말동안 각자 프로젝트 주제에 대해 서치한 결과를 공유하는 시간을 가졌다. 나는 쇼핑몰(일반적인 형태)과 왓챠플레이를 벤치마킹하는 방향에 대해 생각을 해봤는데, 일단 쇼핑몰은 기본적으로 웹에 있어서의 기능이 종합적으로 들어있다고 판단을 했고 왓챠 플레이는 open API를 이용해서 받아온 데이터를 가공하는 로직을 세우는 것이 서로의 실력 향상에 도움이 될 것이라 판단했기 때문이다. 모두 처음하는 팀플이기 때문에 기존에 없던 새로운 서비스를 만드는 것은 어려울듯 하고 원래 있던 서비스를 리뉴얼하는 방향으로 의견이 좁혀졌다. 이제 주제를 선정하는 일만 남은것 같다.
    2. 학원 대면 수업(15:30~22:00) Ajax - 클라이언트와 서버간의 비동기 통신을 위한 자바스크립트의 라이브러리인 Ajax에 대해 배웠다. 지금은 기본만 배우는 정도이지만 얼른 이 기술을 이용해서 서버와 통신하는 것을 경험해보고 싶다.
    3. [React] 영화 검색 사이트 구현 with Omdb API - 팀 프로젝트 회의도 왓챠플레이를 벤치마킹하는 것에 대해 긍정적이었고 학원에서도 비동기 통신을 배운김에 한 번 간단하게 웹 앱을 만들어보자고 생각이 들었다. 새벽 2시에 자려고 누웠지만 이런저런 생각에 잠이 안와서 결국 의자에 다시 앉았다. 리액트 비동기 처리 예제를 보며 이해를 하며 omdb API를 사용해서 사용자가 검색한 영화를 화면에 출력하는 간단한 앱을 만들었다. 리액트로 만든 앱을 깃허브에 배포하는 과정에서 생각지도 못한 에러들이 터져서 고생좀하다가 시간을 보니 아침 8시를 지나고 있었다….


  • 내일 할 것
    1. 자바 웹스킬
    2. 학원 대면 수업(15:30~22:00) JSON


  • 끝으로

오픈 API를 써보는 것은 정말 즐거운 경험이었다. 다른 API들도 활용해서 무언가 만들어보고 싶은 욕구가 엄청 가득차있다. 주말동안 사이드 프로젝트를 하나 해볼까나?

오늘의 한 줄 총평 : 밤샜지만 피곤하지 않음

2021-03-07 TIL

07 Mar 2021 | 로그포스

2021-03-07 TIL

  • 오늘 한 것
    1. 자바 웹을 다루는 기술 - 이번 팀 프로젝트는 JSP로 뷰를 그려야해서 웹 스킬 책을 봤다. 오마이갓 1200쪽이 넘는 엄청난 양이다. 오늘 하루 종일 이 책을 독파해서 절반 정도는 봤다. 보고나니 이거 커리큘럼이 학원에서 배운 내용 그대로이다. 덕분에 복습도하고 술술 넘어갔는데 문득 든 생각이 선생님이 이 책 그대로 강의를 하시는건가?.. 책 후반부에 MVC2 모델로 쇼핑몰 만드는 예제가 있어서 후딱 거기까지 끝내야겠다.
    2. 리액트 200제 - 책을 사놓고 맨날 썩히다가 오늘 공부 삘 받은김에 한 번 열어봤는데.. 내용이 좀 저질이다. 초보자를 위한 책이라곤 하지만 뭔 설명이 하나도 안써있냐 이거. 공식문서 보는게 훨 좋을거같다. 그래도 후반부에는 리액트에서 공부하고 싶었던 내용도 많으니 일단 완주는 해봐야겠다.
    3. 블로그 업로드 (JSP - 표현언어, JSTL / Javascript - 팝업창 제한하기)


  • 내일 할 것
    1. 팀 프로젝트 자료수집
    2. 자바 웹스킬
    3. 학원 대면 수업(15:30~22:00) Ajax


  • 끝으로

책보고 공부하는거 별로 좋아하진 않지만 기초가 너무 없을때는 봐야한다고 생각한다.

무작정 맨땅에 헤딩식으로 토이 프로젝트 시작해도 결국 남의 코드 복붙하는식 밖에는 되지 않으니..

오늘의 한 줄 총평 : 풀공부했다 오늘

JSP - JSTL

07 Mar 2021 | JSP

JSP - JSTL

  1. JSTL (JSP Standard Tag Library)

    • JSP에서 자바코드를 제거하기 위해 JSTL, 커스텀 태그가 등장
    • JSTL : JSP 페이지에서 가장 많이 사용하는 기능을 태그로 제공하며, 라이브러리를 설치해야함
    • 커스텀 태그 : 개발자가 필요해서 만든 태그로, 스프링 등에서 미리 만들어서 제공
    • JSTL 태그 종류

    태그


    • 라이브러리 다운로드

    • https://tomcat.apache.org/download-taglibs.cgi#Standard-1.2.5

    스탠다드

    • http://xalan.apache.org/xalan-j/index.html

    살란


  2. Core 태그

    • <%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core” %> 명시해주어야함
    • 변수 선언, 조건문, 반복문, catch문, URL 처리 등이 가능함

    코어

    <c:set var="contextPath" value="${pageContext.request.contextPath}" scope="page"/>
   
<!-- 코드 재사용성과 유지보수성, 편리함 -->
<a href="${contextPath}"/name.jsp>이동</a>

    <c:if test="${조건식}">
	<h1>안녕</h1>
</c:if>

    <!-- if~else문이랑 비슷함 -->
<c:choose>
	<c:when test="${조건식}">
    </c:when>
    <c:when test="${조건식2}">
    </c:when>
    <c:when test="${조건식3}">
    </c:when>
    <c:otherwise></c:otherwise>
</c:choose>

    <!-- 상태변수 속성에는 index,count,first,last가 있음 -->
<c:forEach var="변수명" begin="시작" end="끝" step="증가값" varStatus="상태변수">
	${상태변수.count}
</c:forEach>

    <!-- 향상된 for문과 비슷함 -->
<c:forEach var="변수명" items="${list}">
	${변수명.name}
</c:forEach>

    <!-- 파람을 가지고 URL 생성-->
<c:url var="변수명" value="URL경로">
    <!-- 생략 가능 -->
	<c:param name="name" value="value" />
</c:url>

    <!-- response.sendRedirect()와 비슷함 -->
<c:redirect url="URL경로">
    <!-- 생략 가능 -->
	<c:param name="name" value="value" />
</c:redirect>


  3. FMT (국제화) 태그

    • 다국어 태그
    • <%@ taglib prefix=”fmt” uri=”http://java.sun.com/jsp/jstl/fmt” %> 명시해주어야함

    다국어

    • 포매팅 태그

    포매팅

    • <formatNumber> 태그 속성

    넘버

    • <formatDate> 태그 속성

    데이트

  4. 문자열 처리 함수

    • <%@ taglib prefix=”fn” uri=”http://java.sun.com/jsp/jstl/functions” %> 명시해주어야함

    문자열


참고 자료

KG 아이티뱅크 강의 자료

처음해보는 JSP&Servlet 웹 프로그래밍

자바 웹을 다루는 기술

JSP - 표현언어

07 Mar 2021 | JSP

JSP - 표현언어

  1. 표현언어

    • 값을 표현하는데 사용되는 새로운 스크립트 언어로 JSP 2.0에서 새로 추가됨
    • Expression Language, EL이라 부른다
    • 표현방법 : ${value}
    • Attribute, request의 parameter, ServletContext의 초기화 파람 등에 접근할 수 있다
    • 빈의 프로퍼티를 chaining 하여 값을 불러온다
    <% 
	Student student = new Student(); 
	student.setName("홍길동");
	request.setAttribute("student",student);
%>
   
<% 
	HashMap<String,String> car = new HashMap<>();
	map.put("name","Benz")
	request.setAttribute("car",car);
%>
   
<p>이름 : ${student.name}</p>
<p>이름 : ${car.name}</p>


    • 배열, 리스트의 값도 표현 가능
    <%
	ArrayList<String> student = new ArrayList<>();
	student.add("홍길동");
	student.add("저팔계");
	request.setAttribute("student",student);
%>
<p>${student[0]}</p>
<p>${student[1]}</p>
   
<%
	Car[] car = new Car[2];
	car[0].setName("Benz");
	car[1].setName("BMW");
%>
<p>${car[0].name}</p>
<p>${car[1].name}</p>


  2. EL 연산자

    연산자


  3. EL 내장객체

    내장객체


    • param 내장객체를 사용하면 굳이 getParameter() 메소드를 이용하지 않고도 ${param.value} 이렇게 값에 접근할 수 있다
    • request.setArrtibute(“name”,”value”); 에 세팅한 값은 ${requestScope.name} 이렇게
    • sessionScope나 applicationScope도 마찬가지이다
    • ${pageContext.request.contextPath}는 <%=request.getContextPath() %>랑 같다

  4. EL 빈 사용하기

    <jsp:useBean id="bean" class="path">
	<jsp:setProperty name="bean" property="*" />
</jsp:useBean>
   
<p>${bean.key}</p>


  5. has-a 관계 빈

    • 객체가 다른 객체를 속성으로 가지는 경우를 has-a 관계라고 한다
    public class Member {
    private String id;
    private String pwd;
    private String name;
    private Address addr; // 주소 정보를 저장하는 Address 클래스
}
   
// Address 클래스
public class Address {
    private String city;
    private String zipcode;
}

    <jsp:useBean id="member" class="path">
	<jsp:setProperty name="member" property="*" />
</jsp:useBean>
<jsp:useBean id="address" class="path">
	<jsp:setProperty name="address" property="*" />
</jsp:useBean>
<%
	// Member 빈의 addr 속성에 Address 빈을 세팅 
	member.setAddr(address);
%>
   
<!-- 출력 -->
<p>
    ${member.id}
    ${member.address.city}
</p>


  6. 스코프 우선순위

    • page > request > session > application


참고 자료

KG 아이티뱅크 강의 자료

처음해보는 JSP&Servlet 웹 프로그래밍

자바 웹을 다루는 기술

쿠키를 이용해 팝업창 제한하기

07 Mar 2021 | Javascript

쿠키를 이용해 팝업창 제한하기

  1. 쿠키를 이용해 팝업창 제한하기

    • 팝업창의 체크박스를 선택하면 더 이상 팝업창이 뜨지 않는 기능을 구현한다
    • 체크박스 선택시 쿠키의 유효시간을 설정하여 쿠키를 만든다
    • 메인 페이지에서는 쿠키의 값을 읽어서 팝업창을 띄울지 말지 여부를 결정한다
    • 쿠키 삭제 버튼을 누르면 쿠키가 삭제되고 팝업창이 다시 나타난다

  2. 팝업창 (popUp.html)

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
	function setPopUpStart(obj) {
		// 체크박스 체크시
		if(obj.checked == true) {
			let expireDate = new Date();
            //쿠키 유효시간 한 달 설정
			expireDate.setMonth(expireDate.getMonth()+1); 
			// 쿠키 재설정
			document.cookie =
                "notShowPop=true;path=/;expires="+expireDate.toGMTString();
			window.close();
		}
	}
</script>
<body>
	Pop Up!
	<br><br><br><br><br><br><br>
	<form>
		<input type="checkbox" onClick="setPopUpStart(this)" />한 달간 팝업창 띄우지 않기
	</form>
</body>
</html>


  3. 메인페이지 (popupTest.html)

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 쿠키사용</title>
<script type="text/javascript">
	window.onload = pageLoad; // 페이지 로드시 pageLoad 실행
	function pageLoad() {
		let notShowPop = getCookieValue();
		if(notShowPop != 'true') {
			window.open("popUp.html","pop",
				"width=400,height=500,history=no,menubar=no,status=no");
		}
	}
	// notShowPop 값 구하기
	function getCookieValue() {
		let result = 'false';
		let element;
		let value;
		let cookie;
		if(document.cookie != '') {
			cookie = document.cookie.split(';');
			for(let i=0; i<cookie.length; i++) {
				element = cookie[i].split('=');
				value = element[0];
				value = value.replace(/^\s*/,''); // 공백제거
				if(value == 'notShowPop') {
					result = element[1];
				}
			}
		}
		return result;
	}
	// 쿠키 삭제
	function deleteCookie() {
		document.cookie = 'notShowPop=false;path=/;expires=-1';
	}
</script>
</head>
<body>
	<form>
		<input type="button" value="쿠키삭제" onclick="deleteCookie()" />
	</form>
</body>
</html>


  4. 실행 결과

    팝업

    최초 팝업시 체크박스를 선택하면 쿠키가 생성되고 자바스크립트에 의해 더 이상 팝업창이 뜨지 않게 된다.

    쿠키


참고 자료

자바 웹을 다루는 기술