용굥이의 끄적끄적 프로그래밍 일지

캘린더형 메모 만들었음

용굥이 — Sat, 23 May 2026 17:49:53 +0900

만들기 시작한 이유

1. 노션으로 사용하기엔 너무 복잡하고 뭔가 애매한 불편함이 있음

2. 그냥 언제 뭐했는지 체크하고, 언제 뭐가 있는지 체크하기 위한 간단한 메모가 필요했음

> 날짜 클릭해서 그냥 뭐했는지 어떻게 했는지 메모하기 위함

3. 주간보고를 쓰기 위함 ㅋㅋ

그냥 딱 보기 편하게 만든 달력형 메모임

공식 공휴일은 빨간날로 쳐놓는게 편할거 같아서 표시해둠

오른쪽 이미지처럼 일정을 등록할 일자를 클릭하면 이처럼 메모할 수 있도록 나옴

일정을 등록할 일자를 클릭하면 이처럼 메모할 수 있도록 나옴

텍스트 형식, 체크박스로 할일 등록, 혹시 사용할 수도 있는 표를 넣어둠

작성하다가 아래 추가하면 맞춰서 칸이 늘어나고,

텍스트 입력할 때 부족할 수 있는 넓이를 조절할 수 있게 함

이런식으로 기간을 지정해서 표시할 수도 있게 함

메모를 표시할 때 원하는 색상으로 변경도 가능하고,

회사 업무일정을 등록하기 위해 만든거긴 하지만 개인 일정도 같이 등록할 일도 있을 것 같아서 업무, 개인 을 구문해서 표시할 수 있게 해놨음

일정 등록했을 때 텍스트는 미리보기가 가능하게 하고, 할일이 등록되어 있을 땐 갯수로 표시하여 몇개가 있고, 몇개를 수행했는지도 확인이 가능하게 함

오늘 할일을 등록했을 때 당일에 맞는 할일이 상단에 표시하게 하여 한눈에 볼 수 있게 해놓음

메모에서 편집 : 해당 일자를 선택해도 되지만, 상단에서 메모에서 편집 버튼을 클릭할 시 일자 위로 입력 가능한 창이 나타남

DB 가 없이 사용할 수 있는 진짜 간편한 메모를 만들기 위해서 생각해본 방법임

처음 시작할 때 그 백업 파일을 생성해놓으면 그 파일로 연결되어 계속 사용이 가능함

백업 파일과 연결이 됐는지 안됐는지 눈에 보이게 파악이 필요하여 백업 연결이 됐을 시 "백업 연결 됨" 이라는 문구로 표시함

불러오기와 내보내기가 가능한데, 한번에 입력해서 불러온 다음부터 사용하고 싶은 사람은 샘플 파일을 다운받아서 작성한 후 불러오면 해당 일자에 맞춰서 입력이 됨

json 형태로 만들어서 백업본을 만들고 내보내기가 가능하며, 양식에 맞게 작성한 후 불러오기도 가능함

라이트 모드와 다크모드를 함께 사용할 수 있게 하여 각 취향에 맞게 사용할 수 있음

사용하는거에 있어서 내가 어떤 내용으로 메모를 입력해놨는지 기억이 안나는 상태에서 기간을 설정하여 내용을 입력하면 모든 내용을 확인해서 검색할 수 있게 만

마지막으로 사용하기 어려운 사람들을 위해 사용가이드를 함께 제공하여 쉽게 사용 가능하게 만들어 놓음!!

사용 기술

HTML
CSS
JavaScript
Electron

개발 생산성 향상을 위해 Cursor, OpenAI의 ChatGPT, Anthropic의 Claude 활용

[이클립스] input 검색 이벤트 작동

용굥이 — Wed, 3 Apr 2024 11:33:41 +0900

input 검색기능

- 상황

input 박스 안에 입력했을 때 엔터 사용 시 검색이 될 수 있게 함

→ 검색이 되지 않고 계속 입력한 내용이 사라짐

관리번호 입력 후 검색 버튼 클릭 : 아래 결과리스트 나옴

관리번호 입력 후 엔터 : 결과리스트에 나오지 않고 초기화 됨

1. onkeypress 를 넣어서 작동할 수 있게 함

- 결과리스트 갯수는 동일하게 나오나 내용은 나오지 않는다.

- 계속 입력한 값이 사라짐, 근데 갯수는 계속 변경되면서 입력한 값에 맞춰서 검색이 됨

2. form 안에 있는 input 과 button 이 두개 다 들어있음

- 다 들어있을 때 input 에는 type 이 지정되어 있지만 button 에는 type이 정해져있지 않음

button 에 type 을 지정해주지 않으면 기본값 submit 으로 셋팅되어 있음

여러개의 버튼이 있을 때 타입을 지정해주지 않으면 어떤걸 실행시켜야 되는지 몰라서 맨 앞에 있는 버튼이 실행 됨

[이클립스] 이벤트 기능이 어디에 걸려있지?

용굥이 — Wed, 3 Apr 2024 11:05:43 +0900

2024.04.03

작업을 하다보면 이벤트가 어디에 걸려있는지 못찾아서 헤맬때가 있다

그럴때 콘솔을 사용해서 알아낼 수 있다.

$_data($("question")[0]."events")

이렇게 쓰면 된다.

-----------------------------------------------------------------------------------------------------------------------------------

게시글 한참 안올렸는데 이제 다시 올리기 시작해야겠다

안올린 이유는,, 그냥 바쁜것도 있었고,,

티스토리랑 노션이랑 여기저기 쓰면서 뭐가 나은지 파악하는 기간? 도 있었는데

난 좀 아날로그 식이 좋아서 그런가,, 메모도 공책에 하는게 편하다 ㅎ..

노션도 손에 익으면 편할 것 같긴한데 이게 더 나을 거 같아서 그냥 이제 여기다 쓰려고 한다

당분간은 또 몇개 좀 올릴듯? 화이팅해보자!! 성장하는 개발자!!!!!

-----------------------------------------------------------------------------------------------------------------------------------

2025.08.26

위 내용을 보면 클릭이벤트를 못찾아서 작성을 해놓은게 있네..

24년 연경이, 25년 연경이 다르다

어느덧 벌써 1년 10개월 차 개발자다

물론 유지보수 개발자지만 .. ㅋ

어쩔 난 유지보수가 재밌는걸

아무튼 클릭이벤트를 찾아서 다니는 방법 중,

개발자도구 사용해서 확인했을 때 오른쪽 Event Listeners > click

이쪽을 보면 클릭이벤트 함수가 어디로 이어져있는지 확인할 수 있다.

[이클립스] let, const 그리고.. var...

용굥이 — Wed, 3 Apr 2024 01:13:45 +0900

변수를 선언할 때 사용하는 let var const

얘네를 쓸 때 내가 쓰고싶어서 쓰는거? 아님

얘네도 규칙이 있다는 것이징~

한번 확인해 보기 위해 콘솔창에 찍어서 어떻게 나오는지 확인해 보겠다!

ex) let A = "hi!";

console.log(A);

hi! 라는 말이 출력됨

여기서 A에 hi 라는 말이 담김

이 A 를 가지고 다시 사용하면?

let A = "bye~";

이렇게 사용이 불가능함! 이걸 확인해 보기 위해 콘솔창에 한번 적어보았다!

콘솔창에서도 확인이 가능하다.

에러 뜻은 변수 선언 오류로 난 것이다!

그럼 const 는?

위에 이미지와 같이 const 도 재선언이 불가능하다!

이제 남은건 var 인데 var 도 한번 해보겠당~

이렇게 콘솔창에 확인을 해보았다.

결론은?

let, const : 재사용 불가능

var : 재사용 가능

MVC 패턴이란?

용굥이 — Tue, 19 Mar 2024 10:57:39 +0900

MVC 패턴 : Model - View - Controller 의 약자로, 개발할 때 3가지 형태로 역할을 나누어 개발하는 방법론

- 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴

- 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고있으며, 이러한 관심사 분리는 더 나은 업무와 향상된 관리를 제공한다.

Model?

- 소프트웨어나 어플리케이션에서 정보 및 데이터 부분을 의미한다.

- Controller 에게 받은 데이터를 조작(가공)하는 역할을 수행한다.

- DB와 연동하여 사용자의 데이터를 다룸으로 무엇을 할 것인지 정의하는 부분

- 데이터 저장소와의 상호 작용, 데이터 처리 및 유효성 검사와 같은 작업을 수행함.

- 독립적으로 사용하며, 뷰와 컨트롤러와 직접적으로 통신하지 X

Model 이 가지는 규칙

1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.

2. 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 한다.

3. 변경이 일어나면 변경 통지에 대한 처리방법을 구현해야 한다.

View?

- input텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타낸다.

- 데이터 및 객체의 입력과 출력을 담당, 사용자에게 시각적으로 나타내는 화면이다.

View 가 이 가지는 규칙

1. 모델이 가지고 있는 정보를 따로 저장해서는 안된다.

2. 모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 한다.

3. 변경이 일어나면 변경 통지에 대한 처리방법을 구현해야 한다.

Controller?

- 사용자가 데이터를 클릭하고 수정하는 것에 대한 "이벤트" 들을 처리하는 부분을 뜻한다.

Controller 가 이 가지는 규칙

1. 모델이나 뷰에 대해서 알고 있어야 한다.

2. 모델이나 뷰의 변경을 모니터링 해야 한다.

MVC 패턴의 장단점?

장점 : 비교적 간단한 패턴으로 구조파악과 확장을 쉽게 할 수 있다.

단점 : 뷰와 모델의 완벽한 분리가 어렵고, 앱이 커지면 컨트롤러의 코드량이 커져 유지보수가 힘들다.

[Linux] 리눅스 따라해보기

용굥이 — Tue, 14 Nov 2023 15:41:15 +0900

오랜만에 올리는 게시글이다.

국비 학원 수업이 끝나고 이후에 다른 프로젝트 준비를 한다고 바쁘게 지내다 취업을 해서 다시 또 한번 써보려고 이렇게 게시물을 올린다.

학원에서 자바 언어를 배우고 웹개발을 하기 위해 스프링을 배우면서 리눅스 aws 를 배우고싶었는데 입사 후 aws 기반의 리눅스를 알려주셨다.

지금 올리는 게시물은 리눅스를 사용해서 따라해보는걸 올릴 것이다.

Process 관리

1. ps (process)

- > 현재 진행중인 프로세스에 대한 정보를 출력

2. pstree (process tree)

- ps 에 의해서 출력되는 프로세스 정보를 트리 형태로 나타냄

+ pstree 부분을 입력을 했는데

이런 오류가 났다. 3번이나 엥 하면서 써봄 ㅎ

계속 같은 오류가 나서 검색해보니까 yum -y install psmisc 라는 문구를 써보라해서 써봤는데!!

또 안된다,, 그와중에 한번 더 시도해봄 ㅎㅋ..

안되길래 동기찬스 써서 물어보니까 업데이트 하면된다고 해서 업데이트를 진행해 보았다.

sudo yum update 라는 걸 쓰면 업데이트 하고 된다고 해서 해봤다.

이런 화면이 막 뜨면서 업데이트가 되는거같다!

이렇게 업데이트 얼마나 됐는지 알려주고 y/d/N 중 입력하라길래 y 입력하니까

이런게 또 막 뜬다!

[프로젝트] 게시판 만들기

용굥이 — Sat, 12 Aug 2023 01:04:12 +0900

만들기 전 내용을 작성하고나서 팀프로젝트에서 게시판을 맡게 되어 글을 작성한다.

만들기 시작한건 좀 되었지만 팀프로젝트에 매진하다보니 작성이 늦춰졌다ㅠㅠ

차차 작성을 해주면서 아래에 계속 추가하여 작성할 예정이다.

작성한 기록은 일단 적어둘 예정인데 지울 생각이 있긴 하다 ㅎㅎ

08.12

맨 처음 만들기 전에 팀프로젝트로 ERP 를 하기로 했다가 그룹웨어로 바뀌었다. 하지만 게시판은 어디든 거의 대부분 들어가는 부분이라서 프로젝트 이름만 변경하고 만들어 나갔다.

우선 Spring.io에서 프로젝트를 셋팅해서 만들어주었다.

Dependencies : wdb, mybatis, lombok, mysql, thymeleaf, devtools

이렇게 여섯가지로 다운로드 받아주고 나서 실행을 시켰다.

컨트롤러를 먼저 생성만 해주고 board 폴더를 생성한 후, html 파일을 만들어주고 코드를 작성해주었다.

html 에 jquery 가 필요하여 선언문을 넣어주었다.

이렇게 선언문을 작성해주고 아래 작성페이지로 코드 작성해주기 시작했다.

여기서 jquery 를 넣어주는 이유는 html 를 작성할 때 조작이 쉽게 바꾸어주는 라이브러리이다.

작성페이지에서 저장하기, 목록, 메인페이지를 만들어 주었는데,

여기서 저장하기는 버튼, 목록과 메인페이지는 a 태그에 넣은 후 버튼 타입으로 지정하여 만들어주었다.

버튼을 만든 다음 깔끔하게 보여주기 위해서 버튼 디자인을 간단하게 먼저 해주었다.

일단 이렇게 만들어 주긴 했는데 작성페이지도 마저 꾸며주기 위해 코드 작성해주었다.

작성페이지에서 분류를 공지글과 일반글로 나누어서 만들어주었고, 제목과 작성자, 내용, 첨부파일이 들어갈 수 있도록 작성해주고, css 도 함께 작성해 주었다.

작성페이지에 내용을 적는 곳에 디자인을 해주기 위해 에디터 다운로드를 할 수 있는 사이트에 들어가서 적용을 시켜주었다.

zip 을 다운로드 받아서

ckeditor js 파일과 Map 파일을 복사하여 인텔리에지 폴더에 붙여넣어 주었다.

jquery 문을 선언해준 것과 마찬가지로 선언해주고, 바로 위에 style 적용 및 script 로 선언해주었다.

위의 이미지를 확인해보면 에디터 적용해준게 잘 들어간 걸 확인할 수 있다.

적용하고 나면 글꼴의 디자인을 설정할 수 있고, 표나 이미지 등 많은 기능을 넣을 수 있게 만들어 주었다.

내용 작성주는 칸이 작아서 스타일로 바로 적용하기 위해 작성해주었다.

스타일도 잘 적용되었다.

다음으론 Dto 를 만들어서 작성해주었다.

BoardDto

어노테이션을 걸어 Data 로 게시판에 들어갈 내용들을 만들어 주었다.

write.html

작성페이지에 조건을 걸기 위해 제목을 입력하지 않으면 넘어가지 않도록 먼저 작성한 다음 실행을 시켜 보았다.(주석 참고)

확인하는 것과 같이 제목을 작성하지 않고 저장버튼을 누르게 되면 제목을 작성하라는 문구와 함께 팝업창이 뜨게 된다.

write.html

제목을 확인했으니 아래에 작성자와 내용이 빈칸이 되면 넘어가지 않도록 조건문을 만들어주었다.

myEditor 에 값이 없으면 제목, 작성자, 내용 입력 안하면 넘어가지 않게 하였고, value 값을 가져오게 한 다음 콘솔에 내가 넣은 내용이 잘 넘어오지 확인해 보았다.

내용을 작성해주고 저장하기 버튼을 눌러주면 옆에 콘솔창에 잘 넘어가는걸 확인할 수 있다.

write.html

나오는걸 확인해주고나서 ajax를 작성해 주었다.

ajax 는 함수라고 생각을 해주면 된다.

html이 어떤 타입인지 작성을 해주는건 컨트롤러에서 확인을 했을 때 PostMapping 을 걸어주었다면 post 타입으로 작성해 주면 되는 것이다.

url 은 페이지가 어떤 링크로 넘어가게 되는지 작성하는 것이고, 저장버튼을 눌렀을 때 작성한 내용이 잘 넘어간 경우에 '게시물이 저장되었습니다' 라는 팝업창이 뜨면서 리스트 페이지로 넘어갈 수 있게 만들어 주었다.

BoardController

앞에 ajax 에서 타입을 post 를 작성해주었으니 Controller 파일을 열어서 write 로 넘어가는 PostMapping 으로 작성해주었다. MultipartFile 은 파일을 첨부했을 때 그 파일을 저장하기 위해서 작성을 해주는 것이다.

application 파일을 열어서 파일을 넣었을 때 사이즈와 저장될 경로를 지정해주었다.

사이즈는 내가 원하는 사이즈로 지정을 해주면 되는 것인데 용량이 클수록 프로그램이 조금 느려진다.

BoardController

컨트롤러 파일로 넘어가서 위쪽에 Value 로 UPLOAD_LOCATION 선언을 해주어 프린트를 작성해서 파일 저장 경로에 잘 맞춰서 나오는지 확인해본다.

게시판 작성페이지에서 파일을 넣어서 저장하기 버튼을 눌러서 확인을 해보았을 때 경로가 잘 나오는지 확인을 했다.

확인을 했으니까 프린트를 지우고 원본파일이름, 원본파일용량, 원본파일의 이름을 다른 이름으로 저장될 이름을 나오게 코드를 작성해 주고 프린트로 확인을 해보았다.(코드 작성한 캡쳐본이 없어요ㅠㅠ)

png 파일을 넣고 저장하기를 눌렀을 때 위의 이미지에 나와있는 것처럼 파일의 정보가 잘 맞춰서 나온다.

확인했으면 예외처리를 위해 try, catch 문을 작성해주었다.

BoardController

try 문 안에 if 로 조건문을 걸어주었고, 업로드를 했을 때 파일 원본이름을 확인하고, 파일 사이즈와 변경된 이름을 나오게 하는 코드를 작성해 주었고, Dto 에 적어놓은 변수이름을 작성해주었다.

확인하기 위해서 프린트로 첨부파일 넣어서 확인해보기!

확인해보면 잘 나오는거 확인했다! 확인했으면 이제 파일 첨부를 해서 지정한 경로에 잘 들어가는지 확인해보겠다

파일선택을 해서 아무 이미지 파일을 선택해서 넣어보았다.

미리 캡쳐를 해놓은 사진이라 날짜는 무시하고 ㅎㅎ 사진이 잘들어갔는지 확인했다!

사진 넣은 날짜에 맞춰서 폴더가 생성이 되면서 파일이 들어가고, 넣었을 때 파일 기존 이름이 아니라 이름이 변경되면서 들어가게 된다.

위에서 파일 첨부해서 프린트로 확인했을 때 파일 첨부한 내용 말곤 전부 null 로 나왔었는데 Mapper 가 작성이 다 안되어서 나온 것이다. 그래서 수정해주었다.

BoardMapper

메퍼를 위의 이미지처럼 Insert 로 어노테이션 작성을 해주고 Dto에 작성했던 변수를 같이 넣어주었다.

아래 Select 로 걸어준것은 리스트에 표시하기 위해 작성해 놓은 것이다.

메퍼를 작성해주고 실행시키기 전에 컨트롤러에 들어가서 추가로 입력해주었다.

이전에 폴더생성될 때 올린 날짜에 맞춰서 저장되게 작성해 놓은 코드이다.

아래에 저장이 완료되면 메세지가 뜨게 추가로 작성해 준 것이다.

게시물이 저장되었다는 팝업창이 뜬다.

[인텔리제이] maven 메이븐 view 가 안보일때

용굥이 — Tue, 25 Jul 2023 15:29:04 +0900

새로운 프로젝트를 만들기 위해서 스프링 이니셜라이저에서 다운받아서 인텔리제이로 열었다.

근데 프로그램 실행 버튼이 비활성화 되어 있고, 폴더는 만들어지지만 새로운 클래스 파일은 안만들어지길래 확인해보니

메이븐이 안보였다. 이럴땐 pom.xml 에 우클릭 > + Add as Maven project 선택

생성 완료!

다음 클래스로 되어 있는 Application 우클릭 > Run 실행

[프로젝트] 게시판 만들기 / 들어가기 전에

용굥이 — Sat, 22 Jul 2023 18:04:05 +0900

시작하기 전에, 유튜브 보면서 게시판 만들기 따라하다가 프로젝트로 넣으려고 했는데 프로젝트랑 다르게 진행을 하여서 바꾸려고 했는데 바꾸는 것 보단 그냥 다시 하면서 일부 필요한 코드만 가져와서 해보려고 한다.

이 게시판 만드는 것은 학원 수업에서 내 프로젝트 담당하는 게시판 만들기를 진행하는 걸 작성하려고 한다.

spring.io 에서 다운받았다.

Depencies(start.spring.io) : wdb, mybatis, lombok, mysql, thymeleaf, devtools

그 전에 회원가입이랑 다른 폼들 이미 만들어 놓은 상태이고 게시판 만든 내용부터 작성할 것인데, 일단 우선 만든 코드 말고 폼만 이미지로 넣어놓고 설명하려고 한다.

회원가입과 로그인 페이지 화면이다.

둘다 빈 칸이 있으면 넘어가지 않고, 회원가입에 있는 부서를 선택해야 직책이 나타나고 직책을 선택하면 회원가입이 완료된다.

관리자 계정으로 로그인을 하면 admin 관리자 페이지로 넘어가게 되고 일반회원이 로그인 하게 되면 홈 으로 넘어간다

관리자 페이지 / 일반 홈페이지

홈페이지는 이미지에 나와있는 것 외엔 따로 없고, 관리자 페이지를 확인해보면 카테고리, 사원관리, 게시판 관리, 페이지 관리 이렇게 만들어 놓은 상태이다.

게시판 관리 제외 한 나머지를 확인해보자면

카테고리

카테고리 페이지이고, 부서명을 보면 아래 4가지 부서가 있다.

VIEW 누르면 각각 팀의 직급이 나타난다.

카테고리

사원관리

사원관리 페이지로 넘어가면 현재 등록되어 있는 사원 목록을 확인할 수 있고, 지정해놓은 갯수를 넘어가게 되면 페이지가 자동으로 생성되면서 2,3 페이지 이상으로 생성이 된다.

IMAGE UPLOAD 를 클릭하게 되면 원하는 프로필 사진을 등록할 수 있다.

상세보기를 클릭하게 되면 위와 같은 페이지가 나타나게 되는데 여기서 사원 등급이 Level7 로 되어 있는데 관리자만 가질 수 있는 레벨로 설정해 놓은 상태이고 새로운 회원으로 가입을 한다면 default 값은 Level 1 로 설정을 해놓았다.

Level 7 관리자인 경우 삭제를 할 수 없게 만들었다.

레벨 차이를 보기 위해 새로운 계정을 생성해주었다.

확인한 결과 삭제도 가능하고 레벨은 1로 기본설정 되어 있는 것과 맞게 생성되었다.

게시판 관리로 넘어가면 새 창으로 게시판 리스트 화면이 뜬다.

새 글을 작성해 준 다음 캡쳐한 내용이다.

글쓰기 버튼을 누르면 위와 같은 창이 나타나게 되고, 분류는 일반과 공지글로 나누어 작성할 수 있게 하였다.

리스트를 확인해보면 일반글로만 작성을 해놓았고, 게시글을 눌러서 들어가게 되면 조회수가 올라가고, 첨부파일 유무에 따라 아이콘이 생성되어 미리 리스트에서 확인할 수 있다.

번호쪽은 내림차순으로 정렬되어 생성이 된다.

만약 공지글을 띄우면?

공지로 표시를 할 수 있게 된다! 여기서 일반글을 작성하게 되면 공지글 밑으로 나오게 되고, 공지글과 일반글을 왔다갔다 작성을 하여도 공지는 맨위로 나오게끔 만들어 주었다.

제목을 확인해보면 [원본글] 이라고 나오게 만들어 주었는데, 이유는 해당 게시글에 답글을 달 수 있도록 만들어 주었기 때문이다.

해당 게시글을 클릭하게 되면 답글달기라는 버튼이 있는데 이걸 눌러서 답글을 달게 된다면?

앞에 R 이라는 아이콘이 생성되면서 원본글 바로 밑으로 나오게 만들어 주었다.

그리고 아래에 2페이지가 생성이 되었는데 그 이유는 전 일반글입니다 라는 글이 다음 페이지로 넘어갔기 때문이다.

다음으로 다중게시판은 만들지 않았고, 페이지 관리로 들어가게 된다.

페이지 관리는 관리자페이지가 아닌 일반 사원들이 로그인하면 보이는 홈 화면을 설정해 주는 것이다.

내용은 학원 이름이 나왔기 때문에 모자이크하였당

학원에서 만든건 이정도이다.

프로젝트를 만들때 학원에서 만든걸 토대로 게시판을 만들었다.

이제 게시판 만든 과정을 작성해서 올릴 예정이다!

[스프링] 팀 프로젝트 - 게시판 만들기

용굥이 — Sat, 1 Jul 2023 02:47:47 +0900

국비지원 학원 수업을 듣고 있는데 학원 수업 이외에 나 혼자 뭔가 만들어보고싶다? 공부하고싶다? 싶어서 유튜브에 찾아보니 게시판을 만드는 내용으로 무작정 따라하면서 만들 수 있는 영상을 찾았다.

그래서 게시판을 따라서 만들어보는 내용으로 한번 천천히 만들고 있었는데 팀 프로젝트를 시작하면서 게시판 만드는걸 이어서 해보기로 하고 만들기 시작했다.

먼저 사용하기 전에 학원에서 인텔리제이를 사용하면서 배운 내용을 사용하기 위해 인텔리제이를 다운로드 해 놓은 상황이었기 때문에 start.spring.io 에서 다운받는 내용부터 따라하기 시작했다.

위에 나와있는 내용으로 다운을 받았는데 영상이랑 조금 다르게 다운 받았다.

이유는 영상에 나와있은 버전들도 그렇고 지금 현재 1년이라는 시간이 좀 차이가 나서 내가 쓰는 프로그램 버전 등 설정을 맞춰주었고, Dependencies 를 Spring Web, Spring Data JPA, MySQL Driver, Thymeleaf, Lombok 이렇게 다섯가지로 다운받았다.

여기서 학원에서 사용해본 것도 있고 아닌 것도 있지만 일단 따라 다운로드를 해주었다.

영상에서 차이점은 영상은 마리아DB 를 사용했지만 내가 쓰는 pc에는 MySQL 을 설치해서 사용하기 때문에 그거에 맞춰서 설치를 해주고 진행해주었다.

파일이 다운로드가 되면 압축파일로 다운로드가 되는데 압축을 풀고 불러와서 프로젝트 생성을 해주었다.

만들어가다가 글을 쓰게 된 내용이라 중간부터 시작된 점은 참고.

지금 현재 진행상황은 아래와 같다.

게시판에 내용을 넣어서 확인할 수 있는 리스트파일(list), 수정할 수 있는 수정파일(modify), 리스트에 있는 내용을 확인해서 클릭하여 들어가면 클릭한 내용에 맞춰서 표시되는 뷰 파일(view), 글을 작성할 수 있는 파일(write) 을 만들어서 html 을 작성한 상태이다.

여기서 확인할 게 있다면 write 는 새로운 글을 작성하게 만들어 놓은 것은 아니고, 수정할 때 수정할 내용을 작성할 수 있는 화면을 나타내 주는 것이다.

각각 코드를 먼저 확인을 해보겠다!

우선 작성한 코드들 순서를 대충 확인하자면 html -> Controller -> entity -> repository 순서대로 왔다갔다 하면서 만들려고 노력했다.

끊어서 확인을 해보자면

html 화면을 작성해주고 Controller 를 작성해 주었으니 html 코드를 위처럼 작성해주었다.

확인해보면 메인페이지, 리스트 페이지 인걸 확인 시켜주는 글이 작성되어있는데 그 밑에는 다른 곳으로 이동할 수 있는 링크를 달아주었다.

Controller 를 만들어주어 위에 @Aotowired 를 달아주었는데 자바로 생각하면 기본 생성자라고 생각하면 된다.

아래 main 페이지와 list 페이지를 get 으로 만들어서 연결해주었다.

main 과 list 페이지를 만들고, 연결을 해주었으니까 디자인은 신경쓰지 않았지만..확인해보쟝..

포트번호를 7777 로 지정해주었기 때문에 앞에 7777 로 되어있고, 그 뒤에 내가 만들어 놓은 링크로 들어가면 위의 이미지처럼 메인페이지와 리스트 페이지가 나타난다.

게시판 리스트를 만들어주었고, 다음으로 작성 페이지를 만들어주었다.

디자인이 빠진 body 부분의 코드이다.

작성자와 제목, 내용이 꼭 들어가야된다고 생각하였기 때문에 세 가지 항목을 입력해야 되게 만들어주었다.

아래 등록 버튼을 만들어 주었고, 작성페이지에서 메인페이지와 리스트인 목록 페이지로 넘어갈 수 있게 버튼을 만들어 주었다.

위 쪽에 디자인을 살짝..했는데 ㅎ.. 먼저 확인해보쟈..!!

이미지가 좀 크긴한데 디자인은 신경쓰지 않고,,넣었다 ㅎ..

html 은 이렇게 만들었으니 결과물을 보자..(민망함)

쨔잔~~~!~!~ㅋㅋ 일단 이렇게 만들어놓고 디자인은 나중에 좀 만지구~ 여기에 입력하면 데이터베이스에 연결해서 들어갈 수 있게 만들어주었다.

먼저 데이터베이스랑 연결을 하기 위해 application.properties 부분에 코드 작성해주었다.!

나는 mysql 을 사용해서 따로 계정을 만들어서 넣기엔 다른 컴퓨터로 작업할 때 번거로울 것 같아서 root 로 연동을 해주었고, CMD 로 코드를 짜주었다.

등록할 때 자동으로 번호가 들어갈 수 있게 auto_increment 설정을 해주었고,

id(작성자), title(제목), content(내용), date(작성한 날짜) 를 만들어 주었다.

작성할 작성한 날짜가 표지되지 않지만 등록된 게시물 리스트에 나오게 하기 위해 넣었고, timestamp 로 찍히게 하였다.

그리고 입력한 내용이 db 에 들어갈 수 있게 entity 페이지에 Weberp 페이지를 만들었다.

get,set 을 사용할 수 있는 lombok 기능을 할 Data 를 달아주고, ID 기본키를 가지고 올 수있게 한다음에 코드를 작성해 주었다.

strategy : 전략을 어떻게 해줄거냐? 라는 뜻으로 IDENTITY 를 가져와서 사용할 것이다 로 달아주었다.

여기서 IDENTITY 는 마리아db, MySQL 에서 사용하는 것이다.

나는 MySQL 을 사용하기 때문에 IDENTITY 를 입력해 준 것이당

아래 private 으로 입력할 때 db 에 입력해줬던 create 문이랑 동일하게 맞췄고, mysql 입력할 땐 언더바 '_' 를 사용해 주었지만 대신해서 뒤에 알파벳을 대문자로 바꿔서 입력했다.

이유는? '_' 를 인식하지 못하기 때문에! 대문자로 대신 바꿔서 camel 문으로 작성해주었다.

이제 locarhost 로 들어가서 입력을 해보았다.

이렇게 작성을 해놓고 등록 버튼을 눌러보면?

이건 미리 만들어놓은 작성한 게시물 내용이 나오는 페이지이고, cmd 에 확인을 해보았다.

쨔쟌! DB에 잘 들어가는 걸 확인했다!!

나머지 html 을 확인해보자

boardwrite

이게 위에 나오는 게시물을 입력했을 때 내용이 출력되는 html 이다.

여기까지 만들었고, Repository 페이지는 우리가 db 에 insert 문과 delete 등 입력해야 되는 내용을 repository 에 입력해서 우리가 페이지에서 입력했을 때 db와 연동하여 나올 수 있게 해주는 페이지이다.

아직 여기까지만 입력해 놓은 상태인데, extends 를 사용하여 상속받는 뜻으로 입력해 주고, JapRepository 를 사용해 주었는데 이걸 사용함으로써 좀 더 검색이 잘 되게끔 하게 해주는 메소드라고 생각하면 된다!

미리 검색 메소드를 정의하여 이 메소드를 호출하는 것만으로 검색이 좀 더 잘되게 해주는 것이다.

그리고 뒤에 <> 로 안에 들어가있는 값은 Weberp 는 Entity 를 가져오는 것이고, Integer 는 기본기 primarykey를 뭐로 지정해주었느냐에 따라 입력을 해주는 것이다.

Repository 페이지는 여기까지만 입력해 주었고, Service 로 넘어간다.

위에는 Controller 에 달아준 것과 동일하게 기본생성자 Autowired 를 달고 선언해 주었다.

아래 메소드를 만들어 주었다.

위에 기본생성자 만들어놓은 boardRepository 를 가져와서 save 라는 걸 작성해 주었는데 save 는 entity 값을 가져올 수 있게 해주는데, write () 안에 Weberp 타입을 선언해 주고 변수인 weberp 를 작성해준다.

그리고 save() 안에 weberp 변수를 넣어서 작성해 주었다.

이 Service 는 Controller 에서 사용한다!

이 작업을 유튜브, 구글, 수업 등을 참고하면서 작성을 해나가고 있는데,

작성하면서 모르는 내용을 찾아보고 하는 작업을 하면서 좀 더 자세하게 배워 나가는 느낌이 든다.

하지만 아직 부족한 느낌이 더 든다 ㅠ 그래도 열심히 계속 작업해보겠다!!!

저번주부터 찔끔찔끔 작업해오던건데 오늘까지 이렇게 마무리를 했고, 다음주까지 작업한 내용은 추가로 올려야겠다.