공식 문서 보면서 해보자 ㄱㄱ

스토리지

1. new bucket 클릭

2. 버킷이름 , public (누구나 업로드 할 수 있는지 말지 정하는것 ) , 사이즈 제한,업로드 파일 유형 정해주면 됨

3. 스토리지 생성 되면 Policies 만들어야됌 좌측 하단 메뉴바 보면 있음 . 클릭 ㄱㄱ

4. 가장 상단에 있는 New policy 클릭

5. For full customization -> 이걸 눌러야 좀 더 간편하게 policy 를 생성 할 수 있다함. (Get started quickly)문구가 더 간편한거 아닌가? 안해봐서 모름 일단 For Full custimaztionㄱㄱ

6. 그럼 또 policy 이름 만들고 (SELECT, INSERT, UPDATE, DELETE)기능 설정 , 누가 또 접근 할 수 있는지, 아래처럼 해주고 review 클릭 하셈 그러고 save policy 까지
   

7. 이 화면 나오면 일단 스토리지 기본 설정 끝

1. .env 파일 생성 후
2. 프로젝트 환경 설정에 나와있음
3. DB_PASSWORD 는 프로젝트 생성 할 때 만든 그 패스워드임 절대 공개 하면 안됌 ,SERVICE_ROL도 마찬가지

   NEXT_PUBLIC_SUPABASE_URL=프로젝트 url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=
   NEXT_SUPABASE_SERVICE_ROLE=
   NEXT_SUPABASE_DB_PASSWORD=

   알맞은 값 입력

types_db.ts 생성

"scripts": {
  "generate-types": "npx supabase gen types typescript --project-id [project_id] --schema public > types_db.ts"
}

package.json 파일에 명령어 설치

Supabase 프로젝트의 데이터베이스 스키마를 기반으로 TypeScript 타입 파일을 자동으로 생성하고, 그 결과를 types_db.ts 파일에 저장하는 역할을 함 그리고

 npm run generate-types 

실행 시켜주면 types.db 를 생성 됌

연동

npx supabase login

이거 입력해주면 supabse 프로젝트랑 로컬이랑 연동 끝임 types.db 파일 보면 내용이 채워져있음

SSR 프로젝트로 하고싶으면?

npm install @supabase/ssr @supabase/supabase-js

클라이언트,서버, 미들웨어 설정

client.ts

• 목적: 브라우저 환경에서 Supabase 클라이언트를 생성하기 위한 함수
• 주요 기능: createBrowserSupabaseClient(): 브라우저에서 사용할 Supabase 클라이언트를 생성함. Supabase의 URL과 익명 키를 환경 변수에서 읽어옴.

  "use client";
  

import { createBrowserClient } from "@supabase/ssr";

export const createBrowserSupabaseClient = () => createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! );

**server.ts**
- **목적**: 서버 환경에서 Supabase 클라이언트를 생성하기 위한 함수들
- **주요 기능**:
    - createServerSupabaseClient(): 서버에서 사용할 Supabase 클라이언트를 생성합니다. 환경 변수에서 Supabase의 URL과, 주어진 권한에 따라 비공식 또는 관리 권한 키를 사용함. 쿠키 관리 기능도 포함되어 있음.
    - createServerSupabaseAdminClient(): 관리 권한을 가진 Supabase 클라이언트를 생성함. 서버 측에서만 호출되며, admin 플래그를 true로 설정하여 관리 키를 사용함

```"use server";

import { createServerClient, type CookieOptions } from "@supabase/ssr";
import { cookies } from "next/headers";
import { Database } from "types_db";

export const createServerSupabaseClient = async (cookieStore: ReturnType<typeof cookies> = cookies(), admin: boolean = false) => {
    return createServerClient<Database>(process.env.NEXT_PUBLIC_SUPABASE_URL!, admin ? process.env.NEXT_SUPABASE_SERVICE_ROLE! : process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, {
        cookies: {
            get(name: string) {
                return cookieStore.get(name)?.value;
            },
            set(name: string, value: string, options: CookieOptions) {
                try {
                    cookieStore.set({ name, value, ...options });
                } catch (error) {
                    // The `set` method was called from a Server Component.
                    // This can be ignored if you have middleware refreshing
                    // user sessions.
                }
            },
            remove(name: string, options: CookieOptions) {
                try {
                    cookieStore.set({ name, value: "", ...options });
                } catch (error) {
                    // The `delete` method was called from a Server Component.
                    // This can be ignored if you have middleware refreshing
                    // user sessions.
                }
            },
        },
    });
};

export const createServerSupabaseAdminClient = async (cookieStore: ReturnType<typeof cookies> = cookies()) => {
    return createServerSupabaseClient(cookieStore, true);
};

middleware.ts

• 목적: Next.js 애플리케이션에서 요청 및 응답을 처리하고 Supabase 클라이언트를 적용하기 위한 미들웨어
• 주요 기능:
  • applyMiddlewareSupabaseClient(): 요청을 처리하며 Supabase 클라이언트를 생성하고, 쿠키를 관리합니다. 요청과 응답에 Supabase 클라이언트를 통합하고 인증 토큰을 갱신함.
  • middleware(): applyMiddlewareSupabaseClient()를 호출하여 미들웨어를 구현함. 특정 요청 경로에 대해 미들웨어가 동작하도록 설정함.

import { type NextRequest, NextResponse } from "next/server";

export const applyMiddlewareSupabaseClient = async (request: NextRequest) => {
  // Create an unmodified response
  let response = NextResponse.next({
    request: {
      headers: request.headers,
    },
  });

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          // If the cookie is updated, update the cookies for the request and response
          request.cookies.set({
            name,
            value,
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value,
            ...options,
          });
        },
        remove(name: string, options: CookieOptions) {
          // If the cookie is removed, update the cookies for the request and response
          request.cookies.set({
            name,
            value: "",
            ...options,
          });
          response = NextResponse.next({
            request: {
              headers: request.headers,
            },
          });
          response.cookies.set({
            name,
            value: "",
            ...options,
          });
        },
      },
    }
  );

  // refreshing the auth token
  await supabase.auth.getUser();

  return response;
};

export async function middleware(request) {
  return await applyMiddlewareSupabaseClient(request);
}

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * Feel free to modify this pattern to include more paths.
     */
    "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --save
npm install @tailwindcss/typography autoprefixer --save-dev

provider 컴포넌트 생성

config 폴더 생성 후 provider 컴포넌트 생성

'use client'
export { ThemeProvider } from "@material-tailwind/react";

그러한 점을 막기 위해

npm i tailwind/typography

사용하면 됌

• 오직 서버에서만 렌더링 되는 컴포넌트이다
• 기본적으로, 모든 React 컴포넌트(Next.js 앱에서)는 ReactServerComponents 이다.
• 클라이언트 코드가 거의 없어 성능 최적화의 적합하다.

클라이언트 컴포넌트 특징

• 서버에서 사전 렌더링되지만, 'use client' 지시어를 통해 선택적으로 클라이언트에서도 렌더링될 수 있는 컴포넌트
• 클라이언트 측 상호작용 가능성은 React 컴포넌트가 서버에서 렌더링된 후에도 클라이언트에서 사용자와의 상호작용(이벤트 처리, 상태 변경 등)을 할 수 있게 해주는 기능을 의미한다.

Next에서 useState,useEffetct, 이벤트 핸들링 처리를 하고 싶으면 사용하는 파일 위에 'use client'를 선언해주면 해당 컴포넌트는 클라이언트 컴포넌트가 됌

• app 폴더 안에있는 page.js 파일은 서버 컴포넌트임
• node 실행 환경에서는 콘솔을 찍으면 보이는데 개발자도구를 키면 콘솔이 안찍힘
• 겉보기엔 일반적인 컴포넌트지만 Next에서 특별 대우 받는 것..

파일 시스템을 통한 추가 경로 설정

리액트에선 리액트 라우터가 필요했지만 next는 폴더만 추가해주면 됌

1. app 폴더안의 만들고싶은 페이지의 폴더를 만들어준다 ( 이때 폴더명이 경로임 )
2. 생성한 폴더 안의 page.js 파일을 생성해준다

보호된 파일명

이 파일명들은 app/폴더(부 폴더 포함) 내부에서 생성될 때만 보호된다. app/폴더 외부에서 생성될 경우 이 파일명들을 특별한 방식으로 처리하지 않음.음.

• page.js => 신규 페이지 생성 (예: app/about/page.js은 /about page을 생성)

• layout.js => 형제 및 중첩 페이지를 감싸는 신규 레이아웃 생성

• not-found.js => ‘Not Found’ 오류에 대한 폴백 페이지(형제 또는 중첩 페이지 또는 레이아웃에서 전달된)

• error.js => 기타 오류에 대한 폴백 페이지(형제 또는 중첩 페이지 또는 레이아웃에서 전달된)

• loading.js => 형제 또는 중첩 페이지(또는 레이아웃)가 데이터를 가져오는 동안 표시되는 폴백 페이지

• route.js => API 경로 생성(즉, JSX 코드가 아닌 데이터를 반환하는 페이지, 예: JSON 형식)

동적 경로 설정

이미지 파일 불러오기

1. .src
2. Image 컴포넌트 사용하기

리액트 프레임워크 이다

왜 필요함? 리액트 있는데? next는 react를 풀스택으로 빌드하는데 쉽게 해줌

서버에어서 컴포넌트를 렌더링 할 수 있게 함

리액트로 풀스택ㅇ르로 만든다음 간소화 시킴

NEXT 주요 기능 및 장점

장점

1. 풀스택 앱을 구축할 수 있다
2. 파일 시스템을 사용하여 경로를 설정 할 수 있음 (라우터 필요 없음)
3. 페이지에 보이는 모든 내용을 렌더링함

NEXT 앱 만들어보기

1.npx create-next-app@latest

App 라우터 vs Page 라우터

page 라우터

• 구방식
• 아주 안정적임

app router

• 비교적 새로운 방식
• 부분적으로 버그 남음
• 서버컴포넌트, 서버액션을 기능을 사용 할 수 있음
• 공식문서에서 추천 함

소프트웨어 위기의 원인과 증상

  • 소프트웨어 규모의 대형화 및 복잡화에 따른 개발 비용 증대
 • 하드웨어 기술의 급진전으로 인한 소프트웨어 개발 기술의 상대적 부진
 • 하드웨어 비용 대비 소프트웨어 가격 상승 폭 증가
 • 소프트웨어 유지보수의 어려움과 개발 정체 현상 발생
 • 소프트웨어 개발 프로젝트 기간 및 소요 예산에 대한 정확한 예측의 어려움
 • 신기술에 대한 교육 및 훈련의 부족
 • 사용자의 소프트웨어에 대한 기대치 증가
 • 소프트웨어에 대한 사죵자 요구사항의 빈번한 변경 및 반영 

➡️ 이러한 원인들로 인한 결과

 1) 예산초과
 2) 일정 지연
 3) 낮은 품질의 소프트웨어 개발
 4) 비효율적인 소프트웨어 개발
 5) 사용자 요구사항 불만족, 산출물 관리의 어려움

소프트웨어 개발이 어려운 이유

• 의사소통의 문제

•시스템의 순차 특성 2차원 평면에 프로그램 실행 명렁어 -> 동작은 3차원 공간 --> 프로그래머들은 3차원적 오류를 2차원 평면에서 정리해야됌

•개발에 의한 결과물

•프로젝트의 복잡한 특성

1) 프로젝트마다 개발기간이 다르다 2) 동일한 기능의 SW도 어떤 기술을 적용하느냐의 따라 개발 과정이 달라짐 3) 프로젝트 인원 수에 따라 운영방식이 달라져야 함 4) 목적에 따라 프로젝트 관리 방식이 달라져야 함 •개발자의 특성

•다양한 관리 이슈 대부분 팀 활동 , 품질 좋은 SW 를 개발해야하는 공통의 '목표' 와 '정렬' 되어야 함

소프트웨어 특성 정보

소프트웨어 개발 비용

분석 및 설계 : 30% , 코드 개발 : 20% , 테스트 : 40 % ➡️ 분석 및 설계 과정이 코드 개발보다 더 중요하고 비중 있게 수행되어야 함을 의미

소프트웨어 개발 및 유지보수

개발 비용: 33% , 운영 유지 비율 : 67% ➡️ SW 수정 및 개선 > 개발

소프트웨어 개발 시 오류의 근원

기능의 잘못된 이해:15%, 문서화 및 기타 오류 : 35%, 코드 작성의 오류: 30% , 로직 설계의 오류: 20%

소프트웨어 고장 그래프

인공지능 시대의 소프트웨어 위기

•4차 산업혁명의 특징

초연결 : 사람, 사물 등 객체 간의 상호 연결성이 확장됨 
       ➡️ 실시간 데이터 공유가 양•질 적으로 크게 확대

초융합 : 초연결 환경의 조성으로 이종 기술•산업 간의 결합이 촉진되어 새로운 융합 산업 출현을 의미함

초지능 : 서비스 활동의 질적인 향상,즉 최적 의사결정을 통해 문제 해결등의 영역에서 더 나은 서비스를 제공하는 
        지적 영량을 의미한다

3.소프트웨어 공학 기술의 적용

소프트웨어 공학적 기법의 종류

•구조적 프로그래밍 ➡️C,포트란,코볼 과같은 언어, 프로그램을 좀 더 이해하기 쉽고 논리를 체계적으로 표현 할 수 있는 공학적 접근 방법

•객제치향 프로그래밍 ➡️클래스 개념을 기반으로 캡슐화 및 정보 은닉,상속,다형성 등의 개념 제공, SW를 직관적으로 이해하고 유지보수 및 재사용을 쉽게 할 수 있도록 지원

•소프트웨어 컴포넌트 및 재사용 ➡️기존 코드 묶음을 컴포넌트로 명세, 컴포넌트를 재사용하면 개발 시간 단축, 컴포넌트를 조립하여 대규모 SW 개발 가능

•통합 개발 환경 ➡️ 소스 코드 작성, 컴파일 및 디버깅, 크로스 컴파일, 배포 등 개발 작업을 하나의 프로그램 안에서 처리하도록 지원

•소프트웨어 프로토 타이핑 ➡️최종 SW를 완료 되기전까지 눈에 보이지 않은 SW를 사전에 보여줌으로써, 사용자의 요구사항을 반영하고 확정하기 위함

•소프트웨어 개발 프로세스 ➡️ 전통적 개발 절차 ( 폭포수 모델 ) : 요구사항 -> 분석 -> 설계 -> 코딩 -> 테스트 ->배포 현재는 점진적 , 프로토타입, 나선형 , V모델, 애자일 , DevOps 등 새로운 방식이 나타남

•소프트웨어 검사 및 검증 요구사항에 잘못 된 이해,설계 과정의 부적절성, 코딩 오류등으로 인해 검사 및 검증 활동의 강조 ➡️대표적인 기법인 'SW 테스트' --> 소프트웨어가 정확하게 동작하는지, 잠재된 결함을 최대한 찾아내어 고장 발생 가능성을 줄여줌

•소프트웨어 형상 관리 변경 발생은 불가피 , '어떻게 처리하고 관리 할 것인가?' 가 관건 --> 변경이 발생한 것을 기록 및 관리(형상관리) ➡️체계적으로 추적하고 통제하는 활동, 개발 결과물에 대한 버전 관리 뿐만아니라, 형상 항목이라는 형태로 작업 산출물을 정의 및 항목 간의 변경 사항 추적과 통제 정핵을 수립하여 관리하는 활동

•소프트웨어 아키텍처 복잡한하고 대형화 된 SW 는 개발기간이 김, 수명도 길어짐, 점점 로직이 복잡해짐 ➡️설계 구조에서 변화를 체계적으로 쉽게 반영할 수 있도록 하게 함

소프트웨어 공학의 정의와 원리

소프트웨어 공학의 원리

•엄격성과 정형성 ➡️지나친 자유스러움을 제안하기 위한 보완적 수단 •관심사의 분할 ➡️개발 시 처리 로직과 데이터 관리를 별도로 고려하는 것 •모듈화 ➡️독립적인 기능을 수행하는, 작은 단위의 구별되는 프로그램 조각 , 모듈화를 적용함으로써, SW를 쉽게 분리 ,조립 가능 --> SW 에대한 이해도가 높아짐 •추상화 ➡️세부적인 사항들을 감추고 대상물의 특징으로 사물을 대표하는 것 •변경의 예측 ➡️개발 과정에서의 변경을 잘 예측해 잘 대응하는 것 (ex: 모듈화 구조를 통한 분리) •일반화 ➡️다양한 플랫폼에서 SW가 동작 할 수 있도록 하는 것 •점진성 ➡️단계적, 순차적으로 개발 •명세화 ➡️개발과정에서 생성되는 정보를 쳬계적으로 기술하는 것(ex:유지보수 활동)

block 이 아닌 것들을 외워주는 것이 좋음

inline 은 높이와 넓이를 가질 수 없음

margin 은 box의 border(경계)의 '바깥'에 있는 공간 방향 설정 없이 margin 하나를 주면 사방에 전부 다 적용된다. 두 개를 줄 경우 상하, 좌우 이다. 네 개를 줄 경우 시계방향 순으로 적용된다. (상 우 하 좌)

padding은 box의 border(경계)로부터 '안쪽'에 있는 공간

• span은 inline이기 때문에 높이와 너비를 가질 수 없으며, 그래서 위, 아래에 margin을 가질 수 없다.
  • 하지만 padding은 사방에 가질 수 있다.
  • 이와 같은 상황에 margin을 위, 아래에 적용하고 싶다면, inline 요소를 block으로 바꿔줘야 한다.

<form action="">
    <label for="profile">Profile Photo</label>
    <input id="profile"type="file" accept=".pdf,png">
    <label for="first-name">Frist Name</label>
    <input id="first-name"required placeholder="Name" type="text">
    <input required placeholder="Last Name" type="text">
    <input required placeholder="Username" minlength="10" type="text">
    <input required placeholder="name" type="password">
    <input type="submit" value="Create Account">
</form>

lable 과 input 태그의 id 값이 일치하면 label 을 클릭시 input태그 기능을 사용 할 수 있다.

id 는 어떤 태그에든 넣을 수 있는 attrtbute 이다. --> unique indentify(고유식볇자) 이기 때문, element 하나의 한개의 id 만 가질수 있다.

Semantic Tag

-semantic : 문서를 보기만해도 그 의미를 짐작할 수 있는 것이다.

head 태그와 header태그를 구분 할 것, head는 보이지 않는 것이고, header는 body태그안에 들어가는 것이다.

header 대신 div를 사용해도 무관하지만, 어떤 코드인지 보다 더 쉽게 이해하기 위함.

예시
 <body>
<header>
    <h1>header!</h1>
</header>
<main>
    <p>main!</p>--> 문단 텍스트 쓸 때 적합
    <span>hello!</span> --> 짧은 텍스트의 적합
</main>
<footer>footer!</footer>
</body>

• 코드 자체에 의미가 부여된 semantic 태그를 잊지 말자.ex) header, navigation, footer...
• semantic 태그로 코드를 작성 하는 것은 매우 중요하다. 작성된 코드들이 훨씬 더 보기 좋고, 좋은 프로그래머가 되기 위해서는 필수 사항이다.