yarn설치,토스결제,카카오권한신청

☑️ Yarn

• Yarn은 Facebook에서 개발한 패키지 관리자
• npm의 문제점을 보완하기 위해 개발됨
• 병렬 설치와 더 나은 캐시 시스템 제공
• 빠른 설치 속도 제공

🔸 Yarn 주요명령어

• yarn init : 새로운 Yarn 프로젝트 초기화
• yarn add<패캐지명> : 패키지설치    vs   npm i
• yarn upgrade<패키지명> : 패키지 업데이트
• yarn remove<패키지명> : 패키지 제거
• 개발서버 시작 :     yarn start       vs    npm (run) start
• 앱설치 : yarn create react-app    vs   npx create-react-app
• 프로덕션용 빌드 생성 :  yarn build  vs  npm run build

🔸 설치 방법

https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable

Yarn

yarn은 설치시 아래 고양이 모양 캐릭터가 생긴다

사이트 내 'Alternatives' 숨겨놓음 (잘 찾아야함!)

 

[cmd창에서 확인]

C:\Users\user1>yarn -v
1.22.22

🔸 vsc에서 터미널을 키고 →  yarn create react-app tutorial-yarn

▶ 얀이 설치가 더 빠르다, 혹 설치가 안된다면 터미널 우측 상단에 powershee은 안된다! 이미 vsc가 켜져 있다면 

    껏다가 다시 킨다!

 

npm install -> 최초 node_modules 설치
라이브러리 설치
npm install 특정라이브러리
npm install bootstrap

 

yarn install -> 최초 node_modules 설치
라이브러리 설치
yarn add 특정라이브러리
yarn add bootstrap

 

🔸 yarn을 이용해서 폴더생성과 부트스트랩 과 액시오스를 설치 하였다.

폴더 설치는 : yarn create react-app practice-yarn  : ok

부트스트랩 설치는 : yarn add bootstrap

액시오스 설치는 : yarn add axious

▶ 띠로리~ 액시오스가 설치 되지 않았다! 문제는 오타 다 그렇다 axious가 아니라

    axios 이며 "yarn add axios" 를 입력해야 한다!

 

☑️ 토스 결제

토스 개발자 센터로 들어가 회원가입을 진행 한다!

https://developers.tosspayments.com/

토스페이먼츠 개발자센터

 

토스결제 실행하면서 내가 막혔던 부분은 언어별 코드 예제 리액트로 들어가서 샘플 프로젝트 레포지토리를 리액트 실행화면에서 입력시 오류가 발생 하였다. 확인 시 내가 입력한 url에 문제가 있었다.

올바른 url로 입력하여 git clone https://github.com/tosspayments/tosspayments-sample  

정상 실행 시 폴더에 tosspayments-sample이 생긴다!

 

폴더경로 두개를 한번에 들어가는 방법은 cd tosspayments-sample/express-react 이다!

위와 같이 실행이 되면

- 의존성 패키지를 다운로드 하고 서버를 실행한다!

npm install    그리고   npm run dev입력하여 클라이언트 및 서버 실행 한다!

 

결제하기 창이 실행되고 결제를 모의로 진행해 본다!

🔸 paymemnts 개발자센터에서 API키로 들어간다!

https://developers.tosspayments.com/994156/accounts/1258948/phases/test/api-keys

클라이언트 키를 복사한 후  인증하기를 들어간다

https://github.com/tosspayments/tosspayments-sample/tree/main/express-react#%EC%A4%80%EB%B9%84%ED%95%98%EA%B8%B0

BrandpayCheckout>에서 const clientKey를 수정한다 -> 그리고PaymentCheckout 도 같은 부분을 수정한다

 

결제 진행 시 API로그에서 아래처럼 200, 300이 떠야 결제가 성공이다!

개발연동체험상점> 좌측 하단 '상점관리자'를 클릭한다>전환되는 페이지에서 이메일 인증 진행

그러면 아래와 같이 생성된다.

 

☑️카카오톡 개발자전용 회원가입!

https://developers.kakao.com/

Kakao Developers

https://developers.kakao.com/docs/latest/ko/index

Kakao Developers

 

[아침 공부]

[DBConfig.java]
@Bean //객체생성
public SqlSessionFactory sessionFactory(DataSource dataSource) throws Exception{
       SqlSessionFactoryBean sfb = new SqlSessionFactoryBean();
       sfb.setDataSource(dataSource);
▶ 위 Factory는 연결공장에서 데이터가 생성되었다

 

- 백앤드와 프론트 연결은 서비스가 아니라 컨트롤러에서 연결!

- 리액트 페이지네이션 작성 시 Pagination.js파일과 Board.js 두개를 만들었는데 한개로 합쳐도 됨

-  axious가 아니라 axios 임

-  useEffect는 효과를 낸다

useEffect(() => {
   axios.get('https://jsonplaceholder.typicode.com/posts')
   .then((res) => {
        setData(res.data);
   })
   .catch(err) => {
        alert(err + "발생 !!!")
   });
},[]);
[코드 해석]
- useEffct는 효과를 내다 뜻으로 웹페이지가 처음 열릴 때만 어떤일을 하게 해주는데 이 곳에서는 인테넷에서 데이터를 가져온다
- axios.get은 인터넷의 특정 주소로부터 데이터를 가져오는 명령 
- then()은 인터넷에서 데이터를 성공적으로 가져오면 then()이 실행된다. 가져온 데이터를 웹페이지에 보여줄 수 있도록 설정
- 데이터를 가져오다가 문제가 생기면 'catch():'가 실행되어 에러 메세지를 보여준다
- []); 빈배열을 안넣어주면 에러가 난다. 빈배열에 값이 없으면 오류로 최초 1회 실행된다.

 

-

[map 괄호가 닫히지 않는 이유]
<ul className='list-group-mb-4'>
 {게시글리스트.map(항목 => (
    <li key={항목.id} className='list-group-item'>
            {항목.제목}
    </li>
▶ 위 코드에서 map(항목  => 괄호가 닫히지 않아야 반복문이 돌아간다