분류 전체보기243

• 

  (23.01.20)React 프레임워크 : 버튼 이벤트리스너 만들기 버트을 누르면 동적으로 숫자가 올라가는 이벤트 만들기 터미널을 통해서 react-router-dom 설치하기 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import { useState } from 'react'; import { Route, Routes, Link } from 'react-router-dom'; import './App.css'; import Hello from './comp/Hello.js'; import Test from './comp/Test'; function App() { //상태 변수 const [num, setNum] = useState(0); //let num =0; //.. Framework/React Framework 2023. 1. 24.

• 

  (23.01.19) React 프레임워크 - 다운로드 및 설치 React Framework Front-End SPA(Single Page Application) > 데이터 비용절감, 반응속도 향상 반복 사용되는 페이지의 일부분을 모들화(컴포턴트)하여 재사용 > 개발시간 단측, 유지보수의 효율성 향상jQuery를 사용하면 화면의 부분부분을 바꿀 때마다 태그를 하나하나 다 넣어줘야하는데 react를 쓰면 만든 한 컴포넌트를 끼워 넣을 수 있다. html, css, javascript 개발 편의를 위해 Nodejs 기반 개발환경 사용 Node.js: Server side Javascript JSX 스크립트 : Javascript + XML - 프로젝트 생성시 로컬 웹서버도 내장(포트 3000) 개발완료 > Build > 웹표준 파일 생성 > 개발환경 이외에서 사용 JSP.. Framework/React Framework 2023. 1. 24.

• 

  (23.01.18)Spring 프레임워크 + Thymeleaf 로 FullCalendar 이미지 나타내기 및 이벤트 온클릭(onClick)처리하기 Spring + Thymeleaf 로 FullCalendar 이미지 나타내기 및 이벤트 온클릭(onClick)처리하기 달력을 뷰로 띄울 때 많이 쓰는 달력 라이브러리가 있다. 바로 fullcalendar인데 자바 스크립트를 이용하여 달력을 만드는 것이다. fullcalendar은 일정을 나타내는 달력에 친화적인데 이를 조금 응용하여 일기 달력으로 만들었다. 일기를 쓰면 해당 날짜에 프로필 사진이 뜨고 프로필을 누르면 일기 상세 페이지로 넘어가게 만들었다. https://fullcalendar.io/ FullCalendar - JavaScript Event Calendar Open Source... With over 10 years of open source and over 120 contributors,.. Framework/Spring Framework 2023. 1. 23.

• 

  (23.01.17.)Spring 프레임워크 : AOP(Aspect Oriented Programming) 관계지향 프로그래밍 AOP(Aspect Oriented Programming) 관점지향 프로그래밍 Core Concerns : 메인 로직 Cross-Cutting Concerns : 부가적인 로직(로그인 검사, 보안, 로깅….) 반복되는 부가 로직을 재사용할 수 있는 방법(부가로직 중복방지) OOP(Object Oriented Progrramming) 방식으로는 안됨 AOP 방식을 사용하여 OOP를 보완할 수 있음 Adivce : 부가적인 로직을 메소드로 선언한 것 Pointcut : 부가로직인 실행될 메인 로직의 완전한 경로 표현 Aspect : 부가로직을 메소드로 선언한 클래스 JoinPoint : 부가로직에 이어서 실행될 주 로직의 메소드 정보 @Before, @After, @Around, @AfterReturning.. Framework/Spring Framework 2023. 1. 18.

• 

  (23.01.16.)Spring 프레임워크 : 이메일 인증 보완 - 다른 기기에서 인증시 세션이 달라 인증 오류 고치기 이메일 인증 보완 -인증을 신청한 기기 이외의 기기에서도 인증 답변 메일 확인 -이메일에 인증용 암호 문자열을 전달 -이메일 수신자가 메일을 열고 링크 클릭 > 암호문자열을 다시 서버로 보내준다. -이메일을 보낼때의 서버측 메소드와 암호문자열을 다시 받을 때의 메소드는 다르다. -이용자의 세션에 암호문자열을 기억시켜놓고 돌아왔을 때의 암호 문자열을 비교한다. -위의 절차가 모두 동일 시스템에서 실행된다면 아무런 문제가 없다. -하지만 다른 기기에서 인증에 응답을 누르면 세션이 다른 세션으로 바뀌기 때문에 인증이 작동하지 않는다. 따라서 인증 링크를 누를 때 세션 id까지 같이 줘서 해당 세션 id에 있는 문자열과 함께 비교하게끔 해야한다. 먼저 메인 어플리케이션에 @ServletComponentScan을.. Framework/Spring Framework 2023. 1. 18.

• (23.01.14.)Spring 프레임 워크 : 에러 페이지 만들기 에러가 뜨게 되면 웹을 잘 모르는 이용자는 당황할 수 있다. 따라서 에러의 종류에 따라 개발자가 에러페이지를 꾸며서 이용자에게 잘 설명할 수 있다. ErrorHandler.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 import javax.servlet.RequestDispatcher; import javax.servlet.http.HttpServletRequest; import org.springframework.boot.web.servlet.error.ErrorController; import org.springframework.http.HttpStatus; i.. Framework/Spring Framework 2023. 1. 17.

• (23.01.13)Spring 프레임워크 : 업로드된 이미지를 브라우저에서 보기(이미지 태그, Thymeleaf에서 이미지 가져오기) 업로드된 이미지를 브라우저에서 보기 ​ -WEB-INF 아래의 디렉토리는 웹브라우저에서 접근 불가(WEB-INF/files/) -서버측에서 WEB-INF 아래의 이미지를 전해줄 수는 있음 - -위의 태그가 웹브라우저에 로드되면 웹브라우저는 해당 이미지를 서버에 요청하게 됨 -위의 요청을 처리하는 컨트롤러 메소드가 있다면 이 때 그 메소드가 실행됨 -컨트롤러에서는 @ResponseBody를 사용하여 byte[ ]이 브라우저로 리턴되도록 함 -이미지 데이터를 받은 태그는 이미지를 화면에 표시할 수 있음 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42.. Framework/Spring Framework 2023. 1. 16.

• 

  (23.01.12) Spring 프레임 워크 : CRSF(Cross Site Request Forgery) CRSF(Cross Site Request Forgery) 크로스 사이트 요청 사기 원래 사이트에서 받아오지 않은 조작한 웹페이지를 사용하여 요청 예시 요청 url을 알고 잘못된 요청을 보내려 할 수 있다. CsrfTestConrtroller.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.spri.. Framework/Spring Framework 2023. 1. 13.

• 

  (23.01.11.)Spring 프레임워크 : Spring Security -JDBC Authentication Spring Security -JDBC Authentication 스프링 시큐리티와 데이터베이스를 연동하여 인가, 인증 보안을 하려면 3가지가 있어야 한다. -config 클래스에 데이터베이스에 관련된 정보가 있어야한다. (Datasource) -users와 authorities 테이블이 있어야 한다. -기존에 했던 In Memory Authentication 설정 제거해줘야한다. users와 authorities 테이블 생성 CREATE TABLE users ( username VARCHAR2(50) NOT NULL, password VARCHAR2(120) NOT NULL, enabled CHAR(1) NOT NULL, CONSTRAINT check_users_enabled CHECK(enabled .. Framework/Spring Framework 2023. 1. 11.

• 

  (23.01.10)Oracle 데이터베이스 : on update cascade 기능 trigger로 구현하 ●●on update cascade 기능 trigger로 구현하기●● 오라클과 MS-SQL은 FK 제약을 걸때 ON DELETE CASCADE 를 지원하지만, ON UPDATE CASCADE는 MS-SQL 만 지원한다. 오라클에서도 ON UPDATE CASCADE가 많이 필요 하기에 조금 불편하지만 Trigger를 이용해 구현하는 방법이 있다. 트리거 특징 - AFTER, BEFORE를 통해 TRIGGER가 언제 실행될지 결정 - FOR EACH ROW, 즉 모든 테이블을 반복하면서 실행된다 - BEGIN과 END 사이에 SQL문 삽입 가능, 이때 반드시 ; 로 끝을 내주어야 한다!! CREATE TRIGGER 트리거명 AFTER UPDATE OF 부모테이블의 PK 컬럼명 ON 부모테이블명 FOR EAC.. Database 2023. 1. 11.

• 

  (23.01.09.) Oracle 데이터베이스 : on delete cascade 설정하기 ●●on delete cascade●● 게시글과 댓글 같이 종속 관계가 있는 데이터를 보면 부모 데이터가 삭제되면 자식데이터도 자동적으로 삭제 되어야한다. 오라클에선 이 기능이 바로 on delete cascade 이다. 게시글을 삭제하려고 하니 무결성 제약조건 위배로 삭제가 안되고 500에러가 나왔다. 찾아보니 delete cascade 제약조건을 설정해놔야 부모테이블 삭제시 자식테이블도 같이 삭제되는 방법을 찾았다. alter table 자식테이블명 add constraint 설정할제약조건명 foreign key (외래키로 설정할 키) references 부모테이블명(외래키로 설정할 키) on delete cascade; !!외래키 제약조건을 추가하기 위해선 기존의 제약조건을 삭제 후, 다시 등록해줘.. Database 2023. 1. 11.

• 

  (23.01.06)Spring 프레임워크 : thymeleaf를 이용한 보안 로그인 - 로그인 에러 로그인 에러 메시지 띄우기 pom.xml 설정은 (23.01.05)게시글 참고! SimpleSecurityConfig.java 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 import org.springframework.beans.factory.annotation.Autowired; import org.s.. Framework/Spring Framework 2023. 1. 9.