1️⃣ Text와 오토 레이아웃

일반적인 Text에는 오토 레이아웃이 바로 적용되지 않는다.

Text를 선택한 뒤 Ctrl + G로 그룹화하면 오토 레이아웃을 적용할 수 있다.

오토 레이아웃 적용 후에는

상·하·좌·우 여백 조절 가능

텍스트 글자 수에 따라 자동으로 크기 변경

여러 오토 레이아웃 요소를 각각 오토 레이아웃으로 감싸면 👉 순서 변경(위치 바꾸기)도 가능하다.

2️⃣ Clip Content

Layout 창에서 Clip content를 활성화하면 → 프레임(카드) 밖으로 나간 요소가 보이지 않게 된다.

카드 UI, 이미지 마스킹 등에 자주 사용됨.

3️⃣ 8pt Grid System (Material Design)

머터리얼 디자인 가이드의 8pt 그리드 시스템이란?

모든 요소의 크기와 간격을 8px 단위로 맞추는 규칙

버튼, 카드, 텍스트, 아이콘 등은 👉 8의 배수(8, 16, 24, 32 …)로 디자인하는 것을 권장

4️⃣ 오토 레이아웃 영역 밖으로 텍스트가 나갈 때

텍스트가 오토 레이아웃 영역을 벗어나는 경우 👉 Ctrl 키를 누른 채 드래그해서 직접 조절 가능

5️⃣ Hug Contents vs Fixed

Hug contents

• 자식 요소의 크기에 맞춰 부모 프레임 크기가 자동 조절

• 여백이 늘어나면 프레임도 같이 커짐

Fixed

• 입력한 값만큼 고정된 크기

• 내용이 바뀌어도 크기는 변하지 않음

6️⃣ 카드 + 오토 레이아웃

카드에 오토 레이아웃을 적용하면 → 내부 요소 크기가 변할 때 카드 크기도 자동으로 변경

반응형 UI 구성할 때 매우 유용함.

7️⃣ Typography & Color 스타일 지정

Figma에서는 대표 Typography와 Color 스타일을 지정할 수 있다.

Typography 예시

Title1 / Bold / 24px

Color 예시

Primary / #000000

8️⃣ 컴포넌트 & Variants

• 아이콘을 컴포넌트로 만든 뒤 전체 선택 → Combine as variants 를 사용하면 하나의 그룹으로 묶을 수 있다.
• Variants로 묶어두면 컴포넌트를 쉽게 교체할 수 있어 재사용에 유리하다.
• Variants를 해제하고 싶을 경우 그룹 밖으로 빼내면 된다.

9️⃣ 마스터 컴포넌트와 인스턴스

• 마스터 컴포넌트는 직접 사용하지 않고 반드시 복사해서 사용한다.
• 마스터 컴포넌트를 수정하면 연결된 모든 인스턴스가 함께 변경된다.
• 반대로 인스턴스를 수정해도 마스터 컴포넌트에는 영향을 주지 않는다.

클라이언트가 보낸 요청을 받아 요청한 정보를 제공

예시 ) 클라이언트 : 브라우저로 네이버 접속하면 네이버 메인 페이지 보여줘! 서버 : 네이버 서버가 요청을 받아 메인 페이지를 브라우저에 전달

📲클라이언트 ( client )

서버에게 정보를 요청하는 브라우저 또는 앱

Chrome, Firefox, 앱스토어 >> 애플리케이션 :: 다 클라이언트

🔄클라이언트 vs 서버 사이드 언어

* 클라이언트 사이드 언어

브라우저에서 바로 실행 (웹서버 없이도 작동)

• HTML
• CSS
• JavaScript

* 서버 사이드 언어

서버에서만 실행 -> 클라이언트 결과만 받음 ( 보안이 뛰어남, 데이터 처리에 유리 )

• PHP
• JSP/Spring
• Node.js

📁PHP 파일 업로드 처리

파일업로드 : 사용자가 자신의 컴퓨터에서 서버로 파일을 보내는 것 ex ) 구글클래스룸에 과제를 파일로 올리는 것

PHP에서는 사용자가 파일을 업로드하면 자동으로 초전역변수 라는 특별한 변수를 생성함

*파일 업로드 폼에서 입력창의 이름을 'userfile'이라고 했을 때, *

1. $_FILES['userfile']['name'] 사용자가 업로드한 파일의 원본 이름(photo.jpg)
   
2. $_FILES['userfile']['tmp_name'] 서버가 파일을 임시로 저장하는 경로(/tmp/php123abc)
   
3. $_FILES['userfile']['size'] 업로드된 파일의 크기 (102300바이트)
   
4. $_FILES['userfile']['type'] 파일의 종류(image/png, text/plain)
   
5. $_FILES['userfile']['error'] 파일 업로드 중 발생한 오류 코드(0이면 정상, 1~4:다양한 에러코드)

==> 파일을 잘 업로드 했는지, 어떤 파일인지 쉽게 관리할 수 있다.

한 개의 html 파일에서 페이지를 이동하지 않고 JavaScript로 필요한 부분만 바꾸는 방식

SPA 장점

• 새로고침이 필요없음
• 부드러운 화면 전환
• 모바일 앱처럼 동작하는 웹사이트

🧩 컴포넌트란?

화면을 여러 개의 조각단위(컴포넌트)로 나눈 것 요소마다 컴포넌트로 분리하여 재사용 가능하고, 안의 내용만 바꿔서 다양하게 활용할 수 있음

컴포넌트의 큰 특징

• 이름은 반드시 대문자로 시작
• props를 통해서 데이터 전달

왜 컴포넌트가 중요할까?

1. 재사용성 : 한 번 만들고 여러번 사용 가능
2. 유지보수 : 코드가 기능별로 나뉨 > 수정, 개선 쉬움
3. 조립식 UI : 컴포넌트를 쌓아서 전체 페이지를 구성

🧾 JSX란?

JavaScript XML의 줄임말 JS 안에서 HTML처럼 UI구조를 표현할 수 있음

→ 코드가 직관적이고 가독성이 좋아짐!

📦 Props란?

Properties의 줄임말 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용

// User 컴포넌트 : props.name 사용
function User(props){
    return <p>{props.name}님 환영해요!</p>
}

// App 컴포넌트 : User에 name을 전달
function App(){
    return (
        <div>
            <User name="주람"/>
        </div>
    )
}

Props의 특징

• 읽기 전용 (자식 컴포넌트에서 변경 불가)
• 객체 형태로 전달 (여러 값을 한 번에 넘김)

🔄 State의 특징

사용자의 상호작용에 따라 값이 바뀌는 데이터

import { useState } from "react"; // state 사용 시 import

• 컴포넌트 내부에서 선언하고 내부에서 사용
• 화면에 즉시 반영
• 비동기적으로 변경됨

📌 예제 1 : 버튼 클릭하면 숫자 올라가기

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // count라는 state 선언

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

📌 예제 2 : 좋아요 버튼 누르기

import { useState } from "react";

function Like(){
    const [liked, setLiked] = useState(false)

    return (
        <button onClick={()=>setLiked(!liked)}>
            {liked? '좋아요취소':'좋아요'}
        </button>
    )
}