전체 글 썸네일형 리스트형 React 05. JSX 문법과 게시글 수정 import { useState } from "react"; import { useNavigate, useParams } from "react-router-dom"; export default function BoardUpdate({ 게시글배열, 변경된게시글배열, 상세보기, 상세보기변경함수 }) { // 필요한 useState만 props로 가져옴('props'로 받아와도 되지만 사용하지도 않는 데이터를 가져오면 // 방대한 데이터를 가지게 되어 react의 장점인 랜더링 속도가 저하됨) let { bno } = useParams(); // ex){bno:1} . 수정할 게시물의 bno을 가져옴 let [입력값, 입력값변경] = useState(상세보기); const navigate = useNaviga.. 더보기 React 04. JSX 문법과 게시글 상세보기 Link, useNavigate, useParams.. 와 같은 함수를 사용하려면 react-router-dom이 필요하다. 해당 프로젝트폴더 안의 my-app로 이동하여 cmd:npm install react-router-dom 을 설치해준다. import { Link, useNavigate, useParams } from "react-router-dom"; export default function BoardDetail({ 게시글배열 } ) { // props로 useState의 '게시글배열'을 받아옴 // 함수 앞에 'export default'를 표기하면 'BoardDetail' 호출시 기본값으로 내보냄 // url창에 글번호 뽑아오는 법 // ex) http://localhost:3001/boa.. 더보기 React 03. JSX 문법과 게시글 등록 ** 게시글 등록 ** // 지난시간 게시글 데이터를 활용했다. import './App.css'; import { useState } from 'react'; import data from './data'; function App() { let [게시글배열, 게시글배열변경함수] = useState(data); //let [글번호, 글변경함수] = useState(''); //let [글제목, 글제목함수] = useState(''); //let [글내용, 글내용함수] = useState(''); // state 초기값 설정 let [입력값, 입력값변경함수] = useState({ // 위 3줄을 하나로 받도록 한다. 글번호 : "", 글제목 : "", 글내용 : "" }) function 게시글등록() .. 더보기 React 02. JSX 문법과 게시글 출력 및 삭제 {/* */} : jsx문법 내부에서의 주석( {} : js요소 ) ▶ JSX문법 js문법 내부에 html코드를 작성할 수 있는 문법을 jsx문법이라고 한다. 리액트에서 UI를 구성할 때 보편적으로 사용되는 방법으로 복잡한 코드 필요없이 동적으로 추가되는 dom요소를 단순 코드선언으로 생성할 수 있게 도와준다. ※브라우저 콘솔창에서는 jsx문법을 해석하지 못한다. ** 제목 변경 해보기(랜더링) ** function App() { let 제목 = "ABC A CLASS"; // state문법 let [제목2, 제목변경함수] = useState();// 보기 쉽게 한글로 작성함 // let [title, setTitle] = useState("ABC B CLASS"); // => 일반적인 작성관례 // u.. 더보기 React 01. 설치 방법 1. nodejs.org에서 LTS버전 설치 https://nodejs.org/en 2. cmd창에서 설치한 node.js버전과 npm버전 확인 ( ※npm(Node Package Manager) : JS언어를 위한 패키지 관리자) 3. C드라이브에 reactWorkspace 생성 4. cmd창에서 생성한 workspace로 이동(cmd:cd C:\reactWorkspace)하여 npx create-react-app my-app 실행 ( ※npx : npm다운로드시 자동으로 추가된 패키지 실행도구) 5. reactWorkspace 폴더 안에 my-app폴더 생성됨 6. cmd창에서 my-app(cmd:cd my-app)으로 이동하여 npm start 실행 7. VS에서 workspace 폴더열기 더보기 MyBatis_1. 프레임워크 및 환경설정하기 * 프레임워크 ? - 개발자가 보다 편리한 환경에서 개발할 수 있도록 제공하는 뼈대, 틀 - 소프트웨어 개발의 입장으로써는 공통으로 사용하는 라이브러리 / 개발도구 / 인터페이스 등등을 의미한다. * 사용하는 이유 ? - 거대하고 복잡도가 높은 프로젝트를 완성시키기 위해서는 많은 사람이 필요한데 그 많은 개발자들이 "통일성"있고 빠르고 안정적으로 개발하기 위해서는 프레임워크가 필요하기 때문이다. * 프레임워크 특징 - 자유롭게 설계하고 코딩하는 것이 아니라 프레임워크가 제공하는 가이드대로 설계해야 한다. - 개발범위가 정해져 있다. - 개발자를 위한 다양한 플로그인들이 지원된다. * 프레임워크 장단점 > 장점 : 개발시간을 단축할 수 있다. 오류로부터 자유로워질 수 있다. > 단점 : 의존하다보면 개발능.. 더보기 JSP_4. Action Tag ▶ JSP Action Tag 표준 액션 태그 include forward 커스텀 액션 태그 JSTL Core Library : 변수선언, 조건문, 반복문 등과 관련된 문법을 제공 JSTL Formatting Library : 숫자, 날짜 및 시간데이터 출력형식을 지정할 때 사용하는 문법을 제공 formatNumber formatDate JSTL Functions Library : EL구문에서 사용할 수 있는 메서드를 제공 OTHERS c:import c:redirect c:catch ▶ JSP Action Tag : XML기술을 이용해서 기존의 JSP문법을 확장시키는 기술을 제공하는 태그들 => jstl.jar 파일을 다운로드 후 WebContent/WEB-INF/lib폴더에 추가해야 사용가능하다. 1.. 더보기 JSP_3. JSP 내장객체 종류와 EL(Expression Language) ▶ JSP 내장객체 ▶ JSP를 이루는 구성인자 ▶ EL(Expression Language) ▶ JSP 내장객체 1. ServletContext (application scope) 한 애플리케이션당 1개만 존재하는 객체 이 영역에 데이터를 담으면 애플리케이션 전역에서 사용가능 => 공유범위가 가장 크다 2. HttpSession(session scope) 한 브라우저당 1개만 존재하는 객체 이 영역에 데이터를 담으면 jsp/ervlet단 등 모두 사용가능 값이 한번 담기면 서버가 멈추거나 브라우저가 종료되기 전까지 사용가능하다. => 공유범위가 제한적임 3. HttpServletRequest(request scope) 요청 및 응답시 생성되는 객체 이 영역에 데이터를 담으면 해당 request객체를 포.. 더보기 이전 1 2 3 4 5 6 다음
