Fullstack-Study-241204-250625

커리큘럼(12-30/변경)

01. Java
02. git
03. Database 
04. Jsp [Server]

05. HTML,CSS 
07. JS
06. 미니프로젝트-2W

08. SpringFramework , SrpingBoot 
19. 중간프로젝트 (1M)
10. Linux 명령어
11. AWS
12. Docker
13. Kubernetes
14. React JS (v)
15. App - Android
16. 최종프로젝트 (1M)

---

React(리액트)

React 라우터

Link

• **link태그**는 화면에서 a태그로 생성
• to속성에는 연결할 요청주소 작성
• 어느 컴포넌트든 사용 가능

URL파라미터 / 쿼리스트링

1. 쿼리스트링

• 쿼리스트링은 주소의 ? 뒤에 키=값 의 형태로 넘어가는 매개값

• 컴포넌트에서는 **useLocation()**훅 또는 **useSearchParams()**훅을 사용해서 쿼리스트링을 얻을 수 있음

• Link태그

<Link to="/user?id=aaa123&addr=서울시">유저화면</Link>

• useLocation훅

const location = useLocation();

• 객체형태로 반환

• useSearchParams()훅

const [param,setParam] = useSearchParams();

• 배열을 반환
• 첫번째 요소는 쿼리파라미터를 조회하거나 수정하는 get,set이 담긴 객체로 get요소를 통해 파라미터를 얻을 수 있음

const id = param.get("id");

• 두번째 요소는 쿼리파라미터를 객체로 업데이트 하는 함수 반환

2. URL파라미터

• URL파라미터는 주소 뒤에 **경로/값/값**의 형태로 넘어가는 매개값

• 라우터에 추가적인 설정 필요 ( /주소/:키)

• 컴포넌트에서는 **userParams()**훅을 사용해 URL파라미터를 받을 수 있음

• 라우터

function App() {

  return (
    <Routes>
        .....
        <Route path='/info/:num' element={<Info/>}/>
    </Routes>
  );
}

• 링크

<li><Link to='/info/1'>1번 info</Link></li>

• 컴포넌트

const params = useParams();
const age = params.age;

• useParams()를 사용해서 넘어온 값을 받을수있음

중첩라우터로 공통부분 처리

• 라우트(경로) 안에 또 다른 라우트를 포함시킬 수 있게 해주는 기능
• 페이지 안에 또 다른 페이지 구조를 구성하고 싶을 경우 사용
• 예시

• 라우터가 다른 경우 각각 다른 화면이 보임

<Route path='/board' element={<Board/>}/>
<Route path='/board/:bno' element={<BoardContent/>}/>

• 중첩라우터를 활용하여 부모 컴포넌트에서 컴포넌트를 활용해서 하위 라우터를 보여지게 할 수 있음
• 즉, 부모 페이지 안에 자식의 페이지를 포함시킬 수 있음

/* App.js */
<Route path='/board' element={<Board/>}>
    <Route path=':bno' element={<BoardContent/>}/>
</Route>

/* Board.js */
<ul>
    <li><Link to='/board/1'>첫번째 글</Link></li>
    <li><Link to='/board/2'>두번째 글</Link></li>
    <li><Link to='/board/3'>세번째 글</Link></li>
</ul>

<Outlet/>

• 라우팅 경로를 설정해주는 App.js에서 중첩 라우팅을 써서 경로 설정
• 상위 라우팅주소에서는 하위 라우팅 주소의 화면을 쓸곳을 **Outlet태그**를 이용하여 설정

라우터의 부가적인 기능

1. NavLink 컴포넌트

• 링크에서 사용하는 경로가 라우터의 경로와 일치하면 특정스타일을 적용
• NavLink는 style속성 제공
• style속성에는 실행시킬 함수 작성
• 이 함수에는 매개변수로 {isActive:boolean}객체를 넣어주는데, 활성화 여부를 표시 가능

function Board(){


    const myStyle = {
        color:'red',
        backgroundColor:'green'
    }
    return(
        <>

            <h3>글화면</h3>


            <ul>
                {/* <li><Link to='/board/1'>첫번째 글</Link></li>
                <li><Link to='/board/2'>두번째 글</Link></li>
                <li><Link to='/board/3'>세번째 글</Link></li> */}

                {/* NavLink는 url주소가 선택한 링크와 같을때 style을 줄수 있음 */}
                <li><NavLink to='/board/1' style={({isActive})=>isActive ? myStyle : null}>첫번째 글</NavLink></li>
                <li><NavLink to='/board/2' style={({isActive})=>isActive ? myStyle : null}>두번째 글</NavLink></li>
                <li><NavLink to='/board/3' style={({isActive})=>isActive ? myStyle : null}>세번째 글</NavLink></li>
            </ul>

            <Outlet/>
        </>
    )
}

2. useNavigate()훅

let navigator = useNavigate();

• **useNavigate**훅은 특정 event가 발생할 때, url을 조작할 수 있는 함수 제공
• JS의 history객체 대신

function Header(){

    // 뒤로가기, 앞으로가기, 특정라우터로 가기
    const nav = useNavigate()

    return(
        <>
            <header style=>
                <h3>공통으로 사용하는 헤더입니다</h3>
                <button type="button" onClick={()=>nav('/')}>홈</button>
                <button type="button" onClick={()=>nav('/user')}>유저</button>
                <button type="button" onClick={()=>nav(-1)}>뒤로가기</button>
            </header>


            <Outlet/>
        </>
    )
}

3. Navigate 컴포넌트

• **<Navigate>컴포넌트**는 렌더링 될 때 현재 위치를 변경
• 렌더링 중 만나게 되면, 페이지를 강제로 이동시킴
• useNavigate()훅과 비슷해보이지만 useNavigate()훅은 렌더링 과정에서 사용할 수 없음

function Mypage(){
    
    const loginYn = false; // 로그인x

    // 권한에 대한 검사
    // 첫 렌더링 과정에서 useNavigate는 사용하지 못함
    // const nav = useNavigate();
    // if(!loginYn){
    //     nav('/');
    // }

    // 렌더링 과정에 권한 검사를 통해 다른 페이지로 보냄
    if(!loginYn){
        return <Navigate to='/' replace={true}/>;
    }
    return(
        <>
            <h3>권한이 있는 사람만 들어올 수 있음</h3>
        </>
    )
}

---

Ajax(Asynchronous Jabascript and XML)

• 웹 페이지의 이동없이 필요한 데이터만 전송하는 기술
• 웹 어플리케이션에서 데이터를 가져올 떄 서버쪽 데이터가 필요할떄 ajax기법 사용

• 이 작업은 시간이 오래 걸릴 수 있기 때문에 비동기적으로 처리
• 비동기(asynchronous)는 요청이 끝날 떄 까지 기다리는 것이 아니라 동시에 여러 작업 수행
• 나중에 react에서는 다른 서버의 REST API와 통신을 이용하여 데이터베이스 데이터를 가져올 수 있음

ES6의 fetch를 이용해 리액트에서 데이터 처리

1. 이벤트 클릭시 처리

• 데이터를 가져와 useState()에 저장하는 작업
• 렌더링 시에 에러를 나타내기 때문에, undefind에 관한 처리를 동시에 진행

function App(){

    const [data,setData] = useState({
        userId:null,
        userName:null,
        userPw:null
    });

    const handleClick=()=>{
        fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then(response => response.json())
        .then(data=>{
            setData(data);
        })

    }
        
    return(
        <>
            <h3>Ajax통신</h3>

            <button type="button" onClick={handleClick}>1.버튼클릭시 ajax통신</button>   
            <br/>
            가져온데이터 {data.userId},{data.userName},{data.userPw}



            <br/>
            화면 로딩시에 가져온 데이터 {myData.userId}, {myData.userName},{myData.userPw}
        </>
    )
}

2. 화면 렌더링 완료시 데이터 처리

• useEffect() 훅 사용
• 비동기 작업을 컴포넌트에 바로 쓰고 state를 변경하면, 무한루프에 빠짐
• useEffect()훅을 이용해 첫번째 렌더링 완료시만 데이터를 가져오도록 처리

function App(){

    const [data,setData] = useState({
        userId:null,
        userName:null,
        userPw:null
    });

    const handleClick=()=>{
        fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then(response => response.json())
        .then(data=>{
            setData(data);
        })

    }


    // 화면에 진입하자마자 데이터를 가져오는 방법
    const [myData,setMyData] = useState({userId: '' ,userName:'',userPw:''});
    useEffect(()=>{
        fetch('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then(response => response.json())
        .then(data=>{
            setMyData(data);
        })
    },[])

    console.log(11);
    
    return(
        <>
            <h3>Ajax통신</h3>

            <button type="button" onClick={handleClick}>1.버튼클릭시 ajax통신</button>   
            <br/>
            가져온데이터 {data.userId},{data.userName},{data.userPw}



            <br/>
            화면 로딩시에 가져온 데이터 {myData.userId}, {myData.userName},{myData.userPw}
        </>
    )
}

Axios로 데이터 처리

• 엑시오스는 비동기를 더 편하게 처리하는 라이브러리
• 엑시오스 설치

npm install axios

• Axios

Promise = axios.get(요청주소)

1. 이벤트 클릭시 처리

function App(){
    // npm install axios

    const handleClick = ()=>{
        axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then( response => {
            console.log(response.data.userId);
        })
    }
    return(
        <>
            <h3>엑시오스 사용</h3>
            <button type = "button" onClick={handleClick}>데이터 처리</button>
        </>
    )
}

• axios의 get함수안에는 주소를 넣음
• axios의 post함수의 경우 첫번째 매개변수에는 주소, 두번째 매개변수에는 데이터를 넣음

axios.post(url, data, config);

• axios는 서버에서 받은 응답을 자동으로 JSON 파싱해주기 떄문에 객체형태로 받은 데이터를 바로 쓰면됨

2. async(비동기) , await(대기) 적용

• async, await규칙

1. 어싱크 함수 안에서 어웨잇 사용
2. **function앞에 async키워드를 추가**하고 함수는 언제나 프로미스를 반환
3. 리턴이 프로미스라면 await을 적용하고 then절을 없앨 수 있음

• 비동기에서는 순서를 보장하지 않기 때문에 아래의 코드에서는 1,2,3순서대로 로그가 찍힌다고 보장할 수 없음

axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
.then( response => {
    console.log(response.data);
    console.log(1);
})

axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
.then( response => {
    console.log(response.data);
    console.log(2);
})

axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
.then( response => {
    console.log(response.data);
    console.log(3);
})

• 따라서 순서대로 출력되게 하기위해 코드를 수정 => 콜백지옥

axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
.then( response => {
    console.log(response.data);
    console.log(1);

    axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    .then( response => {
        console.log(response.data);
        console.log(2);

        axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
        .then( response => {
            console.log(response.data);
            console.log(3);
        })
    })
})

• Axios앞에 await를 사용할 수 있고, then()절 생략 가능
• Axios를 호출하는 부모함수에는 await을 반드시 달아줌
• 코드가 간결해지고 동기적방식(순서)를 보장

const handleClick = async()=>{
    // 규칙1 - await키워드는 async 함수 안에서 사용할 수 있음
    // 규칙3 - 리턴이 프로미스라면 await를 붙이고 then을 생략가능
    // 장점 - 코드의 간결성
    // 장점 - 동기적으로 변하게 됨
    const response = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hi.json')
    console.log(response);
    const response2 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/hello.json')
    console.log(response2);
    
    
    const response3 = await axios.get('https://raw.githubusercontent.com/yopy0817/data_example/master/by.json')
    console.log(response3);
    
}

• **async함수**는 Promise를 반환

• **Promise**는 비동기 작업의 완료(또는 실패)를 처리하는 객체

• **await함수**는 반드시 async함수 안에서만 쓸수 있으며 async함수는 해당 요청이 완료될때까지 대기했다가 완료되면 다음 요청을 이어서 실행시킴

• 비동기적인 흐름을 동기흐름처럼 바꿔줌

• axios는 Promise를 반환하고, then으로 결과를 처리하는데 axios앞에 await을 사용하면 then을 생략가능하고 바로 결과를 변수에 받을 수 있음

• useEffect에서 사용

useEffect(() => {
    
    (async () => {
        let url = '주소';
        let response = await axios.get(url);
				//state업데이트
    })();


}, []);