IT Development Challenge

* 여러 돔(DOM)의 다수의 상태값을 관리 해야 될 경우 ? --> useState 값을 객체형태로 관리한다 (useState 여러개 활용X) 1. UserInput.js 컴포넌트 선언 useState 초기 값으로 name속성과 nickname속성을 가진 객체 '{}' 상태로 지정.. (비구조 할당 문법을 통하여, 객체 속성의 name, nickname 각 변수지정) * 리액트에서 객체상태 값을 업데이트 할 시, 기존객체의 상태를 복사 후 업데이트를 진행해야 한다. 따라서 기존객체의 값을 복사하는 스프레드 문법(...userInputs) 사용. * onChange 이벤트 요소로 인자값 (e: 이벤트객체) e: 이벤트객체 e.target : 이벤트 발생 돔(DOM) e.target.value: 이벤트 발..

useState ? --> 컴포넌트에 보여줘야 할 내용이 Client의 상호작용에 따라 다르게 보여줘야 하는경우 즉, 특정한 상태 값을 관리해야될 경우 useState를 활용한다. * useState(); 리턴구조 --> [배열구조] useState("초기 값"); --> 배열 return [ "값할당 변수", "값 Setter"] 1. Counter.js 컴포넌트 선언 // 비구조할당 사용 [ 값, 값변경Setter ] = useState('초기값'); // 동일표현(비구조할당X) const result = useState(0); // useState 함수호출.. (리턴값 배열) const number = result[0]; // 첫번째 배열요소: 값 할당 변수 const setNumber = resu..

Props ? --> properties의 약자이며 , 컴포넌트를 사용시 값을 전달할때 사용한다. (부모 ->자식)컴포넌트 1. 전달 할 Props선언 ( App.js ) MyFirstComponent 에게 전달해줄 Props 값 ('name', 'color') 선언 (객체 형태 "{이름: 값, 이름: 값}" 로 전달된다) 2. 전달받은 Props 활용 ( MyFirstComponent.js ) 상위요소(App.js)로 부터 전달된 "name", "color" Props를 객체 비구조할당 방식으로 전달받는다. * DefaultProps (디폴트프롭스) ? 상위 컴포넌트로 부터 전달 받은 Props값이 존재하지 않을시 기본 값. Props "children"? --> 상위요소로 부터 Props로 '특정 값..

JSX ? --> React.JS 에서 컴포넌트 선언할 때 사용하는 XML문법 이며, 도구 바벨(Babel)을 사용한다. 바벨(Babel) ? --> XML형태의 HTML코드를 자바스크립트로 변환해주는 역할을 한다. Cf. 바벨(Babel) 적용예시. function SecondComponent() { return Hello; } --> React.createElement("div", null, "Hello"); 변환. 1. 태그는 반듯이 닫아라 function MyFirstComponent() { return /* 한줄 표현시, 소괄호 "()" 생략가능 */ } 2. 두개이상태그는 하나의 상위 태그로 감싸라 function MyFirstComponent() { return ( ); } 3. 불필요한 태..

Node.js ? 브라우저 환경이 아닌 곳 (Cf. Server) 에서 자바스크립트 실행시키는 소프트웨어. Npm ? Node Package Manager약자, Node.js에서 사용할 수 있는 모듈들의 패키지 제공. Yarn ? 자바스크립트 패키지 매니저도구 (SpringFramework의 Maven 또는 Gradle과 같은 역할..) [ 사전준비 ] * Node.js 설치 --> https://nodejs.org/ko/ * Yarn 설치 --> https://classic.yarnpkg.com/en/docs/install * Visual Studio Code 설치 (PC환경고려 - Windows, Mac / 32bit, 64bit) --> https://code.visualstudio.com/down..

[Service Flow] HTTP 요청 -> WAS(톰캣) -> 필터 -> "Dispatcher" Servlet -> 인터셉터 -> 컨트롤러 [Exception Flow] WAS(톰캣) 인터셉터 --> 컨트롤러 --> View (Error Page) 1. 로그인터셉터 생성 org.springframework.web.servlet.HandlerInterceptor 인터페이스 구현 오버라이드 (Overrride) preHandle() --> 컨트롤러 호출 전 실행영역 postHandle() --> 컨트롤러 호출 후 실행영역 (예외발생시 호출X) afterCompletion() --> 브라우저에 View(화면) 렌더링 후 실행영역 (예외발생시 호출O) 2. WebConfig 수정 (로그인터셉터 등록) org..

* 쿠키(Cookie) 서버 로그인에 성공시, HTTP 응답(RESPONSE)에 쿠키정보를 담아 브라우저에 전달. 이후, 브라우저는 쿠키정보를 지속적으로 서버에 전달해 준다. (쿠키 생명주기 == Session Scope, 브라우저 종료시 소멸) [사전조건] * 세션정보를 직접적으로 제어하는 SessionManager클래스 활용 * 서블릿이 공식으로 지원하는 세션 (javax.servlet.http.HttpSession) 활용X 1. 세션관리 클래스 생성 2. 로그인 컨트롤러 수정 3. 홈 컨트롤러 수정 세션정보를 확인하여 화면 분기처리. 4. 애플리케이션 구동 후 로그인 시도 5. 로그인 처리 후 서버로 부터 전달받은 쿠키확인 (HttpResponse) 개발자도구 - Network - 'login' -..

[Service Flow] - HTTP 요청 -> WAS(톰캣) -> 필터 -> "Dispatcher" Servlet -> 인터셉터 -> 컨트롤러 1. 로그필터 생성 javax.servlet.Filter 인터페이스 구현 오버라이드 init(), destory() --> 필터초기화, 종료시 호출영역 (생략가능) doFilter() --> 해당 필터에서 실질적으로 동작할 내역작성, 오버라이드 필수. 2. 로그인필터 생성 3. 로그, 로그인필터 적용 및 활용 org.springframework.boot.web.servlet.FilterRegistrationBean 빈(Bean)생성 setFilter() -> 생성한 필터등록 setOrder() -> 생성필터의 동작순서를 지정 addUrlPatterns() ->..

1. 예외생성 컨트롤러 생성 (예외, 오류 강제생성) 서블릿컨테이너(WAS=톰캣)에 런타임예외. 에러를 전달하기 위한 메서드 작성 * throw Exception / 예외를 던지거나 * HttpServletResponse.sendError() / Http상태 메세지 Redirect 2. application.property 설정 * 스프링부트에서 기본적, 제공하는 whitelabel Page 비 활성화. 3. 예외, 오류 처리에 관한 빈(Bean) 생성 org.springframework.boot.web.server.WebServerFactoryCustomizer 인터페이스 구현 4. 에러페이지 컨트롤러 생성 (에러페이지 분기처리 담당) 에러페이지 분기처리 확인. (404, 500...) ********..

1. 이클립스 실행 후, SpringBoot Project Create 2. pom.xml 의존성 추가 3. application.property 설정추가 * port 및 context-path 설정: 8080(Default), '/' * View기본경로: 'src/main/webapp' 하위 '/WEB-INF/views' * View기본확장자: '.jsp' 3. 인코딩 설정 (Content types, Text, Web: UTF-8) UTF-8 Setting.. ** 스프링 스타터클래스 유의사항 (컴포넌트 스캔) ** 스프링부트 프로젝트 생성시 기본적으로('프로젝트명'+Application) 명칭의 스타터클래스가 생성된다. 컴포넌트 스캔 대상의 클래스(Cf. @Component, @Controller,..