본문 바로가기

카테고리395

[React] 리액트 설치 방법과 개발 환경 세팅하기 1. node.js 를 깔아준다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Visual Studio Code를 깔아준다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and availa.. 2023. 2. 25.
[JavaScript] 배열(Array)과 객체(Object) 차이, innerHTML 사용법 배열(Array)과 객체(Object) 차이, innerHTML 사용법 만약 상품을 만들었다면, 저장할 공간이 필요하다. 이때 Array 혹은 Object를 사용할 수 있다. 배열(Array) 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index) 라고한다. 객체(Object) 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합이다. key : value형태로 저장가능 Array와 Object의 차이점 중 한가지는 "순서" 이다. Array는 자료간 순서가 존재하지만, Object는 순서개념이 없다. HTML에 를 이용해 javascript의 기능을 추가해보았다. HTML에서 콘솔 창을 열어 각각 배열과 객.. 2023. 2. 25.
[Servlet / JSP ] 템플릿 형태로 JSP 사용하기 <jsp : include> 템플릿이 뭘까? 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿의 특정 부분에 끼워 넣는 방식으로 작동되는 메서드이다. 템플릿은 왜 사용하는 걸까? 1. 많은 코드를 줄일 수 있다. - 템플릿은 간단한 문법을 사용한다. 따라서 코드를 훨씬 간결하게 짤 수 있다. 2. 유지보수에 용이하다. - 하나의 템플릿을 미리 만들어 놓고 관리하는 것은 수백개의 비슷한 페이지를 관리하는 것보다 훨씬 효율적이다. 3. 재사용성이 높다. - 웹 페이지는 똑같은 디자인의 페이지에 데이터만 바뀌는 경우가 많다. 이럴 때 템플릿을 사용하면 미리 템플릿을 만들어 놓고 데이터만 바꿔가면서 수많은 페이지를 만들어 낼 수 있으므로 효율적이다. 간단히 템플릿을 만들어 보며 개념을 알아보자. in.. 2023. 2. 23.
[Servlet / JSP / SQL] 회원 관리 폼 만들기 (4) - UPDATE(정보 수정) 수정을 누르기전에, member_detail.jsp 19번째 줄을 살펴보자. HTML 삽입 미리보기할 수 없는 소스 서블릿의 memberUpdate.do로 memId 값을 들고간다. MemberController.java 서블릿 역시나 memId 데이터를 받아와 저장하고, 바로 member-mapper로 가서 쿼리를 짜주자. member-mapper.xml 바꿔줄 값이 4개이다. MemberService.java 인터페이스 MemberServiceImpl.java 클래스 //매개변수 및 리턴 타입 결정 방법(우선적으로 실행 시 쿼리를 작성) //매개변수 : 쿼리 실행 시 빈 값을 채울 용도 //1. 쿼리에서 채워 줄 값이 없을 경우 : 매개변수 없음 //2. 채워줄 값이 하나일 경우 // 2-1) 채워줄.. 2023. 2. 23.
[Servlet / JSP / SQL] 회원 관리 폼 만들기 (3) - DELETE(회원 삭제) 이번엔 회원 삭제를 하기전에, 상세정보 보기를 먼저 만들어 볼 것이다. member_list.jsp HTML 삽입 미리보기할 수 없는 소스 27번째 줄에있는 태그를 이용해 이름을 클릭하면 상세정보 보기 페이지로 이동하게 만들 것이다. 등록한 이름의 memId가 MemberDTO에 저장한( ${member.memId} ) 아이디를 같이 들고간다. 어디로? member_detail.do MemberController.java 서블릿 member_list.jsp에서 memId 데이터를 보냈으니, getParameter를 사용하여 성공적으로 받아주었다. MemberDTO member 이후 문장은 다시 mapper로 가서 쿼리를 짜주고 돌아오자. member-mapper.xml 오라클 DB에 저장했던 BASIC_.. 2023. 2. 23.
[Oracle / SQL] SQL INSERT, UPDATE, DELETE 테이블에 저장된 데이터에 변화가 생기는 추가, 삭제, 수정등의 쿼리는 실행 후 수정 내용을 확정할지 취소할지 결정지어 줘야한다. 변경 확정 : COMMIT 변경 취소 : ROLLBACK 단, 한번 COMMIT한 데이터는 ROLLBACK이 불가능하다. 먼저 연습할 MEMBER 테이블을 생성해주자. HTML 삽입 미리보기할 수 없는 소스 INSERT (데이터 삽입) --INSERT INTO 테이블명 (컬럼명들....) VALUES (값들....); HTML 삽입 미리보기할 수 없는 소스 데이터를 삽입 후 COMMIT을 해준다. 이후 다시 한번 VALUES(2,'KIMJAVA', 20); 을 넣는데, ROLLBACK;을 진행하였다. ROLLBACK을 하지 않았다면 MEM_NUM의 값이 2가 가진 데이터도 출력.. 2023. 2. 23.
[Servlet / JSP / SQL] 회원 관리 폼 만들기 (2) - INSERT(회원 등록) 이전 포스팅에서 DB연동 후 결과 페이지를 만드는데 까지 해보았다. login_result.jsp result 값으로 받아온 member에 들어있는 id와 pw가 일치하지 않으면 자바스크립트를 이용해 '로그인 실패'를 띄우고, 그렇지 않다면 '로그인 성공'을 띄운다. loginForm.do로 갈 서블릿과 memberList.do로 갈 서블릿을 만들어주자. MemberController.java 서블릿 loginForm.do에서는 단순히 같은 페이지로만 돌아가게끔 구현하였고, memberList.do는 쿼리를 작성한 값을 가져와야한다. 따라서 젤 먼저 쿼리를 쓰러 mapper로 가자. member-mapper.xml select 쿼리는 반드시 resultMap을 가져온다는 것을 다시 한번 명심하자. 쿼리문.. 2023. 2. 22.
[Servlet / JSP / SQL] 회원 관리 폼 만들기 (1) - CREATE (DB 테이블 생성) 프로젝트 파일 코드 최종본 webapp 파일에 첫 시작 화면인 index.jsp를 시작으로 회원 가입, 로그인, 로그인 결과, 회원 리스트, 회원 상세정보, 회원 삭제, 회원 업데이트 기능을 만들었다. 데이터 베이스를 이용하여 CRUD 게시판을 만들어보는 과정이다. 나중에 보았을때에도 헷갈리지 않도록 지금 내가 생각하고 있는 내용을 최대한 자세히 적어볼 것이다. 시작전, 먼저 JavaResources 폴더의 src/main/java에서 controller, dto, service, sqlmap 패키지를 만들었고, 각각 알맞는 인터페이스와 클래스 생성, 그리고 xml파일을 가지고왔다. 처음 시작은 webapp 폴더에서 index.jsp 파일을 만들었다. index.jsp HTML 삽입 미리보기할 수 없는 .. 2023. 2. 22.
[Oracle / SQL] 더미테이블(DUAL)과 유용한 숫자 함수 예제 2 숫자 관련 함수 반올림 HTML 삽입 미리보기할 수 없는 소스 ( ) 괄호 두번째 , 숫자는 소수점 몇번째 까지 나타내라~ 라는 의미이다. 올림, 버림 HTML 삽입 미리보기할 수 없는 소스 CEIL 은 올림, FLOOR은 내림 함수이다. 나머지구하기 HTML 삽입 미리보기할 수 없는 소스 형 변환 함수 ****(중요) 숫자 문자 날짜 HTML 삽입 미리보기할 수 없는 소스 조건에서 날짜를 비교할 때는 숫자는 안되고 문자는 가능하다. 쉬운 예로, 위와 같이 날짜 타입으로 형 변환 후 비교하는게 가장 좋은 방법이다. 숫자를 문자로, 문자를 숫자로 변환 HTML 삽입 미리보기할 수 없는 소스 왼쪽 정렬은 문자, 오른쪽 정렬은 숫자 문자를 날짜로, 날짜를 문자로 변환 1. 날짜를 문자로 변환 HTML 삽입 미.. 2023. 2. 21.
[Oracle / SQL] 더미테이블(DUAL)과 유용한 문자 함수 예제 더미테이블이란 ? - 쿼리문 연습을 위해 오라클에서 제공하는 테이블이다. 예제) HTML 삽입 미리보기할 수 없는 소스 DUAL에는 데이터가 하나도 없다. 즉, 가상의 공간이라고 생각하자. DUAL은 출력되는 데이터를 확인해보기 위한 수단으로써, 특정 테이블을 생성할 필요없이 DUAL 테이블을 이용해 함수 값을 리턴 받는다. 함수 대소문자 변환 UPPER(컬럼명) : 대문자로 변환 LOWER(컬럼명) : 소문자로 변환 INITCAP(컬럼명) : 단어의 첫글자만 대문자로 변환 HTML 삽입 미리보기할 수 없는 소스 문자의 길이 조회 HTML 삽입 미리보기할 수 없는 소스 LENGTH - 문자 길이 조회 LENGTHB - 바이트 수 조회 문자의 일부 추출 HTML 삽입 미리보기할 수 없는 소스 문자열 연결 .. 2023. 2. 21.
[Oracle / SQL] 쿼리문 합치기 UNION, UNION ALL 집합연산자 SELECT 쿼리를 여러개 동시 실행하려면 어떻게 해야할까? UNION을 쓰면된다. UNION : 여러 SELECT 쿼리 결과를 모두 보여준다. UNION HTML 삽입 미리보기할 수 없는 소스 UNION을 사용하면 두개의 쿼리를 연결시켜준다. 이때 앞에 있던 문장 ; (세미콜론) 은 지워준다. UNION : 쿼리 결과 중복 데이터는 한번만 조회 중복된 데이터도 모두 조회하려면 UNION ALL 사용한다. 조건이 같으면 결과는 한번만 출력한다. HTML 삽입 미리보기할 수 없는 소스 UNION ALL HTML 삽입 미리보기할 수 없는 소스 UNION ALL을 사용하면 중복되더라도 모든 데이터를 출력해줄 수 있다. 컬럼 개수 불일치 HTML 삽입 미리보기할 수 없는 소스 컬럼명 다르지만 자료형 .. 2023. 2. 21.
[JavaScript] 상품 리스트 만들어보기 Bootstrap을 이용해 상품을 만들어 버튼을 눌리면 하나 하나씩 볼 수 있도록 만들어보았다. HTML HTML 삽입 미리보기할 수 없는 소스 CSS HTML 삽입 미리보기할 수 없는 소스 JS HTML 삽입 미리보기할 수 없는 소스 먼저 tab-button을 다 찾아준다. 이 상태에선 아무거나 눌러도 코드가 실행된다. 그래서 바로 뒤에 .eq(0) 을 추가해준다. 이것은 querySelectorALL('.tab-button')[0] 이거랑 비슷하다. 이 코드를 반복문을 돌려서 풀려고 했으나, 제대로 작동하지 않아서 그냥 어떻게 쓰는지만 알아두었다. 아직까지 js를 쓰는게 많이 불편하다... See the Pen Untitled by ParkJooHong (@ParkJooHong) on CodePen. 2023. 2. 20.

티스토리툴바