처음부터 차근차근

Vue란 웹 애플리케이션을 개발할 때 사용하는 오픈 소스 자바스크립트 프레임워크이다. Vue 프로젝트 만들기 1. vue cli 설치 먼저 프로젝트를 모아놓을 디렉토리를 만들고 그 위치에서 아래의 명령을 친다. npm install -g @vue/cli vue cli 설치하는 명령 vue cli : vue 개발환경 세팅을 도와주는 프로그램 2. 프로젝트 생성 vue.cmd create 프로젝트명 프로젝트 생성하는 명령 그다음 vue3선택하고 enter키 누르기 프로젝트 구조와 Vue 실행 원리 App.vue : 메인 페이지라고 생각하기 App.vue html 코드는 에다 짜고 javascipt는 안에다 짜면 된다. css는 안에다 짜면 된다. 원리 App.vue에 있는 코드를 main.js가 index...

주의사항 App.js의 return ( ) 괄호 안에 하나의 만 들어갈 수 있다. 즉 return( ) 안에 있는 것은 하나의 태그로 묶여야 한다. 여러개의 div가 들어가면 안된다. ex) 여러개의 div를 그래도 쓰고싶거나 의미없는 div를 사용하기 싫으면 으로 감싸면 된다. 리액트 Component 문법 html을 나만의 한 단어 바꿔서 그 단어로 줄여서 쓸 수 있는 방법이다. 컴포넌트 안에 컴포넌트를 넣어서 만들 수 도 있다. 어떤것을 component로 만드는 것이 좋을까? -> 반복되는 html 덩어리들, 자주 변경되는 html UI들, 다른 페이지들 component의 단점 state 쓸 때 복잡해진다. component 만드는 법 1. import 코드와 export default App;..

JSX 문법 { 변수명 } { 함수명() } : 함수의 리턴값이 출력된다. { class명 } JSX에서 이미지 넣는 방법 상단에 이미지 import 코드 작성 import 이미지명 from '이미지 파일 경로' 코드 안에다 작성할 때 { }를 사용해서 이미지 경로 불러오기 꼭 이렇게는 안하고 src='이미지명.jpg' 이렇게 직접 넣어도 되는데 위처럼 쓰면 편해서 이 방법을 주로 사용한다. JSX에서 css 넣는 방법 css 인라인시트 style을 넣을 때는 오브젝트형식으로 넣어야한다. 그리고 font-size 처럼 '-'가 있는 것들은 camelCast기법으로 fontSize이렇게 써야한다. 구분자로 ;가 아닌 ,를 써야한다. style="{ { color : white, fontSize : 50px..

React란 react란 자바스크립트 라이브러리의 하나로, 페이스북 회사에서 만들어졌다. react를 사용해서 모바일 애플리케이션 개발할 수 있다. React의 장점 1. 데이터 바인딩이 쉽다. 데이터 바인딩 : 서버에서 가져온 데이터를 자바스크립트를 이용해서 화면에 출력하는 것 서버에서 데이터를 받아온 뒤 변수에 저장하고 넣고 싶은 곳에다 { 변수명 } 해서 넣으면 된다. 기존의 자바스크립트로 데이터바인딩을 하면 document.getElement...이런식으로 코드를 써서 html코드에다가 삽입해야하는데 리액트는 그럴 필요가 없다. 2. html 코드를 내가만든 component사용해 줄여서 사용할 수 있다. React에는 component라는 문법이 있다. 이 문법을 좀 더 깔끔하게 코드를 정리할 ..

JDBC란 먼저 데이터베이스 드라이버에 대해서 알아보자. db 드라이버는 오라클의 SQL Driveloper, Mysql의 Workbench 같이 데이터베이스에 연결, 인증, 문장 실행, 결과패치 등의 기능을 가진 DB API이다. db 드라이버 안에는 쿼리 실행에 관련된 코드들이 모두 들어있다. jdbc란 데이터베이스 드라이버를 사용하는 것을 좀 더 편리하게 해주는 도구이다. 데이터베이스 드라이버들은 각자 내부적으로 다른 함수를 가지고 있어서 어떤 특정한 db 드라이버를 사용하려면 사용할 db 드라이버가 가지고 있는 함수들을 다 알아야하고, 맞춰서 써야한다. 그래서 데이터베이스를 변경하면 작성했던 코드들도 모두 변경해야한다. 이러한 번거로움을 없애주는 역할이 바로 jdbc이다. jdbc는 db를 바꾼다..

기업형 mvc 모델 (패키지 따로 만들기)controller -> servlet class service class 객체 만들어서 함수 호출하고 그 값 table class 객체 만들어서 대입한 후 request.setAttribute('a', a);. 그다음 jsp 파일 forwarding. IndexController - index.jsp(메인) 화면에 출력하는 controller 별다른 내용없고 forwarding만함 view -> jsp 파일(WEB-INF 디렉터리 아래) model -> (패키지 따로 만들기)service class - 실질적인 서비스를 담당하는 class 데이터베이스 관련 내용 들어감. 안에 들어있는 함수들은 최대한 함수를 재사용해서 구현. 예를들어서 return 아래에있는함수..

jstl 자바서버 페이지 표준 태그 라이브러리(JavaServerPages(JSP) Standard Tag Library) jstl이란 for문이나 if문 등의 여러 자바 코드들을 태그 형식으로 사용할 수 있게 하는 라이브러리 이다. jstl은 스파게티 코드를 해결하기 위해 만들어졌다. 스파게티 코드란 웹 문서 여러군데에 java 코드가 끼워져 있어서 전체적으로 복잡하고, 한 번에코드 수정하기 어려운 코드 상태를 말한다. db에서 가져온 데이터로 list를 출력해야하는 경우 어쩔 수 없이 while문이나 for문을 써야하는데 여기서 쓰이는 java 코드를 태그화 시키기 위해 만든 것이라고 생각하면 편하다. jstl 다운로드 및 사용 방법 https://mvnrepository.com/artifact/ja..

model1 jsp 파일 맨 위에 jdbc, 데이터베이스 연동, 쿼리문 다 들어감 String name = rs.getString("name"); rs.close(); st.close(); con.close(); 아래에 while (rs.next()) { }이런식으로 쿼리 결과 출력 model2 servlet(이름 ~contorller) class(패키지 : com.ksy.web.controller) jdbc, 데이터베이스 연동, 쿼리문 다 들어감 String name = rs.getString("name"); ... People people = new People( id, name, ... ); request.setAttribute("people", people); rs.close(); st.close..