Spring

Server

Library

DATABASE

GIT

백준(Java ver)

SQLD

자바 Spring

자바

웹페이지

안드로이드

빅데이터

정보처리기사 통합 퀴즈

정보처리기사 실기

정보처리기사 필기

React STEP 27 - jquery + react

⭐ jqueryjQuery는 클릭 이벤트, 체인지 이벤트 등 웹 페이지 동작의 기능을 조작할 때 브라우저의 영향을 받지 않고 원하는 기능을 제작할 수 있습니다. 브라우저의 버전에 따라 작동하지 않는 코드를  jQuery로 변경해서 사용하면 브라우저 문제 없이 사용할 수 있습니다. https://jquery.com/ jQueryWhat is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API t..

React STEP 26 - gsap + react

⭐ Gsap웹 화면에 쉽게 사용할 수 있는 강력한 타임라인 기반의 애니메이션 자바스크립트 라이브러리입니다.GSAP를 이용해서 멋진 인터랙티브한 웹사이트를 만들 수 있습니다.https://greensock.com/reacthttps://www.npmjs.com/package/gsap gsapGSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, str..

React STEP 25 - 기본 구조 사용하기

⭐ React 기본 구조HTML : 컴포넌트 방식으로 로딩합니다.CSS : import 방식으로 로딩합니다.Script: 생명주기 함수로 스크립트 작업을 할 수 있습니다. 1. Form 형식 페이지기본 사용 Form 페이지, title, description, form 각각의 컴포넌트로 분리 및 사용App.jsimport React, { Component } from 'react';import './App.css';import './css/basic1.css';import Component1 from './js2/Component1_1';import Component2 from './js2/Component1_2';import Component3 from './js2/Component1_3'; class..

React STEP 24 - TODO 리스트 예제

⭐ TODO LIST 1. 단계 1기본 구조 잡기AddTask.jsclass AddTask extends React.Component { render() { let inputStyle = { marginTop : 20, padding: "0px 10px", width: 125, lineHeight: "32px", fontSize : 14, border: "1px solid #ccc" }; let buttonStyle = { margin: "20px 0px 0px 5px", padding: 10, ..

React STEP 23 - Create React App - 5

⭐ Create React App컴포넌트 매핑 이해하기1. 단계 1src/DataComponent.jsclass DataComponent extends React.Component { render() { let ulStyle = { marginTop : 15 } let liStyle = { lineHeight : 1.8 } return ( member1 member2 member3 ) }} 2. 단계 2src/App.js class App extends Com..

React STEP 22 - Create React App - 4

⭐ Create React Appmap() 함수로 태그 반환하기 1. 단계 1반복해서 출력해야 하는 태그들을 배열에 넣어두고 map() 함수로 순서대로 나열해 컴포넌트를 return 할 수 있습니다.src/ReturnMap.jsclass ReturnMap extends React.Component { render() { let ulStyle= { marginTop: 15 } let liStyle = { lineHeight: 1.8 } let forArray = [ React, 18.2.0, Array Map ]; r..

React STEP 21 - Create React App - 3

⭐ Create React App 1. state 정의 하기App.jsimport React, { Component } from 'react';import SetState from './js/14_setState';import './App.css'; class App extends Component { render(){ return ( React Example ); } }export default App;SetState.jsimport React, { Component } from 'react';import ReactDOM from 'react-dom/client';con..

React STEP 20 - Create React App - 2

⭐ 생명주기 함수 이해하기컴포넌트의 정보를 보여주는 도구를 설치 -> 크롬 브라우저에서 해당 URL 접속https://chrome.google.com/webstore Chrome Web Store브라우저에 새로운 기능을 추가하고 탐색 환경을 맞춤설정합니다.chromewebstore.google.comReact Developer Tool 검색 및 [Chrome에 추가] 버튼을 눌러 확장 프로그램을 설치React 개발상에서의 컴포넌트를 보고 싶을 때, [Components]라는 탭이 앞에서 설치한 확장 프로그램에 의해 개발자 도구에 추가되어 있습니다.실제 태그를 보고 싶을 때는 [Elements] 탭을 쓰면 되지만, React 코드를 분석할 때는 [Components] 탭을 쓰면 컴포넌트들을 볼 수 있습니다..

깃허브 초기 셋팅하기

★ 깃(Git) 설치 먼저 설치하기 위해서 깃(Git) 홈페이지(https://git-scm.com/)에 들어가야 한다. 깃(Git) 홈페이지에 들어오시면 'Latest source Release'라는 부분에 'Download for Windows'를 클릭하셔서 설치할 수 있고, 설치 과정은 계속 다음(또는 Next)을 눌러주면 된다. 보통 윈도우 데스크탑 설치는 64-bit Git for Windows Setup을 설치하면 된다. 설치 완료 ★ 설치 완료 후 Git Bash를 클릭하여 실행한다. (!!사용자명과 이메일 주소는 깃허브의 등록사항과 같아야한다) git config -- global user.name "사용자명" git config --global user.email "아이디@이메일주소" g..

Vue.js 3.0 STEP 3 - 이벤트 처리

★ 이벤트 처리 동적 UI는 HTML 요소에서 발생하는 이벤트 처리를 통해 구현되는 경우가 많다. Vue의 이벤트는 HTML, 자바스크립트에서 사용하는 이벤트를 준용해서 사용하기 때문이다. 1. 인라인 이벤트 처리 Vue에서의 이벤트 처리는 아래와 같이 주로 사용한다. v-on:[이벤트 이름]="표현식" 가장 많이 쓰이는 click 이벤트 예 v-on 디렉티브는 @로 줄여 쓸 수도 있다. v-onclick="test($event)" @click="test($event)" 금액 : 입금 출금 계좌 잔고 : {{ balance }} 2. 이벤트 핸들러 메서드 Vue 인스턴스에 등록한 메서드를 이벤트 처리 함수로 연결 이와 같이 복잡한 기능은 메서드를 미리 작성해두고, v-on 디렉티브로 참조해서 이벤트를 수..

Servlet + JSP STEP 3 - 이미지 뷰어(갤러리)

★ 이미지 뷰어(갤러리) CR 유저 1명 사진(이미지) + 이름 + 날짜 + 설명 등 ... 파일 업로드 + DB 연동 ★ VO vs DTO 데이터를 저장하는 객체 자바 클래스 VO : Value Object DB에서 가져온 데이터를 보관하는 용도 읽기 전용 > 리터럴(상수) DTO : Data Transfer Object 계층간에 데이터를 전송할 때 사용되는 도구(택배 상자) 수정이 가능하다. 목록보기 : DB > DAO > (VO) > 컨트롤러 > (VO) > JSP 글쓰기 : JSP > 컨트롤러 > (DTO) > DAO > DB ■ 필요 파일 - com.test.file > "List.java" //시작 페이지 > "Add.java" > "AddOk.java" > "View.java" > "File..

JQuery STEP 1 - JQuery 기초 셋팅 및 응용

★ 순수 JavaScript Vanila JavaScript ★ JavaScript Library(API) jQuery ★ JavaScript FrameWork React Angular Vue ★ jQuery JQuery is a fast(x), small(x), and feature-rich JavaScript Library Lightweight Footprint CSS3 Compliant Cross-Browser ★ JQuery 다운로드 https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal..

JAVASCRIPT STEP 50 - TRANSITION 알고리즘 - 2

★ 알고리즘 5 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 6 이동하는 마우스를 따라 고양이를 이동. 마우스의 괘적을 기록하는 큐 역할의 배열이 필요. let pathX = []; let pathY = []; pathX와 pathY에서 앞에서부터 하나씩 꺼내어 차례대로 고양이의 좌표로 지정. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ★ 알고리즘 7 메뉴를 구현. 선택된 메뉴에 따라 문서 배경색과 글자색을 바..

안드로이드 프로그래밍 - 다용도 앱 만들기 5

앱의 기능 설명 1. 로그인 기능 2. 메모장 3. 달력 4. 연락처 5. 그림판 6. 미니게임 7. 계산기 8. 스톱워치 9. 가계부 연락처 연락처 xml 코드 더보기 EditText를 통하여 이름, 전화번호를 입력 받는다. 추가 버튼을 클릭하면, 기록한 사항들이 저장이 된다. 탐색 버튼을 클릭하여, 찾고자 하는 이름을 입력 한 후 탐색을 하면 해당 정보가 표출 된다. 전체 조회 버튼을 클릭하면, 해당 연락처에 저장되어 있는 정보들이 모두 표출된다. 연락처 java코드 더보기 class DBHelper extends SQLiteOpenHelper { private static final String DATABASE_NAME = "mycontacts.db"; private static final int ..

React STEP 24 - TODO 리스트 예제

⭐ TODO LIST 1. 단계 1기본 구조 잡기AddTask.jsclass AddTask extends React.Component { render() { let inputStyle = { marginTop : 20, padding: "0px 10px", width: 125, lineHeight: "32px", fontSize : 14, border: "1px solid #ccc" }; let buttonStyle = { margin: "20px 0px 0px 5px", padding: 10, ..

React STEP 11 - props의 사용 - 1

⭐ props부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.props를 전달받은 자식 컴포넌트에서는 데이터를 수정 할 수 없습니다.데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 합니다1. props 사용하기.class Props extends React.Component { render() { // console.log(this.props); let propsValue = this.props.propsValue; propsValue+=" from App Component."; return ( {propsValue} ); }}class App2 extends React.Component { render() { ..

Vue.js 3.0 STEP 6 - 단일 파일 컴포넌트

★ 단일 파일 컴포넌트 단일 파일 컴포넌트는 컴포넌트 하나를 .vue 파일 하나에 작성하기 때문에 붙여진 이름 한 파일에 컴포넌트 구성을 위해 템플릿, 스크립트, 스타일 정보를 모두 포함하기 때문에 컴포넌트 단위로 분리 가능 Vue 애플리케이션을 개발하기 위해서는 Webpack, Rollup 과 같은 모듈 번들러 도구와 ES6, TypeScript와 같은 트랜스파일러를 함께 사용하도록 개발 프로젝트 환경을 설정해야 한다. 1. 프로젝트 설정 도구 1.1 Vue CLI 도구 Webpack 기반의 Vue 공식 프로젝트 설정 도구였다. 하지만, 이 방법은 프로젝트를 생성하고 구동하기까지 다소 긴 시간이 소요가 된다. 또한, 번들링 과정을 거쳐야하기 때문에 작성한 코드를 테스트하기에 조금 긴 시간을 기다려야 한..

Vue.js 3.0 STEP 1 - Vue.js 기초와 Template

★ 보간법 mount하고 있는 9행 id가 app인 div요소 {{ }} : 콧수염 모양을 닮았다해서, 콧수염 표현식이라고도 부르며, 보간법이라고 불릅니다. {{message}} ★ 기본 디렉티브 1. v-text, v-html 디렉티브 Vue 디렉티브는 템플릿 안에 사용하는 v-로 시작하는 속성이며, 이것을 이용해 HTML 요소와 관련된 작업을 지정할 수 있습니다. v-text : {{message}} 와 같은 동일한 기능을 수행한다. 즉, inner Text 속성에 연결됨. 태그 문자열을 HTML 인코딩하여 나타나기 때문에 화면에는 태그 문자열이 그대로 나타남. v-html : innerHTML 속성을 변경하는 것. innerHTML 속성에 연결됨. 태그 문자열을 파싱하여 화면에 나타냄 2. v-bi..