본문 바로가기
Javascript & jQuery로 style 속성 css 입력, 수정하기 우선 테스트할 html을 작성한다. Javascript  여기서 testId div의 css 속성을 수정하고 추가해본다. document.getElementById('testId').style.backgroundColor = 'blue';document.getElementById('testId').style.marginLeft = '100px';document.getElementById('testId').style.backgroundColor = 'blue';document.getElementById('testId').style.marginLeft = '100px';추가 수정은 같은 방법으로 하면 된다.jQuery제이쿼리는 좀 더 짧은 명령어로 할 수 있다.$('#testId').css('backgr.. 2024. 7. 27.
[Javascript] 문자열 앞 뒤 공백 제거 trim() 어쩌다~ 저쩌다 보면 문자열의 앞 뒤 공백을 제거할 일이 생긴다.자바스크립트로 간단히 제거할 수 있다. 앞 뒤 공백 제거 trim();var str = " 앞 뒤 공백 제거 ";str.trim();문자열 뒤에 trim() 함수를 붙이면 제거된다. 앞 공백 제거 trimStart(), trimLeft()var str = " 앞 뒤 공백 제거 ";str.trimStart();str.trimLeft();문자열에서 앞부분 공백만 제거하려면 trimStart(), trimLeft() 둘 중 하나 함수를 사용하면 된다.strat는 시작이라서 앞부분 left는 위치상 왼쪽을 뜻해보인다. 뒤  공백 제거 trimEnd(), trimRight()마찬가지로 뒤에 공백은 trimEnd(), trimRight(.. 2024. 7. 26.
[전자정부] eGovFrame 게시판 (3) : Controller, Service, Dao, VO MVC 패턴. 데이터 저장하기 저번에 프로젝트에 Oracle DB를 연동했다.https://hellodoor.tistory.com/235 관련 내용은 왼쪽 링크에서 확인할 수 있다.이번에는 사용자에게 데이터 입력을 받고 DB에 저장하는 과정을 Controller, Service, Dao에서 대충 봐본다. 뭐 디자인 패턴, MVC 패턴 이러쿵저러쿵하는데 자세히 알 필요는 없다고 생각하지만 또 모르는 것보단 좋을 수 있기 때문에 간략하게 살펴보자면  디자인 패턴이란 프로그램 개발에서 자주 나타나는 과제를 해결하기 위한 방법 중 하나로, 과거의 소프트웨어 개발 과정에서 발견된 설계의 노하우를 축적하여 이름을 붙여, 이후에 재이용하기 좋은 형태로 특정의 규약을 묶어서 정리한 것이다.라고  위키백과에 설명되어 있다. 쉽게 생각해보면 프로그램 .. 2024. 7. 24.
[spring boot-4] 부트스트랩 무료 템플릿 적용하기 직접 디자인하고 html css 다 하면 좋겠지만 아쉽게도 그렇게 하기엔 귀찮고 내겐 그런 능력이 없다. 실무에서도 따로 디자이너, 퍼블리셔가 하는 영역이라서 그렇게 많이 접해보지도 않았다. 때문에 귀찮아 죽겠는 와중에 집에서 혼자 깨작깨작 하는 공부에는 무료 템플릿을 가져와서 사용하려고 한다. https://startbootstrap.com/ Start Bootstrap startbootstrap.com 나는 여기 사이트에서 맘에 드는 템플릿을 골랐다. 요놈이 맘에 들었다. Free Download를 해준다. 파일을 주르륵 받았고 static 아래에 넣어줬다. 이제 실행시키고 localhost:8080 입력해 주면 요렇게 됐다. 요기서 조금씩 커스터마이징 해야겠다. 2024. 1. 21.
jQuery 스크롤 최하단 이벤트 발생 scrollTop & innerHeight & scrollHeight 개인정보 수집 동의를 체크해야만 다음 이벤트로 넘어가는 소스를 작성하는데 거기서 스크롤을 끝까지 내려야만 체크를 할 수 있는 로직을 jQuery로 작성해 보려고 한다. scrollTop innerHeight scrollHeight 이 세 개의 개념만 알고 있으면 쉽게 코딩할 수 있다. scrollTop 영역 안에서의 현재 스크롤의 위치를 알려준다. innerHeight 현재 영역의 내부 크기를 알려준다. scrollHeight 현재 영역의 스크롤의 범위까지 포함하여 크기를 알려준다. 해서 저 상태에서 세 개의 크기를 출력해 본다. 스크롤 위치는 33, div의 크기는 200, 스크롤 포함한 전체 크기는 317 임을 알 수 있다. 여기서 스크롤을 맨 아래로 내리고 출력을 해보면 스크롤 위치는 117, di.. 2023. 10. 18.
[spring boot-3] MVC 패턴 Controller 생성 MVC 패턴이란.. 라고 한다. 사용자가 화면에서 데이터를 입력하면 그것을 받아 처리하는 로직이라고 생각하면 될 것 같다. 우선 지금까지 스프링부트 프로젝트를 생성했고 디비랑 연동까지 했다. 여기서 특정 요청을 받아서 그것에 따라 처리하기 위해 컨트롤러를 생성할 것이다. 그냥 자바 클래스 파일 생성하듯이 생성하면 되는데 경로가 중요하다. 저기 KaranuApplication.java는 스프링부트 프로잭트를 생성하면 자동 생성되는 파일인데 컨트롤러 경로는 Application이랑 같은 상위폴더 아래에 있어야 컨트롤러가 요청을 받을 수 있다. 왜인지는 저 Application 의 역할을 알면 좋겠지만 나는 귀찮으므로 그냥 그런갑다 하면서 넘긴다. 한번 찾아보면 좋을 것 같다. 기본적으로 스프링부트는 실행하고.. 2023. 7. 26.
[spring boot-2] MariaDB 스프링부트 마리아디비 연동하기 먼저 스프링부트 프로젝트와 마리아디비 데이터베이스를 생성해야 한다. 스프링부트 프로젝트 생성 MariaDB 데이터베이스 생성 spring boot 프로젝트에 application.properties 를 편집한다. spring.datasource.driver-class-name=org.mariadb.jdbc.Driver spring.datasource.url=jdbc:mariadb://localhost:3306/karanu spring.datasource.username=user1 spring.datasource.password=1234 또는 확장자를 yml로 변경해서 작성해도 된다. 개인적으로 그게 더 편리한 것 같다. spring: datasource: driver-class-name: org.mari.. 2023. 5. 3.
Javascript, Jquery로 페이지 reload 새로고침 방법. Jquery로 페이지 새로고침 location.reload(); Javascript로 페이지 새로고침 window.location.reload(); history.go(); history.go() 는 파라미터의 숫자를 넣어서 페이지 앞으로 가기 뒤로가기가 가능하다. 아무것도 넣지 않으면 0으로 보고 새로고침이 되고 history.go(1)은 하나 앞으로가기 history.go(-1)은 하나 뒤로가기가 된다. window.location.href=window.location.href; window.location.href는 현재 페이지 url을 가져오는데 = 으로 값을 넣어주면 그 url로 이동하게 된다. 그대로 window.location.href를 넣어줬기 때문에 새로고침 효과를 주게 된다. 2023. 4. 19.
[전자정부] eGovFrame 게시판 (2) : 오라클 DB 연동 가벼운 마음으로 개발환경 잡아보고 대충 게시판 공부해보려 했으나.. 놀랍게도 1년만에 글을 쓴다. 사실 시작도 제대로 안하고 놔버렸었다. 어쨋든 다시 해보자.. 프로젝트 생성, 세팅 글은 https://hellodoor.tistory.com/210 여기서 확인할 수 있다. 무려 일년전글.. ㅎ Oracle DB를 연동하려고 하는데 그러면 당연히 db가 필요하다. 오라클 db 설치는 https://hellodoor.tistory.com/227 여기 이제 본격적으로 연동을 시작해보려 한다. 우선 resources -> egovframework -> spring -> context-datasource.xml 을 열어보자. 원하는 소스파일을 이름만 알고있으면 쉽게 열 수 있는데 ctrl + shipt + r 버.. 2022. 11. 12.
[전자정부] eGovFrame 게시판 (1) : 웹 프로젝트 생성, 세팅, 톰캣 설정 전자정부 프레임워크 세팅을 위해서 개발환경은 아래 링크에서~ 전자정부 프레임워크 개발환경 세팅 프로젝트 생성을 해보자. File -> New -> Other 클릭 eGovFrame Web Project를 클릭하고 Next > 를 클릭한다. Project name 말 그대로 프로젝트 이름을 적는다. Group Id 는 그룹 아이디를 적는데 보통 com.회사 이름이 들어가거나 그러기도 한다. Dynamic Web Module version은 Servlet Spec이라 한다. 기본적으로 2.5가 설정되어 있다. 나는 자바는 8이상(11) 톰캣은 9버전을 사용할 것이므로 서블릿 스펙은 4.0으로 변경한다. 톰캣 설치는 나중으로 하고.. Next > 우선 예제 소스를 생성하기로 하고 Finish를 클릭한다. 뭔가.. 2021. 11. 10.
[전자정부] EgovFrame Install 설치 및 개발환경 아직 공공기관에서 많이 쓰이는 프레임워크이다. 말이 전자정부지 spring 기반이라고 한다. 우선 아래 링크를 가서 https://www.egovframe.go.kr/home/sub.do?menuNo=41 개발환경 - 3.x 다운로드 | 표준프레임워크 포털 eGovFrame 처리중입니다. 잠시만 기다려주십시오. www.egovframe.go.kr 3.10 버전으로 받아보자. 일단 뭐 최신 판이니.. 현재 PC 운영체제에 맞게 받는다. 압축을 풀어보자. 두 폴더가 생겻다. eclipse 폴더에 들어가보면 이렇게 파일들이 있다. 여기서 eclipse.exe 파일을 실행히시키면 아 ㅋㅋ 자바를 안깔았네... 이클립스는 자바를 깔아야 실행할 수 있다. 자바 설치와 환경변수는 아래에서.. https://hello.. 2021. 11. 9.
[HTML/CSS] 표 그리기 <table> <tr> <th> <td> border 테두리 제목1 제목2 내용1 내용2 ㅎㅎ ㅋㅋ 웹개발을 하다보면 빠질 수 없는게 저러한 형태의 표. 테이블이다. 게시판 뭐 뭐 아무튼 등등 많이 쓰이는데 아무튼 잘 모르겠고 알아보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 제목1 제목2 내용1 내용2 ㅎㅎ ㅋㅋ cs 맨 위에 테이블은 위에 코드로 작성했다. html은 1행 : 은 뭐 테이블을 의미한다. 표. border="1" border는 테두리 선을 그려준다. 굵기를 1로 잡아줬다. border를 빼고 작성하면 아래와 같이 그려진다. 제목1 제목2 내용1 내용2 ㅎㅎ ㅋㅋ 2행 : th나 td가 안에 들어갈 수 있으며 한 행을 의미한다. 위에는 을 세개를 작성해서 총 3행이 있다. 3, 4행 : table의 head 제목이다. 안에 2021. 8. 21.
Go Lang 시작 설치, IntelliJ 개발 환경 설정 Go 언어 공부를 시작해보려 한다. Go의 장단점 이런건 전무하고 그저 요즘 핫하다는 세간의 말만 들어본 상태이다. 전혀 어떤 언어인지 뭔지 모르지만 나한테 필요한지 어떤지도 모르겠지만 공부차원으로 시작해본다. 아래 링크에서 우선 Go 언어를 설치한다. https://golang.org/dl/ Downloads - The Go Programming Language Downloads After downloading a binary release suitable for your system, please follow the installation instructions. If you are building from source, follow the source installation instructions... 2021. 7. 25.
[HTML/CSS] 시작 <head> <body> <h> <p> <a> 맛보기 HTML 에이치티엠엘 HyperText Markup Language 있어보이려면 알아둬도 좋지만 몰라도 상관없다. 아무튼 웹페이지를 그리는 언어이며 이 블로그 또한 HTML언어로 이루어져 있다. 더럽게 하기 싫은 공부지만 하나하나 차분히 해보려 한다. VS Code로 html공부를 할 것이므로 없으면 설치하길 권장. 다른 툴도 있지만 널리 주로 쓰이는 툴을 사용하는게 편하다. VS Code에서 우선 .html파일을 생성한다. 그리고 html:5 를 입력하고 여기서 tab 을 누르면 이쁘장한 기본 틀이 완성된다. 크게 보면 태그와 태그가 있다. 머리와 몸이다. 이 태그들을 태그가 감싸고 있다. 그렇구만.. html에는 자바 스크립트, css 등등도 작성을 하는데 보통 head에 작성한다. 물론 body에 .. 2021. 5. 7.
HTML&CSS Visual Studio Code 기본 설정 (쓸만한 확장 설치) 응당... 웹개발자라 함은 퍼블이 아니라 하더라도 기본적인 html/css는 알아야 한다. 그래야 하지만 제일 귀찮다고 생각하기도 한다. 아니 뭐 씨 프로그래밍은 오류라도 띠용해서 이거 안됨! 이러는데 html/css는 아니 나 그렇게 안될껀데? 하면서 이유도 안알려주고 괘씸하게 적용이 안된다. 뭐 아무튼 어떻게든 이리저리해보면 되겠지만.... 아무튼 html/css 공부를 시작하기 전에~ VS code를 설치하면 된다. code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging moder.. 2021. 5. 6.
[spring boot-1] 이클립스로 스프링부트 시작하기 개발환경 잡기 스프링부트로 간단하게 개발공부를 시작해보려 한다. 여기 들어오신 분들이라면 다들 이클립스, 자바는 설치되었으리라 생각이 된다. 하지만 호옥시 아직 설치 안하신 분들이 있다면 (참고로 이 포스팅에선 Eclipse 2020 12 버전, 자바 11 SE 버전) 이클립스는 여기 hellodoor.tistory.com/106 자바 설치 및 환경변수 설정은 여기 hellodoor.tistory.com/105 를 참고해 주세용~~ 먼저 이클립스를 실행시켜 주시고 상단에 Help -> Eclipse MarketPlace 클릭 sts 검색 후 Spring Tools 4 Install클릭하여 설치한당. accept하고 Finish 클릭 Restart Now 클릭~ 자 그러면 이제 시작해보자. File -> New -> O.. 2021. 2. 18.

티스토리툴바