스마트웹 응용SW 개발자 과정 - 개발일지

<a> = 하이퍼링크, 경로("../" = 이전 디렉토리, "./" = 현재 디렉토리) 웹킷 : 웹 브라우저 기반, 오픈 소스 응용 프로그램 프레임워크 대표적인 시멘틱 태그(samantic tag) <header> - 헤더, 가장 상단 영역을 의미 <nav>

편집기 종류EidtPlus, atom, VS(Visual Studio), DW(Dreamweaver), Eclipseatom 패키지 단축기 변경 시, 해당 패키지 view code -> keymaps 로 변경태그 관련&lt;h1>~&lt;h6> 태그는 웬만하면 하나씩

학습한 내용 CSS 관련 CSS 기본 설정을 초기화할 때는 "initial.CSS" 만들어서 적용 초기화 CSS 적용 방법은 세가지 기존 HTML 파일에 태그로 연결 기존 CSS 파일에 속성을 통해 적용 기존 HTML 파일의 태그 안에서 속성을 적용해도 가능

CSS 관련대/소문자 적용은 text-transform 속성으로 적용 (uppercase 는 대문자, lowercase는 소문자, capitalize는 첫 글자만 대문자)가상 선택자 :nth-child() 값이 odd이면 홀수, even이면 짝수(=2n), n이면 배수

CSS 관련 CSS 브라우저 지원 참고 사이트(https://caniuse.com/) 속성은 투명도 설정 (0~1, 자식 요소도 영향을 받음) 속성을 통해 내용 추가 가능, 속성을 통해 '속성' 으로 설정된 값을 불러옴 속성일 때, top 등의 속성을 설정하지

CSS 관련 속성을 이용하여, 테두리 곡선 가능 (참고 사이트 : https://developer.mozilla.org/ko/docs/Web/CSS/border-radius#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%ED%98%B8%ED%99

CSS 관련글자 크기가 12px 밑으로 내려가면 폰트가 깨질 수 있음display: flex 속성justify-content: center 속성 설정 시, 가로 가운데align-items: center 속성 설정 시, 세로 가운데상대 단위em : 부모 태그에 적용된 f

CSS 관련label 태그는 &lt;label>&lt;input type="checkbox">checkbox&lt;/label> 형식으로도 사용 가능absoulute 영역을 부모 영역에 꽉 채우는 방법은 top, right, bottom, left = 0 값을 주면 됨

페이지 실습포토샵을 통해, 픽셀 단위로 자간이나 여백 값을 알 수 있음 (추후에 제플린 등을 학습 예정)레이아웃 정렬할 때는, box-sizing: border-box, overlfow: hidden 속성을 잘 넣어주기 (기본 크기 변하지 않게)아이콘 그림이 필요하면

페이지 실습그리드 계산할 때, 12로 나눠지는 크기로 대부분 사용 (1320, 1440 등)참고 사이트 (http&#x3A;//bootstrapk.com/css/부모 태그에 text-align: center 속성을 주고, 자식 태그에 display: inline-blo

animation 속성transition 속성 보다 더 다양하게 표현 가능한 애니메이션 속성참고 사이트 (https&#x3A;//www.w3schools.com/css/css3_animations.asp)@keyframes 이름 으로 활용 (animation-name

animation상단 바가 돌아가는 형식을 만드려면, 기본 애니메이션 속성 설정 후,border-radius: 100% 속성과 함께 border-top-color 색상만 다르게 설정하면 됨transform: scale() 속성으로 커지는 형식을 만들 수 있음CSS 관련

CSS 관련margin 속성이 겹칠 때는 큰 값으로 중첩됨 (margin: 30px 인 도형 두 개가 있을 때, 두 사이의 여백은 60px가 아닌 30px가 됨)clear: both 속성을 사용하면 float 속성이 적용된 부모 안에서 따로 속성을 설정할 수 있음fle

JavaScript웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어, 객체 기반의 스크립트 프로그래밍 언어선언과 할당var 로 선언을 시작 (최신 버전에서는 다양해짐)var num = 20; 형태로 할당 (자바스크립트에서는 '='는 할당의 의

자바스크립트 관련'use strict' 입력 시, 엄격하게 문법을 검사, 콘솔 로그에 무엇이 잘못되었는지 알려줌호이스팅(Hoisting), var 와 같은 선언문들은 자바스크립트 안에서 자체적으로 최상단으로 옮겨져 작동 (실제 코드들이 올라가지는 않음)var, let,

자바스크립트 관련let, const 와 같은 선언 방식은 재선언이 불가능, 블록 단위로 유효 범위(스코프,{})를 가짐, isNaN() 을 사용하여, 숫자가 아님(Not a Number)을 가정할 수 있음.length 속성으로 해당 배열의 길이를 도출할 수 있음(1부터

자바스크립트 관련 호이스팅으로 선언적 함수가 먼저 생성되고, 익명 함수가 선언 영역의 아래쪽에 배치됨, 객체명이 같을 때 함수를 호출하면 익명 함수가 실행 됨 과 같은 형식은 메소드 타입 함수(특정 타입 자체에서 호출하여 사용) 익명 함수, 선언적 함수 익명 함

자바스크립트 관련let 객체명 = new Object(); 는 let 객체명 = {} 형식으로 대체 가능배열명 = { 명칭 = '내용', 명칭 '내용' } 형식으로 배열의 명칭을 정할 수 있음 (객체타입)공부하기for of, for infor offor( let ite

setTimeout\*일정 시간이 지나면 함수를 호출하는 문법 window.setTimeout 형태가 생략됨 (전역 메서드)setTimeout(함수, 시간), 시간은 1초가 1000let 객체명 = setTimeout 형태로 지정 가능하고, clearTimeout(객체

자바스크립트 관련string 타입의 문자열 또한 각각 문자 하나당 배열을 가짐(띄어쓰기도 문자)문자열 구분 메서드.substr(시작 위치, 길이) : 배열의 시작 위치(0부터 시작)에서 길이(1부터 시작)만큼만 추출하는 메서드.substring(시작 위치, 종료 위치)

자바스크립트 관련

자바스크립트 관련classList.toggle('클래스') 메소드를 사용하여, on/off 기능을 실행할 수 있음 (클래스가 존재한다면 제거하고 false를 반환, 존재하지 않으면 클래스를 추가하고 true를 반환).contains('클래스') 메소드를 사용하여, 해당

자바스크립트 관련표기방법에 따른 함수 분류익명함수 : function(){}선언적 함수 : function 함수명(){}사용방법에 따른 분류재귀함수 : function 함수명(){ 함수명 }콜백함수 : callback 함수다른 함수의 매개변수로 사용되거나, event로

자바스크립트 관련initwinddow가 로드된 이후 초기화 코드document.createElement('태그') 로 태그 생성 가능document.createTextNode('텍스트')로 텍스트 입력 가능append 로 생성한 태그들을 HTMl 문서에 입력 가능pre

자바스크립트를 조금더 쉽게, 코드를 적게 사용하는 라이브러리(제이쿼리는 DOM에 특화)DOM 형식을 선택할 때는 $() 사용라이브러리 가져오는 방법은 파일 방식와 CDN 방식이 있음CDN 방식최신 라이브러리 가져오기(CDN)버전별 라이브러리 가져오기 (CDN) (참고

.find('태그') 를 통해, 하위 요소 중 특정 요소를 찾을 수 있음HTML 삽입태그 안의 맨 앞에 HTML 삽입 : 부모가 될 태그.prepend('&lt;태그>내용&lt;/태그>')태그 안의 맨 뒤에 HTML 삽입 : 부모가 될 태그.append('&lt;태그>

속성 변경과 제거태그의 해당 속성을 변경함 : 태그.attr('속성','속성값')태그의 해당 속성을 제거함 : 태그.removeAttr('속성')\-> checked 같은 속성은 true, false 등으로 설정할 수 있음클래스 속성 변경과 제거태그의 클래스를 추가함

.click과 if 구문을 통해, 버튼을 누른 후의 버튼의 텍스트를 변경할 수 있음.each 구문을 통해HTML 문서에 원하는 값으로 지칭을 하고 싶을 때는, &lt;태그 data-이름="값"> 형식으로 지정, 속성이 바로 적용되는 것은 아님 (자바스크립트로 적용 필요

vertical-align: middle : Y축 중간 정렬 속성 (CSS)::-webkit-scrollbar : 스크롤바 속성 설정 가능 (IE는 안됨) (CSS)thead 와 tbody 를 각각 다른 테이블에 입력하여 헤더는 고정되고, 바디는 스크롤이 생기는 형태를

return false 를 사용하여, a 태그의 우선권을 제거할 수 있음one() 메서드를 사용하여, 한번만 클릭되는 기능을 구현할 수 있음자바스크립트로 태그를 추가했을 때, 기존 태그에 적용되던 함수가 적용되지 않기 때문에, .on() 메서드 필요기본 속성에서 다른

$('input\[type=radio]') 형식은 $(':radio') 으로 축약할 수 있음checked 확인 방법은 여러가지가 있음1) if ($('input\[type=checkbox]:checked').length > 0) {}\-제이쿼리 전용 메서드-2) if

속성 선택자를 활용해서, if 구문으로 결과 도출.mouseenter() 메서드는 .mouseover() 와 같이 작동하지만, 자식 요소에서는 작동하지 않는 다는 특징이 있음. (.mouseleave() 와 .mouseout() 도 같음)(참고 사이트 : https&#

AJAX 정의 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML) xml 방식이나 json 방식 등이 있음 xml xml 기본 선언 제이쿼리에서 불러올 때는 다음과 같이 사용 -> 임의의 명칭을 태그 삼아 불러올 수 있음

제이쿼리 활용 기법 형식은 형식으로 대체 가능 slide banner 메서드를 통해 숨길 수 있고, 메서드를 통해 보이게 할 수 있음 , 메서드 활용 이전 버튼을 누를 때는 마지막 이미지를 첫번째로 옮기고, 다음 버튼을 누를 때는 첫번째 이미지를 마지막으

제이쿼리 활용 기법 autoslide 을 활용하나, 클로저(Closure) 함수로 적용해야만 시간이 틀어지는 것을 방지할 수 있음. 형태는 형태로 사용 가능 아코디언 선택된 리스트 목록 이외의 목록을 선택하면, 그 목록은 보여지고 기존의 선택된 목록은 사라지

제이쿼리 활용 기법 scroll web page 클릭되면 해당 영역으로 스크롤되는 기능을 구현할 때는, 값으로 현재 태그의 값을 불러와 활용 ( 태그의 경우 값) 메서드의 속성에 을 적용하면 실행 ( 메서드를 선 작동하면, 즉시 대상 변경) 에 다중 속성

제이쿼리 활용 기법 scroll thumbnail 클래스 추가로 해당 클래스 추가 시, 너비가 증가하는 CSS 코드 작성 (CSS) 속성 설정 시, 범위 안에서 너비가 결정되기 때문에, 너비를 넘어서기 위해서는 설정(1이 기본값) (CSS) , 메서드로 클래

CSS 확장언어 CSS Preprocessor ( CSS 전처리기 ) 문법 : 변수 선언, function, nesting, mixin, if, for와 같은 반복 구문 등 종류 : SASS(SCSS) : 70~80% (https://sass-lang.com/)

SCSS 페이지 실습 SCSS 활용 기법

사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크React와 많이 비교되는데, React는 모든 것을 JavaScript로 처리하며, JSX를 통해서 HTML, CSS 관리를 함Vue는 HTML,CSS,Javascript를 먼저 배운 사람들에게 익숙한 형태, 고전

기존 HTML의 onclick() 상위호환, v-on:메서드! 를 붙이면 불타입(true,false)을 토글 형식으로 변경할 수 있음

다음과 같은 경우엔 오류 코드로, 해당 전역 컴포넌트 안에서 showTest 를 찾는 것이기 때문에, 해결 방법으로는 밖에서 인식될 수 있도록 $emit() 을 사용해야함/ HTML // JS /전역 컴포넌트에서 새로운 메서드를 생성하고, $emit() 으로 밖에서 인

명령 프롬프트에 npm install sass-loader@7, npm install node-sass@4 설치assets 폴더에 scss 폴더를 만들어서 scss 파일 생성App.vue 파일에서 스타일에 scss 속성 및 경로 추가 ('@' 를 사용해 상단으로 올라감

Vue.js 활용 기법 컴포넌트의 파일의 태그 밑에는 자식 하나만 적용 가능 (하위 요소는 상관 X) vue-router webpack v-if 조건부 렌더링

자바 설치 - 다음 링크에서 Java SE Runtime Environment 8u211, Windows 버전 설치(https&#x3A;//www.oracle.com/kr/java/technologies/javase/javase8u211-later-archive-dow

자바 소스의 최소 단위는 class(=바이트 코드)대소문자를 구분해서 각각 저장주석에는 의도를 작성C드라이브에 NCS, Java 폴더 생성(자바를 버전별로 설치)Amazon Corretto 프로덕션용 OpenJDK 설치https&#x3A;//corretto.aws/do

모든 객체는 하나 이상의 생성자를 가짐 (코드에 생성자가 없다면, 컴파일 과정 시 기본 생성자가 생성됨)중복되지 않는 이름이 중요, 보통 도메인을 사용함객체를 만들어 내는 설계도객체를 정의한 것이므로, 객체의 모든 속성과 기능이 정의됨객체를 생성하면, 클래스에 정의된

Java eclipse 툴 프로젝트 작성 -

Java 문법 다형성(polymorphism) 하나의 객체가 여러 가지 타입을 가질 수 있는 것 메소드 오버로딩(method overloading) 똑같은 이름의 메소드를 중복하여 정의하는 것 정상적으로는 같은 이름의 메소드는 불가능하지만, 매개변수의 개수나

Java 문법 Static Import 클래스에 대한 인스턴스의 생성없이 메소드를 사용하는 것 Enum 클래스 모든 자바 열거체의 공통된 최상위 부모 클래스, 열거체를 정의할 수 있음 추상 메소드(abstract method) 자식 클래스에서 반드시 오버라이

자식 클래스가 여러 부모 클래스를 상속받을 수 있게 해주는 클래스추상(abstract) 메소드와 상수(public)만 가능, 생략 가능(컴파일러에서 자동 생성)인스턴스(객체)를 생성하지 못하기 때문에, 자식 클래스에서 인스턴스를 생성해줘야 함해당 클래스에서 단 하나의

자료 구조, 동적 배열 개념인 컬렉션 프레임워크, 자료의 삽입, 삭제, 검색 등을 포함해 어떠한 자료형이라도 담을 수 있으며 크기가 자유롭게 늘어남Set : 순서가 보장되지 않고, 데이터들의 중복을 허용하지 않음List : 기본적으로 데이터들이 순서대로 저장되며, 중복

데이터베이스 : 데이터의 집합DBMS(Database Management System) : 데이터베이스를 관리하고 운영하는 소프트웨어대표적인 프로그램 : MySQL, 오라클(Oracle), SQL 서버, MariaDB 등테이블(table)이라는 최소 단위로 구성, 이

MySQL 계좌,고객 정보 실습 은 무조건 값을 할당해줘야하고, 은 선택 사항 을 이용해서 테이블을 연결할 수 있음 주석을 달 때는 '--' 입력후 띄어쓰기 필수 이클립스 JDBC 이클립스를 통해 데이터베이스와 자바를 연동하는 방법 여러개의 예외를 하나로

고객 정보 데이터베이스 실습계좌 정보 기존 메소드와 연동하여 연결실행 결과

바이트 단위의 입출력 클래스, 파일을 읽고 쓰는데 활용FileInputStream 은 읽기, FileOutputStream 쓰기로 활용영어는 1Bytes, 한글은 2Bytes(UTF-8 인코딩은 3Bytes), 줄넘김(\\n) 또한 2BytesFileInputStrea

New maven project -> simple project 체크 해제 -> maven-archetype-web 검색var.xyz, jv300으로 프로젝트 생성Build Path에서 JRE 버전과 컴파일 버전을 11로 변경한 후, Project Facets 메뉴로

이클립스 Web 웹 사이트와 URL URL 구성: protocol://host:port/path/file http://www.season.com:80/spring/april.html http://www.season.com/spring/april.html (port는

init() / service() / destroy() / getServletConfig()요청에 의해 특정 서블릿 호출해당 서블릿 생성 및 로드init() 메소드 호출 (최초 1회 호출)service() 메소드 호출destroy() 메소드 호출이미지 출처 : http

파입 업로드 시 인코딩 타입을 지정해야함 (enctype="multipart/form-data")HTMLServlet자바에서는 '\\' 와 '/' 를 구분해줘야 함사용자를 위한 동적 뷰를 제공프레젠테이션 코드를 서블릿이 아닌 JSP를 통해 작성함으로써 코드 작성을 간소

UI 개발자와 비즈니스 개발자와의 분업 개발 제공동시 사용자 증가에 따른 시스템 확장성 제공Low coupling(결합도), High cohesion(응집도) 을 통한 시스템 유지 보수의 편리성 제공썬 마이크로시스템의 베스트 가이드 라인MVC 패턴 구현을 위한 베스트

페이지 importBean : 재사용과 같은 어떤 목적을 가지고 지정된 규칙에 따라 만들어진 클래스 혹은 컴포넌트인자가 없는 생성자를 가져야 함프로퍼티(property)에 대한 네이밍 규칙을 준수해야 함설정(setter) 메소드의 아규먼트와 접근(getter) 메소드의

main 폴더에 resource 폴더 생성 및 프로젝트에 New - Listener 생성 (Lifecycle 체크)/ Java /ServletContextListener : 웹어플리케이션을 감시하는 리스너contextInitialized() : 리스너의 어플리케이션이

Java Servlet, JSP Listener

asm &lt;-- core &lt;-- beans ㅤㅤㅤㅤㅤㅤ &lt;-- expression &lt;-- context &lt;-- transactionExpert One on J2EE Development without EJB, Rod JohnsonEJB를 사용하

\*. beans.xml\*. AppMain.java스프링 컨테이너는 기본적으로 XML 파일을 통해 Bean 객체와 연관 관계를 설정스프링 설정 파일은 DTD방식 설정과 스키마 방식 설정 모두 지원스프링은 관리할 Bean을 등록하기 위해서 &lt;Bean> 태그를 사용

autowire : 스프링은 제공된 클래스의 코드를 통해 의존 관계를 자동으로 설정할 수 있음byName프로퍼티 이름과 동일한 Bean 객체를 설정프로퍼티의 이름 변경 시 참조하는 빈의 이름도 함께 변경해야 함byType프로퍼티 타입과 동일한 Bean 객체를 설정하나의

스프링(Spring) 프레임워크 Spring MVC(Model- View - Controlle) 모델 프로젝트들의 통용되는 설정 파일을 정의 *. WebMVCConfig.java

스프링(Spring) 프레임워크 Spring MVC(Model- View - Controller) 모델