🎯 1. 타입스크립트란?

타입스크립트는 자바스크립트의 슈퍼셋으로, 자바스크립트 코드에 정적 타입 검사를 추가하여 오류를 미리 발견하고 코드의 품질을 향상시킬 수 있게 합니다. 타입스크립트는 자바스크립트로 컴파일되어 실행되기 때문에 자바스크립트와 호환됩니다.

✅ 타입스크립트의 장점

정적 타입 검사: 코드를 작성하면서 타입 오류를 미리 발견할 수 있습니다. IDE 자동 완성: IDE에서 타입 정보를 활용해 더 나은 자동 완성 기능을 제공합니다. 대규모 프로젝트 관리: 타입 시스템 덕분에 코드가 커져도 유지보수가 용이합니다. ES6+ 기능 지원: 최신 자바스크립트 기능을 바로 사용할 수 있습니다.

🎯 2. 타입스크립트 설치

타입스크립트를 사용하려면 먼저 설치해야 합니다. 프로젝트 폴더에서 아래 명령어를 실행하여 타입스크립트를 설치합니다.

npm install --save-dev typescript

설치 후, tsconfig.json 파일을 생성하여 프로젝트의 타입스크립트 설정을 할 수 있습니다.

npx tsc --init

이 명령어는 기본적인 타입스크립트 설정 파일을 생성해줍니다.

🎯 3. 타입스크립트 기본 문법

✅ 변수 선언 및 타입 지정

타입스크립트에서는 변수에 타입을 지정할 수 있습니다. 타입 지정은 변수 선언 시 : 뒤에 타입을 작성합니다.

let age: number = 30;
let name: string = "John";
let isActive: boolean = true;

✅ 배열

배열의 타입을 지정할 때는 number[], string[]처럼 배열의 원소 타입을 명시할 수 있습니다.

let numbers: number[] = [1, 2, 3, 4];
let fruits: string[] = ["apple", "banana", "cherry"];

✅ 튜플(Tuple)

튜플은 고정된 수의 원소를 가질 수 있으며, 각 원소의 타입도 지정할 수 있습니다.

let person: [string, number] = ["Alice", 25];

✅ 객체(Object)

객체의 속성 타입을 지정할 때는 객체 리터럴 타입을 사용합니다.

let user: { name: string, age: number } = { name: "Bob", age: 30 };

✅ 함수(Function)

함수의 매개변수와 반환값의 타입을 지정할 수 있습니다.

function greet(name: string): string {
    return "Hello, " + name;
}

🎯 4. 타입스크립트 고급 기능

✅ 인터페이스(Interface)

인터페이스는 객체의 구조를 정의하는 데 사용됩니다. 클래스가 특정 인터페이스를 구현하도록 강제할 수도 있습니다.

interface Person {
    name: string;
    age: number;
}

let employee: Person = { name: "Alice", age: 28 };

✅ 클래스(Class)와 상속(Inheritance)

타입스크립트에서는 클래스에 타입을 지정하고, 상속을 통해 코드 재사용성을 높일 수 있습니다.

class Animal {
    name: string;

    constructor(name: string) {
        this.name = name;
    }

    speak(): void {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }

    speak(): void {
        console.log(`${this.name} barks.`);
    }
}

let dog = new Dog("Buddy");
dog.speak();  // Buddy barks.

✅ 제네릭(Generics)

제네릭을 사용하면 함수나 클래스가 다양한 타입을 처리할 수 있게 됩니다. 코드 재사용성을 높이고, 타입 안전성을 보장합니다.

function identity<T>(arg: T): T {
    return arg;
}

let numberIdentity = identity(10);  // number
let stringIdentity = identity("Hello");  // string

🎯 5. 타입스크립트 예제 프로젝트: 간단한 Todo List

이제 타입스크립트를 사용하여 간단한 Todo List 애플리케이션을 만들어봅시다.

✅ 1. TodoItem 인터페이스 정의

interface TodoItem {
    id: number;
    task: string;
    completed: boolean;
}

✅ 2. Todo List 클래스 작성

class TodoList {
    private todos: TodoItem[] = [];

    addTodo(task: string): void {
        const newTodo: TodoItem = {
            id: this.todos.length + 1,
            task: task,
            completed: false
        };
        this.todos.push(newTodo);
    }

    completeTodo(id: number): void {
        const todo = this.todos.find(todo => todo.id === id);
        if (todo) {
            todo.completed = true;
        }
    }

    getTodos(): TodoItem[] {
        return this.todos;
    }
}

✅ 3. TodoList 사용하기

const myTodoList = new TodoList();
myTodoList.addTodo("Learn TypeScript");
myTodoList.addTodo("Build a Todo app");

console.log(myTodoList.getTodos());

myTodoList.completeTodo(1);

console.log(myTodoList.getTodos());

✅ 4. 출력 결과

[
    { id: 1, task: "Learn TypeScript", completed: false },
    { id: 2, task: "Build a Todo app", completed: false }
]
[
    { id: 1, task: "Learn TypeScript", completed: true },
    { id: 2, task: "Build a Todo app", completed: false }
]

🎯 1. Vite를 이용한 React 프로젝트 설치

✅ Vite 프로젝트 생성

Vite를 사용하면 빠르고 간편하게 React 프로젝트를 생성할 수 있습니다.

# Vite 프로젝트 생성
npm create vite@latest my-react-app -- --template react

# 프로젝트 폴더로 이동
cd my-react-app

# 패키지 설치
npm install

# 개발 서버 실행
npm run dev

• npm create vite@latest : 최신 Vite를 사용하여 프로젝트 생성
• --template react : React 템플릿 적용
• npm run dev : 개발 서버 실행 (기본 포트: http://localhost:5173)

🎯 2. 주요 폴더 및 파일 구조

my-react-app/
├── node_modules/     # 설치된 패키지
├── public/           # 정적 파일 (favicon, 이미지 등)
├── src/              # 주요 코드 폴더
│   ├── assets/       # 정적 자산
│   ├── components/   # 재사용 가능한 컴포넌트
│   ├── pages/        # 개별 페이지 컴포넌트
│   ├── App.jsx       # 메인 컴포넌트
│   ├── main.jsx      # React 진입점
├── .gitignore        # Git 제외 파일
├── index.html        # 메인 HTML 파일
├── package.json      # 프로젝트 설정 및 종속성 목록
├── vite.config.js    # Vite 설정 파일

🎯 3. 기본 컴포넌트 구조

✅ App.jsx

import { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <h1>React + Vite</h1>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

export default App;

• useState를 사용하여 상태를 관리합니다.
• 버튼을 클릭하면 count 상태가 증가합니다.

🎯 4. 상태 관리 (Recoil)

✅ Recoil 설치

npm install recoil

✅ store.js (Recoil 상태 관리)

import { atom } from 'recoil';

export const countState = atom({
  key: 'countState',
  default: 0,
});

✅ Counter.jsx (Recoil 활용)

import { useRecoilState } from 'recoil';
import { countState } from '../store';

function Counter() {
  const [count, setCount] = useRecoilState(countState);

  return (
    <div>
      <p>Recoil 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>Recoil 증가</button>
    </div>
  );
}

export default Counter;

🎯 5. React Router 설정

✅ React Router 설치

npm install react-router-dom

✅ main.jsx에서 설정

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

✅ App.jsx에서 라우팅 설정

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <div>
      <nav>
        <Link to="/">홈</Link> | <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

🎯 6. API 통신 (Axios)

✅ Axios 설치

npm install axios

✅ api.js (API 요청 설정)

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

export default api;

✅ UserList.jsx (API 호출 예제)

import { useEffect, useState } from 'react';
import api from '../api';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    api.get('/users').then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

export default UserList;

🎯 7. 스타일링 (Tailwind CSS 적용)

✅ Tailwind CSS 설치

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

✅ Tailwind 설정 (tailwind.config.js 수정)

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

✅ index.css에서 Tailwind 적용

@tailwind base;
@tailwind components;
@tailwind utilities;

✅ Tailwind 활용 예제

function Button() {
  return (
    <button className="bg-blue-500 text-white px-4 py-2 rounded-md">
      Tailwind 버튼
    </button>
  );
}

🥠 Project 생성

2023-10-18 참조사이트 전제 조건 : Node.js 버전 16.0 이상 설치

최신 버전의 Node.js가 설치되어 있는지 확인한 다음 명령줄에 다음 명령을 실행합니다(> 기호 제외):

✔ npm init vue@latest

이 명령은 공식 Vue 프로젝트 스캐폴딩 도구인 create-vue를 설치 및 실행합니다. TypeScript 및 테스트 지원과 같은 몇 가지 선택적 기능에 대한 프롬프트가 표시됩니다:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

옵션에 대해 확신이 서지 않는다면 일단 엔터키를 눌러 No를 선택하면 됩니다. 프로젝트가 생성되면 지침에 따라 종속 요소를 설치하고 개발 서버를 시작합니다:

> cd <your-project-name>
> npm install
> npm run dev

> npm run build

이렇게 하면 프로젝트의 ./dist 디렉터리에 프로덕션에 사용할 수 있는 앱 빌드가 생성됩니다. 프로덕션 배포 가이드를 확인하여 앱을 프로덕션에 배포하는 방법에 대해 자세히 알아보세요.

🥠 Router 설정

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),

    routes: [

        // 404
        {
            path: "/404",
            name: "Page404",
            component: () => import('@/views/warning/Page404.vue'),
            meta: {
                notCheckLogin: true,
            }
        },
        {
            path: "/:pathMatch(.*)*",
            redirect: "/404",
            meta: {
                notCheckLogin: true,
            }
        },
        //// 404

        {
            path: '/',
            component: () => import('@/components/layout/Default.vue'),
            children: [
                {
                    path: '',
                    name: 'Home',
                    component: () => import('@/views/Home.vue'),
                },
                {
                    path: 'mypage',
                    name: 'Mypage',
                    component: () => import('@/views/Mypage.vue'),
                },
            ],
        },
        {
            path: '/notice',
            component: () => import('@/components/layout/Full.vue'),
            children: [
                {
                    path: '',
                    name: 'NoticeList',
                    component: () => import('@/views/notice/Index.vue'),
                },
                {
                    path: 'detail/:PO_NO',
                    name: 'NoticeDetail',
                    component: () => import('@/views/notice/Detail.vue'),
                },
                {
                    path: 'write/:PO_NO?',
                    name: 'NoticeWrite',
                    component: () => import('@/views/notice/Write.vue'),
                },
            ],
        },
    ]
})

export default router

NoticeDetail > :{params} 을 사용하면 필수값 NoticeWrite > :{params}? 을 사용하면 선택값

view/*.vue

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

let PARAMS = computed(() => {
    return route.params
})
let PO_NO = computed(() => {
    return PARAMS.value.PO_NO
})

console.log(PARAMS.value.PO_NO);
console.log(PO_NO);
</script>
<template>
    {{ PARAMS.PO_NO }}
    {{ PO_NO }}
</template>

🥠 Lifecycle Hooks 살펴보기

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 합니다.

🍩 생명 주기 훅 등록하기

예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다:

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`컴포넌트가 마운트 됐습니다.`)
})
</script>

인스턴스 생명 주기의 여러 단계에서 호출되는 다른 훅도 있으며, 가장 일반적으로 사용되는 것은 onMounted, onUpdated, onUnmounted가 있습니다. onMounted를 호출하면, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결합니다. 이를 위해서는 컴포넌트 설정 중에 이러한 훅은 동기적으로 등록해야 합니다. 예를 들어 다음과 같이 하지 마십시오:

setTimeout(() => {
  onMounted(() => {
    // 작동하지 않습니다.
  })
}, 100)

🍩 생명 주기 표

다음은 인스턴스 생명 주기에 대한 표입니다. 지금 진행 중인 모든 것을 완전히 이해할 필요는 없지만, 더 많이 배우고 구축함에 따라 유용한 참고 자료가 될 것입니다. 생명 주기 훅의 모든 종류와 사용 사례에 대한 자세한 내용은 생명 주기 API를 참조하세요.

🥠 Composition API 살펴보기

🍩 컴포지션 API란?

컴포지션(Composition) API는 옵션을 선언하는 대신 import한 함수를 사용하여 Vue 컴포넌트를 작성할 수 있는 API 세트입니다. 이것은 아래 API를 다루는 포괄적인 용어입니다:

반응형(Reactivity) API: 예를 들어 ref() 및 reactive()를 사용하여 반응형 상태, 계산된 상태 및 감시자를 직접 생성할 수 있습니다.

생명주기 훅: 예를 들어 onMounted() 및 onUnmounted()를 사용하여 컴포넌트 생명주기에 프로그래밍 방식으로 연결할 수 있습니다.

의존성 주입(Dependency Injection): provide() 및 inject()를 사용하면 반응형 API를 사용하는 동안 Vue의 의존성 주입 시스템을 활용할 수 있습니다.

컴포지션 API는 Vue 3 및 Vue 2.7에 내장된 기능입니다. 이전 Vue 2 버전의 경우 공식적으로 유지 관리되는 @vue/composition-api 플러그인을 사용하십시오. Vue 3에서는 주로 싱글 파일 컴포넌트에서 <스크립트 설정> 구문과 함께 사용되기도 합니다. 다음은 컴포지션 API를 사용하는 컴포넌트의 기본 예시입니다:

<script setup>
import { ref, onMounted } from 'vue'

// 반응형 상태
const count = ref(0)

// 상태를 변경하고 업데이트를 트리거하는 함수
function increment() {
  count.value++
}

// 생명주기 훅
onMounted(() => {
  console.log(`숫자를 세기 위한 초기값은 ${count.value} 입니다.`)
})
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

함수 구성에 기반한 API 스타일에도 불구하고 컴포지션 API는 함수형 프로그래밍이 아닙니다. 컴포지션 API는 Vue의 변경 가능하고 세분화된 반응성 패러다임을 기반으로 하는 반면 기능적 프로그래밍은 불변성을 강조합니다.

🍩 왜 컴포지션 API인가요?

1. 더 나은 로직 재사용성

컴포지션 API의 가장 큰 장점은 컴포저블 함수의 형태로 깔끔하고 효율적인 로직 재사용이 가능하다는 것입니다. 옵션 API의 기본 로직 재사용 메커니즘인 믹스인의 모든 단점을 해결합니다.

컴포지션 API의 로직 재사용 기능은 컴포저블 유틸리티의 계속 성장하는 컬렉션인 VueUse와 같은 인상적인 커뮤니티 프로젝트를 탄생시켰습니다. 또한 상태 저장 타사 서비스 또는 라이브러리를 불변 데이터, 상태 머신 및 RxJS와 같은 Vue의 반응형 시스템에 쉽게 통합하기 위한 깔끔한 메커니즘 역할을 합니다.

2. 보다 유연한 코드 구성

많은 사용자는 기본적으로 옵션 API를 사용하여 조직화된 코드를 작성하는 것을 좋아합니다. 그러나 옵션 API는 단일 컴포넌트의 논리가 특정 복잡성 임계값을 초과하는 경우 심각한 제한을 가집니다. 이 제한은 여러 프로덕션 Vue 2 앱에서 직접 목격한 여러 논리적 문제를 처리해야 하는 컴포넌트에서 특히 두드러집니다.

Vue CLI의 GUI에서 폴더 탐색기 컴포넌트를 예로 들어 보겠습니다. 이 컴포넌트는 다음과 같은 논리적 문제를 야기합니다:

1. 현재 폴더 상태 추적 및 내용 표시
2. 폴더 탐색 처리(열기, 닫기, 새로 고침...)
3. 새 폴더 생성 처리
4. 즐겨찾기 폴더만 표시 전환
5. 숨김 폴더 표시 전환
6. 현재 작업 디렉터리 변경 처리

동일한 논리적 문제와 관련된 코드가 어떻게 그룹화 되었는지 보십시오. 특정 논리적 문제를 해결하는 동안 더 이상 다른 옵션 블록 사이를 이동할 필요가 없습니다. 또한, 추출을 위해 더 이상 코드를 섞을 필요가 없기 때문에 최소한의 노력으로 코드 그룹을 외부 파일로 이동할 수 있습니다. 리팩토링을 위한 소모 시간 감소는 대규모 코드베이스에서 장기적인 유지 관리의 핵심입니다.

🥠 Script Setup 살펴보기

Vue 3의 <script setup>은 컴포넌트의 로직을 보다 간결하게 작성할 수 있도록 도와주는 새로운 구문입니다. 기존 setup() 함수보다 직관적이며, 코드량을 줄이고 가독성을 높일 수 있습니다.

🍩 기본 문법

기존 setup() 함수를 사용할 경우:

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }

    return { count, increment };
  },
};
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

<script setup>을 사용하면 다음과 같이 더욱 간결하게 표현할 수 있습니다:

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

• export default 불필요
• setup() 함수 선언 없이 바로 변수 및 함수를 정의
• return 문이 필요 없음

  🍩 defineProps와 defineEmits

  <script setup>을 사용할 경우 defineProps()와 defineEmits()를 통해 props 및 이벤트를 선언할 수 있습니다.

  <script setup>
  defineProps(['title']);
  defineEmits(['customEvent']);
  </script>
  

🥠 Components 활용

Vue에서는 컴포넌트를 활용하여 UI를 모듈화할 수 있습니다. <script setup>을 사용할 경우, 컴포넌트 등록이 더욱 간편해집니다.

🍩 기본 컴포넌트 예제

HelloWorld.vue

<script setup>
defineProps(['msg']);
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

App.vue에서 컴포넌트를 사용하려면:

<script setup>
import HelloWorld from '@/components/HelloWorld.vue';
</script>

<template>
  <HelloWorld msg="Hello Vue 3!" />
</template>

🥠 Props 활용

부모 → 자식 컴포넌트 간 데이터를 전달하는 방법은 props를 사용하는 것입니다.

🍩 기본적인 props 사용

<script setup>
defineProps({
  title: String,
  count: {
    type: Number,
    required: true,
  },
});
</script>

<template>
  <h1>{{ title }}</h1>
  <p>현재 숫자: {{ count }}</p>
</template>

🍩 Props의 기본값 설정

<script setup>
defineProps({
  message: {
    type: String,
    default: '기본 메시지',
  },
});
</script>

<template>
  <p>{{ message }}</p>
</template>

🥠 State Management(pinia) 활용

Vue 3에서는 상태 관리를 위해 Vuex 대신 Pinia를 추천합니다.

🍩 Pinia 설치

npm install pinia

🍩 Pinia 스토어 생성 (store/counter.js)

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const increment = () => count.value++;

  return { count, increment };
});

🍩 Pinia 사용 (App.vue)

<script setup>
import { useCounterStore } from '@/store/counter';

const counter = useCounterStore();
</script>

<template>
  <button @click="counter.increment">Count: {{ counter.count }}</button>
</template>

• defineStore를 사용하여 스토어 생성
• ref()로 반응형 상태 관리
• useCounterStore()를 호출하여 상태 및 메서드 사용

🥠 비동기통신(axios) 활용

Vue 3에서 axios를 사용하여 API 통신을 수행할 수 있습니다.

🍩 axios 설치

npm install axios

🍩 API 호출 예제 (api.js)

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 5000,
});

export default api;

🍩 API 데이터 가져오기 (UserList.vue)

<script setup>
import { ref, onMounted } from 'vue';
import api from '@/api';

const users = ref([]);

onMounted(async () => {
  try {
    const response = await api.get('/users');
    users.value = response.data;
  } catch (error) {
    console.error('Error fetching users:', error);
  }
});
</script>

<template>
  <ul>
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
</template>

• axios를 활용하여 API 요청
• onMounted() 훅을 사용하여 컴포넌트가 마운트될 때 데이터를 가져옴
• ref()를 사용하여 반응형 상태 관리

하코사 질문 링크 https://cafe.naver.com/hacosa/274899

!codepen[pyo-dev/embed/gOPBReX?height=265&theme-id=dark&default-tab=html,result]

먼저 가능하다.

자식 요소의 비율을 계산해서 부모 요소에 padding-top 또는 padding-bottom을 주면 된다

가령 자식 요소가 positio absolute를 갖고 있고 비율이 가로, 세로 100px, 50px라면 paddin-top 또는 padding-bottom을 50%를 주면 된다.

다만 반응형 웹에 콘텐츠가 이미지가 아닌 텍스트로 height가 비율이 아닌 유기적으로 변동된다면 이는 css만으로는 불가능하다.

!codepen[pyo-dev/embed/RwrYxaY?height=265&theme-id=dark&default-tab=html,result]

🥠 SASS란?

• CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기( CSS Preprocessor) 입니다.
• 기존의 CSS의 유지보수의 불편함 등을 SASS를 사용하면 해결 할 수 있다.
• 위에서 언급한 CSS의 단점을 보완하기 위한 기술로, SASS 자체를 그대로 사용할수는 없고, SASS의 문법에 맞게 SASS파일을 만들면 컨버터를 이용해서 CSS를 생성한다.
• 즉, SASS문법에 맞게 CSS를 작성하고, SASS 컴파일러를 사용하여 HTML이 이해 할 수 있는 문법으로 변환합니다.

🥠 SASS 장점

1. autoprefixer 를 제공한다.
2. 코드중복을 줄일수 있다.
3. 변수를 사용 할 수 있기 때문에 유지보수가 쉬워진다.
4. @import, @include, @mixin, @extend 등 다양한 함수 및 변수를 제공한다

🥠 SASS compile

1. ruby를 활용하여 compile - https://sass-lang.com/documentation/cli/ruby-sass
2. 번들러를 활용한 compile - https://d2.naver.com/helloworld/5644368
3. 에디터를 이용한 compile - vscode, brackets 등

🥠 SASS vs SCSS

Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다. 즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다. Sass는 선택자의 유효범위를 ‘들여쓰기’로 구분하고, SCSS는 {}로 범위를 구분합니다.

1. sass 문법은 들여쓰기로 유호 범위를 구분하기 때문에 협업을하거나 유지보수 측면에서 스페이스로 인한 오류를 범하기 쉽다.

1. scss 문법은 css 문법과 거의 동일하며 sass의 장점을 내포하고 있어 누구나 쉽게 접근이 가능하고 활용하기 좋다.

-- SASS 참조 사이트 http://sass-lang.com/

1. 코드의 재사용성 높이기
2. 쉽게 유지보수 할 수 있도록 하기
3. 확장 가능하게 하기
4. 클래스명으로 무슨 의미인지 예측 가능하도록 하기

🥠 SMACSS(Scalable & Modular Architecture for CSS)

• Class명을 통한 예측
• 재사용
• 쉬운 유지보수
• 확장

1. Base

   • 기본 스타일(Reset, Default .. )
   • 기본 스타일에는 !important 사용할 필요가 없다.

2. Layout

   • 레이아웃과 관련된 스타일 정의
   • class명에 'l-' suffix(접미사)를 붙인다.

3. Module

   • 모듈과 관련된 스타일 정의
   • 스타일 재사용을 위한 요소다
   • Block, Element, Module
   • 재사용을 위해 ID와 element 사용 금지(element를 사용해야 한다면 자식 선택자를 사용한다)

4. State

   • 상태를 나타내는 스타일 정의
   • hidden, expend, active, hover 등
   • class명에 's-' suffix를 붙인다.

5. Theme

   • 사이트의 전반적인 look과 feel 제어
   • 색이나 이미지를 불변하는 스타일과 분리 → 기존의 스타일을 재선언 할 수 있다.
   • 적용 점위가 넓으면 'theme-' suffix를 붙인다.

6. 유의사항

   • 파생된 선택자 사용 금지
   • ID 사용 금지
   • !important 사용 금지
   • class명은 의미있게
   • class명은 다른이가 이해할 수 있도록 선언

🥠 BEM(Block Element Modifier)

• Block, Element, Module 약자
• ID는 사용할 수 없다.
• 오직 Class명만 사용한다.
• ex) .header_navigation-secondary

1. Block

   • 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너
   • head block > menu block, logo block, search block, auth block...

2. Element

   • block 안에서 특정 기능을 수행하는 컴포넌트
   • element는 상황에 따라 달라진다.
   • 각 element는 두 개의 밑줄표시로 연결하여 block다음에 작성한다.
   • ex) .header__logo, .header__search, .header__menu, .header__login 등
   • block과 element명이 길면 '-'으로 연결한다.
   • ex) .block-name__element-name

3. Modifiers(수식어, 접미사)

   • block, element의 속성이다.
   • 이 속성은 block, element의 외관과 상태를 변화시킨다.
   • class명은 '-' 추가하여 modifier 추가
   • class명은 구체적이고 명료해야 한다.
   • class명은 HTML 안에서도 읽기 쉬워야 한다.
   • class명은 무엇을 나타내는지 분명해야 한다.

🥠 OOCSS(Object Oriented CSS)

• Object Oriented Css 약자
• css를 모듈화하여 중복을 최소화 한다
• 구조와 외양을 분리한다.
• 결합하면 다양한 결과물을 얻을 수 있다.
• 외양 : .button, .box, .widget, .skin...
• 컨테이너와 컨텐츠 분리
• ex) .globalwidth + .header-inside / .main / .footer-inside
• ex) .btnbase + .twitter / .facebook
• 단점) 다중 클래스 사용으로 HTML코드가 복잡해 진다.
• 단점 ) non-semantic한 클래스 사용

참조 https://github.com/hohoya33/css-methodologies

ASCII 문자 순서(오름차순)로 정렬된다.

🥠 문자 정렬

let arr = ['lg', 'samsung', 'apple'];

arr.sort();
console.log(arr); // output ["apple", "lg", "samsung"]

🥠 숫자 정렬

let arr = [25, 2, 4, 12, 11, 1, 6];

arr.sort();
console.log(arr); // output [1, 11, 12, 2, 25, 4, 6]

arr.sort(function(a, b) { // 오름차순
    return a - b;
});
console.log(arr); // output [1, 2, 4, 6, 11, 12, 25]

arr.sort(function(a, b) { // 내림차순
    return b - a;
});
console.log(arr); // output [25, 12, 11, 6, 4, 2, 1]

🥠 Object 정렬

var obj = [
    { name : "학근", age : 22},
    { name : "수호", age : 100},
    { name : "정민", age : 18},
    { name : "승권", age : 2},
    { name : "기준", age : 21},
    { name : "동섭", age : 11},
    { name : "명호", age : 14},
    { name : "종호", age : 77}
]

🥠 이름 순서로 정렬

obj.sort(function(a, b) {
    return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
});

console.log(obj);
/**
output

0: {name: "기준", age: 21}
1: {name: "동섭", age: 11}
2: {name: "명호", age: 14}
3: {name: "수호", age: 100}
4: {name: "승권", age: 2}
5: {name: "정민", age: 18}
6: {name: "종호", age: 77}
7: {name: "학근", age: 22}
*/

🥠 나이 순서로 정렬

obj.sort(function(a, b) { // 이름순 정렬
    return a.age < b.age ? -1 : a.age > b.age ? 1 : 0;
});

console.log(obj);
/**
output

0: {name: "승권", age: 2}
1: {name: "동섭", age: 11}
2: {name: "명호", age: 14}
3: {name: "정민", age: 18}
4: {name: "기준", age: 21}
5: {name: "학근", age: 22}
6: {name: "종호", age: 77}
7: {name: "수호", age: 100}
*/

인자에 들어가는 객체가 배열인지 확인할 때 사용 인자 - object

Array.isArray({ a: 1, b: 2}) /// false 
Array.isArray([1,2,3]) //true

🥠 concat()

인자로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환 인자 - item1, item2, …

const arr = [1,2,3]
arr.concat(4,5) // [1,2,3,4,5]
arr.concat([4,5]) // [1,2,3,4,5]
arr // [1,2,3] 원본이 바뀌지 않음

🥠 every(), some()

배열의 모든 원소가 제공한 함수를 통과하는지 테스트하는 메소드 every 배열의 원소중 하나라도 제공한 함수를 통과하는지 테스트하는 메소드 some callback의 인자로는

1. rrentValue - 현재 순회하는 원소 값
2. index - 순회하는 원소의 index
3. array - 순회되는 배열

   const arr = [2,4,6,8]
   arr.every( el => el % 2 === 0 ) // true
   arr.some( el => el % 2 ) // true
   arr // [2,4,6,8] 원본이 바뀌지 않음

🥠 fill()

배열의 시작 인덱스부터 끝 인덱스까지 정적 값으로 채우는 메소드 인자 - value, start(optional), end(optional) start의 기본값은 0, end의 기본값은 배열의 길이

const arr = Array(3)
arr.fill(2) // [2,2,2]
arr // [2,2,2] 원본이 바뀜

🥠 filter()

배열의 원소 중 제공된 함수를 통과하는 원소를 반환하는 메소드 인자 - callback

const arr = [1,2,3,4,5]
arr.filter( el => el < 3 ) // [1,2]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

🥠 find()

배열의 원소 중 제공된 함수를 통과하는 첫번째 원소를 반환하는 메소드 첫 번째 원소를 반환하면 해당 함수는 더 이상 loop를 반복하지 않는다 인자 - callback

const arr = [4, 15, 377, 395, 400, 1024, 3000];
arr.find( el => el % 5 == 0 ) // 15
arr // [1,2,3,4,5] 원본이 바뀌지 않음

🥠 forEach()

배열 원소마다 제공한 함수를 실행하는 메소드 인자 - callback callback의 인자로는

1. currentValue - 현재 순회하는 원소 값
2. index - 순회하는 원소의 index
3. array - 순회되는 배열

   const arr = [1,2,3]
   arr.forEach( el => console.log(el) )
   // 1
   // 2
   // 3
   arr // [1,2,3] 원본이 바뀌지 않음

🥠 includes()

배열에 특정 원소가 포함돼 있는지 여부를 확인해 true, false로 리턴 인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.includes(3) // true
arr.includes(1,1) // false
arr // [1,2,3,4] 원본이 바뀌지 않음

🥠 indexOf(), lastIndexOf()

배열에 특정 원소가 포함돼 있는지 여부를 확인해 있으면 해당 인덱스 만약 없다면 -1을 리턴 lastIndexOf는 반대 순서로 탐색 인자 - searchElement, fronIndex ( optional )

const arr = [1,2,3,4]
arr.indexOf(3) // 2
arr.indexOf(5) // -1
arr // [1,2,3,4] 원본이 바뀌지 않음

🥠 join()

모든 원소를 연결해 하나의 문자열로 만드는 메소드 인자 - separator

const arr = [1,2,3,4]
arr.join() // "1,2,3,4"
arr.join("..") // "1..2..3..4"
arr // [1,2,3,4] 원본이 바뀌지 않음

🥠 map()

배열 내의 모든 원소에 대하여 제공된 함수를 호출하고, 결과를 모아 새로운 배열을 리턴하는 메소드 인자 - callback callback의 인자로는

1. currentValue - 현재 순회하는 원소 값
2. index - 순회하는 원소의 index
3. array - 순회되는 배열

   const arr = [1,2,3]
   arr.map( el => el * 2 ) // [2,4,6]
   arr // [1,2,3] 원본이 바뀌지 않음
   

---
## 🥠 push(), pop() / unshift(), shift()
배열의 맨 뒤에 새로운 원소를 추가하는 메소드 push
인자 - item1, item2, …
배열의 맨 뒤 원소를 지우는 메소드 pop
인자 - X
배열의 맨 앞에 새로운 원소를 추가하는 메소드 unshift
인자 - item1, item2, …
배열의 맨 앞 원소를 지우는 메소드 shift
인자 - X
```javascript
const arr = [1,2,3]
arr.push(5) // 4 ( 배열의 길이 리턴 )
arr // [1,2,3,5] 원본이 바뀜
arr.pop() // 5 ( 삭제된 원소 리턴 )
arr // [1,2,3] 원본이 바뀜
arr.unshift(2) // 4 ( 배열의 길이 리턴 )
arr // [2,1,2,3] 원본이 바뀜
arr.shift() // 2 ( 삭제된 원소 리턴 )
arr // [1,2,3] 원본이 바뀜

🥠 reduce(), reduceRight()

배열의 원소마다 누적 계산값과 함께 함수를 적용해 하나의 값으로 리턴 reduce는 왼쪽부터, reduceRight는 오른쪽부터 수행 인자 - callback, initialValue ( optional ) callback의 인자로는

accumulator - 누적 계산값
currentValue - 현재 처리값
currentIndex - 현재 처리값의 index
array - 호출된 배열
const arr = [1,2,3,4]
arr.reduce( (a,b) => a+b ) // 10
arr.reduce( (a,b) => a+b, 10) // 20
arr // [1,2,3,4] 원본이 바뀌지 않음

단순히 값을 연산하는 용도 뿐만 아니라 여러가지 역할로 사용이 가능

🥠 reverse()

인자: 없음 배열의 원소 순서를 반대로 정렬해 반환

const arr = [1,2,3]
arr.reverse() // [3,2,1]
arr // [3,2,1] 원본이 바뀜

🥠 slice()

배열의 start부터 end까지 shallow copy하는 메소드 인자 - start ( optional ), end ( optional )

const arr = [1,2,3,4,5]
arr.slice(2) // [3,4,5]
arr.slice(1, 3) // [2,3]
arr // [1,2,3,4,5] 원본이 바뀌지 않음

🥠 splice()

배열의 원소를 삭제하거나 새 원소를 추가하는 메소드 인자 - start, deleteCount, item1, item2, .. start부터 deleteCount만큼 삭제되고 뒤로오는 인자들은 삭제된 위치에 추가되는 원소들

let arr = [1,2,3]
arr.splice(2) // [2,3] ( 삭제된 배열 리턴)
arr // [1] 원본이 바뀜

arr = [1,2,3]
arr.splice(1,1) // [2]
arr // [1,3] 원본이 바뀜

arr = [1,2,3]
arr.splice(1,1,3,4) // [2]
arr // [1,3,4,3] 원본이 바뀜

🥠 sort()

배열을 정렬하는데 사용된다. 인자를 넣지 않으면 기본적으로 ASCII 문자 순서로 정렬된다. 인자 - compareFuntion ( optional )

const arr = [3,20,12,1,4]
arr.sort() // [1, 12, 20, 3, 4]
arr // [1, 12, 20, 3, 4] 원본이 바뀜

🥠 toString

배열의 원소를 문자열로 반환 인자 - X

const arr = [1,2,3] 
arr.toString() // "1,2,3" 
arr // [1,2,3] 원본이 바뀌지 않음

출처

https://takeuu.tistory.com/102

🥠 Object를 배열로 변환

🥠 Object.keys

object key 값을 배열로 반환 인자 - object

const arr = {
    pyo: "first name",
    jung: "middle name",
    min: "last name"
}
Object.keys(arr); // ["pyo", "jung", "min"]
arr // { pyo: "first name", jung: "middle name", min: "last name" } 원본이 바뀌지 않음

🥠 Object.entries

object key, value 값을 묶어서 배열로 반환 인자 - object

const arr = {
    pyo: "first name",
    jung: "middle name",
    min: "last name"
}
Object.entries(arr); // [["pyo", "first name"], ["jung", "middle name"], ["min", "last name"]]
arr // { pyo: "first name", jung: "middle name", min: "last name" } 원본이 바뀌지 않음

참조

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

🥠 클로저(Closure)란?

MDN에서는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다고 정의하고 있다.

🥠 정적 유효범위(Lexical scope)

스코프(scope)는 함수를 호출할 때 결정되는 것이 아니라 함수를 선언할 때 정해진다. 아래 예제를 살펴보자

function makeFunc() {
  var name = "pyo jung min";
  function displayName() {
    console.log(name);
  }
  return displayName;
}

var myFunc = makeFunc();
//myFunc변수에 displayName을 리턴함
//유효범위의 어휘적 환경을 유지
myFunc();
//리턴된 displayName 함수를 실행(name 변수에 접근)

오류가 발생할 것 같지만 'pyo jung min'이 오류 없이 출력되는 것을 확인할 수 있다. 이는 함수 호출 이전에 함수 선언 시 이미 정적 유효범위(Lexical scope)가 정해져 있기 때문이다.

🥠 클로저 스코프 체인(Closure scope chain)

모든 클로저에는 세가지 스코프(범위)가 있다

1. 지역 범위 (Local Scope, Own scope)
2. 외부 함수 범위 (Outer Functions Scope)
3. 전역 범위 (Global Scope)

따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자

// 전역 범위 (global scope)
var e = 10;
function sum(a){
  return function(b){
    return function(c){
      // 외부 함수 범위 (outer functions scope)
      return function(d){
        // 지역 범위 (local scope)
        return a + b + c + d + e;
      }
    }
  }
}

console.log(sum(1)(2)(3)(4)); // log 20

// 익명 함수 없이 작성할 수도 있다.

// 전역 범위 (global scope)
var e = 10;
function sum(a){
  return function sum2(b){
    return function sum3(c){
      // 외부 함수 범위 (outer functions scope)
      return function sum4(d){
        // 지역 범위 (local scope)
        return a + b + c + d + e;
      }
    }
  }
}

var s = sum(1);
var s1 = s(2);
var s2 = s1(3);
var s3 = s2(4);
console.log(s3) //log 20

위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다.

🥠 루프에서 클로저 생성하기: 일반적인 실수

변수 선언을 var로 할시 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자.

!codepen[pyo-dev/embed/BajpdaQ?height=265&theme-id=dark&default-tab=js,result]

error case의 경우 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (item.help) 있는 같은 단일 환경을 공유한다. onfocus 콜백이 실행될 때 콜백의 환경에서 item 변수는 (세개의 클로저가 공유한다) helpText 리스트의 마지막 요소를 가리키고 있을 것이다.

이경우 해결 책은 아래와 같이 사용하면 된다.

1. 함수 팩토리 사용
2. 익명 클로저를 사용
3. ES2015의 let 키워드를 사용

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures

🥠 스코프(scope)

javascript에서 scope(스코프)란 변수의 유효범위 라고 할 수 있으며 var는 함수 스코프, let과 const는 블록스코프를 갖는다.

var a = 1;

function output() {
    var a = 2;
    console.log(a);
}

output(); // output : 2
console.log(a); // output : 1

위의 예제에서 output라는 함수 안의 console.log(a);는 a를 출력하기위해 자신의 함수 스코프 안에서 변수 a가 있는지 확인하고 있을 경우 var a = 2;를 참조해 2를 출력하게 된다. 만약 output라는 함수 안의 var a = 2;가 없을경우 상위에 할당 되어 있는 var a = 1;를 참조하여 1을 출력하게 된다. 전역에 있는 console.log(a);는 전역 변수인 var a = 1;를 참조하여 1을 출력한다.

아래 예제를 살펴보자.

var a = 1;

function output() {
    var a = 2;
    function print(){
        console.log(a);
    }
    return print();
}

output(); // output : 2

output함수 내부 함수인 print함수의 console.log(a);는 자신의 함수 스코프 안에서 a가 있는지 확인하고 없을경우 상위 함수인 output함수의 var a = 2;를 참조하여 2를 출력 하게 된다. #

var pyo = 'jung min';
for (var pyo = 0; pyo < 5; pyo++) {
    // loop
}

console.log(pyo); // output : 4

위의 예제에서 4가 출력되는 것을 확인할 수 있다. var는 함수 스코프 단위로 유효하기 때문에 위와 같이 변수가 덮어씌워지는 문제가 발생한다 이를 해결하기 위해서는 아래와 같이 블록 스코프를 지원하는 let, const를 사용해야 한다

var pyo = 'jung min';
for (let pyo = 0; pyo < 5; pyo++) {
    // loop
}

console.log(pyo); // output : jung min

🥠 호이스팅(hoisting)

호스팅(hoisting)은 변수의 선언문을 유효범위의 최상단으로 끌어올리기로 해석할 수 있다.

if (true) {
    var pyo = 'min';
}

output1(); // output : jung min
output2(); // output : 4
console.log(pyo); // output : min

function output1() {
    if (true) {
        var pyo = "jung min";
    }
    console.log(pyo);
}

function output2() {
    for (var pyo = 0; pyo < 5; pyo++) {
        // loop
    }
    console.log(pyo);
}


// 호이스팅으로 변환된 코드
var pyo;

function output1() {
      var pyo;
    if (true) {
        pyo = "jung min";
    }
    console.log(pyo);
}

function output2() {
      var pyo;
    for (pyo = 0; pyo < 5; pyo++) {
        // loop
    }
    console.log(pyo);
}

if (true) {
    pyo = 'min';
}

output1(); // output : jung min
output2(); // output : 5
console.log(pyo); // output : min

위의 예제에서 확인할 수 있듯이 변수 및 함수를 유효범위 내부의 최상단으로 위치하게 됩니다.

🥠 함수 선언식과 표현식에 따른 호이스팅(hoisting)

🥠 함수 선언식

output1(); // output : jung min
function output1() {
    console.log('jung min');
}


// 호이스팅으로 변환된 코드
function output1() {
    console.log('jung min');
}
output1(); // output : jung min

선언식의 경우 호이스팅이 발생해 함수를 최상단으로 끌어올려 output1()을 먼저 호출하더라도 정상적으로 동작한다.

🥠 함수 표현식

output1(); // Uncaught TypeError: output1 is not a function
var output1 = function() {
    console.log('jung min');
}


// 호이스팅으로 변환된 코드
var output1;

output1(); // Uncaught TypeError: output1 is not a function

output1 = function() {
    console.log('jung min');
}

표현식의 경우 var output1;은 변수이기 때문에 선언과 할당의 분리가 발생한다. output1 변수가 선언되고 output1();이 실행되고 그 이후에 output1에 함수가 정의되기 때문에 함수가 아니라는 오류메시지가 출력되는 것이다.

🥠 변수와 함수의 호이스팅 우선순위

var pyo = 'jung min';

function pyo() {
    console.log('pyo');
}

function jung() {
    console.log('jung');
}

console.log(typeof pyo); // output : string
console.log(typeof jung); // output : function


// 호이스팅으로 변환된 코드
var pyo;

function pyo() {
    console.log('pyo');
}

function jung() {
    console.log('jung');
}

pyo = 'jung min';

console.log(typeof pyo); // output : string
console.log(typeof jung); // output : function

위와 같이 호스팅 발생 시 함수 및 변수를 최상단으로 끌어올리고 그 이후에 할당되는 것을 확인할 수 있다.

javascript 작성시에 스코프(scope)와 호이스팅(hoisting)의 관계를 잘 생각하여 작성 하도록 하자.

🥠 var

var를 사용하면 변수 선언 및 할당이 유동적으로 변경될 수 있는 단점이 있다.

var pyo = 'jung min';
console.log(pyo); // output : jung min

var pyo = 'jung';
console.log(pyo); // output : jung

pyo = 'min';
console.log(pyo); // output : min

위와 같이 변수 재선언 및 재할당을 하였는데도 에러가 나오지 않고 각각 다른 값이 출력 되는 것을 볼 수 있다.

이는 간단한 테스트에서는 편리할 수 있으나 코드량이 많아 지거나 복잡한 구조의 프로그래밍을 할 때는 디버깅 자체가 어려워진다.

그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다.

🥠 let

let pyo = 'jung min';
console.log(pyo); // output : jung min

let pyo = 'jung';
console.log(pyo); // Uncaught SyntaxError: Identifier 'pyo' has already been declared

pyo = 'min';
console.log(pyo); // output : min

let을 사용하면 재할당은 가능 하나 재선언을 하게 될 경우에는 ncaught SyntaxError: Identifier 'pyo' has already been declared와 같이 이미 선언되어 있다는 에러 메시지가 출력된다.

🥠 const

const pyo = 'jung min';
console.log(pyo); // output : jung min

const pyo = 'jung';
console.log(pyo); // Uncaught SyntaxError: Identifier 'pyo' has already been declared

pyo = 'min';
console.log(pyo); // Uncaught TypeError: Assignment to constant variable.

const의 경우 재선언 및 재 할당이 모두 불가능하다.

🥠 차이점

🥠 display

🥠 flex-direction

🥠 flex-wrap

🥠 justify-content

🥠 align-content

flex-wrap 속석을 통해 flex-item이 두줄 이상일 경우만 사용 가능 flex-item이 한줄일 경우 align-items 사용

🥠 align-items

주의할 점은 flex-items이 flex-wrap을 속성에 의해 2줄 이상일 경우에는 align-content 속성이 우선합니다. align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

🥠 align-self

align-items 속성보다 우선합니다.

🥠 order

🥠 flex

flex: flex-grow , flex-shrink, flex-basis; flex-grow를 제외한 개별 속성은 생략 가능

🥠 ex) layout-1

!codepen[pyo-dev/embed/JjGbXNy?height=265&theme-id=dark&default-tab=css,result]