개발
-
(국비교육) 53 - 타임리프 + 부트스트랩 4 + 회사로고 만들기개발/국비교육 2023. 8. 16. 21:25
■ 타임리프 타임리프 압축 파일을 가져온다. 타임리프 쓸거야 설정해주기 타임리프 사용 시 th: 을 붙여서 사용한다. ■ 회사로고 만들기 https://mybrandnewlogo.com/ko My Brand New Logo — 로고 메이커 — 브랜드 디자인 은 무료 온라인 로고 메이커입니다. 자동 로고 생성기로 완벽한 비즈니스 로고를 디자인하십시오. mybrandnewlogo.com ■ 암호화하기 데이터베이스에 저장한 내용을 다른 사람이 읽지 못하게 할 것이다. (암호화) 평문을 암호문으로 바꾸는 것이다. 왜냐하면 해커가 db에 접속했을 때 개인정보(비밀번호)와 같은 내용을 보지 못하게 하기 위함이다. ■ 부트스트랩 이어하기 javascript 에서 쓸 때 선택자 querySelector input 창을..
-
(국비교육) 52 - 부트스트랩 3개발/국비교육 2023. 8. 11. 09:36
■ 로그인 창 만들기 정부처럼 다음과 같이 붙일 수 있다. jsp 넣어주기 다음과 같이 login 뒤에 sik 이 붙는다. ■ 글쓰기 만들기 form 을 id 로 잡아주고 두 검사가 끝나야지만 보내주도록 만들어준다. dto 변수에 값 담아주고 그 값을 db 에 저장해줄 것이다. 타이틀, 컨탠츠, mid, bip 를 넣을 것으로 다음과 같이 적어준다. mid는 조인값으로 서브쿼리를 통해 받아온다. 밑에 #{ } 은 dto 값을 가져온 것이다. 따라서 추가적으로 set 을 통해 bip 로 dto 에 값도 넣어준다. ■ 조회수 만들기 number 로 묶어줘야 숫자로 인식해서 숫자가 올라간다. ■ html 을 통해 이미지를 넣어준다. 값 들어오는 것 확인 가능 del 이름 정해주기 원래 html 이 아니라 새로..
-
(국비교육) 51 - 부트스트랩 2 + 모달 + json설정 + ajax + summernote + 네이버 smarteditor개발/국비교육 2023. 8. 10. 17:37
■ 부트스트랩 이어하기 초기설정을 해뒀기 때문에 resultType 을 BoardDTO 로 짧게 줄여쓸 수 있다. 모달에 해당하는 id 에 효과를 주면 버튼을 누르면 나오게 된다. 모달 크기를 크게 키울 수 있다. modal-footer 지우면 아래 버튼들 사라진다. 본문 내용이 나온다. 해당 첫 번째 값도 출력된다. 제목값도 뽑을 수 있다. 댓글 8개로 1자리로 1이 나온다. -comment : -를 붙이면 comment 길이 수만큼 뺀다는 것이다. 이렇게 설정하면 길이수만큼 slice 하게 돼서 댓글수는 표시 안할 수 있다. 단, 아래에도 공백을 주면 그 부분도 잡기 때문에 반드시 붙여서 작성해야 한다. 제목, 이름, 날짜, 읽은수 찍어준다. 내용은 ajax 로 가져올 예정이다. bno 값 나오는 것..
-
(국비교육) 50 - 이클립스 내부에서 DB 보기 + 스프링부트 + 부트스트랩 이용하기 + 모달 + 룸북개발/국비교육 2023. 8. 9. 17:27
■ 이클립스 내부에서 마리아 db 정보 보기 마리아 디비가 없어서 mysql 로 검색해도 나온다. 내가 사용하는 5.1 버전 클릭 JAR 에서 마리아 디비 넣어주기 드라이버 설정해주기 다음과 같이 연결된다. 명령주고 명령값 확인 가능 ■ 이클립스 내부에서 db DBeaver 정보보기 위에는 서버명, 밑에는 아이디 적어준다. 그대로 다운로드 연결확인 ■ 스프링부트 만들기 첫 인덱스 getmapping 처리하기 하위 경로에 있는 jsp 를 읽어들인다는 뜻이다. 다음과 같이 설정한다. 밑에 주석처리는 위에 runtimeOnly 와 내용 동일하기 때문에 주석처리한다. plugins { id 'java' id 'org.springframework.boot' version '2.7.14' id 'io.spring...
-
(국비교육) 49 - project1 이어하기16 ( 댓글 글자수 세기 + 스프링부트로 만들기)개발/국비교육 2023. 8. 8. 17:57
■ 댓글쓰기 몇 글자 썼는지 확인하는 코드 keyup : 키를 놓을 때 이벤트가 발생합니다. 입력창의 값의 길이를 텍스트에 저장한다. 그리고 이것을 버튼 창에다가 출력한다. 키 600자 이상 입력 시 막는 것도 가능하다. 버튼 분리도 도전해도 된다. https://developer.mozilla.org/ko/docs/Web/API/Element/keyup_event Document: keyup event - Web API | MDN **keyup**키를 놓을 때 이벤트가 발생합니다. developer.mozilla.org 100글자 초과도 막을 수 있다. 입력된 값의 값을 가져올 때 input 이나 textarea 는 val() 을 사용해서 값을 가져온다. 가져온 값의 0부터 100까지 길이를 가져오고 ..
-
(국비교육) 48 - project1 이어하기15 ( 댓글 삭제하기 자바스크립트 + jquery + ajax) + 깃허브 조직 추가개발/국비교육 2023. 8. 7. 17:15
■ 자바스크립트로 댓글 수정/삭제 버튼 생성 이름 뒤에 수정 삭제 이미지 붙여주기 이제 해당 글 주인일 경우에 수정 삭제할 수 있도록 로직 설정해줄 것이다. 온클릭 이므로 자바스크립트로 처리해야 한다. cno cno 변수명 일치시켜줘야 한다. cno 는 onclick 으로 들어온 ${c.c_no} 값이 들어간다. map 을 통해 확인할것이다. 어차피 bno cno 만 받으니까 object 대신 integer 로 해도 된다. 세션에 담겨있는 mid 를 통해 로그인 여부를 검사한다. 숫자인지 아닌지 확인하는 것을 util 에 만들어준다. 오브젝트 타입 string 으로 바꾸는 것은 String.valueOf() 이다. String 타입을 다시 인티저일 경우 true 처리 해준다. 이제 util 을 통해 bn..
-
(국비교육) 47 - project1 이어하기14 (개발/국비교육 2023. 8. 4. 17:51
■ StarUML 데이터베이스 구조 설명할 수 있는 소프트웨어 StarUML 이다. https://staruml.io/ StarUML UML 2 Compatible with UML 2.x standard metamodel and diagrams: Class, Object, Use Case, Component, Deployment, Composite Structure, Sequence, Communication, Statechart, Activity, Timing, Interaction Overflow, Information Flow and Profile Diagram. SYSML SUP staruml.io Data Model 클릭 Entity 클릭 후 빈화면 클릭 다음과 같이 데이터 구조를 그릴 수 있다..
-
(국비교육) 46 - project1 이어하기13 (JSON view + 페이징 처리 + 댓글 기능)개발/국비교육 2023. 8. 3. 18:43
■ json 배열 그냥 내보내면 ajax 가 형식이 맞지 않아 못받기 때문에 json 으로 바꿔준다. json 객체를 만들어주고 배열도 만들어준다. 그리고 리스트 맵타입을 제이슨 배열에 담아준다. 이 배열을 다시 json 에다 담아주고 출력해주면 정상 출력된다. * 에러해결 나의 경우 배열에 list 를 담지 않아서 뜨지 않았다. 추후에 다음과 같이 사용하여 페이징 처리할 예정이다. 이제 json 에 넣고 출력하면 다음과 같이 나온다. 즉 다음과 같이 객체 안에 객체가 있는 형태이다. 안에 값을 변수를 통해 부를 수 있으며 객체 안의 객체는 변수의 배열로 부를 수 있다. 다음과 같이 글이 안이쁘게 나온다. json 형태로 예쁘게 보여줄 수 있다. https://chrome.google.com/websto..