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 디렉티브로 참조해서 이벤트를 수..

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, ..

SERVLET STEP 1 - 기초 셋팅 및 설정

★ 이클립스 실행 WorkSpace > code/server ★ 설정 폰트 인코딩 UTF 8 worspace css HTMl JSP 톰캣 Runtime Server -> Runtime Environment ★ 프로젝트 생성 Dynamic Web Project Project name : "ServletTest" Target runtime : Apache Tomcat 8.5 Dynamic Web Module Version : 3.1 Context Root : "ServletTest" -> "servlet" : 외부 시각 -> src/main/webapps : 내부 시각 ★ Servlet 웹서버측에서 자바를 사용한 프로그램을 동작시키는 기술 목적 : 클라이언트 요청에 따른 동작으로 웹페이지를 만들기 위해서!!..

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..

데이터베이스 - MAC 에서 오라클 셋팅하기

★ 터미널에서 brew를 이용하여 오라클을 셋팅하기 위한 준비단계 brew를 설치하기 1. 터미널을 연다 아래와 같이 입력하여 brew를 다운로드 한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 다운로드가 완료 되고 난 후, brew를 입력하여 보면 아래와 같이 command no found:brew 가 뜨면서, 먹히지 않는 것을 볼 수 있다. 해결 방법은 아래와 같이 명령어를 3줄 입력하여 주면 된다. $ echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/{사용자명}/.zprofile $ echo 'eval "$(/opt..

Git - 협업 툴

★ 버전 관리 레포트 게임 > 세이브 클라우드 서비스 구글 드라이브 > 버전 관리 지원 원드라이브 오피스 ■ 버전 관리 시스템 1. CVS(Concurrent Versions System) 2. SVN(SubVersion) Git ■ Git Git 호스팅 업체(Git 원격 제공 서비스) Github(MS) GitLab BitBucket ★ 프로그램 1. git https://git-scm.com 다운로드 > 64-bit git for windows Setup 2. SourceTree https://www.sourcetreeapp.com/ Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of..

BootStrap STEP 1 - BootStrap 셋팅&사용

★ 부트스트랩, BootStrap 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS프레임워크이다. https://getbootstrap.com/docs/5.3/getting-started/download/ Download Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more. getbootstrap.com 다운로드 CDN VSCode 터미널을 이용해서 다운로드 ■ 부트스트랩 가져오기 명령어 ■ 다양한 사용 설명 https://getbootstrap.kr/docs/5.2/getting-st..

JAVASCRIPT STEP 53 - 이미지 뷰어

★ 이미지 뷰어 이미지 뷰어를 구현. ▷/|| 버튼을 누르면 시작/멈춤을 제어. 1초마다 순차적으로 이미지가 변경. 특정 버튼을 눌러 이미지를 변경한다. 자동 실행 중 특정 버튼을 누르면 타이머는 중단되고 누른 이미지가 출력된다. ■ HTML 코드 ■ CSS 코드 ■ JavaScript ■ 실행 결과 ■ 시뮬레이션 HTML 삽입 미리보기할 수 없는 소스

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

앱의 기능 설명 1. 로그인 기능 2. 메모장 3. 달력 4. 연락처 5. 그림판 6. 미니게임 7. 계산기 8. 스톱워치 9. 가계부 달력(일정 메모) 달력 xml 코드 더보기 캘린더 뷰를 이용하여 달력을 사용하였다. 저장, 수정, 삭제 버튼을 이용하여 해당 날짜에 해당하는 메모를 기입하고 수정, 삭제 한다. 달력 java 코드 더보기 public class Activity2 extends AppCompatActivity { public String fname=null; public String str=null; public CalendarView calendarView; public Button cha_Btn,del_Btn,save_Btn; public TextView diaryTextView,tex..