당신의 이야기에 주목할께요

■ 사용 문법 JOIN, GROUP BY, DISTINCT  ■ 사용 방법1. 두 테이블을 조인한다. 2. SALES_DATE에서 년,월을 뽑고, GENDER으로 GROUP BY 해준다. 3. 연, 월, 성별 기준으로 USER_ID의 COUNT를 구한다. 4. 구매한 회원 수이므로 회원이 구별되도록 해줘야 한다. DISTINCT 를 이용해서 COUNT를 세준다.  ■ 코드-- 코드를 입력하세요SELECT YEAR(S.SALES_DATE) AS YEAR, MONTH(S.SALES_DATE) AS MONTH, U.GENDER, COUNT(DISTINCT U.USER_ID) AS USERSFROM USER_INFO AS UJOIN ONLINE_SALE AS SON U.USER_ID = S.USER_IDWHER..

■ 사용 문법    GROUP BY, JOIN, 집계함수 SUM    ■ 사용 방법    1. 우선 세 개의 테이블을 조인한다.2. 조건에 맞게 필터링 해준다.(2022년 1월)3. 문제에 보면 저자별, 카테고리 별 매출액이라 했으므로 AUTHOR_ID, CATEGORY 로 GROUP BY 해준다. 4. 집계함수 SUM으로 BOOK의 PRICE와 BOOK_SALES의 SALES를 곱해준 다음 더해준다. (SUM(BOOK.PRICE * BOOK_SALES.SALES)5. 정렬 후 마무리  ■ 코드    SELECT A.AUTHOR_ID, A.AUTHOR_NAME,B.CATEGORY , SUM(B.PRICE * S.SALES) AS TOTAL_SALESFROM BOOK AS BJOIN AUTHOR AS A..

■ 사용 문법    GROUP BY, JOIN( GROUP BY 절은 그룹화 기준 컬럼(CATEGORY)과 집계 함수의 결과(MAX(PRICE))만 반환한다.)   ■ 사용 방법    1. GROUP BY 절은 그룹화 기준 컬럼과 집계 함수의 결과만 반환하다. 따라서, 아래와 같은 코드 실행 시 PRODUCT_NAME이 매칭되지 않은 값으로 나온다. SELECT CATEGORY, MAX(PRICE) as MAX_PRICE, PRODUCT_NAMEFROM FOOD_PRODUCT WHERE CATEGORY = "과자" OR CATEGORY = "국" OR CATEGORY = "김치" OR CATEGORY = "식용유"GROUP BY CATEGORYORDER BY MAX_PRICE DESC2. 이를 해결해주기..

GROUP BY를 한 다음 시간으로 그룹화한다.

■ 사용 문법 GROUP BY ■ 사용 방법 1. name으로 GROUP BY로 한다. 2. 집계 함수를 사용하여 name으로 그룹된 데이터의 COUNT를 구한다. ■ 코드 -- 코드를 입력하세요SELECT NAME, COUNT(NAME) as COUNTFROM ANIMAL_INSGROUP BY NAMEHAVING COUNT(NAME) >= 2 AND NAME IS NOT NULLORDER BY NAME

■ 사용 문법 UNION ■ 사용 방법1. Cat과 Dog 의 수를 세는 코드를 각각 만든다. 2. 열로 합치기 때문에 Union를 사용한다.  ■ 코드 -- 코드를 입력하세요SELECT ANIMAL_TYPE, COUNT(*) as countFROM ANIMAL_INSWHERE ANIMAL_TYPE = 'Cat'UNIONSELECT ANIMAL_TYPE, COUNT(*) as countFROM ANIMAL_INSWHERE ANIMAL_TYPE = 'Dog'

useEffect는 React의 함수형 컴포넌트에서 side Effect를 수행하기 위해 사용되는 훅이다. 기본적으로 컴포넌트의 첫 번째 렌더링 이후에 실행되며, 그 이후의 모든 업데이트에서 수행된다. 두번째 인수인 의존성 배열에 값을 넣으면 이 값이 변경될 때만 재실행된다.  의존성 배열에 객체를 넣으면 객체의 값이 똑같더라도 계속 재실행된다. 객체의 참조값을 추적하기 때문이다. 따라서 매번 새로운 객체를 생성하므로 useEffect는 매번 실행된다. 이를 해결하기 위해서는 객체의 특정 속성을 의존성 배열을 넣는다. import React, { useState, useEffect } from 'react';function ExampleComponent() { const [data, setData] =..

React는 컴포넌트로 이루어져 있기 때문에, 개인적으로는 파일 구조도 중요하다고 생각을 했다. 정리를 해놓고 만들지 않으면 프로젝트 중반 이후로 엄청 꼬일 수도 있다. 그래서 나는 기본적인 파일 구조를 컴포넌트/페이지로 분리하였다.  그리고 그 외 자주 쓰는 함수 들은 utils에 그리고 페이지 스타일은 styles 폴더를 따로 만들어주었다. 이렇게 만들어줌으로써, 페이지 단위로 이슈 확인이나 개발 진척도를 확인하기가 좋은 것 같다.

- Axios와 Fetch, 나의 선택은? 데이터를 API 요청으로 받을 시간이 왔다.  Axios를 사용한 기억이 있는데, fetch가 있다고 한다. 둘 중에 뭐를 사용하면 좋을까? 아무래도 API 요청은 핵심적인 기능이고 자주 사용하다보니 잘 선택하고 싶다. 일단 둘을 비교해보자.기능/특성fetchaxios설치 필요 여부브라우저 내장별도 설치 필요기본 기능네트워크 요청 기능만 제공JSON 파싱, 상태 코드 처리, 요청 취소 등 다양한 기능 포함에러 핸들링 네트워크 에러만 캐치, 상태 코드 에러 직접처리 필요모든 에러 자동 처리요청 취소AbortController 사용기본 제공응답 데이터 변화수동으로 변환(ex. response.json())자동변환(JSON 데이터) fetch는 브라우저 내장이 가장 ..

프로젝트를 진행할 때, CSR을 할 지 SSR을 할 지 고민을 한 적이 있다. CSR은 클라이언트 사이드 렌더링으로서 서버로부터 빈 html 파일, css, 자바스크립트를 받은 후 클라이언트에서 렌더링을 하는 것을 말한다. 첫 로딩 시간이 느릴 수가 있고, 검색 엔진이 자바스크립트를 실행하지 못하는 경우 SEO를 하기가 힘든 단점이 있다.  SSR은 서버 사이드 렌더링으로 서버에서 렌더링을 하여 페이지를 완성하여 최소한 자바스크립트 파일과 함께 전달하는 방식이다. 브라우저는 이 HTML을 즉시 실행할 수 있다. SSR은 첫 로딩 시간이 빠른 장점이 있다. 그리고 완성된 HTML 파일이 있으므로 SEO에도 강점을 가지고 있다. 하지만 요청이 있을 때마다 서버로부터 HTML 페이지를 받아야 하므로 서버의 부..