92J

ㅡㅡㅡ한 화면에서 2개의 프로젝트를 키는 것#상품관련 : react-router 설정 목록 화면 : 새로운 상품을 등록할 수 있게 조회 화면 : 수정/삭제 화면으로 이동이 가능하도록 구성 상품 등록 : 상품들의 이미지를 함께 추가해서 등록 상품 목록 : 상품들의 이미지를 같이 보여주고, 페이지 처리가 가능하게 특정 상품 선택 : 상품 조회 페이지가 출력, 해당 상품의 모든 이미지가 출력되어야 함frontend - shop - pages - IndexPage.js 템플릿 역할 : 끌어다가 사용되는 페이지router - productRouter.jsrouter - productRouter.jsconst productRouter = () => } return ();} export default products..

#처음 생성npx create-react-app shopcd shopnpm start npm install -D tailwindcssnpx tailwindcss initnpm install react-router-dom npm install axiosㅡㅡㅡ 테일윈드적용, 모든폴더에 적용한다는 뜻 "./src/**/*.{js,jsx,ts,tsx}", const : final 같은것 (변수) ㅡ 한번선언하면 바뀌지않는다.let : 은 재선언불가능, 업데이트는 가능 ReactDom : 리엑트 문서createRoot : 루트를 만들라문서로부터 getElementById :  root로 되어있는 것들을 root변수로  하겠다. root.render : 루트를 랜더링 : 읽어준다.React.StricMode 를 읽..

ㅡㅡㅡ요약 api에서 서버통신을 합니다.Component와 page와 연동합니다.핵심입니다. ㅡㅡㅡ 1.2.3.4. 5.6.7.8. ㅡㅡㅡ구조ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡsrc- api - todoApi.js(서버에서 통신)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡsrc- components - common- PageComponent.jssrc- components - common- ResultModal.js src- components - menus - BasicMenu.js  src- components - todo - AddComponent.js src- components - todo - ListComponent.js s..

#axios 공식사이트axios를 사용하려면 2가지 용어를 알아야 합니다. 1.promise :  리절브,와 ㅁㄴㅇㅁㄴ 있다.2.동형 : 하나를 가지고 처리 프라미스 : 에스큐터? 콜백함수/리스너(함수안에서 함수를 호출하는 것)기반으로  # #폴더생성 ●4●#todoApi.jsimport axios from "axios";  /*Hook (기본적으로, )useState() ㅡ 각개발자들이[변수명, set함수명] = useState(초기값)  */  export const API_SERVER_HOST="http://localhost:8080" //서버연결포트 const prefix = `${API_SERVER_HOST}/api/todo`    //내것은 이것을 씁니다. //번호얻는 함수getOneexpor..

#todo에서 add,list누르면 나오게하고싶습니다.  todo의 하위페이지들을 children으로 만듭니다.#결과(직접URL입력해서 들어갑니다.그래서 라우터로 묶어줍니다.)●4#todoRouter.js(리다이렉트, 중첩라우팅의 분리와 리다이렉트)// todo/ 와 관련된 children 설정// 기존의 root.js 파일의 설정 일부를 별도의 파일로 분리하고 설정을 반환하도록 Navigate replace to = 리다이렉트기능root에서#ReadPage.js//조회할 때 사용할 파일 #유즈파람스라는 훅을 이용해서, 변수를 가져오면, 그것을 해당하는 것을 추출합니다. 그리고 사용합니다.  ●ReadPage.js 쿼리스트링3가지?navigate  - 리다이렉션을 할려구link  - 그부분만useNavi..

●백과 서버를 만들고 묶는 것 #태일윈드를 사용, js로 작업들어갑니다. 컴포넌트는 함수형, 그리고 리턴이 항상들어가있습니다.ex) div가 소문자로들어가면, 태그입니다.대문자는 컴포넌트 우리가 만든것입니다. 모든태그는 시작이있으면 끝이 있습니다.  return은 하나의 자료만 리턴합니다.부모로 감싸서, 통으로 리턴을 합니다.  ex)같습니다.속성을 객체형태로 받아오는 것이 props매개로 넘겨받는 값, 자바스크립트의 한 객체를 받습니다.객체는 {key:value}중괄호 그다음 그 객체들을 배열로 묵는것은 [ {key:value},{key:value} ]   대괄호 첨부 대괄호[] :배열중괄호 {} : 객체 #제이슨 {“Key”: “value”}모든 프로그램은 텍스트프로그램 처리합니다.쌍따옴표로 되어있습..

1234 5678 ㅡㅡㅡ ●#tailwindcss ㅡ css참고#바탕화면에 react폴더 생성(c드라이브에서 폴더생성하면, 권한이 필요하지만,경로문제가 안걸립니다.)#비쥬얼스튜디오에서 front폴더 열기 그리고 터미널(ctrl + shift + `) #참고 : 프로젝트명 소문자와 숫자로만 작성해야합니다.#결과 ㅡCRA(react)기본적인  ㅡVite #리엑트(SPA) - 싱글페이지 어플리케이션 #하나하나, conponent#설치1. npm install -D tailwindcss #결과 #2. npx tailwindcss init 주소처리를 도와주는게 라우터 #3. 라우트 설정(npm install react-router-dom) - 경로처리 #● # #root.js#App.js #●4 리액트의 fall..

ㅡㅡㅡ ●1. #–savepackage.json안에 의존성이 기록이 됩니다.이 파일을 가져가면, 그대로 처리할수있습니다. npm install react-router-domnpm install –save react-router-dom #styled -components #router최적의 경로를 찾아서 보내는 것 #react-router-dom리액트를 위한 routing 라이브러리문서안에서 길 안내,브라우저에서 앞,뒤 버튼 동작을 인식해서, 처리할수있도록 하는 역할#웹사이트에서 라우팅 : 사용자가 원하는 경로로 보내는 과정  sts3 : 스프링툴인텔리제이에서 스프링을… #React Router#next.js (배우면 좋은것)#PostWritePage.jsx import React, { useState }..

1234 5678 ㅡㅡㅡ ●#인텔리제이에서 리엑트 써보기#StyleExam.jsximport React from "react"; const styles={ //자바스크립트이 객체로 취급되어 key와 value의 개념을 생각     wrapper:{        marginTop:10,        marginBottom:10,        border:"1px solid red",        borderRadius:16,        width:300    },    nameText:{        // marginTop:10,        // marginBottom:10,        // marginRight:10,        // marginLeft:10        fontSize:40   ..

12345678ㅡㅡㅡ ●리액트 설치 #2가지방식클래스방식 - 이전펑션방식 - 최근 ES(에스마 스크립트) - 자바스크립트 약자 #노드JS( JS는 자바스크립트) - 리액트하기전에기본 NEXT#NPM  ( Node Packaged Manager(node.js다운로드시 자동으로설치 됩니다.))노드제이에스에서 ,생김의존성, 그것과 관련된 라이브러리 다운로드 받아지게 합니다.외부 패키지버전하고 의존성 같은 것들, 관리하고 편하게 사용할수있게 도와주는 프로그램#CMD창 열기node -v 입력 후 버전확인npm -v 입력 후 버전확인#폴더 생성객체(인스턴스)컴포넌트(붕어빵틀) - 엘레멘트(컴포넌트에서 파생, 요소, 붕어빵) - 한번 만들어지면 수정못합니다.컴포넌트 단위로 처리 됩니다. 엘리먼트 문제 되면, 빼고 다..