728x90 반응형 SMALL 웹개발14 [기초-4] 일렉트론 사이드 메뉴 만들기 일렉트론에 사이드메뉴와 같은것을 적용해 보겠습니다. 디자인은 저번 화면개발때와 마찬가지로 이미 멋지게 만들어진 디자인을 빌려서 사용하겠습니다. https://codepen.io/search/pens?q=side+menu CodePen Search codepen.io 사이드 메뉴라고 검색하니 바로 나옵니다. 그냥 맨첫번째로 있는 사이드메뉴를 적용해보겠습니다. css는 그대로 복사한다음 css폴더에 새로 하나 만든다음 main.html에 적용을 해줍니다. 이제 html에 사이드메뉴부분을 가져오겠습니다. 네모친 부분을 우선 가져옵니다. 위에 있는 링크태그는 앞서 만들었던것입니다. 그리고 그 아래 태그 부터 쭉~~~다 가져와서 nav 태그가 끝나는 지점까지 쭉복사를 해서 가져온다음 실행해보겠습니다. 지금 뚫고 .. 2023. 2. 27. 네이버 금융페이지를 몽땅 가져와보자! - 자바 크롤링(java)_2 , 종목코드와 종목명 매핑하기 첫 번째 - 네이버 금융을 몽땅 가져오기에 앞서서... Jsoup 설치 방법 (자세히) https://uno-kim.tistory.com/213 [JAVA]Jsoup 라이브러리를 이용한 크롤링 - Jsoup 사용법 + 라이브러리 저장하는 법 안녕하세요~! ㅎㅎ 오늘 포스팅은 그동안 크롤링를 하여 네이버 금융의 정보를 가져왔었는데 크게 사용되었던 라이브러리인 Jsoup 라이브러리 사용법 에 대해서 알아보겠습니다! 1. 라이브러리 uno-kim.tistory.com Jsoup 사용방법(3가지 방법 소개) https://uno-kim.tistory.com/215 [JAVA]Jsoup 라이브러리를 이용한 크롤링 - Jsoup 사용법 안녕하세요! 오늘 포스팅은 Jsoup 라이브러리를 알아보려고 해요 해당 라이브러.. 2022. 3. 24. 로그인 페이지 구현내용 로그인 페이지 구현 메인 페이지 리디렉션 로직 구현 로그인을 위한 API서비스 메서드 작성 로그인 API서비스는 /auth/signin 이었습니다. 이 경로를 이용해 로그인하는 메서드를 ApiService에 작성해주겠습니다. export function signin(userDTO) { return call("/auth/signin", "POST", userDTO).then((response) => { console.log("response : " , response); alert("로그인 토큰 : " + response.token); }); Login 컴포넌트를 수정했습니다 . Login 컴포넌트는 이메일과 패스워드를 받는 인풋 필드와 로그인 버튼으로 이뤄져 있습니다. 사용자가 이메일과 패스워드.. 2021. 12. 15. 프로젝트(2) AJax와 스프링 시큐리티 처리 태그를 이용하는 방식 외에 많이 사용되는 Ajax를 이용하는 경우 약간의 추가적인 설정이 필요하다. 해당 Ajax부분을 로그인한 사용자만이 해당 기능들을 사용할 수 있도록 수정해주어야 한다. 스프링 시큐리티가 적용되면 POST, PUT, PATCH, DELETE와 같은 방식으로 데이터를 전송하는 경우 추가적으로 X-CSRF-TOKEN와 같은 헤더 정보를 추가해서 CSRF토큰값을 전달하도록 수정해야한다. Ajax는 JS를 이용하기 때문에 브라우저에서는 CSRF토큰과 관련된 값을 변수로 선언하고, 전송 시 포함 시켜주는 방식으로 수정하자. 게시물등록 시 첨부파일의 처리 스프링 시큐리티가 적용된 후에는 게시물에 파일첨부가 정상적으로 동작하지 않는다. 게시물의 등록이 POST로 .. 2021. 10. 21. 프로젝트(1) 기존 프로젝트에 그동안 공부했던 스프링 시큐리티를 접목하는 작업을 진행하도록 하겠다. 그전에 해당 기능은 -로그인과 회원 가입 페이지의 작성 - 기존 화면과 컨트롤러에 시큐리티 관련 내용 추가 - Ajax부분의 변경 로그인 페이지 처리 기존의 로그인화면은 정말 끔찍하다.. 어쩌면 스프링에서 기본으로 주는화면급이었다. 똑같았다 그냥 그럼 조금 이쁘게 부트스트랩을 적용하고, 아까의 로그인의 화면의 태그라던가 id는 동일하게 설정한뒤 생성해보았다. Please Sign In Remember Me Login 폼태그가 붙고, 거기에 컨테이너 div가 붙고 해서 뭔가 복잡해 보이는데 화면으로보면 크게 달라진것은 없다. 귀찮다면 그전의 화면을 계속사용해도 문제는 없다. 하지만 JSTL이나 스프링 시큐리티의 태그를 사.. 2021. 10. 21. 자동 로그인 현재 웹페이지들은 자동 로그인이나 로그인 기억하기 라는 이름으로 한 번 로그인하면 읠정 시간 동안 다시 로그인을 하지 않아도 되는 기능을 가지고 있다. 스프링 시큐리티의 경우 로그인기억 기능을 메모리상에서나 처리하거나, 데이터베이스를 이용하는 형태로 약간의 설정만으로 구현이 가능하다. security-context.xml에는 태그를 이용해서 기능을 구현할 수 있다.! 해당 태그에는 아래와 같이 여러 속성값을 지정할 수 있다. key 쿠키에 사용되는 값을 암호화하기 위한(key)값 data-source-ref DataSource를 지정하고 테이블을 이용해서 기존 로그인 정보를 기록(옵션) remember-me-cookie 브라우저에 보관되는 쿠키의 이름을 지정한다. 기본값은 remember-me이다. re.. 2021. 10. 21. 스프링 시큐리티와 JSP JSP에서 로그인한 사용자 정보를 보여주기 /sampl/admin 과 같은 경로는 로그인한 사용자만이 접근할 수 있고, 만일 권한이 적당하지 않으면 볼수 없는 페이지이므로 로그인한 사용자가 접근 했을 때에는 해당 사용자의 여러 정보를 보여줄 필요가 있다. 스프링 시큐리티와 관련된 정보를 출력하거나 사용하려면 JSP상단에 스프링 시큐리티 관련 태그 라이브러리 사용을 선언하고, 태그와 principal이 라는 이름의 속성을 사용한다. 지금현재 있는 JSP파일에 해당 태그를 추가한다. 그리고 해당 사용자의 이름과 아이디, 권한들을 나타날 수 있도록 하기위해 각각의 태그들을 넣어주어 불러온 정보를 화면단에 나타나게 해줄 수 있다. /sample/admin page principal : MemberVO : 사용자.. 2021. 10. 19. 커스텀 UserDetailsService JDBC를 이용하는 방식을 DB를 처리해서 편리하게 사용할 수 있기는 하지만, 제한적인 내용만만을 이용한다는 단점이있다. 스프링 시큐리티에서 username이라고 부르는 사용자의 정보만을 이용하기 때문에 충분하지 실제 프로젝트에서 사용자 의 이름이나 이메일등의 자세한 정보를 이용할 경우에는 부족하다. 이런문제를 해결하기 위해서 직접 UserDeatilasService를 구현하는 방식을 이용한다. 흔히 커스텀 UserDetailsService를 구현하는데, 원하는 객체를 인증과 권한 체크에 활용 할 수 있다. 스프링 시큐리티의 UserDetailsService 인터페이스는 단 하나의 메서드만이 존재한다. loadUserByUsername()이라는 메서드의 반환 타입인 UserDetails 역시 인터페이스로.. 2021. 10. 19. JDBC를 이용하는 간편 인증/ 권한처리 현실적으로 JDBC를 이용하는 방식을 공부해보자 스프링 시큐리티에서는 사용자를 확인하는 인증과 권한 등을 부여하는 인가 과정으로 나누었다. 인증과 권한에 대한 처리는 크게 보면 Authenitacation Manager를 통해서 이루어진다. 이때, 인증이나 권한 정보를 제공하는 존재가 필요하고, 다시 이를 위해서 UserDetailsService라는 인터페이스를 구현한 존재를 활용한다. 유저 상세서비스는 스프링 시큐리티 API내에 이미 CahingUserDeatilsService, InmemoryIserDetailsmanager, jdbcDaoImpl, jdbcUserDetailManager, LdapUserDetailsManager, LdapUserDetailsService와 같은 구현 클래스들을 제공.. 2021. 10. 18. 로그인과 로그아웃처리(2) 커스템 로그인 페이지 앞서 언급했듯이 스프링 시큐리티에서 기본적으로 로그인페이지를 제공하긴한다. 현실적으로 화면 디자인등의 문제로 사용하기 불편하고 안예쁘다. 때문에 거의 대부분 경우 별도의 URI를 이용해서 로그인 페이지를 제작해서 사용한다. 이를 이용하는 방식은 접근 제한 페이지와 유사하게 직접 특정 URI를 지정할 수 있다. 보이는 바와같이 한줄을 수정 추가해주었다. 이제 로그인화면은 customLogin으로 이동하게 될것이다. login-page속성의 Uri는 get방식으로 접근하는 uri로 지정한다. 그리고 CommonController에 /customLogin에 해당하는 매서드를 추가해준다. @GetMapping("/customLogin") public void loginInput(String.. 2021. 10. 18. 파일업로드 마무리 게시글 등록 시 첨부파일 추가, 삭제 0 게시글 삭제 시 첨부파일과 데이터 삭제 0 게시글 수정 시 첨부파일과 데이터 변경 0 실제 구현화면 프로젝트 처리 1주일간의 짧은 레이싱이 끝났다. 3일은 첨부파일기능을 실습해보았고 나머지 3일은 내 기존 프로젝트에 적용시켜보았다. 난 마스터브랜치에서 새로 브랜치를 생성해서 업로드 파일기능구현을 시켰다. 이제 이것을 풀리퀘스트로 합쳐보겠다. 깃허브에서 풀리퀘스트 하는법 상단의 컴패어 및 풀리퀘스트를 눌러보자 그리고 해당 브랜치에 설명을 간략하게 넣는다. 첨부할게있으면 첨부해도좋다. 그럼 Create pull request를 눌러서 최종으로 진행하도록하자 커맨트를 남길게 있으면 남기고 커밋을 하자 머지 풀리퀘스트를 통해서 지금 뻗어나온 브랜지, 즉 가지를 다시 몸통.. 2021. 10. 15. 프로젝트(6)-잘못된 파일 처리 Ajax를 이용해서 첨부파일을 사용하면 사용자가 게시물을 등록하거나 수정하기 전에 이미 업로드 시킨 파일들을 볼 수 있다는 장점이 있지만, 다음과 같은 문제가 생긴다. - 첨부파일만을 등록하고 게시물을 등록하지 않을 떄의 문제 파일은 이미 서버에 업로드 되었지만, 게시물을 등록하지 않았으므로 의미 없이 파일들만 서버레 업로드된 상황 - 게시물을 수정할 때 파일을 삭제했지만 실제로 폴더에서 기존 파일은 삭제되지 않은 문제 데이터베이스에는 기존 파일이 삭제되었지만, 실제 폴더에는 남는 문제 이는 사용자가 Ajax로 어떤 작업을 한 후에 비정상적으로 브라우저를 종료하거나 페이지를 빠져나가는 문제이다. 이 문제를 해결하는 핵심은 정상적으로 사용자의 게시물에 첨부된 파일인지 아니면 사용자가 게시물을 수정할때 업로.. 2021. 10. 15. 이전 1 2 다음 728x90 반응형 LIST
