JQuery 게시판 페이지 (핸들바, ajax의 json데이터 사용, 벡틱 기호 ``)
·
FE/javascript(jQuery)
# part1 - 웹 페이지 틀 & 메뉴 생성 게시글 앨범 할일 사진 게시글목록 head태그 부분 1. 제이쿼리 사용하기 위해 CDN 서버 연결 2. 제이쿼리 핸들바 라이브러리 사용하기 위해 연결 3. 만들어둔 css(외부파일) link 태그로 연결 body태그 부분 4. div태그로 page를 생성해 전체적인 틀을 잡아준다. 5. div태그로 page안에 header, menu, content, footer를 생성해 각 영역을 구분하고 역할을 부여한다. 6. content에는 스크립트와 핸들바+ajax를 이용해 생성한 데이터가 들어간다. 7. header에 img태그로 메인 이미지 삽입 8. menu에는 span태그를 이용해 한 줄로 각 메뉴를 출력 9. content에는 h1으로 타이..
JQuery의 $.Ajax메소드 사용법 및 Json데이터
·
FE/javascript(jQuery)
jQuery의 $.ajax 메소드 - 비동기적(동시실행)으로 웹 서버와 통신하는 기술 - 웹 페이지의 내용을 새로 고침하지 않고도 웹 서버에서 데이터를 가져오거나 서버에 데이터를 보낼 수 있으며 웹 사이트의 사용자 경험을 향상시킬 수 있다. Json (JavaScript Object Notation) - 웹 어플리케이션에서 정보를 주고받을 때 사용하는 데이터 포맷 - 데이터를 쉽게 인코딩 & 디코딩 할 수 있어 웹 애플리케이션에서 서버와 클라이언트 간 데이터 교환 시에 많이 사용된다. Json샘플 데이터 참고 사이트 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake AP..
jQuery 핸들바(handlebars) 라이브러리 사용법
·
FE/javascript(jQuery)
핸들바 (Handlebars) - 스크립트 내에서 html을 용이하게 작성할 수 있는 템플릿 엔진이다. - 코드의 재사용 및 유지 보수성을 향상시키며 jQuery와 같은 라이브러리와 함께 사용할 수 있다. #사용법 1. handlebars 라이브러리 로드 - 태그 안, 제이쿼리 cdn 아래에 해당 코드를 작성한다 2. 템플릿 정의 -핸들바를 사용할 곳에 - 핸들바 안에서의 반복문은 {{#each}}를 사용하며.(마침표)를 입력 시 전체를 반복한다는 의미이다. - 스크립트 내 배열 값을 가져올 때는 {{키네임}}으로 작성한다. (배열 키와 동일하게 넣어줌) - 반복문의 마감태그는 {{each}} ** {{키네임}} 으로 감싸진 부분이 주입되는 데이터와 바인딩되는 부분이다. ** {{#each}} {{/ea..
JavaScript (JQuery) 이용한 주소 관리 프로그램 [등록/삭제]
·
FE/javascript(jQuery)
JQuery를 사용하려면 JQueryCDN으로 소스를 가져와야 한다. [아래 포스팅 참고] https://shinye-developmentdiary.tistory.com/8 제이쿼리(JQuery)를 사용하는 이유와 사용법 제이쿼리(JQuery)란 오픈소스 기반의 자바스크립트 라이브러리를 의미한다. 라이브러리는 SW의 구성요소 중 한 가지로 API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화 된 프 shinye-developmentdiary.tistory.com HTML 태그 영역 [주소입력] 이름 주소 [주소목록] CSS (html - head의 태그 안) h3{ color: rgb(6, 64, 172); } table{ border-collapse:collapse ; } td{ bo..
html 태그(input, semantic, form, table) 및 id와 class 작성 규칙
·
FE/HTML & CSS
HTML(Hyper Text Markup Language) : 웹 브라우저에 출력해 주는 언어로 하이퍼 텍스트 기능을 통해 검색을 쉽고 빠르게 해 준다. ✔ html에 필수적으로 들어가는 태그 [ html , head, title, body ] ✔ 자동완성 단축키는!+Tab키 또는!+enter키 ✔ 확장(open in browser) 설치하면 쉽게 브라우저를 연결해서 결과를 확인할 수 있다 - 단축키 alt+b (기본 브라우저), alt + shift + b (다른 브라우저) ✔ 태그는 원래 여는 태그 와 닫는 태그 로 이루어져 있지만 단일로 사용하는 태그가 존재한다 (, , 등) html에서는 그냥 사용해도 되지만 리액트에서는 단일태그에 /슬래쉬를 넣어 닫아줘야 오류가 나지 않는다 -> ✔ 태그 속성리..
Oracle(SQL Developer) & JAVA 상품 주문 관리 프로그램 리뷰 - 1. SQL문
·
BE/Java [Servlet , Spring]
SQL * 시작하기 전에 서비스(제어판)에서 oracle 실행여부 확인 -> system에서 유저 생성 -> 해당 서버에서 작업 [ 테이블 생성 ] 1. 부모 테이블 product 생성 후 자식 테이블 orders를 생성한다 (삭제할 때는 자식 테이블 먼저 해야 오류가 나지 않는다.) ** order같은 sql의 예약어는 테이블 명으로 사용할 수 없다. create table product( pno int primary key not null, name varchar(100) not null, price int default 0 ); create table orders( order_no int primary key not null, product_no int not null, order_date date..
Oracle (SQL Developer) 테이블 생성 + JAVA 연결
·
BE/Java [Servlet , Spring]
서버(오라클)클라이언트(웹에서는 브라우저, sqldeveloper) 오라클(무겁고 비용 ↑ , 보안이 좋음 - 대기업에서 주로 사용) 설치방법 OracleXE112 SQL (standard query language) *오라클 깔고 -> 서비스(제어판)에서 확인 run SQL command Line으로 실행 *오라클에서는 대소문자 똑같이 인식한다. [시스템 생성] -ueser name: system , password:1234 -> mysql-installer-> sqldeveloper (클라이언트) create user name identified by pass; grant connect,resource,dba to name; [user 유저생성 & 권한부여] create user ex01 IDENTI..
JAVA 주소목록 출력 DAO + getter&setter메서드 (자바빈), 접근제한자
·
BE/Java [Servlet , Spring]
자바빈 (Java bean) - Java 프로그래밍 언어에서 사용되는 객체지향 기법 - Java Bean은 특정한 규칙을 따라 작성된 클래스로, 데이터를 저장하고 관리하는 용도로 사용된다. - 클래스의 프로퍼티(속성)를 정의하고 관리하는 getter/setter 메소드를 가지고 있으며, 일반적으로 생성자를 가진다. - 일반적으로 serializable 인터페이스를 구현하여 객체를 직렬화할 수 있도록 한다. - 주로 웹 개발에서 폼의 입력 값을 저장하고 전달하는데 사용된다. 접근제한자 클래스나 메서드를 생성할 때 앞에 붙는 public은 접근 제한자를 의미한다. (소문자로 작성) private - 같은 클래스 안에서만 사용 가능 public - 다른 클래스에서도 사용할 수 있음(공..
Java 차량 관리 프로그램 리뷰 - 클래스 생성하기(필드, 생성자, 메서드 오버로딩)
·
BE/Java [Servlet , Spring]
- 자바에서 타입을 지정할 때 int, String, double등을 사용하는데 이는 자바에서 기본적으로 제공하는 클래스의 일종이다. - 클래스를 만들 때는 필드, 생성자, 메서드가 필요하며 만든 클래스는 Main클래스의 메인 메소드에서 호출하여 사용. * 컴파일러가 프로그래밍 할 때 가장 먼저 메인 메서드를 찾는다. 예로 설명하면 클래스는 자동차를 만들기 위한 설계도이며 필드는 자동차에 대한 속성이다(색상, 차종, 번호 등) 메서드는 특정 작업 (엑셀, 브레이크 등) 을 수행하기 위한 명령문의 집합. 필드(속성) - 필드는 객체의 데이터가 저장되는 곳으로 객체의 고유 데이터이다. - 클래스에 포함 된 변수를 의미한다. 생성자 Public Class명 (타입 매개변수) { 필드변수 = 매개변수;} - 객..