개발자 수업

네이버

/\* css 코딩방법 : html 태그에 해당되는 값을 적용한다.html태그{ 속성: 값; } => 설명: html태그 (css 선택자)EX)h1{color: burlywood; background-color: blue;}h2{

/ 사용법 : font-family: 1차 폰트, 2차 폰트 ... // 사용법 : font-family: 1차 폰트 2차 폰트 /.arial { font-family: Arial, Helvetica, sans-serif;}.roman { font-family:

body { background-image: url(""); / 배경이미지 반복(repeat)중지 속성 / background-repeat: no-repeat; / 배경 이미지 위치(좌표) 이동 : 양수(아래, 오른쪽) / / 사용법 : background-p

/ 요약: float: 이미지, div 태그를 정렬하는 방법, 중앙 정렬 없음 사용법 : 선택자 { float:leftright; /.box { width: 100px; height: 100px; background-color: red; margin: 10px;

원 트루 레이 아웃 /* 17_oneTrueLayout.css : 고정폭 레이아웃, 중앙정렬 */ /* 요약 : oneTrueLayout : 고정폭 레이아웃, 중앙정렬, 각 요소별로 크기를 고정해서 디자인 마진 이용 중앙정렬 : 사용법) margin :

js 논리연산자 // TODO: 논리연산자(||, &&) 사용 // TODO: 사용법 : 조건식1 또는 조건식2 중에 1개라도 참이면 실행문이 실행되고, // TODO: 거짓이면 실행문2가 실행됨 // if(조건식1 || 조건식2) { // 실

// 19_array.js// TODO: 배열(\*\*\*) : 여러가지 값을 넣어두는 곳// 반복문을 사용해서 코딩 효율화// 변수 : 1가지 값을 넣어두는 곳// let a = 1;// let b = 2;// let c = 3;// let d = 4;// let f

// TODO: 1. 태그선택해서 속성 조작하기// TODO: 사용법 : document.querySelector("태그명").속성 = "값";// TODO: html 문서에서 태그를 선택해서 속성을 조작하는 방법을 사용// TODO: =>1) js 파일에서 html

// 예제 1) js 에서 src, width, height 속성 추가하기// TODO: 1) img 태그 선택let image = document.querySelector("// TODO: 2) img 속성 추가 : src, width, heightimage.src

script> $(function () { // 코딩 // 복습 : 클릭 : .click $("button").click(function () { $(".page").fadeToggle("fast");

public class Sec01 { public static void main(String\[] args) { // : 예제 : Hello World // :출력 단축키 : sout // : 메인 함수 단축키 : main System.out.println("안

//TODO: 예제) 변수의 값을 서로 바꾸기 (swap)://알고리즘: 1) x,y의 값을 준비 2)임시변수 temp 를 준비 3)temp에 x의 값을 넣어준다 4)x에 y의 값을 넣는다 5)y에 temp 값을 넣는다.// 결과 : x = 10, y = 5 temp

JAVA_연산자 // TODO: 1. 연산자 // 1-1) 증감 연산자 : 변수++, 변수--, ++변수, --변수 // int x = 10; // int y = 10; // // x++; // 1증가식 // y++; // 1증가식 // Sy

TODO: 예제 1) score 가 93 보다 크거나 같으면 90보다 큼이라고 출력// 사용법 : 조건식이 true(참) 이면 실행문이 실행됨// if(조건식) {// 실행문;// }// int score = 93;/

JAVA반복문중단문// 예제 1) 1 ~ 6 까지 주사위를 굴려서 나오는 숫자가 6이면 반복문 중단하고,// 아니면 계속 출력하세요// TODO: 랜덤함수 사용법 : (int)(Math.random() 끝수) + 시작숫자while(true) {int num = (int

//TODO: 반복문 코드 개선 // int\[] score = new int3;// // 초기값 : 0 , 끝값 2 증가값 1// for (int i = 0; i <= 2; i++) {// scorei = i;// System.out.println(

/TODO: 1) 생성자 오버로딩 : 생성자 이름을 똑같이해서 함수를 여러개 만드는 기능 단, 단 매개변수 숫자가 달라야함// TODO: 객체의 3요소 : 1) 속성필드 2) 생성자함수 3) 함수(메소드) String company = "현대"; String mode

//TODO: setter 함수/getter 함수 // setter 함수 목적 : 속성(필드) 의 값을 저장(수정)하는 함수 // getter 함수 목적 : //1)속성 필드 String product; // 제품 String color; // 색깔public St

// TODO: 상수 ? 1가지값을 저장하는 곳, 수정 불가// TODO: 사용법 : final 자료형 상수 = "값"; final String nation = "Korea"; // TODO: 간단연습 : 상수 -> className = "902";

// TODO: 부모 클래스// TODO: 함수(메소드) 오버라이딩 // 함수 : 원의 넓이 구하는 함수 : 반지름(r) 반지름(r) 3.14 double areaCircle(double r) { System.out.println("부모");

// TODO: 인터페이스 ? //TODO: 인터페이스 : 모든 함수가 추상함수로 이루어진 객체, 목적은 이름 표현화 //추상함수 : {} 없는 함수 //TODO: 인터페이스에 작성되는 모든 함수는 기본적으로 추상함수임 : abstract생략 TODO: 인터

// 접근제한자(복습) : 1) private : 개인적인, (자신만(객체) 사용가능) // 2) public : 공공의, (누구나(객체) 사용가능)// 3) default(생략) : 패키지 폴더안에

Date date = new Date();System.out.println(date.toString());System.out.println(date);// TODO: (고전2) 날짜 를 년/월/일/ 분리해서 출력 Calendar calendar = Calendar.g

TODO: 컬렉션 프레임워크 : ArrayList ( * ) //대표적 종류 : ArrayList, LinkedList , Vector // List 는 배열을 향상시킨 자료구조 // 1) 컬렉션 프레임워크 뜻 : 자바의 자료구조와 같음,

// TODO: 스택 ? 특이한 자료구조, ( LIFO : Last In First Out) // => 밑이 막혀서 값을 꺼낼때 위에서 부터 꺼내는데 마지막에 들어간 값이 처음으로 나옴 // 대표적인 자료구조 : 1) 배열 :{값, ..

// TODO: 람다식(Ramda) : 자바스크립트 화살표함수 비슷// 일반 함수(메소드) : 사용법 - 자료형 함수명(매개변수...) {return 실행문;} // => 위의 함수를 간단하게 사용하기 위해 나타난 표기법

\-- SALARY(월급), ENAME(사원명)\-- 주의점 1) 컬럼끼리 사칙연산 또는 숫자와 사칙연산 가능하나 NULL인 값은 사칙연산이 안되고 결과는 NULL이 됨SELECT ENAME, SALARY \* 12 + COMMISSION FROM EMPLOYEE;

\-- 04_Select_Where.sql\-- 검색할때 조건을 붙여 조회하기(\*\*\*) : 성능향상\-- 1) 비교연산자로 조건절(Where) 사용하기\-- sql : >, <, >=, <=, =(같다), <>(같지않다)\-- 예제 1) SALA

\-- 문제4) 사원의 이름(ENAME), 급여(SALARY), 연간 총수입을 \-- 총 수입이 많은 것부터 작은 순으로 출력하세요.(내림정렬)\-- ( 연간 총수입은 월급에 12를 곱한 후 $100의 상여금을 더해서 계산하세요 )\-- 힌트) 월급 \* 1

SELECT 98.7654,ROUND(98.7654) -- 1째짜리 반올림 :99,ROUND(98.7654,1) -- 2째짜리 반올림 :98,ROUND(98.7654,2) -- 3째짜리 반올림 :98FROM DUAL; \-- 간단연습 : 3.14 둘째짜리 반올림하세요S

\--예제 2) 최근에 입사한 (HIREDATE) 사원과 (EMPLOYEE)\-- 가장 오래전에 입사한 사원의입사일 출력하기\-- => 최근에 입사 : 입사일이 최고값(MAX)\-- => 가장 오래전에 입사 : 입사일이 최저값(MIN)SELECT M

\-- 서브쿼리 (subquery) : sql 안에 sql를 또 사용하기\-- 예제 1) SCOTTT 사원보다 급여를 많이 받는 사원이 누구인지 출력\-- 1) SCOTT 사원이 급여 ?SELECT SALARY FROM EMPLOYEE WHERE ENAME = 'SCO

\-예제3) 테이블 복사 : 테스트용도CREATE TABLE DEPT_COPYASSELECT \* FROM DEPARTMENT;\--간단연습 테이블 복사 : 사원: EMPLOYEECREATE TABLE DEPT_COPY2ASSELECT \* FROM EMPLOYEE;\

\--(참고) 테이블 설계(구조)를 변경하기 : 컬럼명, 데이터형\-- 실습 테이블 : DEPT20 \-- DEPARTMENT 복사CREATE TABLE DEPT20ASSELECT \* FROM DEPARTMENTWHERE 1=2;\--예제 1) 부서 테이블에(DEPT

\-- 권한, 롤(역할)\-- 주로 DBA 가 하는 일\-- 1) 유저 만들기\-- Oracle DB 관리자 : system(sys(최고관리자))\-- 예제 1) usertest01 유저 생성\-- 패스워드 : pass1 지정\-- 사용법) CREATE

Spring Spring : 프레임워크(framework) => 개발자에게 강제해서 코딩하도록 만든 틀(도구) 왜? 개발자마다 수준차가 있음 왜? 개발자마다 수준차가 없게끔 중급이상 품질이 나오도록 코딩이 가능함 1) Spring + Web(HTML/CSS/JS) + CSS프레임워크(부트스트랩) 부트스트랩 맛보기 스프링 본격 진행 : JSP +...

1) spring 프로젝트 생성: 가) spring legacy progject 선택 나) spring MVC Project 선택: \- Project Name : 프로젝트이름(ControllerExam) \- Use default locat

스프링 프레임 워크 : 개발자에게 코딩방법을 강제하여 품질을 높임자바코딩 + 어노테이션 코딩(@xxx 등 == 함수와 비슷(기능))MVC 디자인패턴 : M(model) , V(View), C(Controller)코딩을 역할별로 나누어서 코딩함=> M : 테이블(DB)

<c:if test="${name=='삼식이'}"><%-- 사용법 : <c:forEach var="변수" items="${배열변수}"> --%><%-- ${변수} --%><%--

<%-- 사용법 : <c:set var="변수명" value="값" scope="page" /> --%>@Service : 서비스 기능을 부여하는 어노테이션, 클래스 위에 붙임 CRUD 함수 정의, 업무 로직 코딩 - mapper :@Autowired : D

이클립스_스프링 목표 : 게시판 만들기 기능 : 1) 전체조회 : 여러건 (배열) 2) 상세조회 : 1건 (변수) 3) 새글쓰기 : 추가 4) 글수정 : 수정 코딩 흐름 : service 코딩 -> controller 코딩 -> jsp 코딩 객체지향 코딩 : 객체 생성 -> 객체의 함수를 실행 게시...

vo-> mapper -> service -> contoller -> jsp@Setter@Getter@AllArgsConstructor@NoArgsConstructor@ToString@SuppressWarnings("serial")public class DeptVO e

3-6) DeptController : DeptService 객체의 insert 함수 실행, jsp 코딩

4-1) DeptMapper : 인터페이스, 상세조회 sql 함수명 작성 4-2) Dept.xml : 상세조회 sql 작성 4-3) DeptService : 상세조회 함수명 4-4) DeptServiceImpl : 함수재정의 , DeptMapper 객체의 상세조회 함

이클립스+오라클+jsp 게시판 만들기 5) 수정 버튼 클릭시 실행 : 5-1) DeptMapper : 인터페이스, update sql 함수명 작성 5-2) Dept.xml : update sql 작성 5-3) DeptS

파일 업로드 VO -> Mapper -> xml -> Service -> ServiceImpl -> Controller -> jsp 1) 전체조회 : sql-mapper-config.xml : 객체 별명 지정 부서 게시판 만들기 참고 : 1-1) FileDbVO : Criteria 객체 상속(페이징 객체) 1-2) FileDbMapper : 인터페이...

4) 상세조회 + 그 첨부파일 jsp 전송 : 이미지 화면에 나옴 public FileDbVO selectFileDb(String uuid); FileDbVO selectFileDb(S

// js 객체 : 사용법) let 객체명= {속성:값,...} // js 배열: 사용법) let 배열명= [값, 값2...] // 간단연습 : 객체만들기 // TODO: JSON 데이터 // => Javascript object nota

ecma js 고급 // js 객체 : 사용법) let 객체명= {속성:값,...} // js 배열: 사용법) let 배열명= [값, 값2...] // 간단연습 : 객체만들기 // TODO: JSON 데이터 // => Javascript

// TODO: 일반함수 -> 화살표 함수 // 1) // function mySum(a, b) { // return a - b; // } let mySum = (a, b) => a - b; // 2) // fu

안녕하세요 {{ "문자열 출력" }} {{ 1 + 1 * 2 - 3 / 2 }} {{ "abc" + "가나다" }} {{ ["가", "나"] }} <!-- 5) 참, 거짓 자료형(boolean) : 가능 -

// views/AttributeView.vue // vueInit 단축키 // 메뉴 path : /attribute}; },}; },};// FormView.vue // vueInit

npm run servectrl + c (여러번 타이핑)npm i백엔드 데이터를 화면에 반복문으로 출력=> springboot : json 데이터 전송=> vue : 받아서 화면에 출력(json : 자바스크립트 객체배열 : {}.{})=> 라이브러리 함수의 도움을 받아

\-1) web.xml,context-xxx.xml 등 전부 없음\-2) 설정 : application.properties 파일에 함\-3) spring 빌드 도구 (maven) vs springboot(gradle)maven 환경설정 파일 : pom.xml (라이브러

description :TODO: SPRING (@Controller)description :TODO: SPRINGBOOT (@RestController)TODO: (복습): @Controller 기능 : url + jsp 결과 내보내기TODO: (신규)

return new ResponseEntity&lt;>(depts, HttpStatus.OK); 리턴에 자리가 2개 밖에 없을때 배열+속성필드를 날리는법@Getter@Setter@NoArgsConstructor@AllArgsConstructor@ToString

// TODO: spring : CUD(작성수정삭제) =? @PostMapping("/url")// TODO: springboot : c(인서트) = > @PostMapping// TODO: springboot : u(업데이트) = > @PutMapping// TODO

@DeleteMapping("/api/basic/dept/deletion/{dno}") public ResponseEntity&lt;?> delete(@PathVariable int dno) {deptService.delete(dno); return n

import 'bootstrap/dist/js/bootstrap.bundle'import 'bootstrap/dist/css/bootstrap.min.css'// TODO: bootstartp vue3 importimport BootstrapVue3 from 'boot

=>import axios from "axios";=>const baseURL = "http&#x3A;//localhost:8000/api";=>import axios from "axios";// 백엔드 주소 : 스트링부트 주소 (컨트롤러주소)const baseURL

/ 부서생성(인서트) 서비스에 코딩// 부서생성(인서트) /api/basic/dept (컨트롤러주소) /// json data(db에 생성될 객체)const insert = (data) => { return axios.post(baseURL + /basic/dept,

router-link :to="'/dept/' + data.dno"> span class="badge text-bg-success">수정/span> /router-link> =>/ dno상세조회 경로 path(/dept/:d

const update = (dno, data) => { return axios.put(baseURL + /basic/dept/${dno}, data);};=>const remove = (dno) => { return axios.delete(baseURL + /ba

private String uuid; // 기본키 private String fileTitle; // 제목 private String fileContent; // 내용 private byte\[] fileData; // 이미지 private S

//insert(upload)// form 태그 : input 양식, multipart 전송//TODO: form 태그 == FormData 객체const insertForm = (data) => { //FormData 객체 생성 let formData = new

application.properties=> simpleDms.app.jwtSecret=bd1889daea6ad98b6e099034b0544974a17bab50c2872e3916c6c7d7762ce80fe9bc0a72ea5d62e65eb7e2396d6dcd1fb9093

@Configurationpublic class WebSecurityConfig { // TODO: 스프링 시큐리티 설치 (보안모드) : 이미지,css,js 등은 보안 비활성화(무시) public WebSecurityCustomizer webSecurityCus

// 우리 회원인지 확인 public long existsById(String email); // 회원 상세조회 public Optional selectMember(String email); // 로그인 : Post 방식 @PostMapping(

import MemberService from "@/services/auth/MemberService";export default { data() { return { user: { email: "", password: "",

https&#x3A;//drive.google.com/file/d/1vPaKbAjLtPE_OdHsjdn_SD4kEMZwFuac/view?usp=drive_link

2차 프로젝트 후기주제: 숙소사이트 베이스에 서브 관광지 추천 사이트역할: 구글 API 데이터에 기반한 여행지검색기능 페이지, 여행지추천 페이지, 쿠폰, 마이페이지생애 처음으로 구글API를 사용해서 VUE에 코딩해보았다신기하기도 했지만 조건 필터링을 걸었을때 에러가 많