전체 글 347

yarn 설치

● yarnnpm의 단점을 보완하여 성능/속도를 개선한 것이 yarn이라고 보면 된다.   └ npm 은 모든 패키지들을 다 갖고 있어서 무겁다.   └ 페이스북, Exponent, 구글과 Tilde의 엔지니어 그룹들이 함께 협력하여 개선  https://classic.yarnpkg.com/en/docs/install#windows-stable  YarnFast, reliable, and secure dependency management.classic.yarnpkg.com위의 경로로 들어가 다운로드   다운 받은 msi 파일을 실행시켜 모두 next 눌러준다. 다운이 완료됐으면 cmd창을 열어 yarn -v 로 다운받은 버전을 확인해준다.     ● CRA (Create-React-App) 설치 - 리..

리액트/이론 2024.07.30

node.js 다운로드

node.js는 다운로드하는 방법이 여러가지 있는데 그 중 하나는 구글에 node.js를 입력해 LTS를 다운 받는 것이고 다른 하나는 GIT 주소로 들어가 NVM : Node Version Manager 를 다운 받는 것이다.  ●NVM 다운로드 및 설치  - node를 설치했다면, 자동으로 설치되었을 것 - 노드 패키지 매니저로, 자바스크립트 라이브러리를 관리 할 수 있다.   ( https://www.npmjs.com 에서 필요한 라이브러리를 다운로드 및 설치, 삭제 등의 관리 가능)  - node_modules 폴더에 라이브러리를 저장하고, package.json에 관련 라이브러리 정보를 저장한다. - spring, spring boot 등 에서도 라이브러리를 모두 다 커밋, 푸시 하지 않고, b..

리액트/이론 2024.07.30

네이버 로그인 API 구현

이번에는 네이버 로그인을 해본다. 똑같이 프로젝트의 로그인 화면으로 가서 네이버 로그인 버튼을 눌러준다. 그러면 네이버로 로그인 할 수 있는 로그인 창이 뜨게 된다.  아이디와 비밀번호를 입력하고 로그인 버튼을 누르면 2단계 인증 알림이 발송된다.  2단계 인증이 성공하게 되면 메인화면으로 들어가지게 되고 상단 헤더의 로그인이 로그아웃으로 바뀐 것을 확인 할 수 있다.    마이페이지로 들어가보면 해당 로그인을 시도한 아이디의 이메일과 이름이 보이게 된다.   DB의 USER 테이블을 확인해보면 카카오와 똑같이 전화본호, SNS 연결 날짜, SNS 타입, 이메일, 프로필 사진, 이름 등을 확인 할 수 있다.   레디스를 사용하여 keys * 로 현재 로그인한 이메일의 토큰 값들을 확인 할 수도 있다.

프로젝트 2024.07.01

카카오 로그인 API 구현

프로젝트의 로그인 화면에서 카카오 로그인 버튼을 클릭해본다.   그러면 카카오 로그인을 할 수 있는 카카오 로그인 창이 뜨게 된다.  처음 카카오로 로그인하게 되면 이렇게 동의하기 버튼이 활성화 되어있다.   동의 하기 버튼을 클릭하면 메인으로 리다이렉트 되는데 메인의 상단 헤더가 로그인이 아닌 로그아웃으로 바뀌어 있는 것을 확인 할 수 있다.   헤더의 마이페이지를 눌러 들어가보면 카카오로 로그인한 이메일과 본인 이름이 나오는 것을 확인 할 수 있다.  DB의 USER 테이블을 확인해보면 전화번호, SNS 연결 날짜, SNS 종류, 이메일, 프로필 사진, 이름 등이 들어간 것을 확인 할 수 있다.   레디스를 켜서 keys * 명령어를 입력하면 현재 로그인한 토큰 값을 확인 할 수 있다.

프로젝트 2024.07.01

환불 구현

현재 마이페이지에 들어가보면 환불을 하지 않았기 때문에 0으로 나오게 된다.    결제 내역에 들어가 해당 결제내역을 선택하여 결제 상세페이지로 들어가보면 밑에 환불 신청 버튼을 볼 수 있다.   환불 신청 버튼을 누르면 환불 페이지로 들어가게 된다.    만약 사유를 선택하지 않고 환불 신청하기 버튼을 누르면 사유를 선택해달라는 alert이 발생한다.  환불 사유를 선택해주고 버튼을 눌러주면 환불에 성공했다는 alert이 뜨고 환불에 성공하게 된다.    환불이 성공했다는 alert이 뜨고 확인을 누르면 환불 내역 페이지로 리다이렉트 된다.  환불한 프로젝트를 선택하여 상세 내역으로 들어가보면 이미 환불을 했기 때문에 환불 신청하는 버튼이 사라진 것을 확인 할 수 있다.   이번엔 DB에서 확인해보면 ..

프로젝트 2024.06.28

주문 결제 구현

현재 마이페이지의 결제 내역 상태이다.아무것도 결제한 상태가 아니기 때문에 0으로 표시된다.    영화 프로젝트 페이지로 들어가 펀딩하기 버튼을 눌러준다.    그럼 프로젝트 주문 페이지가 나오게 되고 수량과 배송정보들을 입력하여 주문하기 버튼을 눌러준다.만약 결제한 프로젝트가 영화가 아닌 도서라면 자동으로 배송비 3000이 붙어서 총 결제금액에 나오게 된다.   주문하기 버튼을 누르면 포트원 api 중 kg이니시스를 사용하여 구현했기때문에 kg이니시스 결제 화면이 나오게 된다.    원하는 결제 방식으로 결제를 성공하면 결제를 성공했다는 alert과 바로 결제 내역 페이지로 리다이렉트 되는 alert이 나오면서 결제 내역페이지로 이동하게 된다.     결제 할때마다 부여되는 주문번호가 달라지기 때문에이..

프로젝트 2024.06.28

IT 수업 26주차 (211) aws - github 연동

git hub에 push 하면 jenkins에서 자동으로 빌드 되어 페이지에 나타나도록 하는 작업을 해본다. 먼저 putty를 켜서 로그인을 해준다.  그리고 aws의 ipv4:9090으로 젠킨스를 키고젠킨스의 빌드 안으로 들어가 사이드 바의 구성을 누르고 빌드 유발의 GitHub hook trigger 체크한다. 저장버튼을 누르고 git hub로 가서 해당 레파지토리를 git clone해준다.   cmd를 열어 idea . 으로 인텔리제이에 들어가 기본 세팅을 해주고 시작한다. index.html로 가서 수정을 해주고 터미널을 열어 git 에 push 해준다.  그리고 ipv4주소:8080으로 확인해보면 수정이 바로 적용되지 않는 것을 확인 할 수 있다.  그래서 push를 하면 바로 수정되어 실행되도..

IT수업/리눅스 2024.06.19

IT 수업 26주차 (210) Jenkins 설정

Dashboard로 가서 Jenkins 관리로 간 뒤 System을 클릭해준다. 여기서 system -> github 설정tools -> jdk,gradle 설정plugins -> build 이후 설정을 하는 것이다.   github까지 내려와 add github server클릭한다.  그리고 자신의 github로 와서 settings로 들어가   Developer settings를 선택해주고  Personal access tokens을 선택한 뒤 Tokens를 선택해준다.안의 내용들을 작성해주는데  체크 할 때는 workflow와 write:package 이 두 개 빼고 다 체크 해준 뒤 generate token을 해준다.    그러면 토큰 값이 나오는데 복사하여   Jenkins의 github로 가..

IT수업/리눅스 2024.06.18

IT 수업 26주차 (209) AWS 배포 2

PUTTY를 열고 시작한다.PUTTY를 열기 위해서는 AWS로 가서 해당 인스턴스 시작을 누른 뒤 PUTTY를 실행해 ec2-user로 로그인 하면 된다.      ● jenkins 설치jenkins 다운로드를 검색해 red hat을 클릭한다.  그리고 sudo su 로 관리자로 이동한다.    밑의 코드를 sudo 빼고 차례대로 putty에 복사 붙여넣기 해주는데 붙여넣기 할때는 마우스 오른쪽 버튼을 누르면 된다.wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.reporpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io-2023.key  yum in..

IT수업/리눅스 2024.06.18

IT 수업 25주차 (208) AWS 배포

● 임시 프로젝트 경로 만들어 github에 올리기start.spring.io로 들어가 임시 프로젝트를 만들어 준다. (Generate) 새로운 폴더를 만들어 다운받은 기본 프로젝트를 넣어 압축을 풀어준다.   github로 가서 새로운 레파지토리를 만들어 주는데 브랜치가 자동으로 만들어지게 read me를 선택해준다.  레파지토리를 만들었으면 아까 만든 폴더의 주소창에 git clone 레파지토리 주소 를 적어 clone을 해준다.그러면 레파지토리 이름으로 된 파일이 생성되는데 파일 안으로 들어가 압축으로 푼 demo의 파일들을 레파지토리 이름의 파일 안에 넣어준다. ( 파일 자체를 넣으면 안됨! 안의 내용들만 넣어야 함 )   다했으면 cmd를 열어 idea .로 인텔리제이로 열어주고 21버전으로 초..

IT수업/리눅스 2024.06.14