한바다

☑️ 스프링부트에서 Service ServiceIMpl: Service = 코드 작성하는 데 있어 이런 서비스를 사용하겠다는 계약 정의  어떤 메서드들(기능들)이 있어야 하는지,  그 메서드들(기능들)이 어떤 역할을 하는지 정의: ServiceImpl = 인터페이스로 작성한 Service의 실제 기능을 작성, 비슷한 기능을 각 서비스에 맞춰서 사용하겠다는 의미  [예를들어 createUser = user 를 만들 것임  user를 만드는 도중 관리자 - 소비자를 나눠서 만들 것] -> 각 각 넣어줄 때 아래와 같이 코드 구현 -> 똑같은 기능을 사용@Override// 만약에 판매자가 회원가입한 경우라면 public int signup(String 판매자이름, String 회사명) { retur..

✅ 앱설치npx create-react-app spring-frontnpx create-react-paa tutorial-login ✔️[백엔드 주소 : 포트 와 연결하기 위해 설정]"proxy" : "http://localhost:9090"  ✅ 리액트 로그인import React, {createContext} from "react";//로그인을 한 다음에 로그인한 정보를 모든 창에 띄워주기//App.js에서 태그 대신에 태그로//return 시작하자마자 감싸주면 태그 안에 있는//모든 태그에서는 로그인/로그아웃 한 정보가 공유됨const LoginContext = createContext();export default LoginContext; [signUp.js]-아이디중복검사-import Reac..

☑️Axios 비동기처리로 자바스크립트의 HTTP 클라이언트 라이브러리 HTTP 요청을 보내고 응답을 처리하기 위해 사용 [마이페이지에서 회원정보 가져올 때 예시]const Axios_Ex2 = () => { const [comments, setData] = useState(null); useEffect (() => { axios.get("http://localhost:8081/마이페이지/회원정보조회") //무사히 잘 가져왔다면 then으로 data 값 변경6+ .then(res => { setData(res.comments); }) //가져오는데 실패했다면 에러 보여..

☑️ 정규식 작성이태껏 정규식 작성은 제이쿼리와 자바스크립트에서 작성하는 줄 알았다...[제이쿼리 정규식]$(document).ready(function() { $("#userId").on("input", function() { const 유저아이디 = $(this).val(); const regularEx = /^[a-zA-Z0-9]{6,12}$/; if (regularEx.test(유저아이디)) { $("#msg1").text("아이디 형식이 올바릅니다.").css("color", "green"); } else { $("#msg1").text("아이디 형식이 올바르지않습니다.").css("color", "red"); } });}); [자바스크립트 정규식 코드] const 아이디정규식 ..

☑️ useState()함수- 컴포넌트(객체)의 상태(state)값이 변하게 될 경우- 해당하는 객체를 다시 새로고침하여 실행하는 하무- 다시 새로고침 하다 = 다시 렌더링 하다 = ReRendering = 다시표현하다- Rendering = 표현[useState 사용예시]const TicTapToeTwoStep = () => { const [numbers,setNumbers] = useState( 배열랜덤섞기([...Array(20).keys()].map((n) => n + 1)));const [nextNumber, setNextNumber] = useState(1);const [message, setMessage] = useState("")▶ nextNumber, message => 처음에 가지고..

✅ Router 란?리액트에서 라우터는 웹사이트에서 페이지를 이동하게 해주는 "길 안내표" 같은 역할을 한다.마치 마을에서 이집 저집을 방문하듯이 웹사이트의 여러페이지를 클릭하는 링크나 버튼들을 통해 쉽게 이동 할 수 있다. - 우선 라이터는 터미널에서  해당 주소로 설치해 준다. >npm install react-router-dom  ✔️ tutorial-route 진행[Home.js]import React from "react";function Home() { return ( 홈페이지 메인입니다. )}export default Home;[About.js]import React from "react";function About() { return ( ..