Study
-
자바스크립트로 탭 구현하기(신입버젼)Study/JavaScript 2023. 1. 6. 10:40
자바스크립트로 탭 메뉴를 구현할 일이 생겨 공부겸 포스팅 해본다. 우선은 저는 신입이고 프론트단은 해본적이 없어서 매우 기초적인 국비교육생 수준이니 신입 및 국비교육생이 포스팅의 대상이 될거 같다. 1.구현시 결과화면 2.코드 (1) html 코드 탭1 탭2 탭3 탭1 화면 입니다. 탭2 화면 입니다. 탭3 화면 입니다. (2) css 코드 ul.list { list-style-type: none; } .tab-button { display: inline-block; } .active { background-color: aqua; } .tab-content { display: none; padding: 10px; } .show { display: block; } (3)JavaScript 코드 consol..
-
모바일과 pc 디바이스 자바스크립트로 구분하는 쉬운방법Study/JavaScript 2023. 1. 6. 10:15
업무를 하다보니 pc버젼과 mobile버젼을 나눠야 되는 일이 생김 그래서 이것저것 알아보다가 제가 찾아본 방법중에 신입이 쉽게 자바스크립트로 구현할 수 있는 방법을 찾아서 공유함. navigator.userAgent 는 자바스크립트 내장함수로 개발자모드로 Console창에 입력하면 아래와 같이 현재 디바이스의 정보를 보여준다. navigator.userAgent를 user에 담아서 indexOf("iPhone" 또는 "Android") 함수를 통하여 괄호안에 있는 단어를 찾으면 index숫자를 반환하고 없으면 -1을 반환한다.
-
초보자를 위한 AJAX통신으로 회원가입기능 간단히 만들기Study/Spring 2023. 1. 3. 00:24
ajax통신은 비동기방식 통신의 하나로 학원다닐때 스치듯 배웠는데, 다시 공부 삼아 기능을 구현해 보았다. 나는 회원가입기능을 만들때 보통은 아래와 같이 form형식+ submit버튼 조합으로 만들었다. 아이디 비밀번호 이름 그래서 ajax통신으로 기능을 만들고 싶어 간단하게 구현 해보았다. 간단하게 환경을 소개하자면 spring기반인 전자정부프레임워크 IDE툴을 사용하여 구현 하였으며, 다른분들은 DAO와 sqlSession을 이용하여 만든예제가 많은데, 나는 좀더 간편히 만들기 위하여 mybatis 기반의 mapper를 이용하여 구현하였다. 1.DB작성 CREATE TABLE CUSTOMMEMBER( ID VARCHAR(30) NOT NULL PRIMARY KEY, PASSWORD VARCHAR(30..
-
초보자를 위한 commit 상세메세지 작성 방법Study/Git 2022. 12. 26. 13:45
보통은 commit메세지를 남길때 간편하게 git commit -m "남기고싶은 메세지" 명령어를 통해 commit메세지를 남기는데, 좀더 길게 남기고 싶거나 회사에서 정해진 폼이 있다면 아래와 같은 방법을 사용하여 상세한 commit메세지를 남길수 있다. 1.git commit 명령어를 치면 vi 편집기로 들어가 commit메세지를 상세하게 작성 할 수 있다. 2.vi 편집기에 들어가 작성을 할려면 i 를 누르면 하단이 INSERT로 바뀌면서 편집할 수 있게 바뀜 3. Git Conventions 형식 또는 회사에서 사용하는 git메세지 형식에 맞춰서 작성 4.작성이 완료되면 esc를 누르고 :wq 명령어를 치고 빠져나오면 됨 5.vi편집기를 빠져나와 git push -u origin master로 명..
-
AJAX 너는 뭐니? 도대체!!!Study/Spring 2022. 12. 22. 22:52
웹개발자 국비과정을 듣는 국비생 또는 저 처럼 회사에 갓 입사한 삐약이 웹 개발자가 꼭 거쳐야 하는 관문! Ajax통신 이다. 국비교육을 들으면서 Ajax통신에 대해서 많이 들어봤고, 배웠다...아주빠르게... 그래서 배운기억만 있고 아직 정확하게 이해 못하고 있는 저와 같은 분들이 없기를 바라는 마음에 공부 겸 정리를 해본다! 1.Ajax 너의 정체는 뭐니? Ajax(Asynchronous JavaScript And XML) 약자로 비동기방식으로 자바스크립트를 이용하여 xml포맷(초기에는 xml로 데이터를 주고받았지만, 현재는 여러방식으로 데이터를 주고 받을 수 있다)으로 서버와 통신하는 방법을 말한다. 이렇게 말하면 무슨말인지 어려울것이다. 간단히 말하자면 (1)서버와 통신하기 위해 XMLHttpRe..
-
초보자를 위한 스프링 시큐리티 커스텀 구현하기(UserDetails, UserDetailsService, AuthenticationProvider customizing 하기)Study/Spring 2022. 12. 21. 16:01
앞서 스프링시큐리티 인증절차에 대해서 정리해 봤다. 혹시 못보신분들은 아래 링크로 가시면 될듯 https://cbn1218.tistory.com/10 스프링 시큐리티 인증 절차 스프링 시큐리티는 학원 프로젝트을 하면서 구현은 해봤으나, 실질적인 인증절차는 모르고 시큐리티기능을 가져다가 썼다. 이번기회에 시큐리티 인증 절차 정리겸 포스팅 해볼 예정 출처: https: cbn1218.tistory.com 로그인form에서 "/login"으로 요청을 보내어 스프링시큐리티에 이미 구현한 기능을 사용하여 인증하면 좋겠지만 실제프로젝트에서는 인증부분을 직접 customizing 하여 인증절차를 진행 하는게 많기 때문에 연습삼아 아주간단한 형태로 customizing 하여 인증절차를 진행해 보겠다. *환경 IDE: ..
-
스프링 시큐리티 인증 절차Study/Spring 2022. 12. 21. 15:15
스프링 시큐리티는 학원 프로젝트을 하면서 구현은 해봤으나, 실질적인 인증절차는 모르고 시큐리티기능을 가져다가 썼다. 이번기회에 시큐리티 인증 절차 정리겸 포스팅 해볼 예정 출처: https://www.bottlehs.com/springboot/%EC%8A%A4%ED%94%84%EB%A7%81-%EB%B6%80%ED%8A%B8-spring-security%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%9D%B8%EC%A6%9D-%EB%B0%8F-%EA%B6%8C%ED%95%9C%EB%B6%80%EC%97%AC/ 출처: https://velog.io/@bbamsoo/Spring-Security-%EC%B2%98%EB%A6%AC-%ED%9D%90%EB%A6%84 (1)사용자가 For..
-
Rest 넌 뭐니??Study/Server 2022. 12. 16. 23:07
스프링을 배우면서 Rest방식??Rest API?? @RestController 등...Rest에 대해서 많이 들어 봤을것이다. 나도 공부 하면서 많이 들어 봤지만 들었을때는 아하! 하고 알지만 또 까묵.... 그래서 다시한번 정리 해본다. 1.Rest방식이 나오게된 배경 과거 웹 애플리케이션이 주가 되던시절 서버의 데이터를 소비하는 주체는 오직 '브라우저'라는 특정한 애플리케이션만 있었고, '브라우저'가 소화 가능한 모든 데이터를 HTML이라는 형태로 전달하고, 브라우저는 그저 화면에 보여주는 역할만을 해왔다. 그러나 시간이 흘러 모바일이 우리생활과 밀접해 '앱' 이라는 데이터 소비 주체가 생겨나면서 보이는 화면 역시 자신만의 방식으로 서비스를 하게 되면서 점점 서버에게 순수한 데이터만을 요구하게 되었..