분류 전체보기302

• 

  [Springboot] 웹 브라우저에 음악 파일 재생하기 1. 목적Springboot에서 컨트롤러를 만들고 html에서 서버에 저장된 mp3파일을 재생한다.(버튼 클릭 없이)1분마다 mp3파일을 재생한다.MP3 파일 재생 테스트알람 소리 재생new Audio('/alarm.mp3');인텔리제이 src/main/static/alarm.mp3 오디오 파일 객체 인스턴스를 생성한다.audio.play();오디오를 실행한다.setInterval(함수명, 시간);일정 시간마다 함수를 실행한다.이 코드를 실행해도 알람은 울리지 않는다. chrome의 자동재생 정책 때문에, 사용자가 직접 재생 버튼을 누르지 않으면 음악 파일이 자동재생되지 않는다.링크: https://developer.chrome.com/blog/autoplay?hl=ko알람 소리 재생 버튼을 누른 후 기.. 프로젝트/Springboot_MariaDB 2024. 5. 28.

• [IntelliJ_Springboot_MariaDB] axios 비동기 데이터 가져오기, params 쿼리 스트링 추가, 모달창, 속성에 값 저장 및 반환 1. axios 라이브러리를 사용하여 비동기 방식으로 서버에서 데이터를 가져오는 방법 // reply.js 코드// 비동기 함수 get1 정의, 게시물 번호(bno)를 매개변수로 받음async function get1(bno){ // axios를 사용해 서버에서 데이터 가져오기, 비동기 처리 const result = await axios.get(`/replies/list/${bno}`) // 가져온 결과 반환 return result}// 스크립트 추가1.1 요약된 설명이 코드는 axios를 사용해 비동기 방식으로 데이터를 가져옵니다. get1 함수는 async 키워드를 사용하여 비동기 함수를 정의하고, await를 통해 axios.get 요청의 완료를 기다립니다. 이 함.. Coding 공부/IntelliJ 2024. 5. 28.

• [React] 컴포넌트 key, Props와 State, 조건부 렌더링 7가지 방법, Person 추가 및 삭제 및 수정 코드 1. 컴포넌트 key 설정Warning: Each child in a list should have a unique "key" prop.컴포넌트마다 고유한 키를 설정해줘야한다. 무시해도되는 오류지만 이후 코드가 복잡해질 경우 고려해야될 사항이다.render(){ const result = this.state.personList.map( (data)=>() ) return( {result} ) }Person 컴포넌트에 key 키워드를 추가해주면 해결된다.(컴포넌트를 구분해주는 역할로 사용 됨)  2. Props, State 예제코드 2.1 주요 개념 정리Props(속성): 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법.. Coding 공부/React 2024. 5. 27.

• [IntelliJ_Springboot_MariaDB] Reply CRUD(Service, Controller) 1. 동기와 비동기 차이점1.1 동기(Synchronous)작업의 순차적 실행:동기 방식에서는 한 작업이 완료될 때까지 다음 작업이 시작되지 않습니다. 즉, 작업이 순차적으로 실행됩니다.블로킹(Blocking):동기 방식에서는 현재 작업이 완료될 때까지 시스템 자원을 차단(블로킹)합니다. 이로 인해 다른 작업이 대기 상태에 놓입니다.단순한 흐름:작업이 순차적으로 이루어지기 때문에 프로그램의 흐름을 이해하고 디버깅하기 쉽습니다.예시:함수 호출: result = functionA(); resultB = functionB(result); 여기서 functionB는 functionA가 완료된 후에 실행됩니다.파일 읽기: readFileSync (동기 방식의 파일 읽기 함수로, 파일을 다 읽을 때까지 다음 코드가.. Coding 공부/IntelliJ 2024. 5. 24.

• 

  [IntelliJ_GitHub] 인텔리제이에서 깃허브 사용방법(간략버전) 1. 깃허브 아이디를 만든다.깃허브 링크 : https://github.com/ 2. 인텔리제이와 깃허브 연동하기2.1 인텔리제이를 실행하고 올리고 싶은 프로젝트를 오픈한다. 2.2 인텔리제이 > File > New > Project from Version Control을 클릭한다.2.3 GitHub를 누르고 로그인 한다.2.4 VCS > Enable Version Control Intergration 클릭 > Git 선택 후 OK 클릭  3. 깃허브에 현 프로젝트 올리기3.1 Git > GitHub> Share Project On GitHub를 클릭한다.3.2 Repository name에 깃허브에 올릴 리포지터리 이름을 작성 후 Share버튼을 누른다.3.3 Successfully shared pro.. Coding 공부/IntelliJ 2024. 5. 23.

• 

  [IntelliJ_Springboot_MairaDB] ReplyCount 추가, IntelliJ DataBase에 접근해 자료값 수정 및 추가 및 삭제 1. 요약댓글이 글마다 몇개씩 있는지 list.html로 보여준다.view 부분 : list.html에 replycount 항목 추가DTO : BoardListRepltCountDTO 추가list.html에 보내는 Page컬렉션에 담아 보낼 클래스이다. 필드는 list에 출력할 값들을 포함한다.(replyCount추가)Repository : BoardSearch, BoardSearchImpl에 searchWithReplyCount 메서드 추가Querydsl을 사용해서 DB에 저장된 Board와 Reply 테이블을 조인하고 불러와 List에 저장한 뒤, 매개변수로 받은 Pageable 객체 정보를 매개변수로 함께 받아 Page를 반환한다.ReplyRepository에 JpaRepository를 상속받아서 .. Coding 공부/IntelliJ 2024. 5. 23.

• [Java_Springboot] @Autowired 안녕하세요! 오늘은 @Autowired 어노테이션과 의존성 주입에 대해 설명해 드릴게요. 이 내용은 백엔드 개발에서 중요한 개념이므로 꼭 이해하고 넘어가세요. 블로그에 올릴 수 있도록 요약된 글과 풀어서 설명하는 글을 모두 제공해 드릴게요.요약된 글@Autowired 어노테이션은 스프링 프레임워크에서 의존성 주입(Dependency Injection)을 위해 사용됩니다. 이 어노테이션을 사용하면 스프링 컨테이너가 자동으로 빈을 주입해줍니다. 주입 방식에는 필드 주입, 생성자 주입, 세터 주입이 있습니다. 각각의 방식은 아래와 같습니다:필드 주입: 필드에 직접 주입생성자 주입: 생성자를 통해 주입세터 주입: 세터 메서드를 통해 주입풀어서 설명하는 글1. 의존성 주입(Dependency Injection) .. Coding 공부/Java 2024. 5. 23.

• [IntelliJ_Springboot] ReplyServiceTests, ReplyRepositoryTests 1. ReplyRepository 인터페이스 코드public interface ReplyRepository extends JpaRepository{} 2. ReplyService 인터페이스 코드public interface ReplyService { Long register(ReplyDTO replyDTO); ReplyDTO readOne(Long rno); void modify(ReplyDTO replyDTO); void remove(Long rno);} 3. ReplyServiceImpl 클래스 코드@Service@RequiredArgsConstructor@Transactionalpublic class ReplyServiceImpl implements ReplyService { .. Coding 공부/IntelliJ 2024. 5. 22.

• 

  [IntelliJ_Springboot_MariaDB] Http 메소드, Reply 테이블 관계도, 게시글 삭제 코드, 댓글 관련 코드(RESTful 방식, JSON) 1. list로 돌아가는 버튼 스크립트 예제 코드const link = [[${pageRequestDTO.getLink()}]]; // 페이지 요청에 대한 링크 정보를 가져와 link 변수에 할당합니다.const formObj = document.querySelector("#f1"); // id가 'f1'인 폼 요소를 찾아 formObj 변수에 할당합니다.document.querySelector(".listBtn").addEventListener("click", function (e) { // .listBtn 클래스를 가진 요소에 클릭 이벤트 리스너를 추가합니다. e.preventDefault(); // 기본 동작을 방지합니다. (여기서는 a 태그의 클릭 이벤트를 막습니다.) e.stopPro.. Coding 공부/IntelliJ 2024. 5. 22.

• [IntelliJ_Springboot_MariaDB] Thymleaf 하이퍼 링크, read.html 예제 코드, Flash Attributes , HTML history, 버블링, 이벤트 흐름: 캡처링과 버블링, modify.html, BoardController 예제코드 1. Thymleaf 하이퍼 링크 적용 예제 코드  List Modify 주요 부분 설명1. th:with 구문th:with 구문을 사용하여 일시적인 변수를 정의합니다.여기서는 link라는 변수를 정의하고, pageRequestDTO.getLink() 메서드의 반환값을 이 변수에 할당합니다.이 변수는 이 블록 내에서만 유효합니다. 즉, 내부에서만 사용할 수 있습니다.2. th:href 구문 Listth:href는 HTML의 href 속성을 동적으로 설정하기 위해 사용됩니다.|...| 구문은 URL 표현식을 나타냅니다. 이는 경로와 변수를 포함한 URL을 생성할 때 사용됩니다.@{/board.. Coding 공부/IntelliJ 2024. 5. 21.

• 

  [React] 리액트 설치 및 실행, js파일 및 css 파일 리액트 연결, Hook, 리스트 렌더링 1. 리액트 설치 및 실행$npm install -g create-react-app$npx create-react-app react-practice리액트를 react-practice 폴더에 설치한다.$cd react-practice$npm startreact-practice 폴더로 디렉터리 이동한다.react를 실행한다.자동으로 http://localhost:3000/ 에 접속한다.새로운 프로젝트를 시작하려면 $npx create-react-app react-practice2 와 같이 새로운 디렉토리에 react를 설치해줘야한다.(Node.js, express와 비슷함)  리액트 튜토리얼 시작하기 이론 링크 : https://reactjs-kr.firebaseapp.com/tutorial/tutorial.. Coding 공부/React 2024. 5. 20.

• 

  [IntelliJ_Springboot_MariaDB] PageRequest DTO, PageResponseDTO<E>, BoardService, BoardServiceImpl에 list()메서드, Test 코드, BoardController, layout/basic.html, board/list.html, 부트스트랩, 가변인자, RequestMapping, 자동 매개변수 바인딩 1. HTML에서 주고 받는 객체 DTO 코드1.1 PageRequest DTO@Builder // Lombok의 빌더 패턴을 이용해서 객체를 생성할 수 있도록 해주는 어노테이션@AllArgsConstructor // Lombok을 사용해 모든 필드 값을 파라미터로 받는 생성자를 자동으로 생성@NoArgsConstructor // Lombok을 사용해 파라미터가 없는 기본 생성자를 자동으로 생성@Data // Lombok을 사용해 getter, setter, toString, equals, hashCode 메서드를 자동으로 생성public class PageRequestDTO { // HTML에서 검색 기능을 사용할 때 전달 받는 데이터 전송 객체(DTO) @Builder.Default pri.. Coding 공부/IntelliJ 2024. 5. 16.