Canvas에서 이미지를 출력하니 크기가 제각각 이였다 때문에 비율을 구해서 이미지를 resize하는 모듈을 찾아냈다.

참고링크 https://www.npmjs.com/package/react-image-file-resizer

const resizeFile = (file) =>
        new Promise((resolve) => {
            Resizer.imageFileResizer(
                file,
                300,
                300,
                'JPEG',
                100,
                0,
                (uri) => {
                    resolve(uri);
                },
                'base64'
            );
        });

async 함수

const onChange = async (event) => {
  try {
    const file = event.target.files[0];
    const image = await resizeFile(file);
    console.log(image);
  } catch (err) {
    console.log(err);
  }
};

맨위의 코드와 같이 함수를 만들어주면 base64의 형태로 입력한 이미지가 resize되어 사용할수 있게된다.이후 base64의 코드로 출력된 resize이미지를 url을 받기위해 아래와같은 함수를 사용해준다.

 function base64toFile(base_data, filename) {
        var arr = base_data.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);

        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        return new File([u8arr], filename, { type: mime });
    }

내 코드의 onChange 비동기 함수 부분은 아래와 같다.

onChange={async (e) => {
               e.preventDefault(); //모든 이벤트를 스탑하겠다
               let reader = new FileReader();
               let file = e.target.files[0];

               reader.onloadend = async () => {
               const image = await resizeFile(file);
               const imgfile = base64toFile(await image, 'newImg.jpg');

                setImg({
                        file: imgfile,
                        previewURL: await image,
                        });
                    };
               reader.readAsDataURL(file);

여기서 눈여겨 봐야할 부분은 먼저 예제와 같이 resize를 사용한 부분이고 두번째로 base64toFile을 선언한 부분이다 imgfile이라는 변수를 선언해서 값을 넣었기 때문에 결과적으로 imgfile에 최종 resize된 이미지가 저장이되고 이후 previewUrl 로 우리의 canvas에 그려지게된다 즉 imgfile에 서버로 가는 이미지가 담기는 것

base64toFile 참고링크 https://bcdragonfly.tistory.com/74

1. 새로운 프로젝트를 생성해보자 npx create-react-app $작명
2. npm start npm을 사용해서 개발할것이다. 앱을 실행 시켜보자.
3. 페이지 디자인을 위한 bootstrap 이라는 라이브러리를 설치해보자. https://react-bootstrap.github.io/getting-started/introduction
4. index.html 의 head태그 안에 link된 bootstrap 위의 정보를 넣어주자.
5. bootStrap 에서 원하는 UI를 복사 붙여넣기 해주자
6. 사용할 UI를 import 로 선언해주자. (태그 앞대문자 선언)

   import { Navbar,Container,Nav } from 'react-bootstrap';

   🤨 : 선언한 UI의 스타일 수정은 ClassName을 사용해 css변경

2. 이미지 넣기 & Public폴더

1. 대문사진을 하나 넣어보자.div태그를 생성후 classaname 선언
2. Img 폴더를 생성후 그안에 대문사진 이미지를 넣어주자.
3. css로 이동 background-image: url('')주소와 css 코드 입력
4. 상품컬럼 3개를 만들고 이미지주소를 통해 이미지를 붙이자. (링크를 참조) https://react-bootstrap.netlify.app/layout/grid/#rb-docs-content
5. 이미지를 많이 쓸땐 Public에 관리하는것이 좋다 하지만 경로가 바뀌면 오류가 발생할수 있음으로 다음과 같은 방법으로 코드를 짜면된다. <img src={process.env.PUBLIC_URL + '/img/logo.png'} 🤨 :html에서 이미지를 넣을땐 import 로 이름과 경로를 선언해주어야함

3. import export를 이용

상품컬럼에 대한 정보를 서버를 통해 가져왔다 가정하고 진행하겠다.

1. useState를 사용 let [art] = useState(data);
2. data.js 라는 상품컬럼 정보 에대한 파일을 만들어 export해준다.
3. 다시 App.js로 돌아와서 data.js를 import 해준다.
4. data.js 의 구조는 array안의 object구조이기 때문에 선언할떄 유의한다.
5. 즉 첫번째 상품의 제목을 알고싶으면 art[0].title 이런식으로 써야한다.

4. 컴포넌트 만들기

컴포넌트 함수를 만들어서 원래의 코드를 더 간단하게 표현하자.

1. 기존의 App함수가 아닌 외부에 MidArt라는 컴포넌트 함수를 만들것이다.
2. 상품컬럼 3개가 동일한 형식이기 때문에 이를 컴포넌트로 대체한다.
3. 컴포넌트 함수안에 동일한 형식인 상품컬럼 한가지의 코드 내용을 복붙 한다.
4. 🚨문제 발생 외부의 함수에서 state변수 사용으로 코드가 동작하지 않는다.
5. props를 사용하여 부모함수에서 state변수에대한 정보를 가져오게 한다.
6. props선언으로 인해 컴포넌트를 사용하는 부분에 다음과 같이 state 이름과 작명을 해주고<MidArt art={art[0]}></MidArt> 컴포넌트 함수에선 state 사용 부분에 props.art.title 이와같이 props.을 붙여준다.
7. 6번까지가 상품컬럼[0] 에대한 컴포넌트 생성이고 나머지 두개도 진행해준다.

   App함수

4-2. Maps 활용

Map을 사용해 3개의 위 반복코드를 더 간단하게 만들어줄것이다.

1. map 함수는 반복문이며 map 앞의 변수의 크기만큼 반복한다.
2. art.map 은 art의 배열수만큼 반복실행한다. 함수로 만들어보자.

   {art.map(() => {
    return<MidArt art={art[0]}></MidArt>;
   })} 

3. 위와 같은 코드는art[0] 상품컬럼을 art배열의 개수인 3번만큼 반복한다.
4. 때문에 반복문이 돌때마다 1씩 증가하는 파라미터 i를 사용하여 해결한다.

   {art.map((a,i) => {
    return<MidArt art={art[i]}></MidArt>;
   })} 

5. 라우팅

리액트는 html파일 하나만 사용하여 여러페이지를 보여준다.때문에 사용자가 다른 페이지를 요청하면 내부의 <div>들을 갈아치워서 보여주는데 react-router-dom은 이것을 간편하게 해준다.

1. react-router-dom 설치 터미널 입력 npm install react-router-dom@6
2. index.js세팅 import 이후 BrowserRouter로 App을 감싼다. import { BrowserRouter } from 'react-router-dom';

root.render(
  <React.StrictMode>
      <BrowserRouter>
          <App/>
      </BrowserRouter>
  </React.StrictMode>
  );

3. 이제 메인페이지와 어바웃페이지 2개를 만들어보자.
4. 먼저 상단에서 여러가지 컴포넌트를 import 해 Routes안에 Route를 작성
5. 그리고 path엔 경로 element엔 보여줄 html을 작성하면된다.

   import {Routes,Route,Link} om 'react-router-dom'
   function App(){
   return( (생략)
   <Routes>
    <Route path="/" element={<div>메인</div> }/>
    <Route path="/detail" element={<div>상세</div> }/>
   </Routes>
   )
   }

6. 이제 nav를 제외한 기존의 view들을 element메인자리 에 넣어주자.
7. detail엔 Detail.js 파일에 컴포넌트 함수를 만들어 element에 넣어주자.
8. 이제 <Link를 이용해서 메인과 상세 페이지를 이동할수있도록 하면 끝

   <Link to="/">홈</Link>
   <Link to="/Detail">상세페이지</Link>

   😃😃😃 path경로에 '/' 를 경로로 지정하면 초기 url의 경로가 나오며 만약 path경로에'*' 를 경로로 지정하면 앞서 선언한 라우터들을 제외한 나머지 경로에 대한 페이지를 만들수있다 예를들어 404페이지 같은 에러페이지..

   <Route path="*" element={<div>없는페이지임</div>} />

6. Navigat와 routes의 기능들

Link태그 보다 페이지 더깔끔하게 페이지 이동이가능한 방법을 알아보고 비슷한 여러페이지의 생성과 분류하는 방법을 알아보자.

1. 새로운 기능 useNavigate 와 Outlet 을 import 하는것을 잊지말자

 import{ Routes, Route, Link,useNavigate,Outlet} from 'react-router-dom'

2. Link태그와 같은 기능을 하지만 더 깔끔하게 함수를 사용가능한useNavigate 를 만들어보자. 먼저 변수를 만들어 선언해주고 사용되는 태그의 event함수에 navigate 선언과 경로를 지정해준다.navigate 안에 -1을 넢으면 뒤로가기 1을 넣으면 앞으로 가는등 여러가지 기능 활용이 가능하다.

   function App(){
   let navigate = useNavigate();
   return( 
   ------------(생략)
   <button onClick={()=>{navigate('/Detail')}>상세페이지</button>
     <button onClick={()=>{navigate(-1)}>뒤로가기</button>)    ;}

3. 서브경로를 만들수 있는 nested Routes를 사용해보자. 회사정보 라는 페이지 안에 회사멤버,회사위치라는 두개의 페이지를 만들자

   <Route path='/about" element{<About/>} >
   <Route path='member' element{<div>멤버들</div>}/>
   <Route path='location' element{<div>위치</div>}/>
   </Route>

   4. 이렇게 생성하면 이제 'about'이란 경로 하위에 'member','location' 이 생성되고 about 페이지를 공통으로 보여주며 member나 location의 페이지또한 보여줄수있다.이렇듯 Route 안에 Route를 넣는 방식을 nested Route 라고 하며 상위 페이지를 고정시키고 하위 박스들만 변경할때 사용된다.
   5. 하지만 여기서 실제로 about/member위치로 가보면 멤버들 이라는 div가 안보이는데 이는 상위 경로에서 하위 route를 보여주는 위치를 지정하지 않았기 때문이다.때문에 about 컴포넌트로 돌아가Outlet이라는 태그를 선언해준다.

      funciton About() {
      return(
      <div>
      <h4>어바웃 페이지</h4>
      <Outlet></Outlet>
      </div> )
      }

7. URL 파라미터를 통한 페이지제작

여러 Routes를 만드는 방법을배우고 Detail 이란 상세 페이지를 만들었으니 Props로 state를 넘겨 하위 텍스트 들을 채워보자.

1. props를 전송하는 방법은 동일하다 사용하는 컴포넌트의 위치에 아래처럼 작명

<Route path="/detail" element={ <Detail shoes={shoes}/> }/>

2. 이후 Detail.js 로 돌아가 아래 코드처럼 사용해주면 props를 사용가능하다.

   <h4 className="pt-5">{props.shoes[0].title}</h4>
      <p>{props.shoes[0].content}</p>
      <p>{props.shoes[0].price}원</p>

3. 그럼 페이지를 여러개 만들면 어떻게 해야함? 아래처럼 무식한 방법으로 만듬??

   <Route path="/detail/0" element={ <Detail shoes={shoes}/> }/>
   <Route path="/detail/1" element={ <Detail shoes={shoes}/> }/>
   <Route path="/detail/2" element={ <Detail shoes={shoes}/> }/> 

4. 저렇게 하지않기 위해 URL파라미터라는 문법을 사용 아래와 같은방법으로 path 에 /:id를 입력하면 말그대로 사용자가 url로 입력한 detail/다음의 parm을 가져와 보여준다는 뜻

   <Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

5. 근데 여기서 문제발생 2번 처럼 shoes[0]의 자료만 하드코딩 해왔기때문에 3번출력하면 결국 3개의 같은 페이지만 생성된다. 어떻게 해결?
6. useParam 이라는 훅을 사용하면 url파라미터에 입력된 숫자를 가져올수있음

   import { useParams } from 'react-router-dom';
   (생략)
   let {id} = useParams();
   return(
   (생략)
   <h4 className="pt-5">{props.shoes[id].title}</h4>

7. 문제!! 근데 만약 상품의 순서가 바뀌면 어떻게 상세페이지를 보여줌??? 1) 먼저 data.js에 상품명,타이틀 등과함께 구분지을수있는 id 값이 존재해야함 2) 이후 자바스크립트의 find()문법을 사용하여 배열의 오브젝트값인 id 를색출 3) array자료.find(()=>{ return 조건식 }) 이렇게 쓰면 조건식에 맞는 자료를 찾아서 이 자리에 남겨줌

   let { id } = useParams();
   let 찾은상품 = props.shoes.find(function(x){
    return x.id == id        
    // let 찾은상품 = props.art.find((x) => x.id == id);
   });
   return(
   (생략)
   <h4>{찾은상품.title}</h4>
   <p>{찾은상품.content}</p>
   <p>{찾은상품.price}원</p>

8. find()는 array 뒤에 붙일 수 있으며 return 조건식 적으면 됨 그럼 조건식에 맞는 자료 남겨줌
9. find() 콜백함수에 파라미터 넣으면 array자료에 있던 자료를 뜻함. x라고 작명해봤음
10. x.id == id 라는 조건식을 써봄. 그럼 array자료.id == url에입력한번호 일 경우 결과를 변수에 담아줌

8. styled-components

styled-components 는 css 사용없이 js파일 내에서 스타일을 변경하기 쉽기해주는 라이브러리이다. 따라서 사용하고 말고는 사용자 마음이며 간단한 개인 프로젝트에 사용하는걸 추천한다.

1. 터미널 에서 npm install styled-components
2. 사용할 컴포넌트 에서 import styled from 'styled-components'
3. 사용법 상단에서 변수와 변수명을 생성후 styled.태그명을 붙여준다.
4. 이후 ` 백틱을 사용하여 열고닫아 내부에서 css처럼 스타일을 변형시켜준다.

let Box = styled.div`
  padding : 20px;
  color : grey
`;

5. 이제 사용을 원하는 부분에 변수명을 컴포넌트로 선언해준다. <Box></Box>

6. Props를 사용하여 비슷한 컴포넌트의 색깔 스타일만 바꿀수도있다.

   import styled from 'styled-components';
   let YellowBtn = styled.button`
   background : ${ props => props.bg };  // 이부분
   color : black;
   padding : 10px;
   `;
   function Detail(){
   return (
    <div>
        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
   )
   }

   Q. 저거 ${ } 이거 무슨 문법임? A. 자바스크립트 `` 백틱 따옴표 안에 적어도 문자를 만들 수 있는데 백틱으로 만든 문자 중간에 변수같은걸 넣고 싶을 때 ${ 변수명 } 이렇게 쓸 수 있습니다.

   장점

7. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있습니다.

8. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다.

9. 페이지 로딩시간 단축됩니다.

   단점

10. JS 파일이 매우 복잡해집니다.

11. 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분도 어렵습니다.

12. CSS 담당하는 디자이너가 있다면 협업시 styled-components 문법을 모른다면 그 사람이 CSS로 짠걸 styled-components 문법으로 다시 바꾸거나 그런 작업이 필요함

    9. 생애주기와 useEffect

    컴포넌트는 크게 3가지의 생애주기(LifeCycle) 이 존재한다. 이를 알아야하는 이유는 생애주기 사이사이에서 간섭하여 이벤트를 발생시킬수있다는 뜻이다.

    1.생성이 될수있다. (Mount) 2.재렌더링이 될수있다. (Updata) 3.삭제가 될수있다. (Unmount) 크게 3개의 생애주기 사이에서 hook 으로 코드실행을 개입시키는것을 Lifecylce hook이라고 한다 ex) A컴포넌트가 실행될때 Go 라는 hook코드를 실행

    1. react에선 이러한 Lifecyclehook을 사용하기위해 useEffect를 사용한다.
    2. 사용법

    import {useState, useEffect} from 'react';
    function Detail(){
    useEffect(()=>{
     //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
     console.log('안녕')
    });
    let [count, setCount] = useState(0)
    return (
     <button onClick={()=>{ setCount(count+1) }}>버튼</button>
    )
    }

    3. useEffect 안에 있는 consolelog 안녕은 랜더 될때마다 실행된다 때문에 button의 onClick 이벤트로 인한 count state 변화에 의해 안녕이 계속 출력됨
    4. 근데 useEffect외부에 console.log를 하여도 똑같이 동작한다 다만 다른점은 내부에서 동작시 html이 먼저 동작하고 이후 내부코드가 돌아가기 때문에 시간절약이 가능하다 때문에오래걸리는 반복연산, 서버에서 데이터가져오는 작업, 타이머다는거 이런건 useEffect 안에 많이 적는다.

9-1. 생애주기와 useEffect2

useEffect에 대한 이해를 위해 2초동안 보여주는 레이아웃을 만들어보고 실행조건과 렌더링 에대한 이해를 해보자

1. 먼저 두가지 상태에 따라 바뀌는 UI 제작을 위해 State만들어주자.
2. State 값이 true 일때만<div>의 내용을 볼수있게 삼항연산자를 사용해주자.
   3. useEffect를 사용하여 내부에 setTimout이라는 함수를 넣어주자

function Detail(){

  let [alert, setAlert] = useState(true)
  useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
  }, [])

  return (
  {
    alert == true
    ? <div className="alert alert-warning">
        2초이내 구매시 할인
      </div>
    : null
  } ) }

여기서 보면 잘 이해가지 않는 부분이있다. 바로 useEffect 의 []부분 useEffect()의 둘째 파라미터로 [ ] 를 넣을 수 있는데 거기에 변수나 state같은 것들을 넣을 수 있다.그렇게 하면 [ ]에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 다음과 같이 실행한다. useEffect(()=>{ 실행할코드 }, [count]) 만약 [] 값에아무것도 안넣으면 컴포넌트 mount시 (로드시) 1회 실행하고 영영 실행해주지 않는다.useEffect(()=>{ 실행할코드 }, [])

Clean up function

useEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 넣을 수 있다. clean up function 이라고 부른다. 예를들어 setTimeout() 쓸 때마다 브라우저 안에 타이머가 하나 생깁니다. 근데 useEffect 안에 썼기 때문에 컴포넌트가 mount 될 때 마다 실행되고 잘못 코드를 짜면 타이머가 100개 1000개 생길 수도 있다.나중에 그런 버그를 방지하고 싶으면useEffect에서 타이머 만들기 전에 기존 타이머를 싹 제거하라고 코드를 짜면 되는데 그런거 짤 때 return ()=>{} 안에 짜면 된다.

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

useEffect를 사용해서 숫자만 입력가능한 input을 만들어보자

function Detail(){
  let [num, setNum] = useState('')
  useEffect(()=>{
    if (isNaN(num) == true){
      alert('그러지마세요')
    }
  }, [num])
  return (
    <input onChange((e)=>{ setNum(e.target.value) }) />
  )
}

isNaN 은 String 이 들어가면 true 를 int 가들어가면 false를 뱉는 함수이다. 이를 통해 input 의 target.value에 문자가 들어가면 if 문이 동작한다.

10. 서버와의 ajax 통신

서버란? 유저가 데이터를 요청하면 데이터를 보내주는 프로그램이다.서버에 데이터를 요청할 때는 정확한 규격에 맞춰서 요청해야하는데 아래와 같은 사항을 잘 기재해야 한다

1. 어떤 데이터인지 (URL 형식으로)
2. 어떤 방법으로 요청할지 (GET or POST) 출처:코딩애플

GET,POST 요청을 그냥 보내게 되면 브라우저가 새로고침 된다 그렇기 때문에 우리는 Ajax 라는 브라우저 기능을 사용한다. Ajax를 사용하면 새로고침 없이 서버로 정보를 보내거나 가져오는 기능을 만들수있다. Ajax로 GET/POST를 요청하는 방법은 여러개가 있는데 그중 axios같은 외부 라이브러리를 이용하는 방법이 가장편하다.

npm install axios

1. axios 사용할 위해 상단에서 import 해주자
2. axios.get(URL) 이러한 방식으로 요청이 가능하다.
3. 데이터 가져온 결과는 then이후의 지정되는 result.data안에 들어있습니다.
4. 여러사항으로 실패했을 때 실행할 코드는 .catch() 안에 적는다.

import axios from 'axios'

function App(){
  return (
    <button onClick={()=>{
      axios.get('https://codingapple1.github.io/shop/data2.json')
      .then((result)=>{
        console.log(result.data)
      })
      .catch(()=>{
        console.log('실패함')
      })
    }}>버튼</button>
  )
}

응용 문제

버튼을 누르면 서버에서 상품데이터 3개를 가져와서 메인페이지에 상품카드 3개를 더 생성해보자.

1. 서버에서 가져온 result.data를 확인하면 배열의 형태로 들어와있다.
2. 이는 기존의 data.js에 있는 상품카드의 데이터 정보와 같은 형태이다.
3. 그렇기때문에 기존의 상품카드 state에 새로운 result.data를 추가해준다.

   //(생략) 바로 위의 코드와 같음
      .then((result)=>{
           let copy = [...art, ...result.data];
          setArt(copy);
        console.log(art);
      })
   //(생략) 바로 위의 코드와 같음

   만약 버튼을 2회 누를때 7,8,9번 상품도 가져오려면?

4. 버튼의 입력횟수를 카운트 할 state를 하나 생성해야한다.
5. 삼항연산자를 사용하여 버튼입력횟수 마다 각각 다른 데이터 정보를 가져온다.
6. 세번이상 버튼을 누르면 알림 을 띄워 메시지를 보낸다.

   btn < 1
    ? axios.get('https://codingapple1.github.io/shop/data2.json')
             .then((result) => {setBtn(btn + 1);
                   // (생략 위의 코드와 같음)
   :
   btn < 2
    ? axios.get('https://codingapple1.github.io/shop/data3.json')
              .then((result) => {setBtn(btn + 1);
                   // (생략 위의 코드와 같음)
   : alert('추가할 상품이없습니다).                                                        

10-1. 서버와의 ajax 통신 2

ajax의 다른 요청방법들과 json에 대해 간략하게 알아보자

1. post 요청방법?

axios.post('URL', {name : 'kim'})

이거 실행하면 서버로 { name : 'kim' } 자료가 전송된다. 완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 된다.

2.동시에 AJAX 여러 요청

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

이러면 URL1, URL2로 GET요청을 동시에 해준다. 둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다.

3. 배열을 원래는 못가져온다?

object/array 이런거 못주고받는다. 근데 방금만해도 array 자료 받아온 것 같은데 그건 어떻게 한거냐면 object/array 자료에 따옴표를 쳐놓으면 된다. "{"name" : "kim"}" 이걸 JSON 이라고 한다. JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있다. 그래서 실제로 결과.data 출력해보면 따옴표쳐진 JSON이 나와야하는데 axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서 출력해보면 object/array가 나온다.

4. 자주하는 실수

1. ajax요청으로 데이터를 가져와서
2. state에 저장하라고 코드를 짜놨고
3. state를 html에 넣어서 보여달라고 <div> {state.어쩌구} </div> 이렇게 코드 짰는데.잘 될 것 같은데 이 상황에서 state가 텅 비어있다고 에러가 나는 경우가 많다. 이유는 ajax 요청보다 html 렌더링이 더 빨라서 그럴 수 있다. state안에 뭐가 들어있으면 보여달라고 if문 같은걸 추가하거나 그러면 된다.

11. 리액트에서 탭 UI만들기

여러 사이트에서 흔히 볼수있는 탭 UI를 만들어보자 버튼 3개를 미리 만들고 버튼을 누를 때마다 그에맞는 박스를 보여주는 탭 UI가 필요하다

간단한 작업이라도 3Step 을 통해 천천히 진행하자

1. html css로 디자인 미리 완성해놓고
2. UI의 현재 상태를 저장할 state 하나 만들고
3. state에 따라서 UI가 어떻게 보일지 작성하면 된다고 했다.

1)디자인은 react-bootStrap 의 nav 를 검색하여 참고했다

<Nav variant="tabs"  defaultActiveKey="link0">
    <Nav.Item>   //defaultActiveKey 여기는 페이지 로드시 어떤 버튼에 눌린효과를 줄지 결정하는 부분입니다. 
      <Nav.Link eventKey="link0">버튼0</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link1">버튼1</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link eventKey="link2">버튼2</Nav.Link>
    </Nav.Item>
</Nav>
<div>내용0</div>
<div>내용1</div>
<div>내용2</div> 

2) UI의 현재 상태를 저장할 state 하나 만들기 0,1,2 3가지의 상태가 필요하기 때문에 초기값은 0으로 선언

function Detail(){
  let [탭, 탭변경] = useState(0)
  (생략)
}

3) state에 따라서 UI가 어떻게 보일지 작성 삼항연산자,컴포넌트,배열 어떤 방식으로 하든지 자유다. 여러 방식대로 한번 짜보자 3-1) function외부에 컴포넌트로 만들기 props.tab 으로 상속 받지않아도{탭} 으로 바로 state를 가져올수있다. 그리고 외부에 컴포넌트로 사용하면return을 사용해야한다.

function Detail(){
  let [탭, 탭변경] = useState(0)
  return (
    <TabContent/>
  )
}
function TabContent({탭}){
  if (탭 === 0){
   return <div>내용0</div>
  }
  if (탭 === 1){
   return <div>내용1</div>
  }
  if (탭 === 2){
   return <div>내용2</div>
  }
}

3-2) array 를 사용해서 if 문없이 만들어보자 아래와 같은 형식은 [A배열] [B배열]=상수 형태임으로 상수 배열 B를 통해 A배열의 위치를 특정해 가져올수있다.

function TabContent(props){
  return [ <div>내용0</div>, <div>내용1</div>, <div>내용2</div> ]
          [props.탭]
}

12. 컴포넌트 전환 애니메이션 주는 법 (transition)

컴포넌트를 사용할때 애니메이션을 통해 좀더 매끄러운 표현이 가능하다 이는 누군가 만들어놓은 라이브러리를 이용하여도 괜찮지만 그래도 간단한 애니메이션은 css 를 통하여 대체 할수있다.

애니메이션을 만들기위한 step 애니메이션 만들고 싶으면

1. 애니메이션 동작 전 스타일을 담을 className 만들기
2. 애니메이션 동작 후 스타일을 담을 className 만들기
3. transition 속성도 추가
4. 원할 때 2번 탈부착 탭의 내용이 서서히 등장하는 fade in 애니메이션을 만들어보자

1) 애니메이션 동작 전 2. 애니메이션 동작 후 className 만들기

.start {
  opacity : 0
}
.end {
  opacity : 1;
}

3) transition 추가 transition은 "해당 속성이 변할 때 서서히 변경해주셈~" 이라는 뜻이다. 그럼 이제 원하는 <div> 요소에 start 넣어두고 end 를 탈부착할 때 마다 fade in이 된다.

.start {
  opacity : 0
}
.end {
  opacity : 1;
  transition : opacity 0.5s;
}

4) 원할 때 end 부착 동작원리를 알아보면 start가 실행되고 end가 나중에 뒤에 붙어 순간적으로 className='start end'가 되었을때 opacity 투명도가 fade in되는 것이다. 이제 "버튼을 누를 때 className에 end를 부착해주세요" 라고 코드짜면 애니메이션 동작한다.useEffect 를통해 활용할수 있을거 같다. useEffect 쓰면 특정 state 아니면 props가 변할 때 마다 코드실행이 가능하다, 그래서 "탭이라는 state가 변할 때 end를 저기 부착해주세요" 라고 코드를 짜면 좋을듯

function TabContent({탭}){

  let [fade, setFade] = useState('')

  useEffect(()=>{
    setFade('end')
  }, [탭])

  return (
    <div className={'start ' + fade}>
      { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭] }
    </div>
  )
}

5) 첫번째 동작에러 위의 코드가 동작하지 않는 이유는 start -> start end의 과정처럼 떼었다 붙여져야 하는데 바로 붙은 상태가 되버리기 때문이다. 이를 위해 우리는 setFade('') 를 작성 해주어야한다 이때 이전에 배운 cleanUp코드를 활용하면 아주좋다.

 return () => {
            setFade('');

6) 두번째 동작에러 clean up 으로 end 를 떼어줘도 동작하지 않는다? 이는 react 의 automatic batch 라는 기능때문인데 쉽게 말해 state의 변경 함수가 연달아 여러개 처리 될때 부하를 막기위해 계속 렌더링 하는것이 아닌 모두 처리된 이후의 마지막 state 상태만 렌더링 하는 기능이다. 이때문에 우리는 state에 약간의 딜레이를 부여해 렌더링이 겹치는걸 방지해야 한다. 저번에 사용했던 TimeOut 함수를 써보자.

 function TabContent({탭}){

  let [fade, setFade] = useState('')

  useEffect(()=>{
    let a = setTImeout(()=>{ setFade('end') }, 100)
  return ()=>{
    setFade('')
    clearTimeout(a);
  }
  }, [탭])

  return (
    <div className={'start ' + fade}>
      { [<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][탭] }
    </div>
  )
}

13. Redux 1 : Redux Toolkit 설치 (장바구니 페이지 만들기)

장바구니 페이지를 만들어보고 Props 를통해 state를 이동하는것이 아닌 Redux라는 라이브러리를 사용해 state 의 사용을 편하게 해보자.

1. 새로운 페이지를 만들기위해 먼저 Route와 nav에 추가해주자. <Route path="/cart" element={ <Cart/> } />
2. Route에 담기에 페이지가 크기 때문에 컴포넌트로 분류하고 import 해주자.
3. 편하게 제작하기위해 bootStrap에서 Table에 대한 양식을 가져와주자.
4. <thead>태그로 가로를 th 태그로 컬럼을 나누고 td태그로 속성을 구분

   <Table>
   <thead>
   <tr>
     <th>#</th>
     <th>상품명</th>
     <th>수량</th>
     <th>변경하기</th>
   </tr>
   </thead>
   <tbody>
   <tr>
     <td>1</td>
     <td>안녕</td>
     <td>안녕</td>
     <td>안녕</td>
   </tr>
   </tbody>
   </Table> 

5. 장바구니 기능을 사용하려면 상단의 App.js에서 State를 가져와야하는데 이를 편하게 하기위해 Redux를 배워볼것이다.

Redux란?

Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다. js 파일 하나에 여러 state들을 보관할수있어 모든 컴포넌트가 직접 꺼내쓸수있다. npm install @reduxjs/toolkit react-redux redux 를 설치해주자. 근데 설치하기 전에 package.json 파일을 열어 react``react-dom 항목의 버전을 확인하자. 두개가 18.1.x 이상이면 사용가능하다,.

Redux 세팅

import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
  reducer: { }
}) 

아무데나 store.js 파일을 만들어서 위 코드를 넣어주자 아까 말했던 state들을 보관하는 파일이다..

import { Provider } from "react-redux";
import store from './store.js'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
); 

index.js 파일가서 Provider 라는 컴포넌트와 아까 작성한 파일을 import 해옵니다. 그리고 밑에 이걸로 을 감싸면 된다.이제 과 그 모든 자식컴포넌트들은 store.js에 있던 state를 맘대로 꺼내쓸 수 있다.

14. Redux 2 : store에 state 보관하고 쓰는 법

본격적으로 Redux를 사용하기전에 우리는 왜 State를 사용한 props 들을 왜 쓴지 부터 알아야한다. 20~50개의 컴포넌트를 사용하는 중대형 프로젝트의 경우 Redux사용을 통해 복잡한 코드의 양을 줄일수있지만

몇개안되는 컴포넌트의 사용과 한 파일구조내에서 이동하는 State들을 전부 Redux로 표현한다면 오히려 코드양이 많아지기때문에 적절하게 타협을 보면서 두가지 방법을 사용해야한다.

Redux store에 State를 보관해보자.

1. store.js 를열어 createSlice()를 먼저 import 해준다.

2. createSlice 에 { name : 'state이름', initialState : 'state값' }

3. 2번과 같이 선언해주면 state 하나가 생성가능하게된다.

4. configureStore() 라는 변수도 import 해준다.

5. configureStore() 안에 {작명 : createSlice만든거.reducer}선언

   import { configureStore, createSlice } from '@reduxjs/toolkit'
   

let user = createSlice({ name : 'user', initialState : 'kim' })

export default configureStore({ reducer: { user : user.reducer } })

 > 
  ### Redux store에 있던 state를 가져다 써보자
  아무 컴포넌트에서 `useSelector((state) => { return state } )` 쓰면 store에 있던 모든 state가 그 자리에 남는다.

```js
  (Cart.js)

import { useSelector } from "react-redux"

function Cart(){
  let a = useSelector((state) => { return state } )
  console.log(a)

  return (생략)
}

응용문제

아래와 같은 오브젝트형 데이터를 Store에 담으려면 똑같이 name을 설정하고 initialState선언에 오브젝트 그대로 넣어주면 state로 선언이 가능하고 컴포넌트에서 사용시 {a.name[0]?.id} 이러한 형식으로 배열을 불러서 사용

  [
  {id : 0, name : 'White and Black', count : 2},
  {id : 2, name : 'Grey Yordan', count : 1}
] 

15. Redux 3 : store의 state 변경하는 법

1.store.js에 state변경해주는 함수를 만들고 2.export 한다. 3. 필요할때 import 해서 사용하면 되는데 dispatch()로 함수를 감싸서 사용해야한다.

1. store.js 안에 state를 수정해주는 함수를 생성한다.

  let user = createSlice({
  name : 'user',
  initialState : 'kim',
  reducers : {
    changeName(state){
      return 'john ' + state
    }
  }
}) 

slice 안에 reducers :{} 를 열고 그안에 함수를 생성하면 된다. 함수 작명은 원하는대로 가능하며 파라미터 하나를 작명해 기존state를 사용할수있다 return 우측에 새로운 state를 입력하면 그 값으로 기존 state를 갈아치워준다.

2. 다른곳에서 쓰기좋게 export 해준다.

export let { changeName } = user.actions 이런 코드를 store.js 밑에 추가하면 된다. slice이름.actions 라고 적으면 state 변경함수가 전부 그자리에 출력된다. 그걸 변수에 저장했다가 export 하라는 코드이다.

3. import 해서 사용한다. 근데 dispatch()로 감싸서

  (Cart.js)
import { useDispatch, useSelector } from "react-redux"
import { changeName } from "./../store.js"
(생략) 
<button onClick={()=>{
  dispatch(changeName())
}}>버튼임</button> 

Cart.js 에서 버튼을 만들어 ChangeName 함수를 실행하는 코드이다. store.js 에서 원하는 state변경함수를 가져오고 useDispatch라는 것도 라이브러리에서 가져온다 그리고 dispatch(state변경함수()) 이런식으로 감싸서 실행하면 state가 변경된다.

왜이런식으로 할까??

컴포넌트 100개에서 직접 'kim' 이라는 state 변경하다가 갑자기 'kim'이 123이 되어버리는 버그가 발생할수있다.범인 찾으려고 컴포넌트 100개를 다 뒤져야하는데 만약 state 수정함수를 store.js에 미리 만들어두고 컴포넌트는 그거 실행해달라고 부탁만 하는 식으로 코드를 짜놓으면 'kim'이 123이 되어버리는 버그가 발생했을 때 범인찾기가 수월할것이다. 범인은 무조건 store.js에 있으니까. (수정함수를 잘 만들어놨다면)

16. Redux 4 : state가 object/array일 경우 변경하는 법

store에 저장된 state가 array,object 자료인 경우 state 변경을 편리하게 할수있다

redux state가 array/object 인 경우 변경하려면?

1. {name:'kim',age:20} 이렇게 생긴 자료를 state 로 만들어보자

2. kim이라는 내용을 park으로 변경하는 함수를 만들고싶으면 state변경함수는 아래처럼 만든다.

   let user = createSlice({
   name : 'user',
   initialState : {name : 'kim', age : 20},
   reducers : {
   changeName(state){
    return {name : 'park', age : 20}
   }
   }
   }) 

   이러한 코드를 사용하면 changeName()함수 사용시 당연히변경된다 그러면 아래처럼 state를 직접 수정하게 하면 어떻게 될까

   let user = createSlce({
   (생략)
   reducers : {
   changeName(state){
    state.name = 'park'
   }
   }
   }) 

   이러한 코드를 사용해도 immer.js라이브러리 를 통해 잘 동작한다. 결론은 array/object 자료의 경우 state변경은 직접 수정해도 되니까 직접 수정하자 때문에 state를 만들때 문자나 숫자하나만 필요해도 redux에선 일부러 object 아니면 array에 담는 경우가 있는데 이는 수정이 편리해서이다.

   응용 문제 1

   사이트에 버튼을 만들어 클릭시 age 항목이 +1 되게 만들어보자

   let user = createSlice({
   name : 'user',
   initialState : {name : 'kim', age : 20},
   reducers : {
   increase(state){
    state.age += 1
   }
   }
   })

   이렇게 increase라는 함수 만들어 export 하고 필요한 곳에서 import 해서 dispatch(increase()) 하면 +1 된다.

   응용문제2

   그러면 변경함수가 여러개 필요하면 여러 함수를 전부 redux에 넣음?? 동작은 같으나 횟수나 인자가 다를경우 우리는 파라미터 문법을 사용할수있다. 아래처럼 코드를 사용하면 action이라는 파라미터를 주어 함수를 사용하는 컴포넌트에서 값을 설정해 원하는 만큼 함수의 실행을 도울수있다. 이때 꼭 파라미터 뒤에는 .payload를 사용해주자

   let user = createSlice({
   name : 'user',
   initialState : {name : 'kim', age : 20},
   reducers : {
   increase(state, a){
    state.age += a.payload
   }
   }
   }) 

   파라미터를 사용해주면 increase(10)하면 10을 더하고 increase(100하면 100을 더할것이다.

   17. Redux 5 : 장바구니 기능 만들기 & 응용문제

   여러 응용문제를 통해 장바구니 기능을 활성화 시켜보자

   응용문제1

   장바구니 오브젝트에서 수량+1 기능을 만들어보자

   let cart = createSlice({
   name : 'cart',
   initialState : [
   {id : 0, name : 'White and Black', count : 2},
   {id : 2, name : 'Grey Yordan', count : 1}
   ],
   reducers : {
   addCount(state, action){
    state[action.payload].count++
   }
   }
   }) 

   addCount 라는 함수를 만들어 파라미터로 action을 주어 addCount(0)하면 0번째 상품이 +1 addCount(1)하면 1번째 상품이 +1 된다. export해서 필요할때 사용하면 될거같고 장바구니 컴포넌트 에선 대충 이렇게 쓰면 될거같다.

   <button onClick={()=>{ dispatch(addCount(i)) }}>+</button>

   어짜피 map을 통해 반복 되니까 파라미터 i를 써서 열마다 새로운 i값을 받을수있다. 0번째 버튼을 누르면 addCount(0) 실행 이런식으로

   응용문제 1(심화)

   그런데 만약 테이블의 정렬 순서가 바뀌면?? 저러한 방식으로 코드를 사용하면 오브젝트안의 데이터 순서가 바뀔경우 버그가 발생할것이다. 그렇기때문에 우리는 데이터마다 가진 고유의 id 값을 확인하여 count++ 를 해줄것이다. 먼저 장바구니 컴포넌트의 코드를 조금 수정해주자.

   <button
   onClick={()=>{ dispatch(addCount(state.cart[i].id)) }}>
   +</button>

   이런식으로 코드를 짜면 dispatch안의 addCount 내용은 state.cart[i]에 대한 id 값 즉 사용자가 선택한 테이블의 id 값을 가지고있을것이고 그 값은 action.payload 로 전송됨.

   이제 addCount 함수를 수정해보자

   "payload와 같은 id를 가진 상품을 찾아서 +1 해달라~" 이 말을 js로 풀어서 써넣어야한다. state 오브젝트 안에서 payload 와 같은 id 를 찾아서 그 값을 가진 테이블의 count 1증가해달라 해야한다 그럼 코드를 보자

   let cart = createSlice({
   name : 'cart',
   initialState : [
   {id : 0, name : 'White and Black', count : 2},
   {id : 2, name : 'Grey Yordan', count : 1}
   ],
   reducers : {
   addCount(state, action){
    let 번호 = state.findIndex((a)=>{ return a.id === action.payload })
    state[번호].count++
   }
   }
   }) 

   array 자료에서 원하는 항목을 찾으려면 반복문, find(), findIndex() 사용!!!!

   • findIndex()는 array 뒤에 붙일 수 있다.
   • 안에 콜백함수넣고 return 뒤에 조건식도 넣으면 된다.
   • a라는 파라미터는 array 안에 있던 하나하나의 자료다.
   • array에 있던 자료를 다 꺼내서 조건식에 대입해보는데 조건식이 참이면 그게 몇번째 자료인지 알려준다.
     그래서 위의 코드는 a.id와 payload가 같으면 그게 몇번째 자료인지 변수에 저장하라는 소리다.

응용문제 2

주문버튼누르면 state에 새로운 상품추가

상세페이지의 주문하기 버튼을 누르면 장바구니 state에 항목이 하나 추가되는 기능을 만들어보자 이것도 state 변경함수 만들고 export하고 import해서 사용한다.

  let cart = createSlice({
  name : 'cart',
  initialState : [
    {id : 0, name : 'White and Black', count : 2},
    {id : 2, name : 'Grey Yordan', count : 1}
  ],
  reducers : {
    addCount()
  (생략)
    addItem(state, action){
      state.push(action.payload)
    }
  }
}) 

addItem()이라는 함수를 만들어 state 오브젝트에 새로운 배열을 action.payload 에 가져와 push 하는 과정을 진행해보자.

(Detail.js)

<div className="col-md-6">
  <h4 className="pt-5">{찾은상품.title}</h4>
  <p>{찾은상품.content}</p>
  <p>{찾은상품.price}원</p>
  <button className="btn btn-danger" onClick={()=>{
    dispatch(addItem( {id : 1, name : 'Red Knit', count : 1} ))
  }}>주문하기</button>
  </div>
</div> 

상세페이지(Detail.js)에서도 useDispatch를 import 해주고 만든 addItem()함수도 import 해주자. 그리고 위와같이 id,name,count등을 넣어주면 새로운 데이터가 배열안에 들어간다. 우리는 찾은 상품의 id,title등을 알고있으니 저런식으로 하드코딩이아닌

  addItem({id: finded.id, name: finded.title, count: 1,})

이와 같은 방법으로 state 를 연결해주면 더 좋을거같다.

응용문제 3

표의 행마다 삭제버튼 만들고 그거 누르면 상품이 삭제되게 만들려면?

문제를 해결하려면 일단 배열에서 특정 값을 제거하는 함수를 알아야한다 검색으로 pop과 splice라는 함수를 알게되었다 이중 응용1번 처럼 장바구니의 값을 정렬할때 위치가 바뀔수도 있으니 고유 번호인 id값을 기준으로 진행하게 할려면 아래와 같이 코드를 사용할수 있을것이다.

  DeleteItem(state, action) {
            let paynum = state.findIndex((a) => {
                return a.id === action.payload;
            });
            state.splice(paynum, 1);
        },

state.spicle(paynum,1)은 이제 배열의 paynum에 해당하는 객체부터 ~1만큼 제거하겠다는 뜻이다 즉 paynum에 해당하는 객체만 삭제

 <button
 onClick={() => {dispatch(DeleteItem(state.cartdata[i].id));}}

사용하는 cart.js 부분에도 응용 1과 같이 cartdata.id값을 보내주면 끝.

응용문제 4

주문하기 버튼 누를 때 이미 상품이 state안에 있으면 추가가 아니라 기존 항목 수량증가만?

기존의addItem에서 if 문을 사용해 장바구니에 이미 존재하는 id 는 count++하고 없는 id 만 add 해주는 과정이 필요할꺼같다.

   addItem(state, action) {   
// id 를 확인해 이미 장바구니에 있는 id면 count+ 아니면 새로 push
            let paynum = state.findIndex((a) => a.id === action.payload.id);
            if (paynum >= 0) {
                state[paynum].count++;
                console.log(paynum);
            } else {
                state.push(action.payload);
                console.log(paynum);
            }
        },

여기서 중요하게 봐야할 부분은 paynum >=0 부분이다 paynum에 어떤 내용이 뜨는지 정확히 보기위해 console.log로 확인해보니 장바구니에 있는 값이면 그 id값의 배열 번호가 뜨고 만약 없으면 -1음수가 나왔다 그러므로 if 문을 사용하여 0보다 크면 count++ 작으면 새로 push하는 코드를 작성했다.

onClick={() => { dispatch(
    addItem({
        id: finded.id,
        name: finded.title,
        count: 1,
            })
        );

18. localStorage로 만드는 최근 본 상품 기능1

새로고침하면 모든 state 데이터는 리셋된다. 왜냐면 새로고침하면 브라우저는 html css js 파일들을 첨부터 다시 읽기 때문이다. 이게 싫다면 state 데이터를 서버로 보내서 DB에 저장하거나 하면 된다. 내가 서버나 DB 지식이 없다면 localStorage를 이용해도 된다. 유저의 브라우저에 몰래 정보를 저장하고 싶을 때 쓰는 공간이다. 크롬개발자 도구에서 Application 탭 들어가면 볼수있으며 사이트마다 5MB정도의 문자 데이터를 저장할 수 있다. object 자료랑 비슷하게 key/value 형태로 저장하며 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아있는다. 밑에 있는 Session Storage도 똑같은데 브라우저 끄면 삭제되는 휘발성.

사용법

js 파일 아무데서나 다음 문법을 쓰면 localStorage에 데이터 입출력 할 수 있다. 차례로 추가, 읽기, 삭제 문법이다.

   localStorage.setItem('데이터이름', '데이터');
localStorage.getItem('데이터이름');
localStorage.removeItem('데이터이름')

object 는 못함?

localStorage에 array/object 자료를 저장하려면 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수는 없다. 강제로 저장 해보면 문자로 바꿔서 저장해주는데 그럼 array/object 자료가 깨진다. 그래서 편법이 하나 있는데 array/object -> JSON 이렇게 변환해서 저장하면 된다.JSON은 문자취급을 받아서 그렇다. JSON은 그냥 따옴표친 array/object 자료다.

localStorage.setItem('obj', JSON.stringify({name:'kim'}) );

이런식으로 코드를 만들면 obj라는 key를 가지고 name:kim이라는 object 값의 value를 가진 값을 저장할수있다.

   var a = localStorage.getItem('obj');
var b = JSON.parse(a)

당연히 꺼낼때도 그냥 꺼내면 JSON값을 그대로 가져오기 때문에 JSON.parse를 사용해서 array/object값으로 다시 변경해줘야한다.

응용문제 1

localStorage 를 사용해서 main페이지에서 최근 열람한 상품들을 간단하게 보여주는 ui를 만들어보자 그러기 위해선 id 값들을 가져와야한다. 1.먼저 최상단의 App.js 에서 시작시 localStorage에 배열을 넣어 초기화하자.

   useEffect(()=>{
    localStorage.setItem('watched', JSON.stringify( [] ))
  },[]) 

2.Detail.js에서 get 을 통해 watched배열을 가져와보자. 3. 가져온 배열에서 현재있는 상품 페이지의 id를 넣는다. 4. set으로 다시 배열을 localstorage 에 저장하자.

   (Detail.js)
useEffect(()=>{
  let 꺼낸거 = localStorage.getItem('watched')
  꺼낸거 = JSON.parse(꺼낸거)
  꺼낸거.push(찾은상품.id)
  localStorage.setItem('watched', JSON.stringify(꺼낸거))
}, [])

5. 작동은 잘하지만 이미본 상품도 계속 추가되는 버그가 있다 고쳐보자
   6. 상품 id에 이미 같은 값이 있으면 추가하지말라고 if문을 사용할수있지만 set이란 문법을 통해 중복을 제거하고 다시array로 감싸는 방법을 사용해보자 아래의 두 문장을 중간에 넣어주면 잘 동작 할거다.

      (생략)
      꺼낸거 = new Set(꺼낸거)
      꺼낸거 = Array.from(꺼낸거)
      (생략)

   7. 근데 사이트 새로고침시 배열이 전부 사라지게 되는데 이는 우리가 처음에 선언한 app.js의 watched에 대한 useEffect 때문이다.if문을 통해 배열이 null값이 아니라면 실행하지 않겠다고 선언하자.

19. 실시간 데이터가 중요하면 react-query

ajax 요청하다보면 아래와 같은 기능들이 필요해진다.

• 몇초마다 자동으로 데이터 다시 가져오게 하려면?

• 요청실패시 몇초 간격으로 재시도?

• 다음 페이지 미리가져오기?

  • ajax 성공/실패시 각각 다른 html을 보여주려면?

  이러한 기능들을 react-quert를 사용하면 쉽게 넣을수있다.

  react-query 세팅

  1. 설치: npm install @tanstack/react-query
  2. 세팅: index.js 로 가서 아래의 코드 Import import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'
  3. 원래의 index.js 코드에 2번을 import 하고 QueryClient태그로 감싸준다.

     <QueryClientProvider client={queryClient}> 
     <Provider store={store}>
     <BrowserRouter>
      <App />
     </BrowserRouter>
     </Provider>
     </QueryClientProvider>

  4. https://codingapple.com/course-status/ 기능

  20. 성능 개선 1 개발자도구 & lazy import

  크롬 확장프로그램 : React Developer Tools

  props를 보냈는데 출력이 안된다거나 이미지를 넣었는데 안보이는 버그같은게 생기면 개발자도구를 켜서 Elements 탭 살펴보면 되는데 여기선 짠 코드가 실제 html css로 변환되어서 보인다. 그게 싫고 컴포넌트로 미리보고 싶으면 리액트 개발자도구를 설치해서 켜보면 됨.

  위의 확장 프로그램을 사용하여 컴포넌트를 미리 확인 할수있으며 왼쪽상단 아이콘눌러서 컴포넌트 찍어보면 거기 있는 state, props 들을 조회가 가능하다. Profiler 탭에서는 녹화버튼을 누르고 앱에서의 동작 버튼클릭 페이지이동 들을 해본후 녹화를 종료하면 방금 렌더링된 모든 컴포넌트의 렌더링 시간을 측정해준다 이를통해 딜레이 걸리는 문제들을 확인이 가능하다. Redux전용 developer tools도 있으니 나중에 사용해보자.

  lazy import

  react 를 다짜고 나서 배포를 할려고 build하는 순간 우리가 짠 모든 코드의 내용이 하나의 js 에 묶여서 배포된다. 이렇게되면 js의 용량이 크기때문에 사용자가 처음 접속시 시간이 오래걸리것이며 이를 자원을 크게 잡아 먹는다고 말할수있다. 그렇기 때문에 우리는 lazy import라는 것을 사용해 메인에서 바로 처리하지 않는 컴포넌트를 사용하기 전까지 자원을 받지 않게 할것이다. 예를들어 아래의 코드는 App.js의 시작시 사용되지않음으로

  (App.js)
  import Detail from './routes/Detail.js'
  import Cart from './routes/Cart.js'

  다음과 같이 바꿔줄것이다.

  (App.js)
  import {lazy, Suspense, useEffect, useState} from 'react'
  const Detail = lazy( () => import('./routes/Detail.js') )
  const Cart = lazy( () => import('./routes/Cart.js') )

  물론 lazy import도 사용이 가능한데 이는 선언한 컴포넌트들이 필요하면 그때 load 해주세요 라는 의미를 담고있다. lazy를 사용하면 당연히 Detail 컴포넌트 로드까지 지연시간이 발생한다.

  1. Suspense 라는거 import 해오고
  2. Detail 컴포넌트를 감싸면 Detail 컴포넌트가 로딩중일 때 대신 보여줄 html 작성도 가능하다. 귀찮으면 <Suspense>이걸로 <Routes> 전부 감싸도 된다.

     <Suspense fallback={ <div>로딩중임</div> }>
     <Detail shoes={shoes} />
     </Suspense>

  ##21. 성능 개선2 재렌더링 막는 memo, useMemo

  컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링된다.리액트는 그렇게 대충 무식하게 동작하는데 평소엔 별 문제가 없겠지만 자식컴포넌트가 렌더링시간이 1초나 걸리는 무거운 컴포넌트면 곤란해진다. 부모컴포넌트에 있는 버튼 누를 때 마다 1초 버벅이는 불상사가 발생하기때문 그럴 땐 자식을 memo로 감싸놓으면 된다.

  function Child(){
  console.log('재렌더링됨')
  return <div>자식임</div>
  }
  

function Cart(){ let [count, setCount] = useState(0)

return ( <button onClick={()=>{ setCount(count+1) }}> + ) }

 >테스트용 자식 컴포넌트 를 하나 만들어보았다. 이제 만약 `cart`컴포넌트가
   재렌더링 될때 `child`컴포넌트 또한 재렌더링 될것이다. 만약 `child`가 이처럼 가벼우면 상관없는데 1초 정도 걸리는 동작이 들어가면 버튼 하나
   누를때 마다 동작이 더뎌질것이기 떄문에 memo를 통해 꼭 필요할때만
   재렌더링 되게 바꿔줄수있다.
   위의 코드에서 child 함수부분만 살짝바꿔줘 보자

```js
   let Child = memo( function(){
  console.log('재렌더링됨')
  return <div>자식임</div>
})

이제 cart가 재렌더링 될때 같이 재렌더링 되는게아닌 child자체의 state가 변경 될때만 console이 찍힐것이다. 즉 button을 누를 때만 작동된다는 뜻이다.import 도 까먹지 말고 해주자 import {memo, useState} from 'react' 그렇다고 memo를 전부 사용하면 문제가 발생되는데 이는 memo의 동작 안에 기존의 state와 이후 state의 변경점을 확인하는 연산이 있기 때문에 많은 사용은 오히려 부하를 주기 때문이다.

##22. 성능 개선 3 useTransition

렌더링시간이 매우 오래걸리는 컴포넌트가 있다고 했을때 버튼클릭, 타이핑할 때 마다 그 컴포넌트를 렌더링해야한다면 이상하게 버튼클릭, 타이핑 반응속도도 느려진다 개선방법을 알아보자. 당연히 그 컴포넌트 안의 html 갯수를 줄이면 대부분 해결되는데 근데 그런게 안되면 useTransition 기능을 쓰면 된다.

   import {useState} from 'react'

let a = new Array(10000).fill(0)

function App(){
  let [name, setName] = useState('')

  return (
    <div>
      <input onChange={ (e)=>{ setName(e.target.value) }}/>
      {
        a.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )
}

위처럼 사용자가 input에 입력한 정보를 map을 통한 10000개의 값을 가진 배열에 집어넣어 <div>안에 보여주는 무식한 코드를 만들어보자 유저가 <input>에 타이핑하면 그 글자를 <div> 1만개안에 집어넣어줘야하는데 <div> 1만개 렌더링해주느라 <input>도 많은 지연시간이 발생한다.

   import {useState, useTransition} from 'react'
   let a = new Array(10000).fill(0)

function App(){
  let [name, setName] = useState('')
  let [isPending, startTransition] = useTransition()

  return (
    <div>
      <input onChange={ (e)=>{ 
        startTransition(()=>{
          setName(e.target.value) 
        })
      }}/>

      {
        a.map(()=>{
          return <div>{name}</div>
        })
      }
    </div>
  )

useTransition() 쓰면 그 자리에 [변수, 함수]가 남는다. 우측에 있는 startTransition() 함수로 state변경함수 같은걸 묶으면 그걸 다른 코드들보다 나중에 처리해준다. 그래서 <input> 타이핑같이 즉각 반응해야하는걸 우선 처리해줄 수 있다. 물론 근본적인 성능개선이라기보단 특정코드의 실행시점을 뒤로 옮겨주는 것일 뿐이다.

isPending은 어디다 쓰냐면

   {
  isPending ? "로딩중기다리셈" :
  a.map(()=>{
    return <div>{name}</div>
  })
} 

startTransition() 으로 감싼 코드가 처리중일 때 true로 변하는 변수다.그래서 이런 식으로 코드짜는 것도 가능 위의 코드는 useTransition으로 감싼게 처리완료되면 <div>{name}</div> 이게 보이겠군요.

DataManage 에 JSON 값을 넣기위해 string 으로 변환해서 넣어준다.

const jsonDataTostring = JSON.stringify(data.result);
DataManager.storage.set("loginInfo", jsonDataToString);
navigation.navigate('home')

home 으로 넘어가 userToken을 get 해본다. 돌아와서 값을 받을때 제대로 출력하기 위해 다시 Json으로 바꾸어준다.

const loginInfo = DataManager.storage.getString('loginInfo')
const loginInfoToJson = JSON.parese(loginInfo);

Dart 는 ui에 최적화된 개발환경을 가지고있으며 상당히 빠르다는 장점이있다. Dart 의 종류에는 dart web , dart native 가 존재한다. Dart 를 사용하여 IOS,Android,Windows,Linux,Mac 으로 컴파일이 가능하다.

장점

기존의 C++,C,GO 와 같은 언어들로 코딩할때는 AOT 방법으로 입력된 언어를 기계어로 컴파일 해야 했지만 이는 UI 에 대한 작업을 할때 하나의 버튼 수정만해도 계속해서 처음부터 컴파일해야 하기 때문에 Dart 는 JIT 방법 또한 채택 하였다. 이는 Dart Vm을 사용해 개발자가 쓴 코드의 결과를 바로 화면에 보여준다.하지만 결국 개발이후 배포 과정에선 AOT를 이용한 컴파일을 해야한다.

체험

Dart 를 체험하기 위해 dartpad.dev 링크로 들어가 시작해본다.

🚨🚨 주의사항 🚨🚨 1.Dart는 main mathod 를 중점으로 내부코드를 작성해 동작한다. 2.Dart 에서 세미콜론을 안쓰는 기능이 있기때문에 세미콜론이 자동적으로 찍히지않아 유의해야한다.

VARIABLES

변수생성

메소드 내부에서 사용할때 var를 통해 자동적으로 명시되는 경우

var name = '이름' ;
name = '김김김';

class 에서 변수나 property를 선언할때 타입을 명시하는 경우

String name = '이름';
name = '김김김' ;

dynamic

var와 동일하게 동작되는 동적타입 변수이다. 외부에서 데이터를 받았을때 그 데이터를 필터링 할수있는 느낌이다.

dynamic name;
if(name is String){
 name.메소드
}
if(name is boolean){
 name.메소드
}

nullable

null이 될수도 있는 값을 뜻한다. 첫번째의 경우 에러가 발생해 String 뒤에 ? 를 명시하여 nullable 를 나타낸다. 두번째와 세번째의 코드는 동일하게 작동하며 세번째의 코드가 Dart의 장점을 활용해 단축 시켰다 볼수있다.

String name ='김김김';
name = null;

String? name ='김김김';
name = null;
if (name != null){
    nico.isNotEmpty;
}

String? name ='김김김';
name = null;
name?.isNotEmpty

Final Variables

var 대신 final 로 변수를 지정해주면 변수타입을 변경할수 없게 설정이 가능하다.

final name ='김김김';
name = null;

Late Variables

late 는 final 이나 var 앞에 붙을수있는 수식어이다. late는 초기 데이터 없이 변수를 선언할 수 있게 해준다. 예를들어 변수를 미리 선언하고 후에 api등으로 데이터를 가져올때 유용하다. 데이터가 들어오지 않은 상태에서 변수 사용이 불가능 하기때문에 실수 방지가 가능하다.

late final String name ;
// do something. go to api
print(name);   // 에러!!
name = '김김김';
print(name);   // 정상작동!

Constant Variables

Dart 의 const 는 Js 의 const등과 다르다 오히려 final 이 유사하다. 사용자의 동작에 따라 api값을 받아 변수에 저장할때는 final 을 사용하고 const는 앱을 배포하기전 컴파일 할때 알고있는 값에 사용하는 것이다.

DATA TYPES

Basic Data Types

여러 데이터 타입이 존재한다.(num 은 double과 int의 부모 타입)

String name="김김김";
int age = 12;
double money = 22.22;
num x =12;
x = 1.1;

List & Collection If

List 는 배열이고 Colliection If는 Dart에서 사용되는 간단한 조건문이다.원래는 numbers.add(5)와 같은 if안에 문법을 사용해야하는것을 간단히 작성 가능하다.

 var numbers = [1,2,3,4,5,];
 List<int> numbers2 =[1,2,3,4,5,];  // 동일한 동작

 var giveFive = true;
 var numbers = [1,2,3,4,if(giveFive) 5,]; //결과 1,2,3,4,5

String Interpolation

변수값 을 보여주기 위해서 $를 사용한다.만약 변수값의 계산을 하고싶으면 ${} 를 사용하여 나타내준다.

var age = 24;
var name='김김김';
var write= "Hello $name I\'m ${age+3}" ;
print(write);            //결과 Hello 김김김 I'm 27

Collection For

Collection if 와 마찬가지로 list와 같은 변수내용에 직접적으로 간단하게 변화를 줄수있는 방법이다.for(var ooo in xxx)"😃 $ooo", 이 한줄의 코드로 인해 newBro의 리스트에 oldBro를 포함 시키고 구분짓는다.

var oldBro=['이이이','감감감'];
var newBro=['니니니','누누누','나나나',
    for(var bro in oldBro) "😃 $bro",
];
print(newBro);

Maps

map을 사용해 object형태의 변수틀 을 만들수있다. var 타입으로 생성하면 역시 자동으로 key,value 형태의 타입을 설정하고 map 을사용해 직접적으로 데이터 타입을 명시할수도 있다.(List 와 혼합가능)

var player = {
 'name': '김김김',
 'xp': 12.22,
 'seqw': false,
 };

Map<String,Object> player = {
  ddd:'nico',
  eee: 1234,
  ccc: false,
 };
 player.containsKey() //메소드

Sets

set은 List와 비슷하지만 요소가 하나씩 있어야 되는 경우에 사용한다 이유는 unique한 속성을 가지기 때문에 중복이 어렵기 때문이다. {} 를 사용한다면 set 이고 [ ] 를 사용한다면 List이다.

set<int> numbers ={1,2,3,4,};
var numbers2 ={1,2,3,4,};    
 // 위 set 아래 list
List<int> numbers3 = [1,2,3,4,];
var numbers4 =[1,2,3,4,];

FUNCTIONS

Defining a Function

다른 함수에서 parameter값을 가져올때 보통의경우 아래와 같이 사용한다.

String sayHello(String name) {
 return "Hello $name nice to meet you!";
 }
void main() {
 print(sayHello('김김김'));
}

하지만 만약 복잡하지 않은 간단한 함수라면 fat arrow syntax방법으로 표현이 가능

num sayNum(num a,num b ) => a+b;
void main() {
 print(sayNum(1,2));
}

Name Parameters

Parameters의 값이 여러개일때 코드가 복잡해질수 있기 때문에 정리를하여 나열 하는 name argument를 사용한다. (🚨🚨 반드시 매개변수에 {})

String SayHello({String name, int age, String country}){
    return"$name , $age, $country";
}
void main() {
 print(sayHello(
  age:12,
  country:'korea',
  name:'김김김',)
  );}

하지만 이런 경우 요소에 값을 넣지 않으면 nullSafety 가 발생한다.때문에 아래 Default Value나 required modifier의 방법중 하나를 선택해야한다. required modifier방법은 요소중의 하나라도 선언하지 않으면 에러가 발생하기 떄문에 null값을 방지 할수있다,

/// Default Value : 기본값 설정
String SayHello(
String name='good', 
int age=14, 
String country='korean'
) {
    return"$name , $age, $country";
}
void main() {
 print(sayHello());}

/// required modifier 방법
String SayHello(
required String name,
required int age, 
required String country'
) {
    return"$name , $age, $country";
}
void main() {
 print(sayHello());} // error 발생!!!

Optional Positonal Parameters

생략
영상 이유: 가시성이 떨어지고 name arguments 보다 이점이 없음

QQ Operator

기존의 코드에서 매개변수에 대한 조건연산은 삼항연산자 조건문으로 많이 사용되었다.

String capitalizeName(String? name) =>
name!= null ? name.toUpperCase(): 'NON';
 //null값이 아닐경우 대문자변환 맞을경우 NON 
void main(){
 capitalizeName('ddd');
 capitalizeName(null);
}

여기서 ?의 특성을 활용하면 null값과 null이 아닌값을 구분할수있다.

String capitalizeName(String? name) =>
name?.toUpperCase() ?? 'NON';
 //null값이 아닐경우 대문자변환 맞을경우 NON 
void main(){
 capitalizeName('ddd');
 capitalizeName(null);
}

fat arrow 와 ?의 특성 그리고 QQ Operator를 이용해 기존의 다른 언어들의 코드보다 간결하게 표현이 가능하며 아래와 같은 코드도 가능해진다.

void main() {
 String? name;      //null = x
 name ??= 'qqq';     //if(name=null)=> name='qqq'
 name = null;       //if(name!=null)=> name= null
 name ??= 'ddd';     //if(name=null)=> name='ddd'
 print(name);
}

Typedef

자료형을 간편하게 작성할수있게 alias 쉽게말해 자료형의 별명을 만들어준다. 예를들어 아래와 같이 list 값을 받아 반대로 저장하는 함수가 있을때 새로운 Typdef 의 alias 를 만들어 대체하여 사용이 가능하다.

List<int> reverse(List<int> list) {
 var reversed = list.reversed;
 return reversed.toList();
}
void main() { print(reverse([1,2,3,]));}

Typedef Lint = List<int>; // Lint 로 대체

Lint reverse(Lint list) {
 var reversed = list.reversed;
 return reversed.toList();
}
void main() { print(reverse([1,2,3,]));}

CLASSES

Firsd Dart Class

Flutter 에서 중요하게 사용되는 Dart 의 Class 부분을 살펴보자 Class 에서 Property 를 선언할 때는 var 가아닌 꼭 타입을 사용해서 정의한다. 함수에서 Class 를 호출할때 new를 사용하지 않아도 된다. Class 내에서의 함수에서 변수를 호출할때 this 를 사용하지 않아도된다.

class People{
    final String name = '김김김';
    int age = 14;

  void DD() {
   print('hi $name i\'m $age');
  }
}
void main() {
 var people = People();
 print(people.name);
 people.age = 16;
}

Constructors(생성자)

위의 코드에서 argument 로 people의 이름과 나이를 전달해서 새로운 People을 만드는 코드를 짜보자 이를 위해선 Constructors 가 필요하다.

class People{
 late final String name;
 late int age;

  People(String name, int age){
    this.name = name;
    this.age = age
  }
   void DD () {
    print('hi $name i\'m $age');
   }
}
void main() {
 var people = People('이이이이',15);
  people.DD();
}

이와 같이 코드를 짜면 일단 초기값이 없기때문에 late 를 사용해야하고 생성자의 크기가 길어지며 이미 선언한 이름과 나이의 자료형을 한번 더 선언해 코드가 길어진다. 이를 방지 하기위해 아래와 같이 코드를 간단하게 작성 가능하다.

class People{
 final String name;
 int age;

  People(this.name, this.age)

   void DD () {
    print('hi $name i\'m $age');
   }
}
void main() {
 var people = People('이이이이',15);
  people.DD();
}

🚨🚨 이때 주의 해야할 점은 argument의 위치다.

Named Constructor Parameters

위와 같은 Positional Parameters는 결국 arguments의 위치가 바뀌면 에러가 발생하고 또한 Class의 크기가 커지면 통제가 어렵다는 큰 단점이 존재한다. 따라서 우리는 Flutter 를 사용할때 앞서 배웠던 Named Parameters를 생성자에 적용 시킬것이다.

class People{
 final String name;
 int age;
 String team,country;

  People({
  required this.name, 
  required this.age,
  required this.team,
  required this.country,})   //null값 방지를 위한 required와 {} 사용

   void DD () {
    print('hi $name i\'m $age');
   }
}
void main() {
 var people = People(
 name : '이이이이',
 team : 'red',
 country :'korea',
 age : 15,
 );
  people.DD();
}

Named Constructor

비슷하지만 조금 다르게 동작하는생성자를 가지고싶은 경우에 사용하는 방법이다. 두가지의 경우에 대해서 알아볼것이다. 첫번째 blueTeam 이라는 이름의 생성자는 Named parameter를 사용해 만들것이고 두번째 redTeam생성자는 Position parameter를 사용해 만들것이다.

class People{
 String name;
 int age;
 String team,country;

  People({
  required this.name, 
  required this.age,
  required this.team,
  required this.country,})   //null값 방지를 위한 required와 {} 사용

  People.blueTeam({required String name,required int age,}) 
  :                                             // : 콜론 매우 중요!!!
  this.age = age,
  this.name = name,
  this.country = 'korea',
  this.team = 'blue';                    //name parameter

  People.redTeam(String name, int age) 
  :                                          // : 콜론 매우 중요!!!
  this.age = age,
  this.name = name,
  this.team = 'red',
  this.countty = 'china',
   void DD () {
    print('hi $name i\'m $age');
   }
}                                        //position parmeter
void main() {
 var bluepeople = People.blueTeam(
 name : '이이이이',
 age : 15,                                        //named parmeter
 );
 var redpeople = People.redTeam('김김김김',15);    //position parmeter
  bluepeople.DD();
  redpeople.DD();
}

코드가 계속 길어져 알아보기 힘들지만 결국 중요한 내용은 name parmeter로 만든 생성자든 position으로 만든 생성자 이든 초기화를 위한 :을 써줘야하고 name 은 required 를 position은 arguments 의 위치를 신경써야한다.

Cascade Notation

Cascade 는 생성한 변수의 arguments 값이나 이후 선언할때 변수명을 ..으로 대체할수있는 장점을 가진다. 사용법은 class 바로 뒤에 ;을 붙이지 않고 사용한다.

 var redpeople = People.redTeam('김김김김',15,'blue',)
 ..name = '이이이'                    // redpeople.name ='이이이';
 ..age = 16                            // redpeople.age = 16;
 ..team = 'red';
 ..sayHello();

Enums

Enums는 개발자가 실수를 줄일수있도록 만들어주는 일종의 틀 이다. enum으로 설정한 변수에는 오직 선언한 값만 들어갈수있다.

enum Team {red,blue} ;
 //생략

..team = Team.blue;

Abstract Classes

추상화 클래스는 다른 클래스들이 직접 구현 해야하는 메소드들을 모아놓은 일종의 '청사진' 이라 보면 된다. 여러 클래스들에 대해서 공통적으로 상속받는 메소드들을 추상화 클래스로 사용이 가능하다.

abstract class Human {
 void walk();
}
class Player extedns Human{
 void walk(){
 print("working!");
 }
}

Inheritance(상속)

부모 class 에서 Human({required this.name}); 와같이 객체 형태의 파라미터로 선언된 경우에 상속받은 자식 Class 에서 super를 사용해 생성자를 구성할때 (name:name)와 같은 형태로 만들어 main함수에서 값을 받을수있다. 또한 override를 통해 부모 클래스의 객체를 받아올수 있는데 이때도 super를 사용한다

class Human {
 final String name;
 Human({required this.name});
 void sayHello() {
  print ('Hi $name ');
 }}

  enum Team {blue,red};

 class Player extends Human {
   final Team team;
  Player({
     required this.team,
     required String. name
  }) : super(name: name);                //super 사용해서 값 보내기

  @override
  viod sayHello(){
   super.sayHello();
   print('and I play for ${team}');
  }

 }
 void main() {
  var player = Player(team :Team.red,name:'nnn');
 }

Mixins

Mixin은 생성자가 없는 클래스를 의미하며 extends가 아닌 with를 통해 여러 클래스의 Mixin 내부의 프로퍼티와 메소드 들을 가져온다. 이는 상속이아닌 빌리는 개념이며 또한 여러 클래스에 재사용이 가능하다.

class Strong{
    final int power = 100;
}
class Karisma{
    void karis(){
    print("ouuuuuuu");
    }
}

class Bigman with Strong,Karisma (){

}

'''

해결법

FLIPPER_VERSION=0.145.0

플립 버전 변경

brew install node
brew install watchman

2.JDK 설치 Homebrew 를 사용하여 Azul Zulu 라는 OpenJDK 설치하는 것이 좋다 . 터미널에서 다음 명령을 실행합니다.

brew tap homebrew/cask-versions
brew install --cask zulu11

JDK를 설치한 경우 JDK 11을 권장한다.

3.Android Studio 설치 Android 스튜디오를 다운로드하여 설치한다. Android Studio 설치 마법사에서 다음 항목 옆의 상자가 모두 선택되어 있는지 확인해야한다.

Android SDK
Android SDK Platform
Android Virtual Device

3-1. Android SDK 설치 Android Studio는 기본적으로 최신 Android SDK를 설치한다. 네이티브 코드로 React Native 앱을 빌드하려면 Android 12 (S)특히 SDK가 필요하다. Android SDK는 Android Studio의 SDK Manager를 통해 설치할 수 있다. Android Studio를 열고 "추가 작업" 버튼을 클릭한 다음 "SDK 관리자"를 선택한다. SDK 관리자에 들어가서 먼저 확장해야 할것은 Android 12 (s) 를 확인해야한다. 두번째로 API build tools level을 확인한다 31.0.0

3-2. ANDROID_SDK_ROOT 환경 변수 구성 zsh 를 사용한다면 Home 에서 vim ~/.zshrc 를 사용해서 안의 환경 변수를 아래와 같이 적어준다.

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

애플리케이션 만들기

먼저 전에 글로벌 react-native-cli패키지를 설치한 경우 예기치 않은 문제가 발생할 수 있으므로 제거해야한다. 아래의 명령어로 새로운 RN프로젝트를 만든다. npx react-native init 프로젝트이름

이후 우리는 실행을 돕기위해 Yarn 이라는 자바스크립트 패키지 매니저를 설치해 사용할거다. brew install yarn --ignore-dependencies 이미 설치되어 있는 패키지는 무시하는 --ignore-dependencies를 꼭 붙여줘야한다.이후 생성한 프로젝트 경로에 들어가 yarn 을 터미널에 입력후 yarn run android 로 시뮬레이터를 실행하면 아래와 같이 앱이 만들어진다.

이와 같이 큰 이미지가 있을때 먼저 아이콘에 맞는 사이즈인 1024x1024 로 변경해야한다. https://www.appicon.co/ 링크된 사이트에서 간편하게 변경이 가능하다. 이제 변경된 아이콘 사이즈를 Android 의 규정에 맞는 round 로 바꿔야한다 http://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=1&foreground.space.pad=0.25&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(255%2C%20255%2C%20255)&crop=0&backgroundShape=square&effects=none&name=ic_launcher 위의 사이트에서 배경색과 같이 아이콘을 변경해서 저장할수있다. 이제 여러 형식의 앱 아이콘을 받을수있는데 이를 android/app/src/main/res 경로에 이름을 동일하게 해서 넣으면 끝이난다.

Android

1. app.json 의 displayName 수정
2. android/app/src/main/res/values/strings.xml 코드를 수정합니다.

   <resources>
    <string name="app_name">새로운 앱 이름</string>
   </resources>

Mac에서 터미널 프로그램을 열고 RN(react native) 프로젝트 폴더에 android/app 폴더로 이동합니다. cd [my path]/android/app

아래에 명령어를 통해 안드로이드(Android)용 서명 키(Signing Key)를 발급합니다.

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

keytool -genkey -v -keystore [key-name].keystore -alias [key alias] -keyalg RSA -keysize 2048 -validity 10000

Enter keystore password:
Re-enter new password:
What is your first and last name?
  [Unknown]:
What is the name of your organizational unit?
  [Unknown]:
What is the name of your organization?
  [Unknown]:
What is the name of your City or Locality?
  [Unknown]:
What is the name of your State or Province?
  [Unknown]:
What is the two-letter country code for this unit?
  [Unknown]:
Is CN=*****, OU=Unknown, O=Unknown, L=*****, ST=*****, C=***** correct?
  [no]:

Enter key password for <my-key-alias>
    (RETURN if same as keystore password)

전부 입력을 하고 나면 RN(react native) 프로젝트 폴더 하위에 android/app 폴더에 my-release-key.keystore 파일이 생성된 것을 확인할 수 있습니다.

2.서명 키 설정

서명 키(Signing Key)가 생성되면 gradle에 키를 설정해야합니다. android/gradle.properties 파일을 열고 아래에 코드를 추가합니다.

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

아래에 코드를 android/app/build.gradle 파일에 추가합니다.

...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

3.빌드

RN(react native)가 있는 프로젝트 폴더에서 android 폴더로 이동한 후 아래에 명령어로 빌드합니다.

# cd android
./gradlew bundleRelease

4. 플레이 스토어 앱생성

https://yannichoongs.tistory.com/141?category=797849 참고

앱생성 진행을 하다보면 개인정보 처리 방침이란 곳에서 막히게된다. 먼저 아래의 사이트에 들어가 개인정보 처리 방침에대한 관리 여부와 URL생성을 위한 작업을 진행해준다. https://www.privacy.go.kr/a3sc/per/inf/perInfStep01.do

이후 자신의 블로그나 개인 URL에 생성한 개인정보 처리방침HTML을 업로드 해둔URL 을 개인정보 처리방침 URL에 등록해준다.

1. 홈페이지 회원가입 및 관리

회원 가입의사 확인 목적으로 개인정보를 처리합니다.

제2조(개인정보의 처리 및 보유 기간)

① < AlphaNo >은(는) 법령에 따른 개인정보 보유·이용기간 또는 정보주체로부터 개인정보를 수집 시에 동의받은 개인정보 보유·이용기간 내에서 개인정보를 처리·보유합니다.

② 각각의 개인정보 처리 및 보유 기간은 다음과 같습니다.

1.<홈페이지 회원가입 및 관리> <홈페이지 회원가입 및 관리>와 관련한 개인정보는 수집.이용에 관한 동의일로부터<지체없이 파기>까지 위 이용목적을 위하여 보유.이용됩니다. 보유근거 : 없음 관련법령 : 예외사유 :

제3조(처리하는 개인정보의 항목)

① < AlphaNo >은(는) 다음의 개인정보 항목을 처리하고 있습니다.

1< 홈페이지 회원가입 및 관리 > 필수항목 : 생년월일 선택항목 :

제4조(개인정보의 파기절차 및 파기방법)

① < AlphaNo > 은(는) 개인정보 보유기간의 경과, 처리목적 달성 등 개인정보가 불필요하게 되었을 때에는 지체없이 해당 개인정보를 파기합니다.

② 정보주체로부터 동의받은 개인정보 보유기간이 경과하거나 처리목적이 달성되었음에도 불구하고 다른 법령에 따라 개인정보를 계속 보존하여야 하는 경우에는, 해당 개인정보를 별도의 데이터베이스(DB)로 옮기거나 보관장소를 달리하여 보존합니다.

1. 법령 근거 :
2. 보존하는 개인정보 항목 : 계좌정보, 거래날짜

③ 개인정보 파기의 절차 및 방법은 다음과 같습니다.

1. 파기절차 < AlphaNo > 은(는) 파기 사유가 발생한 개인정보를 선정하고, < AlphaNo > 의 개인정보 보호책임자의 승인을 받아 개인정보를 파기합니다.

2. 파기방법

전자적 파일 형태의 정보는 기록을 재생할 수 없는 기술적 방법을 사용합니다

제5조(정보주체와 법정대리인의 권리·의무 및 그 행사방법에 관한 사항)

① 정보주체는 AlphaNo에 대해 언제든지 개인정보 열람·정정·삭제·처리정지 요구 등의 권리를 행사할 수 있습니다.

② 제1항에 따른 권리 행사는AlphaNo에 대해 「개인정보 보호법」 시행령 제41조제1항에 따라 서면, 전자우편, 모사전송(FAX) 등을 통하여 하실 수 있으며 AlphaNo은(는) 이에 대해 지체 없이 조치하겠습니다.

③ 제1항에 따른 권리 행사는 정보주체의 법정대리인이나 위임을 받은 자 등 대리인을 통하여 하실 수 있습니다.이 경우 “개인정보 처리 방법에 관한 고시(제2020-7호)” 별지 제11호 서식에 따른 위임장을 제출하셔야 합니다.

④ 개인정보 열람 및 처리정지 요구는 「개인정보 보호법」 제35조 제4항, 제37조 제2항에 의하여 정보주체의 권리가 제한 될 수 있습니다.

⑤ 개인정보의 정정 및 삭제 요구는 다른 법령에서 그 개인정보가 수집 대상으로 명시되어 있는 경우에는 그 삭제를 요구할 수 없습니다.

⑥ AlphaNo은(는) 정보주체 권리에 따른 열람의 요구, 정정·삭제의 요구, 처리정지의 요구 시 열람 등 요구를 한 자가 본인이거나 정당한 대리인인지를 확인합니다.

제6조(개인정보의 안전성 확보조치에 관한 사항)

< AlphaNo >은(는) 개인정보의 안전성 확보를 위해 다음과 같은 조치를 취하고 있습니다.

1. 개인정보에 대한 접근 제한 개인정보를 처리하는 데이터베이스시스템에 대한 접근권한의 부여,변경,말소를 통하여 개인정보에 대한 접근통제를 위하여 필요한 조치를 하고 있으며 침입차단시스템을 이용하여 외부로부터의 무단 접근을 통제하고 있습니다.

제7조(개인정보를 자동으로 수집하는 장치의 설치·운영 및 그 거부에 관한 사항)

AlphaNo 은(는) 정보주체의 이용정보를 저장하고 수시로 불러오는 ‘쿠키(cookie)’를 사용하지 않습니다.

제8조(행태정보의 수집·이용·제공 및 거부 등에 관한 사항)

① <개인정보처리자>은(는) 서비스 이용과정에서 정보주체에게 최적화된 맞춤형 서비스 및 혜택, 온라인 맞춤형 광고 등을 제공하기 위하여 행태정보를 수집·이용하고 있습니다.

② <개인정보처리자>은(는) 다음과 같이 행태정보를 수집합니다.

8. 행태정보의 수집·이용·제공 및 거부 등에 관한 사항 제공을 위해 수집하는 행태정보의 항목, 행태정보 수집 방법, 행태정보 수집 목적, 보유·이용기간 및 이후 정보처리 방법을 입력하기 위한 표입니다. 수집하는 행태정보의 항목 행태정보 수집 방법 행태정보 수집 목적 보유·이용기간 및 이후 정보처리 방법 <온라인 맞춤형 광고 등을 위해 제3자(온라인 광고사업자 등)가 이용자의 행태정보를 수집·처리할수 있도록 허용한 경우> ③ <개인정보처리자>은(는) 다음과 같이 온라인 맞춤형 광고 사업자가 행태정보를 수집·처리하도록 허용하고 있습니다.

• 행태정보를 수집 및 처리하려는 광고 사업자 : ○○○, ○○○, ○○○, ○○○,

• 행태정보 수집 방법 : 이용자가 당사 웹사이트를 방문하거나 앱을 실행할 때 자동 수집 및 전송

• 수집·처리되는 행태정보 항목 : 이용자의 웹/앱 방문이력, 검색이력, 구매이력

• 보유·이용기간 : 00일

④ <개인정보처리자>은(는) 온라인 맞춤형 광고 등에 필요한 최소한의 행태정보만을 수집하며, 사상, 신념, 가족 및 친인척관계, 학력·병력, 기타 사회활동 경력 등 개인의 권리·이익이나 사생활을 뚜렷하게 침해할 우려가 있는 민감한 행태정보를 수집하지 않습니다. ⑤ <개인정보처리자>은(는) 만 14세 미만임을 알고 있는 아동이나 만14세 미만의 아동을 주 이용자로 하는 온라인 서비스로부터 맞춤형 광고 목적의 행태정보를 수집하지 않고, 만 14세 미만임을 알고 있는 아동에게는 맞춤형 광고를 제공하지 않습니다.

⑥ <개인정보처리자>은(는) 모바일 앱에서 온라인 맞춤형 광고를 위하여 광고식별자를 수집·이용합니다. 정보주체는 모바일 단말기의 설정 변경을 통해 앱의 맞춤형 광고를 차단·허용할 수 있습니다.

‣ 스마트폰의 광고식별자 차단/허용

(1) (안드로이드) ① 설정 → ② 개인정보보호 → ③ 광고 → ③ 광고 ID 재설정 또는 광고ID 삭제

(2) (아이폰) ① 설정 → ② 개인정보보호 → ③ 추적 → ④ 앱이 추적을 요청하도록 허용 끔

※ 모바일 OS 버전에 따라 메뉴 및 방법이 다소 상이할 수 있습니다.

⑦ 정보주체는 웹브라우저의 쿠키 설정 변경 등을 통해 온라인 맞춤형 광고를 일괄적으로 차단·허용할 수 있습니다. 다만, 쿠키 설정 변경은 웹사이트 자동로그인 등 일부 서비스의 이용에 영향을 미칠 수 있습니다.

‣ 웹브라우저를 통한 맞춤형 광고 차단/허용

(1) 인터넷 익스플로러(Windows 10용 Internet Explorer 11)

• Internet Explorer에서 도구 버튼을 선택한 다음 인터넷 옵션을 선택

• 개인 정보 탭을 선택하고 설정에서 고급을 선택한 다음 쿠키의 차단 또는 허용을 선택

(2) Microsoft Edge

• Edge에서 오른쪽 상단 ‘…’ 표시를 클릭한 후, 설정을 클릭합니다.

• 설정 페이지 좌측의 ‘개인정보, 검색 및 서비스’를 클릭 후 「추적방지」 섹션에서 ‘추적방지’ 여부 및 수준을 선택합니다.

• ‘InPrivate를 검색할 때 항상 ""엄격"" 추적 방지 사용’ 여부를 선택합니다.

• 아래 「개인정보」 섹션에서 ‘추적 안함 요청보내기’ 여부를 선택합니다.

(3) 크롬 브라우저

• Chrome에서 오른쪽 상단 ‘⋮’ 표시(chrome 맞춤설정 및 제어)를 클릭한 후, 설정 표시를 클릭합니다.

• 설정 페이지 하단에 ‘고급 설정 표시’를 클릭하고 「개인정보」 섹션에서 콘텐츠 설정을 클릭합니다.

• 쿠키 섹션에서 ‘타사 쿠키 및 사이트 데이터 차단’의 체크박스를 선택합니다.

52 | 개인정보 처리방침 작성지침 일반

⑧ 정보주체는 아래의 연락처로 행태정보와 관련하여 궁금한 사항과 거부권 행사, 피해 신고 접수 등을 문의할 수 있습니다.

‣ 개인정보 보호 담당부서

부서명 : ○○○ 팀

담당자 : ○○○

연락처 : <전화번호>, <이메일>, <팩스번호>

제9조(추가적인 이용·제공 판단기준)

< AlphaNo > 은(는) ｢개인정보 보호법｣ 제15조제3항 및 제17조제4항에 따라 ｢개인정보 보호법 시행령｣ 제14조의2에 따른 사항을 고려하여 정보주체의 동의 없이 개인정보를 추가적으로 이용·제공할 수 있습니다. 이에 따라 < AlphaNo > 가(이) 정보주체의 동의 없이 추가적인 이용·제공을 하기 위해서 다음과 같은 사항을 고려하였습니다. ▶ 개인정보를 추가적으로 이용·제공하려는 목적이 당초 수집 목적과 관련성이 있는지 여부

▶ 개인정보를 수집한 정황 또는 처리 관행에 비추어 볼 때 추가적인 이용·제공에 대한 예측 가능성이 있는지 여부

▶ 개인정보의 추가적인 이용·제공이 정보주체의 이익을 부당하게 침해하는지 여부

▶ 가명처리 또는 암호화 등 안전성 확보에 필요한 조치를 하였는지 여부

※ 추가적인 이용·제공 시 고려사항에 대한 판단기준은 사업자/단체 스스로 자율적으로 판단하여 작성·공개함

제10조(가명정보를 처리하는 경우 가명정보 처리에 관한 사항)

< AlphaNo > 은(는) 다음과 같은 목적으로 가명정보를 처리하고 있습니다.

▶ 가명정보의 처리 목적

• 직접작성 가능합니다.

▶ 가명정보의 처리 및 보유기간

• 직접작성 가능합니다.

▶ 가명정보의 제3자 제공에 관한 사항(해당되는 경우에만 작성)

• 직접작성 가능합니다.

▶ 가명정보 처리의 위탁에 관한 사항(해당되는 경우에만 작성)

• 직접작성 가능합니다.

▶ 가명처리하는 개인정보의 항목

• 직접작성 가능합니다.

▶ 법 제28조의4(가명정보에 대한 안전조치 의무 등)에 따른 가명정보의 안전성 확보조치에 관한 사항

• 직접작성 가능합니다.

제11조 (개인정보 보호책임자에 관한 사항)

① AlphaNo 은(는) 개인정보 처리에 관한 업무를 총괄해서 책임지고, 개인정보 처리와 관련한 정보주체의 불만처리 및 피해구제 등을 위하여 아래와 같이 개인정보 보호책임자를 지정하고 있습니다.

▶ 개인정보 보호책임자 성명 :이준호 직책 :학생 직급 :학생 연락처 :01026614393, gnflfh@gmail.com, ※ 개인정보 보호 담당부서로 연결됩니다.

▶ 개인정보 보호 담당부서 부서명 : 담당자 : 연락처 :, , ② 정보주체께서는 AlphaNo 의 서비스(또는 사업)을 이용하시면서 발생한 모든 개인정보 보호 관련 문의, 불만처리, 피해구제 등에 관한 사항을 개인정보 보호책임자 및 담당부서로 문의하실 수 있습니다. AlphaNo 은(는) 정보주체의 문의에 대해 지체 없이 답변 및 처리해드릴 것입니다.

제12조(국내대리인의 지정)

정보주체는 ｢개인정보 보호법｣ 제39조의11에 따라 지정된 < AlphaNo >의 국내대리인에게 개인정보 관련 고충처리 등의 업무를 위하여 연락을 취할 수 있습니다. < AlphaNo >은(는) 정보주체의 개인정보 관련 고충처리 등 개인정보 보호책임자의 업무 등을 신속하게 처리할 수 있도록 노력하겠습니다.

▶ < AlphaNo > 은(는) ｢개인정보 보호법｣ 제39조의11에 따라 국내대리인을 지정하였습니다.

• 국내대리인의 성명 : [대리인 성명_직접입력] (법인의 경우 법인명, 대표자의 성명)

• 국내대리인의 주소 : [대리인 주소_직접입력] (법인의 경우 영업소 소재지)

• 국내대리인의 전화번호 : [대리인 전화번호_직접입력]

• 국내대리인의 전자우편 주소 : [대리인 전자우편_직접입력]

제13조(개인정보의 열람청구를 접수·처리하는 부서) 정보주체는 ｢개인정보 보호법｣ 제35조에 따른 개인정보의 열람 청구를 아래의 부서에 할 수 있습니다. < AlphaNo >은(는) 정보주체의 개인정보 열람청구가 신속하게 처리되도록 노력하겠습니다.

▶ 개인정보 열람청구 접수·처리 부서 부서명 : 담당자 : 연락처 : , ,

제14조(정보주체의 권익침해에 대한 구제방법)

정보주체는 개인정보침해로 인한 구제를 받기 위하여 개인정보분쟁조정위원회, 한국인터넷진흥원 개인정보침해신고센터 등에 분쟁해결이나 상담 등을 신청할 수 있습니다. 이 밖에 기타 개인정보침해의 신고, 상담에 대하여는 아래의 기관에 문의하시기 바랍니다.

1. 개인정보분쟁조정위원회 : (국번없이) 1833-6972 (www.kopico.go.kr)
2. 개인정보침해신고센터 : (국번없이) 118 (privacy.kisa.or.kr)
3. 대검찰청 : (국번없이) 1301 (www.spo.go.kr)
4. 경찰청 : (국번없이) 182 (ecrm.cyber.go.kr)

「개인정보보호법」제35조(개인정보의 열람), 제36조(개인정보의 정정·삭제), 제37조(개인정보의 처리정지 등)의 규정에 의한 요구에 대 하여 공공기관의 장이 행한 처분 또는 부작위로 인하여 권리 또는 이익의 침해를 받은 자는 행정심판법이 정하는 바에 따라 행정심판을 청구할 수 있습니다.

※ 행정심판에 대해 자세한 사항은 중앙행정심판위원회(www.simpan.go.kr) 홈페이지를 참고하시기 바랍니다.

제15조(영상정보처리기기 운영·관리에 관한 사항) ① < AlphaNo >은(는) 아래와 같이 영상정보처리기기를 설치·운영하고 있습니다.

1.영상정보처리기기 설치근거·목적 : < AlphaNo >의

2.설치 대수, 설치 위치, 촬영 범위 : 설치대수 : 대 설치위치 : 촬영범위 : 3.관리책임자, 담당부서 및 영상정보에 대한 접근권한자 :

4.영상정보 촬영시간, 보관기간, 보관장소, 처리방법 촬영시간 : 시간 보관기간 : 촬영시부터 보관장소 및 처리방법 : 5.영상정보 확인 방법 및 장소 :

6.정보주체의 영상정보 열람 등 요구에 대한 조치 : 개인영상정보 열람.존재확인 청구서로 신청하여야 하며, 정보주체 자신이 촬영된 경우 또는 명백히 정보주체의 생명.신체.재산 이익을 위해 필요한 경우에 한해 열람을 허용함

7.영상정보 보호를 위한 기술적.관리적.물리적 조치 :

제16조(개인정보 처리방침 변경)

① 이 개인정보처리방침은 2022년 1월 1부터 적용됩니다.

② 이전의 개인정보 처리방침은 아래에서 확인하실 수 있습니다.

예시 ) - 20XX. X. X ~ 20XX. X. X 적용 (클릭)

예시 ) - 20XX. X. X ~ 20XX. X. X 적용 (클릭)

예시 ) - 20XX. X. X ~ 20XX. X. X 적용 (클릭)

1. 앱소개

오늘의 싱글벙글 (TodaySmileWide)

앱소개

친구들과 앱 으로 만든 ToyProject 를 개발하기로 했다. 앱 개발은 대학교 과제로 만든 Android Stuodio 기반으로 코로나&날씨 현황 앱 말고는 만들어 본적이 없고 React Native도 익숙한 언어가 아니기 때문에 배운다는 마음으로 임했다.목표 개발기간 12일 (6주간의 주말만)

주제

• 이 각박한 세상에서 피식하는 웃음을 줄 수 있는 뇌빼고 볼 수 있는 웃음 커뮤니티

기능

• (백그라운드) 푸시알림으로 밈 던져주기
• 싱글벙글 지구촌 갤러리나 giphy에서 가져온 인기 컨텐츠를 랜덤으로 가져와 추천한다.
• (포그라운드) DC인사이드 싱글벙글 지구촌 갤러리를 타겟으로 잡아 앱에 접속하면 페북에 팩트저장소나 배드마우스 사이트처럼 웃긴 컨텐츠를 볼 수있다.
• 각자 일이 있으니까 방대하게 기능을 설계하면 뇌절할 수 있음. 먼저 이정도까지만 구현해놓고 결과물을 보고 추가적인 개발 공수를 잡고 기획을 잡고, 추후 고도화를 해보는걸로.

주요 스토리보드

1. 백앤드에서 DC 싱글벙글 갤러리 개념글 크롤링

   • 비공식 DC인사이드 API를 사용해. 힛갤추천글, 글조회, 작성, 수정, 삭제 기능을 가져온다.
   • 긁어온 컨텐츠 내용을 DB저장해 사용한다.ㄱ
   • 매 요청마다 크롤링 하면 비용적인 문제가 발생 Redis 캐싱이 아니면 문제가 발생
   • 하루한번 크롤링 후 저장, 이후 저장한 컨텐츠들만 응답으로 던져주자.

2. 크롤링한 게시물 중 가장 인기가 있는 컨텐츠를 하루에 한번 푸시메시지로 날림

3. 파이어베이스 클라우드 메시지 사용하면 무료로 구현 가능

4. 프론트에서는 이런 푸시알림을 보고 접속해 크롤링해서 긁어온 다른 게시물들을 볼 수 있다.

• 비즈니스 요구사항 정리

• 회원 도메인과 리포지토리 만들기
• 회원 서비스 개발
• 회원 리포지토리 테스트 케이스 작성
• 회원 서비스 테스트

비즈니스 요구사항 정리

• 데이터: 회원ID, 이름

• 기능: 회원 등록, 조회

  • 아직 데이터 저장소가 선정되지 않음(가상의 시나리오)

  웹 애플리케이션 계층 구조

  

  • 컨트롤러: 웹 MVC의 컨트롤러 역할
  • 서비스: 핵심 비즈니스 로직 구현
  • 리포지토리: 데이터베이스에 접근, 도메인 객체를 DB에 저장하고 관리
  • 도메인: 비즈니스 도메인 객체, 예)회원,주문,쿠폰 등등 주로 데이터베이스에 저장하고 관리됨

Code

1. 회원 도메인과 레포지토리 만들기

• 요구사항인 Id(식별자), 이름 두가지가 들어간 Member클래스 생성
• 회원 레포지토리(정보 저장소)의 인터페이스를 만든다 4가지 기능 선언.
• 회원 레포지토리를 만들어 인터페이스를 가져온다. 각 메소드의 기능을 구현해준다.

Member

    // domain(Pa)>Member
   public class Member {

    private Long id;
    private String name;

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

MemberRepository (interface)

    // repository>MemberRepository
   public interface MemberRepository {
   Member Save(Member member);
   Optional<Member> findById(Long id);
   Optional<Member> findByName(String name);
   List(Member> findAll();
   //😳Optional 이란 findBy로 가져오는 값이 null일 경우의 반환방법😳
   //저장,아이디 찾기,이름 찾기,회원 전부 보여주기

MemoryMemberRepository

  //repository>Memory>MemberRepository
   private static Map<Long, Member> store = new HashMap<>(); 
    private static long sequence = 0L; 
    // 😳store 라는 이름으로 HashMap 객체를 생성 sequence 는 키값을 생성해주는 존재😳

    @Override
    public Member save(Member member) {
        member.setId(++sequence);   
        store.put(member.getId(), member);
        return member;
    } // 😳저장할때 sequence 를 전위증가 해줘서 키값 다르게 생성😳


    @Override
    public Optional<Member> findById(Long id) {
        return Optional.ofNullable(store.get(id));
    } // 😳위에 말했듯이 Oprtional 를 사용해 id값이 null 일 경우를 대체할수있다.😳


    @Override
    public Optional<Member> findByName(String name) {
      return store.values().stream()
                .filter(member -> member.getName().equals(name))
                .findAny();
    }// 😳store 에서 member.getName이 들어온 name과 같는지 확인하며 루프를 돈다 같은경우 필터링😳


    @Override
    public List<Member> findALl() {
        return new ArrayList<>(store.values());
    }
}    // 😳store    에 있는 멤버들을 반환😳

 public void clearStore() {
        store.clear();
        //😳AfterEach 로 사용할 ClearStore 작성😳

2. 회원 레포지토리 테스트케이스 작성

• 개발한 기능을 실행해서 테스트 할 때 자바의 main 메서드를 통해서 실행하거나, 컨트롤러를 통해서 해당 기능을 실행한다. 이러한 방법은 준비와 실행 자체가 오래걸리고 여러번 반복실행을 테스트 할수없기에 JUnit이라는 프레임워크로 테스트를 실행해서 이러한 문제를 해결한다.

MemoryMemberRepository.Test

 //test>repository>MemoryMemberRepository.Test
import static org.assertj.core.api.AssertionsForClassTypes.assertThat;
//😳Assertions 생략 할수있음 원래는 아래처럼 사용해야함
//Assertions.assertThat(member).isEqualTo(result);😳
public class MemoryMemberRepositoryTest {
    MemoryMemberRepository repository = new MemoryMemberRepository();

    @AfterEach
    public void afterEach() {
        repository.clearStore();
    }//😳call-back 할수있는 After Each를 사용해 메소드가 끝날떄 clearStore호출😳

    @Test
    public void save() {
        Member member = new Member();
        member.setName("spring");

        repository.save(member);

        Member result = repository.findById(member.getId()).get();
        assertThat(member).isEqualTo(result);
        //😳값이 일치하는 지 확인😳
    }

    @Test
    public void findByName() {
        Member member1 = new Member();
        member1.setName("Spring1");
        repository.save(member1);

        Member member2 = new Member();
        member2.setName("Spring2");
        repository.save(member2);

        Member result = repository.findByName("Spring1").get();
        assertThat(result).isEqualTo(member1);
    }//😳값이 일치하는 지 확인😳

    @Test
    public void findAll() {
        Member member1 = new Member();
        member1.setName("Spring1");
        repository.save(member1);

        Member member2 = new Member();
        member2.setName("Spring2");
        repository.save(member2);

        List<Member> result = repository.findALl();
        assertThat(result.size()).isEqualTo(2);
    }//😳값이 일치하는 지 확인 member 숫자 변경시 숫자변경😳
}

자바의 기초 Code 형식

public class javava {
   public static void main(String [] args) {
      // 구현코드 작성
             👇👇👇👇👇👇
접근제어자 클래스선언 클래스이름 {
   접근제어자 static 반환타입 메서드이름(파라미터)   {
      // 구현코드 작성

Class 😒

클래스(class)란 객체를 정의하는 틀 또는 설계도와 같은 의미로 사용됩니다.자바에서는 설계도인 class를 가지고, 여러 객체를 생성하여 사용하게 된다.클래스는 객체의 상태를 나타내는 변수(variable) 와 객체의 행동을 나타내는 메소드(method)로 구성된다.

Method 😳

메서드(method)란 어떠한 특정 작업을 수행하기 위한 명령문의 집합이라 할 수 있다.클래스에서 메서드를 작성하여 사용하는 이유는 중복되는 코드의 반복적인 프로그래밍을 피할 수 있기 때문이다.또한,모듈화로 인해 코드의 가독성도 좋아진다.프로그램에 문제가 발생하거나 기능의 변경이 필요할 때도 손쉽게 유지보수를 할 수 있다. 메서드는 접근 제어자, 리턴값, 메서드 이름 (인자, 인자2, ...)의 형태로 선언한다. 중괄호 {} 안에는 이 메서드가 수행할 동작을 선언한다 메서드를 만들려면 클래스가 있어야 한다. 클래스는 메서드와 변수라는 2가지 속성을 갖는다.

instance 👍🏻

1. 자바에서 class를 사용하려면 해당 클래스 타입의 객체를 선언해야 한다.
2. class로부터 객체를 선언하는 과정을 클래스의 인스턴스 화라고 한다.
3. 인스턴스 화로 선언된 해당 클래스 타입의 객체를 instance라고 한다.
4. instance란 메모리에 할당된 객체를 의미한다.
5. 하나의 Class로부터 여러 개의 Instance를 생성할 수 있다.
6. instance는 독립된 메모리 공간에 저장된 자신만의 필드 를 가질 수 있다.
7. 해당 클래스의 모든 메소드(method)는 해당 클래스에서 생성된 모든 인스턴스가 공유하게 된다.

접근 제어자 👿

1. public private protected default 가 있다.
2. 클래스나 메서드에 접근할 수 있는 범위를 지정한다.
3. private > protected > public 순서로 범위

Static 🤣

1. 객체 생성없이 해당 함수(메서드)를 호출해서 사용할 수 있다.
2. 프로그램을 실행하면 static으로 지정된 메서드를 찾아서 먼저 메모리에 할당
3. static으로 지정된 메서드가 여러개인 경우에는 객체를 생성하는 것과 상관없이 모두 메모리에 할당시키고 main으로 이름이 만들어진 메서드가 있는지 찾아서 그 메서드를 가장 먼저 시작점의 메서드로써 호출을 하게 된다.

변수🙈

변수란 쉽게말해 바구니 다. 데이터를 저장 하는 메모리 공간 변수를 사용하기 위해서는 먼저 변수의 타입에 맞는 선언을 해줘야 한다.

    int a; int b; //-- 정수가 저장될 변수 이름을 a, b로 만들어라 --;;
        a = 3; b = 5;

데이터 타입

기본형 타입(Primitive Data Type)

1. 정수형 --> byte(1byte) short(2byte) int(4byte) long(8)
2. 실수형 --> float(4byte) double(8byte)
3. 문자형 --> char(2byt)
4. 논리형 --> boolean(1byte) = true & false

   참조형 타입(Reference Data Type

• 기본형에 속하지 않는 데이터형들을 말한다.
• 대표적으로 class array interface string 이 있다
• 데이터가 저장된 메모리의 주소 값을 저장하는 변수이다.

출력

Printf

%d (정수) %f (소숫점 형식) %c(문자) %s(문자열) %b(부울) %n(줄바꿈) %e(지수) %o(8진수) %x(16진수) 위 와같은 지시자를 사용해서 출력을 나타낼수있다.

 System.out.println("나는 %d살 입니다.%d,%d,%d",d,s,i,l);

해당 어노테이션이 적용된 클래스는 Controller임을 나타나고 bean으로 등록되며 해당 클래스가 Controller로 사용됨을 Spring Framework에 알립니다.

Spring 컨트롤러의 URI 메소드를 GET 방식으로 가져옵니다. 해당 어노테이션은 @RequestMapping(method=RequestMethod.GET, value=..) 의 축약형 표현입니다.

해당 어노테이션이 되어 있다면 메소드에서 리턴되는 값은 View 를 통해서 출력되지 않고 HTTP Response Body 에 직접 쓰여지게 됩니다. 이때 쓰여지기 전에 리턴되는 데이터 타입에 따라 MessageConverter 에서 변환이 이뤄진 후 쓰여지게 됩니다.

• 정적컨텐츠
• MVC와 템플릿 엔진
• API

정적 컨텐츠

** 파일을 그대로 웹 브라우저에게 전송 해주는 방식.** (static 폴더에 넣은 그대로 출력)

동작 원리

 1. 웹브라우저에서 hello-static.html 접근
 2. 내장 톰켓 서버 통과 -> 스프링 컨테이너 에서 해당 관련 컨트롤러를 검색 
 3. 검색 없을시에 resources 내부에서 찾아서 반환

MVC와 템플릿 엔진

MVC 패턴은 Model,View,Conroller 3가지로 나뉘어 역할을 분할하여 처리하는 패턴이다 MVC 패턴이 나온 이유는 코드를 분리하지 않고 View 에서 모든 내용을 넣으면 가독성이 떨어지고 유지 보수가 힘들어지기 때문이다.

• Controller = 사용자가 접근한 URL에 요청을 파악해 맞는 Method를 호출하여 Service와 Business Logic 을처리한다 나온 결과는 Model에 저장하여 View 로 던져준다.
• Model = Controller에서 받은 데이터를 저장하는 역할
• View = Controller로 부터 받은 Model 데이터를 바탕으로 사용자에게 표현해준다.(HTML,JSP에 해당한다.)

템플릿 엔진이란?

웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기한다. 예전 스프링이나 서블릿을 사용했다면 JSP, Freemaker 등이 떠오를테고 요즘은 리액트, 뷰 등이 떠오를 것이다.이것들 모두 결과적으로는 지정된 템플릿과 데이터 를 이용하여 HTML을 생성하는 템플릿 엔진이다.

Code

Controller

@GetMapping("hello-mvc")
    public String helloMvc(@RequestParam("name")String name, Model model) {
        model.addAttribute("name", name);
        return "hello-template";
    }

Templeate

<html xmlns:th="http://www.thymeleaf.org"/>
<body>
<p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>

https:localhost: 8080/study/hello-mvc?name=spring!!

동작원리

1. 웹브라우저에서 hello-mvc 접근
2. 내장 톰켓 서버 통과 -> 스프링 컨테이너 에서 해당 관련 컨트롤러를 검색 
3. helloController가 Model에 name을 담아 hello-template를 반환
4. 반환된 정보로 View Resolver를 통해 hello-template.html을 찾아 연결 html 변환후 실행
  // 정적 컨텐츠와 다르게 변환해주는 원리

API

ResponseBody 를 사용하여 Templeate 엔진과 다르게 View Resolver를 사용하지않고 HTTP의 BODY 문자내용을 직접 반환할수있다. 과거에는 xml 방식으로 API가 많이 사용되었다 하지만 요즘에는 Json 방식 으로 통일되는 느낌으로 가고있다 Json 에대한 내용은 아래에 있다.

Code

 @GetMapping("hello-api")
    @ResponseBody
    public Hello helloApi(@RequestParam("name") String name) {
        Hello hello = new Hello();
        hello.setName(name);
        return hello;
    }
    static class Hello {
        private String name;
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    }
}

문자가 아닌 객체를 넘겼을때 아래와 같은 출력이 나오는데 {"name":"spring!!!!!!"} 이는 json 방식으로 key-value 로 이루어진 구조이다.

동작원리

1. 웹브라우저에서 hello-api 접근
2. 내장 톰켓 서버 통과 -> 스프링 컨테이너 에서 해당 관련 컨트롤러를 검색 
3. helloController가 @ResponseBody라는 에너테이션을 만남
4. ViewResolve 대신 HttpMessageConverter 가 동작
5. String 이면 Http동작에 그대로 Bdoy 를 넘기고 객체이면 Json방식으로 만들어서 반환

---
## <span style="color: orange">Reference</span>

김영한 강사님의 Spring 입문 강의를 토대로 복습하기위한 글 이며 벨로그 글 강의를 들은 다른분들의 학습내용이 포함되어 있습니다 해당하는 모든 출처는 링크와 강의에 있습니다.

[블로그 링크](https://anaog.tistory.com/1)
[강의 링크](https://www.inflearn.com/course/스프링-핵심-원리-기본편)
[나무위키 링크](https://namu.wiki/w/Spring(프레임워크))

스프링 부트를 사용하기 위해선 아래의 링크를 접속해 설정을 먼저 해주어야한다.

Spring initializr

설정

1. Maven 과 Gradle 의 선택? Maven은 프로젝트의 전체적인 라이프사이클을 관리하기 위한 도구이며, 많은 편리함과 이점으로 인해 사용량이 많다 하지만 비교적 최근에 나온 Gradle 의 등장은 Maven 의 단점을 보완하였는데 속도와 관련된 내용도 있지만 Groovy 같은 스크립트로 플러그인의 관리를 할수있어 많이 사용하는 추세이다.
   2. Dependencies 어떤 라이브러리를 가져올지 정하는 항목이다. 강의 실습에서는 web 설계를 하기 때문에 Spring Web 라이브러리와 웹에서 Html 을 만들어주는 templeate 엔진이 필요하기 때문에 Thymeleaf 라는 라이브러리도 가져와 준다.

설정이 끝났으면 Generate 버튼을 눌러주고 다운로드 받아준다. 이후 인텔리제이 에서 Open 해주면 기본 설정이 끝난 Spring Boot 가 준비된거다.

만들어진 프로젝트 살펴보기

build.gradle

 dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}

Spring Application 기본으로 제공되는 SpringBoot 실행을 위한 동작 어플

@SpringBootApplication
public class LeehoSpringApplication {
    public static void main(String[] args) {
    SpringApplication.run(LeehoSpringApplication.class, args);
        }
    }

** External Libraries ** 가져온 라이브러리들을 확인 할수있다. bulid.gradle 항목에선 분명히 2개의 라이브러리만 가져왔는데 많은 양의 라이브러리가 프로젝트에 땡겨져 온것을 확인할수 있다 이는 라이브러리들 간의 의존성 때문이다 Spring web 과 Thymeleaf 를 사용하기위해 추가 라이브러리 들을 가져오고 추가된 라이브러리를 사용하기위해 또 다른 라이브러리들을 가져오는 형식이기 때문에 라이브러리의 양이 많아진것이다. Springboot-starter_tomcat을 확인해볼 수 있는데.이는 tomcat 이라는 웹서버 라이브러리 이다 프로젝트 라이브러리에 웹서버를 내장하고있는 현재의 모습과 달리 과거엔 웹서버와 개발 라이브러리를 분리해서 사용하였다

View 환경 설정

static 내부에 Index.html 이라는 welcome page 를 작성해보고 web 어플리케이션 진입점인 Controller를 만들어보자.

index.html

  <head>
    <title>Hi</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
hihihi
<a href="/hello">hi</a>
</body>
</html>

Controller

@Controller
public class HelloController {
    @GetMapping("hello")
    public String hello(Model model) {
        model.addAttribute("data", "hello!!");
        return "hello";
    }

hello.html

<html xmlns:th="http://www.thymeleaf.org">
    -> templeate 을 통한 html 양식을 thymeleaf 로 변환
<head>
    <title>Hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
</body>
</html>

동작

컨트롤러가 실행되면 model 을 통해 데이터를 보내게 되는데 이때 addAttribute 로인해 key = data, value = hello!! 가 된다 이후 return "hello"; 를 통해 templeate 에 만들어둔 hello.html 로 값이 반환 ${data} 에 value 값인 hello!! 가 대체 텍스트인 손님 대신에 들어가게된다.

동작원리

Reference

김영한 강사님의 Spring 입문 강의를 토대로 복습하기위한 글 이며 벨로그 글 
강의를 들은 다른분들의 학습내용이 포함되어 있습니다
해당하는 모든 출처는 링크와 강의에 있습니다.

블로그 링크 강의 링크 나무위키 링크

시작 하기에 앞서 Spring 입문을 위한 사전지식

1. Java - 기본지식
2. Html,Css,Js - 웹 문서지식
3. Servlet,Jsp - 서버지식
4. DB - 기본 데이터베이스

Spring ?

스프링 에 대한 사전적의미는 여러가지 있지만 한가지 명확하게 표현할수 있다면 "스프링은 웹사이트 개발을 위한 백엔드 프레임워크이다." 기존에 있던 프레임워크 와의 호환성도 높아 혼용하여 사용이 가능하고 다른 프레임워크에 비해 경량 이지만 강력한 성능으로 기업들의 니즈를 충족시켰다.

백엔드

백엔드 (Back-end): 웹 개발 프로세스를 프론트(Front-end),와 백엔드(Back-end)로 구분하는 경우가많다. 일반적으로 서버측에서 동작하는 프로그램을 다루는 프로세스적 요소를 백엔드 라고 한다.

프레임워크

프레임워크 (Framework):프로그램 설계에 있어 미리 구축되어있는 뼈대 라고 이해할수있는 부분이다 백엔드 프로세스를 구축하는데 복잡한 초기 설정 구축을 위해 스프링이라는 기본 뼈대를 제공하여 상위 퀄리티의 프로그램을 비교적 빠른시간에 개발할 수 있게된다.

Spring 특징

의존성 주입

(DI: Dependency Injection): 프로그램 구성요소간의 의존 구조를 외부 파일에서 정의해준다. 각 요소 또는 서비스 사이에 의존성이 존재하는 경우 스프링에서 의존 관계를 정의, 외부파일을 통해 설정해준다. 설정파일을 분리하기 때문에 유지보수가 쉬워지며 각 구성요소간 결합성이 낮아지게 된다.(각 개체가 독립적으로 존재, 연결 자체는 스프링에서 지원한다

POJO 방식

Plain Old Java Object 의 약자, 말그대로 기존의 일반적인 java 코드를 이용해서 프로그래밍이 가능하다. 기존의 프레임워크(Java EE)의 방식에선 미리 설계되어있는 인터페이스나 클래스를 상속받아 무거운 객체들을 만들어야만 했는데, 그럴 필요가 없이 일반적인 java코드로만으로도 객체를 구성할 수 있게된다. 따라서 더 유연한 프로그래밍이 가능해지며 가볍고 생산성이 높아진다.

관점지향 프로그래밍(AOP)

관점에 따라 각각의 기능을 분리하여 프로그래밍 하는것이 가능해진다. 비즈니스 로직, {로깅, 트랜잭션, 보안} 등을 다른 모듈로 분리하여 따로 관리할 수 있다. 스프링에서는 서로다른 관점을 조합하는 기능또한 제공한다. 이러한 방식은 유지보수가 수월하며 각각의 관점에 최적화된 프로그래밍이 가능해진다는 장점이 있다.

제어의 반전 (IoC: Inversion of Control)

기존의 프로그래밍 방식에선 라이브러리를 호출하여 코드에 포함시켜 프로그램을 실행시켰다. 하지만 스프링에서는 지원하는 형식에 맞게 프로그램을 작성하면 프레임워크에서 사용자가 작성한 코드를 호출해서 사용하는 방식으로 제어의 권한이 역전된 모습을 보여준다.

Spring Boot

Spring 을 더쉽게 이용하기 위한 도구 이다 스프링을 이용하여 개발할 때, 이것저것 세팅을 해야될요소가 많은데. 여러가지를 세팅해야하는 진입 장벽을 줄여주는 존재로 간단한 방법을 통해 초기 설정값을 잡아준다.

Reference

김영한 강사님의 Spring 입문 강의를 토대로 복습하기위한 글 이며 벨로그 글 
강의를 들은 다른분들의 학습내용이 포함되어 있습니다
해당하는 모든 출처는 링크와 강의에 있습니다.

블로그 링크 강의 링크 나무위키 링크

1.제목

h1 부터 h6 까지 표현 할수있습니다 상단의 아이콘을 이용해서 쓸수있으며 따로 # 을 써서 사용할수있습니다. # 의 개수로 조절 할수있습니다.

2.br

<br/> 을 통해 문단의 간격을 줄 바꿈 으로 나타낼수 있습니다.

  안녕하세요 <br/>
  응애 입니다.

안녕하세요
응애 입니다.

3.list

숫자 와 .을 사용하여 작성하는 list 입니다.

  1. 하나
  2. 둘
  3. 셋

, , * ,+ 을 사용한 List 를 사용할수 있습니다. List 안에서 Tab을 두번하면 코드블럭 사용이 가능합니다.

  -안녕하세요
      -들여쓰기도 가능해요
  -        코드블럭 이야

-안녕하세요

• 들여쓰기도 가능해요
• 코드블럭 이야

4.인용문

인용문을 작성할 때에는 > 를 사용합니다.

> 인용문
-    작성자
> 내용입니다. `Enter` 키를 눌러 문단을 건너뛸수있네요 
>> `>` 의 갯수에 따라 중첩문을 쓸수있네요

인용문

• 작성자

내용입니다.Enter 키를 눌러 문단을 건너뛸수있네요

> 의 갯수에 따라 중첩문을 쓸수있네요

5.인라인코드 & 코드블럭인

백틱 을 사용해 인라인코드를 작성할수 있습니다. 인라인 코드

백틱 3개를 사용한 코드블럭을 할수있으며 백틱 뒤에 언어 이름작성시 code로 코드 블럭이 가능합니다.

let sumNumbers = (firstNum, lastNum) => {
  return firstNum + lastNum;
};
sumNumbers(100, 200)

6.링크

많이 쓰는 링크는 총 3가지가 있다.

인라인 링크
[인라인 링크](https://velog.io/)
url 링크
<https://velog.io/>
참조 링크
[velog]:https://velog.io/
[velog]

인라인 링크 인라인 링크 url 링크 https://velog.io/ 참조 링크 [velog]:https://velog.io/ [velog]

7.테이블

수직선 | 과 수평선 - 을 사용해서 선을 구분할수있고 space 와 : 을 사용해서 정렬을 표시 할수있다

	left	center	right
row1	l1	c1	r1
row2	l2	c2	r2
row3	l3	c3	r3

8.짜잘팁