Coding 공부182

• [React] Router 예제 import './App.css'; // App 컴포넌트의 스타일을 가져옵니다.import { BrowserRouter, Routes, Route } from 'react-router-dom'; // react-router-dom 라이브러리에서 필요한 컴포넌트를 가져옵니다.import Home from './components/Home'; // Home 컴포넌트를 가져옵니다.import Search from './components/Search'; // Search 컴포넌트를 가져옵니다.function App() { // App 컴포넌트를 정의합니다. return ( {/* BrowserRouter: HTML5 히스토리 API를 사용하여 URL을 관리하는 최상.. Coding 공부/React 2024. 6. 10.

• [IntelliJ_SpringBoot] 스프링 부트에서 세션을 사용한 로그인 정보 저장 (10단계 + 예제 코드) 1. 의존성 추가: build.gradle (Gradle) 또는 pom.xml (Maven) 파일에 Spring Session 의존성을 추가합니다.Gradle// build.gradleimplementation 'org.springframework.boot:spring-boot-starter-web'implementation 'org.springframework.session:spring-session-core' 2. 세션 설정 활성화: application.properties 또는 application.yml 파일에 세션 설정을 추가합니다. # application.propertiesserver.servlet.session.timeout=3600 # 세션 유효 시간 (초) 3. 로그인 컨트롤러 생성:.. Coding 공부/IntelliJ 2024. 5. 31.

• [IntelliJ_SpringBoot] consumes, HTML <form>태그 기본 속성 1. Spring Boot Controller : consumesconsumes = MediaType.APPLICATION_JSON_VALUE는 Spring MVC의 @PostMapping 어노테이션에서 사용되는 속성으로, 해당 컨트롤러 메서드가 JSON 형식의 요청만 처리하도록 지정하는 역할을 합니다.동작 방식:요청 Content-Type 검사: 클라이언트가 서버에 요청을 보낼 때, 요청 헤더에 Content-Type 필드를 포함하여 데이터의 형식을 명시합니다. 이 속성을 사용하면, Content-Type이 application/json인 요청만 해당 메서드에서 처리하고, 다른 형식의 요청은 거부합니다.415 Unsupported Media Type 에러: 만약 Content-Type이 applicat.. Coding 공부/IntelliJ 2024. 5. 31.

• [IntelliJ_Springboot] Springboot 자원 자동 서빙, 리다이렉트 vs 뷰 반환 방식 1. Springboot 자원 불러오기Spring Boot는 src/main/resources/static 디렉토리에 있는 정적 파일을 자동으로 서빙합니다.src/└── main/ └── resources/ ├── static/ │ └── css/ │ └── sign-in.css └── templates/ └── board/ └── index.html Welcome to the Board Index Page! 정적 파일 위치: 정적 파일은 src/main/resources/static 디렉토리에 배치합니다.템플릿 파일 링크: HTML 템플릿 파일에서 /css/sign-in.css"> .. Coding 공부/IntelliJ 2024. 5. 29.

• [IntelliJ_Springboot_MariaDB] read.html 코드, reply.js 코드, Axos 매개변수의 타입 1.  read.html 코드 추가1.1 모달창 추가 Register Reply Reply Text Replyer Register Close .. Coding 공부/IntelliJ 2024. 5. 29.

• [IntelliJ_Summary] 댓글을 컨트롤러가 아닌 스크립트에서 처리하는 이유, JavaScript Object, JSON, Dictionary, HashMap의 차이점, HTML에서 페이지를 이동할 때 값을 전달하는 방법 1. 댓글을 컨트롤러가 아닌 스크립트에서 처리하는 이유  비동기 방식이란?사용자 인터페이스(UI)를 더 빠르고 반응성 있게 만드는 기술.페이지를 새로고침하지 않고 서버와 데이터를 주고받을 수 있음.댓글 기능에 비동기 방식을 사용하는 이유사용자 경험 향상: 페이지 리로드 없이 댓글 작성.성능 개선: 불필요한 페이지 새로고침 방지.실시간 업데이트: 댓글이 바로 반영되어 보여짐.스크립트로 댓글 기능 구현 예제다음은 jQuery를 사용하여 댓글 기능을 비동기 방식으로 구현하는 간단한 예제입니다. 댓글 작성  HTML 부분#comments: 댓글 목록을 보여주는 div입니다.#comment-text: 사용자가 댓글을 입력할 textarea입니다.#submit-comment: 댓글을 작성하는 버튼입니다.JavaS.. Coding 공부/IntelliJ 2024. 5. 29.

• [JavaScript] DOM 객체 처리하는 방법 5단계 자바스크립트에서 DOM(Document Object Model) 객체를 처리하는 방법에 대해 5단계로 나누어 설명해드릴게요. 각각의 단계에서 자주 사용되는 메서드와 속성을 예시와 함께 설명하겠습니다.1단계: DOM 요소 선택하기DOM 요소를 선택하는 것은 첫 번째 단계입니다. 이를 통해 HTML 요소에 접근할 수 있습니다.document.getElementById(id): 특정 id를 가진 요소를 선택합니다.const element = document.getElementById('myElement'); document.querySelector(selector): CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.const element = document.querySelector('.myCla.. Coding 공부/JavaScript 2024. 5. 29.

• [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.