사이먼's 코딩노트

[사진 파일 등록 적용]웹 페이지를 구현할 때 글을 작성하면서 사진을 첨부하거나, 회원가입 시 프로필 사진을 등록하는 등과 같이 프로그램에서 사진 파일을 등록하는 기능이 필요할 때가 있을 것이다.이번에는 위와 같이 게시글에 사진 파일 등록을 하는 방법을 알아봅시다.앞서 진행했던 SBB 프로그램이 아닌 임시로 만들어 둔 다른 프로젝트를 통해 구현할 예정이기 때문에 코드를 참고하고 싶으시다면 아래 깃허브 리포지터리 주소를 통해 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/sb_blog_2405 [application.yml 수정]먼저 업로드한 사진이 어느 디렉토리에 저장할 것인지 경로를 지정해줘야 한다.application.yml에서 아래와 같이 코드를 추가하고..

[이메일 발송 적용]웹 페이지를 구현할 때 임시 비밀번호 발송이나 회원가입 완료 시 가입 환영 메일 등과 같이 프로그램에서 메일을 발송하는 기능이 필요할 때가 있을 것이다.이번에는 위와 같은 이메일 발송 중 구글 지메일을 이용한 방법을 알아봅시다.앞서 진행했던 SBB 프로그램이 아닌 임시로 만들어 둔 다른 프로젝트를 통해 구현할 예정이기 때문에 코드를 참고하고 싶으시다면 아래 깃허브 리포지터리 주소를 통해 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/sb_blog_2405 GitHub - psm817/sb_blog_2405Contribute to psm817/sb_blog_2405 development by creating an account on GitHu..

[소셜 로그인(카카오톡) 적용]웹 페이지를 구현할 때 카카오톡, 네이버, 구글 등을 이용한 소셜 로그인이 필요할 때가 있을 것이다.이번에는 위와 같은 소셜 로그인 중 카카오톡을 이용한 방법을 알아봅시다.앞서 진행했던 SBB 프로그램이 아닌 임시로 만들어 둔 다른 프로젝트를 통해 구현할 예정이기 때문에 코드를 참고하고 싶으시다면 아래 깃허브 리포지터리 주소를 통해 참고 부탁드립니다.깃허브 리포지터리 주소 : https://github.com/psm817/sb_blog_2405 소셜 로그인 세팅 - 카카오 · psm817/sb_blog_2405@17012f6psm817 committed May 27, 2024github.com [Kakao Developer 설정]웹 브라우저를 통해 카카오 디벨로퍼에 접속하여..

[Git 인터렉티브 실습]실제로 git bash 터미널에서 commit, branch, merge, rebase 등이 어떻게 사용되는지 실습을 통해 알아보도록 합시다.각 실습 구간마다 캡쳐된 터미널 사진을 보고 어떤 명령어를 사용해야 하는지 순서대로 알아봅시다.  [브랜치 쓰기 실습]아래 사진과 같은 결과가 나오기 위해 명령어를 순서대로 입력해봅시다.git init (초기화, 저장소 생성)touch 0 && git add . && git commit -m "C0" (touch를 통해 0이라는 파일 생성 후 커밋, &&은 명령어를 연결하는 역할이기 때문에 굳이 쓰지 않고 나눠서 입력도 가능)touch 1 && git add . && git commit -m "C1" (touch를 통해 1이라는 파일 생성 ..

[Git Branch (깃 브랜치)]브랜치란 독립적으로 어떤 작업을 진행하기 위한 개념이다.소프트웨어를 개발할 때 개발자들은 동일한 소스코드를 함께 공유하고 다루게 되는데, 동일한 소스코드 위에서 어떤 개발자는 버그를 수정하기도 하고, 새로운 기능을 만들어 내기도 한다.이와 같이 여러 사람이 동일한 소스코드를 기반으로 서로 다른 작업을 할 때, 각각 서로 다른 버전의 코드가 만들어지기 마련이다.이럴 때 동시에 다양한 작업을 할 수 있게 만들어주는 기능이 바로 '브랜치(Branch)' 이다. 팀 프로젝트를 수행할 때 GitHub를 관리하기 위해선 깃 브랜치 전략이 필수적이다. Git에선 Master라는 브랜치를 default로 사용하고, GitHub에선 Master 대신 Main을 사용한다.여담이지만, G..

[검색 기능 구현하기]질문 목록 페이지인 localhost:8090/question/list에서 찾고자 하는 내용을 키워드로 검색하여 해당 검색어와 관련있는 질문을 조회할 수 있는 기능을 구현해봅시다.그러기 위해선 검색어를 입력할 수 있는 텍스트 창을 만들고 검색어를 입력하여 조회하면 검색어에 해당되는 질문들이 보여야 한다.검색 대상으로는 질문 제목, 질문 내용, 질문 작성자, 답변 내용, 답변 작성자가 되겠고 DB에서 직접 SELECT문으로 조회했을 때는 아래와 같은 쿼리문을 사용해야 한다.SELECT *FROM question AS QLEFT JOIN site_user AS QAON Q.author_id = QA.idLEFT JOIN answer AS AON Q.id = A.question_idLEF..

[앵커 이동 기능 추가]현재까지 구현된 SBB 프로그램에서 답변을 작성하거나 수정하면 자동으로 페이지 상단으로 스크롤이 이동해서 자신이 작성한 답변을 확인하려면 다시 스크롤을 내려서 확인해야 되는 문제점이 있다.해당 문제는 답변을 추천한 경우에도 발생하는데, 우리는 a태그를 활용하여 답변 등록, 수정, 추천 시 앵커 태그를 이용하여 원하는 위치로 이동시킬 수 있다.먼저 question_detaill.html 템플릿에서 아래와 같이 답변이 반복되는 구간에서 반복문이 들어간 div태그의 코드를 수정한다.앵커 태그의 id 속성은 반드시 유일한 값이어야 하므로 답변의 id값을 사용했다.앵커 태그의 id 속성이 유일하지 않고 중복된 값이 존재한다면 맨 처음 한 개를 제외한 나머지 앵커는 제대로 동작하지 않게된다...

[앵커 이동 기능 추가]현재까지 구현된 SBB 프로그램에서 답변을 작성하거나 수정하면 자동으로 페이지 상단으로 스크롤이 이동해서 자신이 작성한 답변을 확인하려면 다시 스크롤을 내려서 확인해야 되는 문제점이 있다.해당 문제는 답변을 추천한 경우에도 발생하는데, 우리는 a태그를 활용하여 답변 등록, 수정, 추천 시 앵커 태그를 이용하여 원하는 위치로 이동시킬 수 있다.먼저 question_detaill.html 템플릿에서 아래와 같이 답변이 반복되는 구간에서 반복문이 들어간 div태그의 코드를 수정한다.앵커 태그의 id 속성은 반드시 유일한 값이어야 하므로 답변의 id값을 사용했다.앵커 태그의 id 속성이 유일하지 않고 중복된 값이 존재한다면 맨 처음 한 개를 제외한 나머지 앵커는 제대로 동작하지 않게된다...

[질문 추천 기능 구현하기]보통 SNS에서 마음에 드는 게시물이나 컨텐츠에 '좋아요'와 같은 표시를 남기기 마련이다.SBB 프로그램에도 '좋아요' 버튼을 통해 질문이나 답변을 본 다른 사용자들이 반응을 남길 수 있도록 추천 기능을 구현해봅시다.질문에서 추천 기능을 구현하려면 질문을 추천한 사용자가 DB에 저장될 수 있도록 관련된 속성을 Question 엔티티에 추가해야 한다.Question 엔티티에 추천인을 저장하기 위한 voters라는 이름의 속성을 추가해봅시다.@ManyToManySet voters = new LinkedHashSet();public void addVoter(SiteUser voter) { voters.add(voter);}@ManyToMany 어노테이션을 사용한 이유는 한 명의..

[답변 수정하기]답변을 작성한 다음 해당 글을 수정할 수 있어야한다.수정하는 기능을 추가하기 전, 답변이 언제 수정되었는 지 확인할 수 있도록 Answer.java 엔티티에 수정일시를 의미하는 modifyDate 속성을 하나 추가해봅시다.아래는 Answer.java 클래스에서 추가된 코드이다.private LocalDateTime modifyDate; [question_detail.html 템플릿 수정]사용자가 질문 상세 화면에서 답변 목록이 표시되는 부분에 '수정' 버튼을 클릭하면 답변을 수정할 수 있는 화면으로 진입할 수 있도록 아래와 같이 question_detail.html 템플릿에 버튼을 추가해봅시다. ..