seohyun han

선택한 결제 API : 아임포트 IMPORT 아임포트 라이브러리 ▷ orderPayment.jsp - 결제요청 view △ controller 에서 내려보낸 결제 관련 데이터들을 set ▽ 데이터들을 변수에 담아서 결제정보를 import 로 전송 ! $(function(){ var paymentResult = true; $(document).ready(function () { var email = $('#email').val(); var name = $('#name').val(); var orderNo = $('#orderNo').val(); var payPrice = $('#payPrice').val(); var userPoint = $('#userPoint').val(); var savePoint =..

비대면 빨래서비스 프로그램 제작 - 주문하기 우리 팀은 포인트를 적립 / 사용할 수 있는 프로그램을 만들기로 계획했다 포인트 로직.. 스뭇스하게 짤 수 있을 줄 알았는데 경우의 수는 생각보다 다양했고 생각지도 못한 난관이었다 이번 파이널 프로젝트에서 테스트를 제일 많이 해본 구간. 테스트하면서 많은 구멍들을 찾았고 메웠다 ▶ DB 설계 - 관련없는 테이블정보는 지움 point 테이블을 따로만들어서 주문 시 사용포인트 / 적립 포인트 정보가 들어가도록 만들었다 1개의 주문 (주문번호) => 2개의 포인트 정보 포인트 이용내역에서 확인하면 이렇게 1개의 주문번호에 2개의 포인트 이용내역이있는 걸 볼 수 있다 ▶ orderconfirm.jsp 먼저 변수 insertPoint, usePoint 선언해둔다 ▷ 포..

7주짜리 파이널 프로젝트 주제는 비대면 세탁 서비스 내가 처음 맡게 된건 '주문하기' 구현하는 것 ※ 첫번째 난관 멀티셀렉트 구현 리액트를 배우기 전이었으나 멀티셀렉트 기능은 무조건 리액트로 구현하는게 편할거라는 정보를 얻었음 인도사람의 유튜브를 열심히 시청하여 리액트로 어찌저찌 작동하는 멀티셀렉트를 만들어내는데에는 성공 문제점 1. 한 상품당 1개밖에 선택을 못함 https://react-select.com/home - 위 링크를 통해 사용할 수 있는 select 패키지를 사용하면 멀티셀렉트가 구현되긴 하나 한 항목당 한번씩만 선택할 수 있는 멀티셀렉트가 구현됨. 문제점 2. 스프링부트에 적용하는 방법을 모르겠음 - 한 상품당 한개씩만 주문할 수 있도록 (..) 구현을 한다쳐도 만든 jsx 를 스프링부..

※ map() - 자바스크립트 배열의 map() 함수 - 파라미터로 전달된 함수를 사용해서 배열 내의 각 요소를 원하는 규칙에 따라 변환 후 결과로 새로운 배열을 생성한다 ▶ 문법 arr.map(callback, [thisArg]) ▷ 파라미터 callback 1. currentValue : 현재 처리하고 있는 요소 2. 현재 처리하고 있는 요소의 index 값 3. 현재 처리하고 있는 원본 배열 ▷ thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼스 예제 ) map 함수를 사용하여 배열 [1,2,3,4,5]의 각 요소를 제곱해서 새 로운 배열을 생성하자 Javascript ES6 const nums = [1,2,3,4,5,6]; const result = nums.map(..

※ useEffect - 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook - useEffect는 기본적으로 렌더링되고 난 직후마다 실행 되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라짐 ▶ useEffect의 기본형태 useEffect(function, deps - function : 실행하고자 하는 함수 - deps : 배열 형태. function을 실행시킬 조건. = > deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행합니다 참조 : https://cocoon1787.tistory.com/796 ▶ useEffect 사용예시 import React, { useState, useE..

[유튜브 개발화라리] 강의 contextAPI 로 리액트 상태 관리 레벨업 하기! - YouTube React Context 란 ? React 의 앱은 component tree 로 구성되어있다 React 의 데이터는 부모컴포넌트 => 자식컴포넌트 로 props 를 통해 전달된다 엄청 거대한 react 프로젝트가 있다고 가정하면, 모든 데이터를 일일히 props 를 이용해 전달하는건 매우 불편하다 = > 따라서 React 에서는 Context API 를 제공 Context : app 안에서 전역적으로 사용되는 데이터를 컴포넌트 사이에서 전달이 쉽게 한다 app (최상위 컴포넌트) - about - profile 이런 트리가 있다고 가정해보자 [1] 상위 컴포넌트에서 context 에 값 넣기 1. con..

current 라는 객체에 저장됨 useRef 는 current 라는 속성을 가진 객체를 반환한다. current 에 들어가는 값은 useRef 의 인자로 넘겨준 값이다. > 리렌더링이 되어도 계속 유지하기 위해서 컴포넌트의 DOM 요소에 접근하기 위해서 리액트에서는 document.queyrSelect ~ 이런식으로 dom 요소를 가져오는 것은 권장하지 않는다. html 속성에는 ref 라는 값이 다 있음 리렌더링이 되는 조건 1. 부모에서 내려온 props 가 바뀌었을 때 2. 컴포넌트 내부의 state 가 변경이 생겼을 때 리렌더링이 되면 함수가 처음부터 다시 실행된다. useRef 사용하면 손쉽게 dom 요소에 접근이 가능함. useRef(value) 를 호출하면 ref Object 를 반환해준다..

유튜브 코딩애플 React 강의 필기 useState('') 를 사용하면 항상 두개의 변수가 들어갈 수 있는 array 가 남게된다. [state데이터, state 데이터 변경함수] let [글제목,글제목변경]= useState('남자 코트 추천'); 따라서 이렇게 두개로 형식을 맞춰줘야 함 useState() 괄호 안에는 배열, Object 등 모두 넣을 수 있다. 이는 모두 배열 형식으로 저장됨 그럼 왜 ! 변수가 아니라 state 를 쓸까 ? => state 가 변경이 될 때 , 데이터를 담고있는 html 은 자동으로 재렌더링이된다 (re-rendering) 일반변수는 새로고침이 됨 function App(){ let [글제목,글제목변경]= useState(['남자 코트 추천','강남우동맛집']);..

▶ import / export 변수나 함수를 다른 파일에 저장해두고 불러와서 사용할 수 있다 ▷ data.js 에서 App.js로 변수나 데이터를 보내려면 1. data.js에서 원하는 데이터를 export 하고 (export default + 변수,함수,데이터) export default 문법 (data.js 파일) var mydata = 'hong'; export default mydata; 2. App.js에서는 data.js를 import 하면 됨 import mydata from './data.js'; 1. data.js export default [ { no : 1, title : "리액트 책 추천", name: "홍길동", content : "리액트를 다루는 기술" }, { no : 2, ..

리액트는 컴포넌트를 import 해서 사용한다 ▶ 함수형 컴포넌트 예제 1 ) 컴포넌트 (=function 이라고 생각하면됨) 기본틀잡기 ( 단축키 : rsc enter ) app 컴포넌트에서 potato 컴포넌트 갖다쓰기 - potato import 하기 app 에서 리턴해주는 애는 html.index div root 안으로 들어간다 potato 에서 리턴한 애는 app 으로 들어간다 app + poatao 가 html.index div root 안으로 들어간다 예제 2 ) ▶ 클래스형 컴포넌트 도 있긴한데 넘어가도록하자 화살표 함수에서 this 는 자신이 속한 클래스를 의미한다 기존함수에서 this 는 자신이 속해있는 곳에서 가장 가까운 객체를 의미한다 ▶ props = property react 에..