Redux - 상태 관리의 로직을 컴포넌트 밖에서 처리 - 목표 : 플럭스를 기반으로 애플리케이션 안에서 변경된 데이터가 어떻게 흘러가는지 더 명확히 표현하도록 해줌 - 디스패처를 없애고 애플리케이션 상태를 불변 객체 하나로 표현함으로써 플럭스의 개념을 더 단순화함 - 모든 상태 데이터를 한 객체에 모으게 함으로써 애플리케이션에서 상태를 보는 관점을 단순하게 유지 ARS 순서로 실행 Action : 객체 형태로 되어 있고, 상태를 변화시킬 때 참조하여 변화를 일으킴 - 상태를 바꿀 때는 객체 전체를 바꿔치기 하는 방식을 사용하는데, 바꿀 대상을 지정해줌 - 애플리케이션 상태 중에서 어떤 부분을 바꿀지 지시하고 그런 변경에 필요한 데이터 제공 - event가 하는 일이랑 똑같다고 봐도 됨 ex) 버튼에서 ..
React : 사용자 인터페이스를 개발하기 위한 자바스크립트 라이브러리 - 컴포넌트 기반 #컴포넌트 : 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여줌 - DOM 관리와 상태값 업데이트 관리를 최소한으로 하고, 오직 기능 개발과 사용자 인터페이스 개발에 집중할 수 있도록 도와줌 1. node.js 설치 2. CRA(Create React App) 설치 1 npm install -g create-react-app cs 3. 파일 경로 설정 후, App 생성 1 create-react-app 앱 이름 cs 4. 서버 돌리기 1 npm start cs 위의 사진처럼 http://localhost:3000/ 이 뜨면 성공!
https://api.jquery.com/ jQuery : 자바스크립트 라이브러리 - 목적 : 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것 - 여러 줄의 자바스크립트 코드를 필요로 하는 많은 일반적인 작업을 한 줄의 코드로 작업할 수 있는 메서드로 실현 가능 - 기능 1. HTML/DOM 조작 : 특정 요소를 쉽게 찾고, 내용 변경이 간단 2. CSS 조작 : 특정 요소에 대한 스타일의 변경 등의 작업이 간단 3. HTML 이벤트 : 이벤트를 간단히 처리 4. 효과 및 애니메이션 : 웹 페이지 상의 효과나 애니메이션이 가능 5. AJAX : 네트워크를 통하여 서버와의 정보 교류를 쉽게 함 다운로드 1. cmd 창 열기 2. npm install jquery 입력 3. 사용 - HT..
Angular에 부트스트랩을 사용하는 방법은 여러가지가 있지만, 간단하게 파일 경로만 설정해서 가져오는 방법을 써보자! 1. 디자인을 골라와서 파일을 저장 2. 프로젝트 생성 (자세한 방법은 아래 링크에) http://cho-coding.tistory.com/134 [ANGULAR] BASIC THINGS 1. node.js 설치 2. cmd 창 열기 설치한 node 버전 확인 - node -v Angular CLI 설치 - npm install -g @angular/cli #예시 프로젝트 : https://github.com/iamshaunjp/angular-2-playlist 원하는 디렉터리로.. cho-coding.tistory.com 3. 프로젝트를 생성하면 위와 같이 기본적으로 생기는 파일이 있..
Firebase https://console.firebase.google.com/ 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 1. 프로젝트 생성 - 프로젝트 추가 - 프로젝트 이름 : connect - 프로젝트 ID : 자동생성된다 - 애널리틱스 및 청구지역 : 대한민국 - 컨트롤러 간 약관에 동의 - 프로젝트 만들기! 생성 완료! - 웹 앱에 Firebase 추가 클릭 - 여기서 var config 안에 내용만 복사 Angular 1. 프로젝트 생성 (자세한 방법은 아래 링크에) http://cho-coding.tistory.com/134 [ANGULAR] BASIC THINGS 1. node.js 설치 2. ..
1. node.js 설치 2. cmd 창 열기 설치한 node 버전 확인 - node -v Angular CLI 설치 - npm install -g @angular/cli #예시 프로젝트 : https://github.com/iamshaunjp/angular-2-playlist iamshaunjp/angular-2-playlist Assets and files to follow along with The Net Ninja Angular 2 playlist on YouTube - iamshaunjp/angular-2-playlist github.com 원하는 디렉터리로 이동 후 프로젝트 파일 생성 - ng new [파일이름] 서버 열기 (생성한 폴더 디렉터리 이동) - ng serve - http://lo..
@media [only | not] 미디어 유형 [and 조건] * [and 조건] 반응형 : 디바이스 종류에 따라 웹페이지 크기가 자동적으로 조정되는 것 뷰포트 : 접속한 기기 화면에 맞춰 확대하거나 축소해 표시 속성 설명 width / height 뷰포트 넓이 / 높이 user-scalable 확대 / 축소 가능 여부 initial-scale 초기 확대 / 축소 값 minimum-scale 최소 확대 / 축소 값 maximum-scale 최대 확대 / 축소 값 가변 그리드 레이아웃 : 사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법 - 가변 글꼴 : 글자 크기도 유동적으로 바뀌어야 함 (em과 rem을 주로 사용) - 가변 이미지 : 창의 넓이에 따라 이미..
예제 1 ElTest.java package el.test; public class ElTest { private String[] productList = { "test1", "test2", "test3", "test4", "test5" }; private int num1 = 30; private int num2 = 50; public String[] getProductList() { return productList; } public void setProductList(String[] productList) { this.productList = productList; } public int getNum1() { return num1; } public void setNum1(int num1) { this..
EL (Expression Language) : 표현 언어 - 처음에는 JSTL의 부분으로 사용 되었으나 JSP2.0 부터는 기본 스펙에 포함 - 자바 빈즈 속성 값을 보다 쉽고 제약을 덜 받는 방법으로 사용하기 위해 나옴 기본 문법 - 표현 언어네는 "$"로 시작 - 모든 내용은 "{표현식}"과 같이 구성됨 - 표현식에서는 기본적으로 변수명 혹은 속성명, 메소드명 구조로 이루어짐 - 숫자, 문자열, boolean, null 도 올 수 있음 - 연산 가능 구성 요소 1. CORE : 공통 필수 기능 - for, switch 문등 자바 코드를 쓸 수 있게 해줌 2. XML : XML 문서 처리 관련 기능 3. L18N : 국제화 지원 관련 기능 4. SQL : JDBC를 이용한 DB처리 기능 태그 : 출력..
모델1 : JSP 페이지에서 화면을 보여주고 요청을 하게 되면 J네 페이지에서 직접 모델에 접근하여 처리 - 데이터 베이스 연동하는 JSP 페이지를 만들 때 디자인 부분과 데이터 베이스와 연동하는 로직 부분이 모두 같은 페이지에 코딩 모델2 : 디자인 부분과 로직 부분을 나누어서 개발하기 때문에, 디자이너는 디자인 부분만, 프로그래머는 로직 부분만 개발 가능 - 독립적 (디자이너는 JSP페이지, 프로그래머는 JAVA 클래스) MVC : Model, View, Controller - Model : 데이터 베이스와 연동하는 부분등의 로직 부분 - View : 화면 출력 - Controller : 위 두 부분을 적절하게 연결시켜주는 역할 #모델2는 Model과 View를 독립적으로 코디하기 때문에 Contro..
JavaBean - JSP에서 데이터를 JavaBean에 담아서 값을 보여줌 액션 태그 1. - 기본 형태 - id : JSP 페이지에서 자바빈 객체에 접근할 때 사용 - class : 패키지 이름을 포함한 자바빈 클래스 이름 - scope : 범위 2. - 기본 형태 - name : property 값을 바꿀 자바빈 객체 이름 -> 에서 지정한 id값 사용 - property : 값을 지정할 property 이름 - value : property 값 3. - 기본 형태 - name : 에서 지정한 id값 사용 - property : 값을 가져올 property 이름 JavaBean을 이용한 회원가입 login.java - JavaBean package result; public class Login {..
Action Tag - 스크립트 언어를 사용하지 않고 다른 페이지의 서블릿이나 자바빈의 객체에 접근할 수 있도록 태그를 이용해 구현된 기능 - 보이는 부분과 처리 부분을 별도로 분리 목적 - 반복되는 사이트를 만들 때 예제 top.jsp Login | Join bottom.jsp Since 2018 left.jsp 신상품 인기상품 newitem.jsp 신상품 목록입니다 bestitem.jsp 인기상품 목록입니다 template.jsp 실행 결과 첫 화면을 신상품으로 설정 왼쪽에 [인기상품]을 누르면 내용이 바뀌는것을 볼 수가 있다
1. login - 로그인 화면 - 비밀번호 입력은 없으며 사용자 이름을 입력하는 양식만 제공 - 아이디를 입력하지 않을 경우 예외처리 2. setProduct - 상품 선택화면 - 리스트에서 원하는 상품을 선택하고 추가 버튼을 눌러서 상품을 추가 3. add - setProduct에서 선택한 상품을 세션에 넣음 - 선택된 데이터를 모두 저장해야하므로 ArrayList 사용 - 상품이 추가되었다는 메시지를 보여주고 다시 setProduct로 돌아감 4. checkOut - 세션이 살아 있고, 하나 이상의 상품을 선택한 상태면, 목록을 보여줌 - 상품 목록이 없을 경우 예외처리 - 로그아웃시, 모든 데이터 삭제 login.jsp Login 아이디 setProduct.jsp 상품 선택 님이 로그인 한 상태 ..
sendRedirect( ) : 페이지 이동 방법 중 하나 1. GET - 내가 친 내용이 보임 - 보안성 없음 2. POST - 내가 친 내용이 보이지 않음 -> null로 떠야 정상 로그인 예제 login.jsp GET 아이디 비밀번호 POST 아이디 비밀번호 1. GET result_get.jsp end_get.jsp SHOW 아이디 비밀번호 2. POST result_post.jsp end_post.jsp SHOW 아이디 비밀번호 실행 결과 1. GET 2.POST
Attribute (속성) : 공유되는 데이터 Scope (영역) : 속성을 공유할 수 있는 유효 범위 속성 처리 메소드 메소드 리턴 타입 설명 setAttribute(String name, Object Value) void 이름이 name인 속성 값을 value로 지정 getAttribute(String name) Object 이름이 name인 속성의 값을 구함 #지정한 이름이 속성에 존재하지 않으면 null리턴 removeAttribute(String name) void 이름이 name인 속성을 삭제 getAttributeNames( ) Enumeration 속성의 이름 목록을 구함 #page에서는 메소드 제공 안함 영역 1. PAGE - 하나의 JSP 페이지를 처리 -> 현재 페이지까지 - 한 번의..
오류 예외처리 주요 응답 상태 코드 - 200 : 요청을 정상적으로 처리 - 307 : 임시로 페이지를 리다이렉트함 - 400 : 클라이언트 요청이 잘못된 구문으로 구성 - 401 : 접근을 허용하지 않음 - 404 : 요청한 URL을 처리하기 위한 자원이 존재하지 않음 - 405 : 요청한 메소드를 허용하지 않음 - 500 : 서버 내부 에러가 발생 ex) JSP에서 익셉션 발생 - 503 : 서버가 일시적으로 서비스를 제공할 수 없음 에러 페이지 지정방법 1. error-code 404 /404.jsp 2. error-type java.lang.NullPointerException /404.jsp 설정 방법 1. 예외가 발생 했을 시, 실행되는 프로젝트 생성 파일 이름 작성 후 [Next >] 클릭 ..
web.xml Welcome to Tomcat Welcome to Tomcat Calculator Calculator Calculator /calc Calculator.jsp 계산기 + - * / Calculator.java import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /..
- submit (회원가입)을 누르면 메일로 보내기 - aligen = "center" : 가운대 정렬 회원 기본 정보 아이디 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 확인 메일 주소 예) id@domain.com 이름 개인 신상 정보 주민등록번호 - 예)123456-1234567 생일 년 1 2 3 4 5 6 7 8 9 10 11 12 월 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 일 관심분야 컴퓨터 인터넷 여행 영화감상 음악감상 자기소개