React - 쇼핑몰 웹 사이트 만들기 (3) - HomePage HomePage 에 1) card-list (아래의 상품이 나타나는 여러개의 구역) -> card-item (1개의 상품이 나타나는 구역) 3) card-skeleton 4) count-products 5) filter-category -> category-tab ( 상단 카테고리 탭 부분 UI ) 를 컴포넌트화 해서 FiltersCategory.jsx에서 사용하는 방법 카테고리 없음 2024.01.18
React - useDispatch / useSelector 더보기 UseSelector ? : Redux 의 store state에 데이터를 등록할 수 있음 : 즉 등록한 데이터를 가져와서 사용할 수 있음 더보기 UseDispatch ? : Action 은 Dispatcher를 통해 실행할 수 있으며 Action에서 변경할 새로운 state를 넣어서 reducer가 이전 state와 비교해서 변경사항을 적용하여 저장 Language/React 2024.01.18
React 쇼핑몰 사이트 만들기 (3) - Redux 사용하기 store에 각각 ~.slice.js 파일을 생성해줌 (product는 products , product 두개를 생성) main store를 만들기 위해서 store/index.js 파일 생성해줌 import {configureStore} from "@reduxjs/toolkit" import userSlice from "./user/user.slice" import categoriesSlice from "./categories/categories.slice" import productsSlice from "./products/products.slice" import cartSlice from "./cart/cart.slice" import productSlice from './products/produ.. Language/React 2024.01.18
React 쇼핑몰 사이트 만들기 (2) - 로그인 인증 기능 지금 진행하고 있는 프로젝트에서는 로그인 페이지와 / 회원가입 페이지의 UI가 동일하기 때문에 title을 props로 내려줘서 화면의 최상단 title만 바꾸어주는 방식으로 사용 -> Form 컴포넌트가 1개로 존재 React Hook Form 을 이용한 유효성 체크 https://react-hook-form.com React Hook Form - performant, flexible and extensible form library Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React Hook Form에서 제공하는 useForm을 사용해서 register, handleSubmit, .. Language/React 2024.01.17
React 쇼핑몰 사이트 만들기 (1) - 구조 / 패키지 설치 [ 프로젝트 시작 ] npm init vite -> react / javascript [ 필요한 패키지들 설치] npm install [ 패키지 추가 설치] npm install axios react-router-dom react-redux react-icons sass @reduxjs/toolkit react-loading-skeleton [ 소스구조 만들기 ] 각 Pages들 안에 index.jsx파일을 생성하고 다 복사 붙여넣기 해줌 rafce 로 페이지 이름이랑 동일하도록 컴포넌트를 만든다. Component에는 Loader.jsx / Loader.module.scss 두가지씩 파일을 생성해줌. rafce로 컴포넌트 이름이랑 동일하도록 만들어줌 [ App.jsx파일에 라우팅 추가 ] src / A.. Language/React 2024.01.17
query SELECT *, (SELECT CLASS FROM TABLE AS t2 WHERE t2.C = t1.C AND t2.R = t1.R AND t2.STEP_ID = 8) AS STEP_2_CLASS FROM TABLE AS t1 WHERE (STEP_ID = 8 AND NOT EXISTS ( SELECT * FROM TABLE t2 WHERE t2.C= t1.C AND t2.R = t1.R AND t2.REVIEW_STEP_ID = 7 )) OR (STEP_ID = 7) Language/GoLang 2023.06.14
Exist (Select 1~ 1. SELECT A.ID, A.REVIEW_ID, A.CLASS, A.DIE_C_IDX, A.DIE_R_IDX, B.CLASS AS ADC_CLASS FROM TB_POINT A LEFT JOIN TB_ADC_RESULT B ON A.CREATE_TIME = B.CREATE_TIME AND A.ID = B.POINT_ID AND B.MODEL_ID =5 AND B.CLASS IS NOT NULL WHERE A.REVIEW_ID = '70489' AND A.STATUS = 0 AND EXISTS ( SELECT 1 FROM TB_POINT C LEFT JOIN TB_ADC_RESULT D ON C.CREATE_TIME = D.CREATE_TIME AND C.ID = D.POINT_ID AND D.MODE.. 카테고리 없음 2023.03.20
sql SELECT A.NAME LOT, LPAD(B.SLOT, 2, '0') SLOT, C.D_SEQ Seq, C.DIE_R_IDX ROW, C.DIE_C_IDX Col, C.XSIZE Size_X, C.YSIZE Size_y, C.DAREA Area, C.DSIZE Dsize, C.CLASS, E.CLASS, C.ID, C.IMAGE, F.DEVICE, C.CREATE_TIME, C.REVIEWER, C.VALIDATOR, D.CLASS, C.PSIZE, D.CLASS AS ADC_CLASS FROM TB_WAFER_MAP F, TB_LOT A, TB_REVIEW B, TB_POINT C LEFT OUTER JOIN TB_POINT_VERIFIED E ON C.ID = E.POINT_ID INNER JOIN.. 카테고리 없음 2023.03.14
RESTFUL API 작성 [ REST API 설계 규칙 ] - URI는 정보의 자원을 표현해야함 ( 리소스 명은 동사보다 명사를 사용) - 자원에 대한 행위는 HTTP METHOD(GET, POST, PUT, DELETE )로 표현 - 관계명이 복잡하다면 이를 서브 리소스에 표현 -> 예를 들어 사용자가 좋아하는 디바이스 목록을 표현해야할 경우 GET : /users/{userid}/likes/devices (관계명이 애매하거나 구체적 표현이 필요할 때) - 컬렉션은 문서들의 집합, 객체들의 집합을 나타냄 (단/복수도 지켜준다면 좀 더 이해하기 쉬운 URI를 설계할 수 있음) sports라는 컬렉션과 soccer이라는 도큐먼트로 표현하고 있음 컬렉션은 sports로 복수로 나타내고 있음 /sports/soccer/players/.. Deep learning/Studying 2023.01.18
EXPLAIN : 내가 작성한 쿼리가 어떻게 실행되는지 보기 EXPLAIN은 쿼리 실행에 대한 계획을 알고 싶을 때 사용합니다. https://blog.shovelman.dev/776 [삽잡이::sql] 내가 작성한 Query는 어떻게 실행되려나... EXPLAIN ! EXPLAIN is used to obtain a query execution plan (that is, an explanation of how MySQL would execute a query).(출처_ MySQL) EXPLAIN은 쿼리 실행에 대한 계획을 알고 싶을 때 사용합니다.우와 삽잡이~~ 영어좀 하는데~~~ 하하하 blog.shovelman.dev Language/GoLang 2023.01.11