방구석 코딩

바이브 코딩 도전기 (with 라이브 방송 플랫폼)

석미니 — Thu, 16 Apr 2026 02:16:34 +0900

나는 프론트엔드 개발자이고, 앱 개발은 처음 도전하는 편이다. 그런데 이걸 굴려본 건, 바이브 코딩으로 시작해 보면서 “이 방식이 도대체 어디까지 가능한지, 한계가 어디인지”를 직접 확인해 보고 싶어서이기도 하다.

솔직히 말하면, 처음부터 “뭔가 거창한 서비스를 만들어야지” 이런 마음으로 시작한 건 아니었다. 누나는 일본에 출장가서 라이브로 물건을 팔고, 대행까지 이어지는 사업을 돌리고 있고, 나는 그걸 덜 지치게 돌아가게 만드는 쪽을 맡고 싶었다. 출장 현장을 내가 직접 본 건 아니다. 누나가 평소에 이런 식으로 일한다고 전해 준 이야기를 듣고, 그걸 토대로 만들기 시작했다.

누나가 말해 준 흐름으로만 잡아 보면 대략 이렇다. 일본에 출장을 가서 현지에서 라이브 방송을 켜고, 실시간으로 물품을 소개한다. 사겠다는 사람이 나오면 그 상품에 택을 붙여서 누가 뭘 샀는지 분류해 두는데, 택에는 이름·수량·단가를 수기로 직접 적어 둔다. 밤에는 숙소로 돌아와서 택배를 싸면서, 그걸 또 엑셀에 수기로 옮겨 적는다.

그 이야기를 듣고, “택 붙이고·분류하고·포장 리스트·엑셀”처럼 반복되고 헷갈리기 쉬운 구간은 시스템이 대신 짚어주면 누나는 소개랑 현장 응대에만 더 쓸 수 있지 않을까 싶었다. 그래서 이 프로젝트는 그 흐름을 자동화하려고 만든 거다. 완벽하게 사람을 없애는 게 목표는 아니고, 출장 중에 특히 시간이 없을 때 덜 미친 듯이 돌아가게 만드는 쪽에 가깝다.

기존 워크플로를 내가 어떻게 바꾸려는지

위에 적은 손·택·엑셀 중심 흐름을, 프로젝트를 시작하기 전에 머릿속으로만 이렇게 갈아타고 싶다고 그려 두었다.

라이브 방송 중에 소개할 상품을 카메라로 찍으면, AI가 그 사진을 보고 상품명을 분석해서 자동으로 기입한다. 그다음 채팅에서 “살게요” 같은 식으로 **구매하겠다고 한 사람(구매자)**을 골라 연결하면, 화면에 구매 확정 같은 버튼이 나오고 수량도 같이 보여 준다. 확인을 누르면 그걸 엑셀에 자동으로 밀어 넣고, 마지막으로 내가 만든 앱에서 모바일 프린터를 제어해서 구매자 이름이랑 수량이 찍히게 하려고 한다. (택에 손으로 적던 구간을 프린트 출력으로 대신 가져가는 그림이다.)

당연히 전부 다 이미 돌아간다는 뜻은 아니고, “이 순서로 움직이게 만들고 싶다”는 목표 쪽에 가깝다.

기술 스택 (대략 이렇게 갔다)

모노레포 느낌으로 패키지별로 쪼개서 가져갔다.

web (시청자 · React + 웹 + PWA)

React, Vite, TypeScript
PWA (vite-plugin-pwa)
UI: Mantine, Emotion
라우팅·데이터: TanStack Router, TanStack Query, TanStack Virtual
검증: Valibot
실시간: Socket.IO 클라이언트(채팅 등)

admin (운영 · React + 웹 + PWA)

React, Vite, TypeScript (web이랑 같은 계열)
PWA (vite-plugin-pwa)
UI: Mantine, Emotion, TipTap(에디터)
라우팅·데이터: TanStack Router, TanStack Query
검증: Valibot

server (API · NestJS)

NestJS, TypeScript
ORM·DB: Prisma, PostgreSQL(Supabase 쪽 DB)
파일·스토리지: Supabase Storage
실시간: Socket.IO(게이트웨이)
기타: Swagger, JWT 기반 인증, 웹 푸시, 스케줄링 등

app (방송자 · Flutter)

Flutter — 지금은 방송하는 사람만 쓰는 용도로 한정해 두었다. 앱 개발이 처음이라 스토어 출시까지 한꺼번에 끌고 가기엔 빡세다고 느껴져서, 일단 범위를 거기까지만 잡은 거다.

web·admin 배포는 Cloudflare 쪽 워크플로에 맞춰 wrangler를 쓰는 구성이다.

React Native는 버리고 Flutter를 택한 이유, 그리고 웹은 왜 React였나

앱 쪽을 고를 때 React Native를 먼저 생각하는 게 당연했다. 나 프론트니까. 그런데 막상 고르려니 성능이 제일 걸렸다. RN은 JS 쪽이랑 네이티브 UI를 이어 주는 구조라서, 화면이 바뀌는 게 잦거나 리스트가 길어지면 한 박자 늦게 붙거나 버벅이는 느낌이 나기 쉽다고 알고 있다. 나는 방송 쪽이라 화면이 쫓아오는 속도가 중요해서, 그냥 성능 때문에 RN 대신 Flutter를 택했다.

Flutter는 UI를 직접 그리는 쪽이라, 내가 원한 성능에 더 잘 맞는다고 판단했다. 그래서 RN은 여기서 접고, 앱은 Flutter로 간다 쪽으로 마음을 정했다. (지금 돌아가는 건 방송자용만이지만.)

그럼 Flutter가 웹도 지원하는데 왜 시청자 웹은 React냐면, 솔직히 나한테 웹은 React가 제일 익숙한 손이다. Flutter web도 가능은 한데, 지금 당장 PWA까지 엮어서 빨리 쓸만하게 올리려면 Vite + React 쪽이 패키지 생태계랑 레퍼런스에서 덜 막막했다. 영상·실시간 채팅 같은 것도 브라우저에서 검증된 조합으로 가져가고 싶었고. 방송자 쪽은 Flutter로 네이티브에 가깝게, 시청자 쪽은 웹답게 React로 쪼개는 게 나한테는 타협이 덜 꼬이는 선택이었다.

인프라는 이렇게 묶었다

백엔드 앞단: Traefik으로 리버스 프록시·라우팅을 잡았다. 서버에 nginx를 안 붙이고 Traefik을 고른 이유는 단순하다. HTTPS 인증서 자동 발급이 잘 묶여 있고, 설정을 고쳐도 매번 재시작할 필요가 없다는 점을 가져가고 싶었다. (라우팅만 손볼 때 덜 귀찮다.)
서버 머신: GCP 위에 올려 두었고, 메모리는 2GB RAM짜리 인스턴스에서 돌아가게 맞췄다. (비용이랑 현실적인 한계 사이에서 타협한 결과다.)
프론트 호스팅: Cloudflare (Pages 느낌으로 정적 배포 + 엣지 쪽 이점)
영상: Cloudflare Stream

개발 방식: 거의 전부 바이브 코딩이다

요즘 말로 하면 그냥 바이브 코딩이다. 스펙을 처음부터 완벽하게 박아두고 칼같이 구현한다기보다는, “여기까지는 되면 좋겠다” 정도의 감을 잡고 가면서 계속 다듬는 스타일이다.

AI는 Cursor Pro Plus랑 Gemini를 같이 쓴다. Cursor는 에디터 안에서 코드를 빠르게 굴리고, Gemini는 기술적인 질문을 던질 때 쓴다. (아키텍처나 동작 원리, 에러 맥락 정리 같은 것들.) 인프라 구성을 짤 때도 같이 썼다.

이 글도 사실…

이 블로그 글(초안)도 결국 AI한테 시켜서 쓴 거다. 내가 하고 싶은 말의 뼈대랑 팩트는 내가 정했고, 문장 다듬기랑 “사람 말투로 읽히게” 만드는 건 AI가 도왔다. 그래서 너무 매끈하면 그게 이유다.

@chakra-ui/react V3 커스텀 them 설정

석미니 — Wed, 27 Nov 2024 11:38:06 +0900

src/them.ts

import {
  createSystem,
  defaultConfig,
  SystemConfig,
  SystemStyleObject,
} from '@chakra-ui/react';

// container 커스텀 스타일 설정
const containerStyle: SystemStyleObject = {
  maxWidth: '100%',
  paddingInline: '0',
};

const config: SystemConfig = {
  // 전역 스타일 설정
  globalCss: {
    'html, body': {
      letterSpacing: '-0.02em',
      color: 'black',
      fontFamily: `'Pretendard Variable', Pretendard,
                  -apple-system,
                  BlinkMacSystemFont,
                  system-ui,
                  Roboto,
                  'Helvetica Neue',
                  'Segoe UI',
                  'Apple SD Gothic Neo',
                  'Noto Sans KR',
                  'Malgun Gothic',
                  'Apple Color Emoji',
                  'Segoe UI Emoji',
                  'Segoe UI Symbol',
                  sans-serif`,
    },

    '*::-webkit-scrollbar': {
      width: '5px',
      backgroundColor: 'transparent',
    },
    '*::-webkit-scrollbar-thumb': {
      backgroundColor: 'gray02',
      borderRadius: '100px',
    },
    '*::-webkit-scrollbar-track': {
      backgroundColor: 'transparent',
    },
  },

  theme: {
    // 컴포넌트 커스텀 스타일 설정
    recipes: {
      container: {
        base: containerStyle,
      },
    },
    tokens: {
      // 색상 커스텀 설정
      colors: {
        black: { value: '#1e1e1e' },
        primary: { value: '#09bb91' },
        red: { value: '#f01313' },
        blue: { value: '#0094ff' },
        gray01: {
          value: '#8c96a0',
        },
        gray02: {
          value: '#caccd6',
        },
        gray03: {
          value: '#f5f6f9',
        },
        gray04: {
          value: '#e5e6ed',
        },
        gray05: {
          value: '#e9eaf1',
        },
      },
      // 사이즈 커스텀 설정
      sizes: {
        wrap: { value: '1180px' },
        paddingWrap: { value: '1780px' },
      },
    },
  },
};

export const system = createSystem(defaultConfig, config);

src/components/ui/ChakraProvider.tsx

'use client';

import { ChakraProvider as Provider } from '@chakra-ui/react';
import { ThemeProvider } from 'next-themes';
import { system } from '@/theme';

export default function ChakraProvider(props: { children: React.ReactNode }) {
  return (
    <Provider value={system}>
      <ThemeProvider attribute="class" disableTransitionOnChange>
        {props.children}
      </ThemeProvider>
    </Provider>
  );
}

src/app/layout.tsx

import type { Metadata } from 'next';
import ChakraProvider from '@/components/ui/ChakraProvider';

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html suppressHydrationWarning>
      <body>
        <ChakraProvider>{children}</ChakraProvider>
      </body>
    </html>
  );
}

테마 유형 생성

npx @chakra-ui/cli typegen ./src/theme.ts

nvm 설치 및 버전관리

석미니 — Wed, 28 Aug 2024 16:13:08 +0900

1. homebrew로 nvm 설치

brew install nvm

2. nvm 설정

code ~/.zshrc

3. 파일 끝에 아래 내용 추가 <- 사용자마다 다를 수 있음 !

export NVM_DIR="/opt/homebrew/Cellar/nvm/0.40.0"
[ -s "/opt/homebrew/Cellar/nvm/0.40.0/nvm.sh" ] && \. "/opt/homebrew/Cellar/nvm/0.40.0/nvm.sh"  # This loads nvm
[ -s "/opt/homebrew/Cellar/nvm/0.40.0/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/Cellar/nvm/0.40.0/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

4. nvm을 이용해 노드 특정 버전 설치

nvm install 16.18.0

5. 설치된 node.js 버전을 사용

nvm use 16.18.0

6. 기본 버전을 설정

nvm alias default 16.18.0

설치된 모든 node.js 버전 확인

nvm ls

현재 사용중인 node.js 버전 확인

nvm current

nvm에서 설치 가능한 버전 보기

nvm ls-remote

nestjs https 적용 (feat: mkcert)

석미니 — Tue, 6 Aug 2024 16:13:57 +0900

mkcert란?

로컬 개발 환경에서 쉽게 신뢰할 수 있는 인증서를 생성할 수 있는 도구이다. mkcert를 사용하면 로컬에서 브라우저가 신뢰할 수 있는 인증서를 생성할 수 있다.

설치

mkcert 설치

brew install mkcert
brew install nss # Firefox를 지원하기 위해 필요

로컬 CA 설치

mkcert를 처음 사용할 때 로컬 CA(Certificate Authority)를 설치해야 한다.

mkcert -install

인증서 생성

로컬 호스트를 위한 인증서를 생성

mkcert localhost

위 명령어를 입력하면 현재 경로에 `localhost-key.pem` 파일과 `localhost.pem` 파일이 설치된다.

nestjs https 설정

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as fs from 'fs';

async function bootstrap() {
  const httpsOptions = {
    key: fs.readFileSync('./localhost-key.pem'),
    cert: fs.readFileSync('./localhost.pem'),
  };

  const app = await NestFactory.create(AppModule, {
    httpsOptions,
  });

  await app.listen(3000);
}
bootstrap();

OpenSSL로 인증서 발급 방법

석미니 — Tue, 6 Aug 2024 15:42:27 +0900

OpenSSL 설치

brew install openssl

자체 서명된 인증서 및 비밀키 생성

openssl req -x509 -nodes -newkey rsa:4096 -keyout ./secrets/private-key.pem -out ./secrets/public-certificate.pem -days 365

x509: X.509 인증서 생성
nodes: 비밀키를 암호화하지 않음
newkey rsa:4096: 4096비트 RSA 비밀키를 생성
keyout: 비밀키를 저장할 파일 경로
out: 인증서를 저장할 파일 경로
days 365: 인증서의 유효 기간을 365일로 설정

로컬 개발 환경에서 CSR 생성 시 입력할 정보

Country Name (2 letter code)
- 두 자리 국가 코드를 입력합니다.
- 예시: KR (대한민국), US (미국)
State or Province Name (full name)
- 주(State)나 도(Province)의 전체 이름을 입력합니다.
- 예시: Seoul, California
Locality Name (e.g., city)
- 도시 이름을 입력합니다.
- 예시: Gangnam, San Francisco
Organization Name (e.g., company)
- 조직의 공식 이름을 입력합니다. 로컬 개발의 경우, 개인 프로젝트나 회사 이름을 사용할 수 있습니다.
- 예시: MyLocalDev
Organizational Unit Name (e.g., section)
- 조직 내 부서나 팀의 이름을 입력합니다. 선택 사항입니다.
- 예시: Development Team 또는 생략 가능
Common Name (e.g., server FQDN or YOUR name)
- 로컬 환경에서는 도메인 이름이 없으므로, 로컬 IP 주소나 로컬 서버의 호스트 이름을 입력합니다. 예를 들어, 로컬 서버가 localhost로 설정되어 있다면 localhost를 입력할 수 있습니다.
- 예시: localhost, 127.0.0.1, my-local-server
Email Address
- 인증서와 관련된 이메일 주소를 입력합니다. 선택 사항입니다.
- 예시: admin@localhost

[postgreSQL] 명령어 모음

석미니 — Sat, 3 Aug 2024 17:34:06 +0900

1. 데이터베이스 접속

psql postgres

2. 유저 생성

CREATE USER admin WITH LOGIN PASSWORD '1234';

admin이라는 사용자 아이디를 갖고, 비밀번호는 1234인 새 유저를 생성

3. 유저 확인

\du

4. 권한 부여

# admin에게 슈퍼유저 부여
ALTER ROLE admin SUPERUSER;
 
# admin에게 DB 생성 권한 부여
ALTER ROLE admin CREATEDB;
 
# admin에게 권한 생성 부여
ALTER ROLE admin CREATEROLE;

5. 데이터베이스 생성

# 소유자가 admin이고 인코딩은 UTF-8이며 연결제한이 없는 'koharu' 라는 데이터베이스 생성
CREATE DATABASE koharu
    WITH
    OWNER = admin
    ENCODING = 'UTF8'
    CONNECTION LIMIT = -1;

homebrew postgreSQL 설치 방법

석미니 — Sat, 3 Aug 2024 16:50:53 +0900

1. 설치

brew install postgresql

2. 서비스 실행

brew services start postgresql

3. 접속

psql postgres

4. 삭제

# PostgreSQL 서비스 중지
brew services stop postgresql@14

# PostgreSQL 14와 관련된 모든 데이터를 삭제
rm -rf /opt/homebrew/var/postgresql@14
rm -rf /usr/local/var/postgresql

# PostgreSQL 삭제
brew uninstall --force postgresql

prettier 설정

석미니 — Thu, 1 Aug 2024 11:21:54 +0900

shift + cmd + p // 명령 팔렛트 열기

open user settings 명령어 입력 -> 실행

{
  "terminal.integrated.fontFamily": "MesloLGS NF",
  "workbench.colorTheme": "Material Theme High Contrast",
  "workbench.iconTheme": "material-icon-theme",
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 포맷터를 prettier로 설정
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "svelte.enable-ts-plugin": true,
  "editor.formatOnPaste": true, // 붙여넣기시 자동 포맷팅
  "editor.formatOnSave": true, // 저장시 자동 포맷팅
  "prettier.tabWidth": 2, // 탭 너비
  "prettier.singleQuote": true, // single 쿼테이션 사용 여부
  "prettier.printWidth": 80, // 줄 바꿈 할 폭 길이
  "prettier.useTabs": false, // 탭 사용 여부
  "prettier.semi": true, // 세미콜론 사용 여부
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma" // prisma 포맷터 설정
  }
}

원시 값과 객체의 비교

석미니 — Mon, 1 Jul 2024 23:11:25 +0900

원시 값

원시 타입(숫자 타입, 문자열 타입, 불리언 타입, undefined 타입, null 타입, 심벌 타입)의 값, 즉 원시 값은 변경 불가능한 값이다.

한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.

"원시 값은 변경 불가능하다"는 말은 원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아니다. 변수는 언제든지 재할당을 통해 변수 값을 변경(교체)할 수 있다. 단 상수는 단 한 번만 할당이 허용되므로 변수 값을 변경(교체)할 수 없다.

// const 키워드를 사용해 선언한 변수는 재할당이 금지된다.
const name = "Kim";
s = "Jung"; // TypeError: Assignment to constant variable.

// 하지만 const 키워드를 사용해 선언한 변수에 할당한 객체는 변경할 수 있다.
const o = {};
o.a = 1;
console.log(o);  // {a: 1}

원시 값은 변경 불가능한 값

원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다. 이때 변수가 참조하던 메모리 공간의 주소가 바뀐다.

값의 이러한 특성을 불변성이라 한다.

불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.

유사 배열 객체

유사 배열 객체란 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는 객체를 말한다. 문자열은 마치 배열처럼 인덱스를 통해 각 문자에 접근할 수 있으며, length 프로퍼티를 갖기 때문에 유사 배열 객체이고 for 문으로 순회할 수도 있다.

var str = 'string';

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
console.log(str[0]);  // s

// 원시 값인 문자열이 객체처럼 동작한다.
console.log(str.length);  // 6
console.log(str.toUpperCase());  // STRING

// 문자열은 원시 값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
str[0] = "S";

console.log(str);  // string

값에 의한 전달

var score = 80;

// copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
var copy = score;

console.log(score, copy);  // 80 80
console.log(score === copy);  // true

변수에 원시 값을 갖는 변수를 할당하면 할당받은 변수(copy)에는 할당되는 변수(score)의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다.

값에 의한 전달

var score = 80;

// copy 변수에는 score 변수의 값 80이 복사되어 할당된다.
var copy = score;

console.log(score, copy);  // 80 80
console.log(score === copy);  // true

// score 변수와 copy 변수의 값은 다른 메모리 공간에 저장된 별개의 값이다.
// 따라서 score 변수의 값을 변경해도 copy 변수의 값에는 영향을 주지 않는다.
score = 100;

console.log(score, copy);  // 100 80
console.log(score === copy);  // false

값에 의해 전달된 값은 다른 메모리 공간에 저장된 별개의 값이다.

객체

객체는 프로퍼티의 개수가 정해져 있지 않으며, 동적으로 추가되고 삭제할 수 있다. 또한 프로퍼티의 값에도 제약이 없다. 따라서 객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없다.

변경 가능한 값

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.

// 할당이 이뤄지는 시점에 객체 리터럴이 해석되고, 그 결과 객체가 생성된다.
var person = {
  name: 'Lee'
};

// person 변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.
console.log(person);  // {name: "Lee"}

객체의 할당

원시 값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시 값에 접근한다. 하지만 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근한다.

var person = {
  name: 'Lee'
};

// 프로퍼티 값 갱신
person.name = 'Kim';

// 프로퍼티 동적 생성
person.address = 'Seoul';

console.log(person);  // {name: "Kim", address: "Seoul"}

객체 값 변경

객체는 변경 가능한 값이므로 메모리에 저장된 객체를 직접 수정할 수 있다. 따라서 객체를 할당한 변수의 참조 값은 변경되지 않는다.

객체를 생성하고 관리하는 방식은 매우 복잡하며 비용이 많이 드는 일이다. 객체를 변경할 때마다 원시 값처럼 이전 값을 복사해서 새롭게 생성한다면 명확하고 신뢰성이 확보되겠지만 객체는 크기가 매우 클 수도 있고, 원시 값처럼 크기가 일정하지도 않으며, 프로퍼티 값이 객체일 수도 있어서 복사해서 생성하는 비용이 많이 든다. 다시 말해, 메모리의 효울적 소비가 어렵고 성능이 나빠진다.

원시 값과는 다르게 여러 개의 식별자가 하나의 객체를 공유할 수 있다.

참조에 의한 전달

여러 개의 식별자가 하나의 객체를 공유할 수 있다는 것이 무엇인지 알아보자.

var pserson = {
  name: 'Lee'
};

// 참조 값을 복사(얕은 복사)
var copy = person;

참조에 의한 전달

객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다.

위 그림처럼 원본 person을 사본 copy에 할당하면 원본 person의 참조 값을 복사해서 copy에 저장한다. 이때 원본 person과 사본 copy는 저장된 메모리 주소는 다르지만 동일한 참조 값을 갖는다. 즉, 원본 person과 사본 copy 모두 동일한 객체를 가리킨다. 이것은 두 개의 식별자가 하나의 객체를 공유한다는 것이다.

따라서 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 주고받는다.

var person = {
  name: 'Lee',
};

// 참조 값을 복사(얕은 복사). copy와 person은 동일한 참조 값을 갖는다.
var copy = person;

// copy와 person은 동일한 객체를 참조한다.
console.log(copy === person);  // true

// copy를 통해 객체를 변경한다.
copy.name = 'Kim';

// person를 통해 객체를 변경한다.
person.address = 'Seoul';

// copy와 person은 동일한 객체를 가리킨다.
// 따라서 어느 한쪽에서 객체를 변경하면 서로 영향을 주고받는다.
console.log(person);  // { name: 'Kim', address: 'Seoul' }
console.log(copy);  // { name: 'Kim', address: 'Seoul' }

객체 리터럴

석미니 — Wed, 26 Jun 2024 02:51:08 +0900

객체 리터럴

JavaScript 객체 리터럴은 객체를 생성하는 간단하고 직관적인 방법이다. 객체 리터럴을 사용하면 중괄호 {}를 사용하여 객체를 생성하고, 객체의 속성(key)과 값(value)을 콜론 ' : '을 통해 정의할 수 있다. 이 방법은 코드가 간결해지고 가독성이 좋아지는 장점이 있습니다.

객체 리터럴에 의한 객체 생성

let person = {
  // 프로퍼티 키 : 프로퍼티 값
  name: "Alice",
  age: 25,
  city: "Wonderland",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

console.log(person);  // {name: 'Alice', age: 25, city: 'Wonderland', greet: ƒ}

프로퍼티 키는 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

let person = {
  firstName: 'Ung-mo',  // 식별자 네이밍 규칙을 준수하는 프로퍼티 키
  'last-name': 'Lee'    // 식별자 네이밍 규칙을 준수하지 않는 프로퍼티 키
}

console.log(person);  // {firstName: 'Ung-mo', last-name: 'Lee'}

동적 생성

let obj = {};
let key = 'hello';

// 프로퍼티 키 동적 생성
obj[key] = 'world';
obj['name'] = 'jim';
obj.city = 'seoul';

console.log(obj);  // {hello: 'world', name: 'jim', city: 'seoul'}

프로퍼티 접근

마침표 표기법

let person = {
  name: "Alice",
  age: 25,
  city: "Wonderland"
};

console.log(person.name); // "Alice"
console.log(person.age);  // 25
console.log(person.city); // "Wonderland"

대괄호 표기법

대괄호 프로퍼티 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

let person = {
  name: "Alice",
  age: 25,
  city: "Wonderland"
};

console.log(person["name"]); // "Alice"
console.log(person["age"]);  // 25
console.log(person["city"]); // "Wonderland"

프로퍼티 값 갱신

let person = {
  name: 'Lee'
};

// person 객체에 name 프로퍼티가 존재하므로 name 프로퍼티의 값이 갱신
person.name = 'Kim';

console.log(person);  // {name: 'Kim'}

person["name"] = 'Moon';

console.log(person);  // {name: 'Moon'};

프로퍼티 삭제

let person = {
  name: "Alice",
  age: 25,
  city: "Wonderland"
};

// delete 연산자로 city 프로퍼티를 삭제할 수 있다.
delete person.city;

console.log(person);  // {name: 'Alice', age: 25}

ES6에서 추가된 객체 리터럴의 확장 기능

let name = "Alice";
let age = 30;

let person = {
  name, // 속성 이름이 변수명과 동일하여 생략 가능
  age,  // 속성 이름이 변수명과 동일하여 생략 가능
  greet() { // 메서드 축약 function 키워드 생략
    console.log("Hello!");
  }
};

console.log(person.name); // "Alice"
person.greet(); // "Hello!"

타입 변환과 단축 평가

석미니 — Wed, 26 Jun 2024 00:06:57 +0900

타입 변환이란?

변수의 데이터 타입을 다른 타입으로 변경하는 것을 의미한다.

타입 변환은 두 가지 형태로 나눌 수 있다.

명시적 타입 변환 또는 타입 캐스팅
- 개발자가 의도적으로 값의 타입을 변환하는 것
암묵적 타입 변환 또는 타입 강제 변환
- 개발자의 의도와는 상관없이 JavaScript 엔진에 의해 자동으로 타입을 변환하는 것

명시적 타입 변환

명시적 타입 변환은 개발자가 의도적으로 변수의 타입을 변환하는 것

문자열 변환

let num = 123;

// 방법 1
let str1 = String(num);  // "123"

// 방법 2
let str2 = num.toString();  // "123"

String() 함수와 toString() 메서드의 차이점

String() 함수

undefined와 null을 포함하여 모든 타입을 문자열로 변환할 수 있다.

toString() 메서드

undefined나 null 값에 대해서는 toString() 메서드를 사용할 수 없다.

// String() 함수 사용
console.log(String(123));      // "123"
console.log(String(true));     // "true"
console.log(String(null));     // "null"
console.log(String(undefined)); // "undefined"

// toString() 메서드 사용
console.log((123).toString()); // "123"
console.log(true.toString());  // "true"
console.log(null.toString());  // TypeError: Cannot read property 'toString' of null
console.log(undefined.toString());  // TypeError: Cannot read property 'toString' of undefined

숫자 변환

let str = "123";

// 방법 1
let num1 = Number(str);  // 123

// 방법 2 (정수만)
// parseInt 두번째 인자는 option
// 진수를 나타내는 2부터 36까지의 정수 - default 10 진수
let num2 = parseInt(str);  // 123
num2 = parseInt(str, 2); // 1

// 방법 3 (정수, 실수)
let num3 = parseFloat(str);  // 123

불리언 타입 변환

// 방법 1
console.log(Boolean('x'));  // true
console.log(Boolean(''));  // false
console.log(Boolean('false'));  // true
console.log(Boolean(0));  // false
console.log(Boolean(1));  // true
// 빈 배열이나 빈 객체는 true로 인식 - 실수 많이함
console.log(Boolean({}));  // true
console.log(Boolean([])));  // true

// 방법2
console.log(!!'x');  // true
console.log(!!'');  // false
console.log(!!'false');  // true
console.log(!!0);  // false
console.log(!!1);  // true
console.log(!!{});  // true
console.log(!![]);  // true

암묵적 타입 변환

암묵적 타입 변환은 개발자의 의도와는 상관없이 JavaScript 엔진에 의해 자동으로 타입을 변환하는 것

문자열 변환

let num = 123;
let str = num + "";  // "123"

숫자 변환

let str = "456";
let num1 = str * 1;  // 456
let num2 = str / 1;  // 456
let num3 = str - 1;  // 455

// + 를 제외한 산술 연산자는 숫자 타입으로 변환

불리언 타입 변환

if ('')     console.log('1');
if (true)   console.log('2');
if (0)      console.log('3');
if ('str')  console.log('4');
if (null)   console.log('5');
if ({})     console.log('6');
if ([])     console.log('7');

// 2 4 6 7

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.

단축 평가

논리 연산자를 사용한 단축 평가

논리 연산자 "&&(AND) 또는 ||(OR)"를 사용할 때 특정 조건이 만족되면 더 이상 나머지 조건을 평가하지 않는 것을 의미한다.

OR 연산자 ('||')

OR 연산자는 첫 번째 피연산자가 Truthy이면 그 값을 반환하고, 그렇지 않으면 두 번째 피연산자를 반환한다.

let a = false || "hello";
console.log(a); // "hello" (첫 번째 피연산자가 Falsy이므로 두 번째 피연산자가 반환됨)

let b = "world" || "hello";
console.log(b); // "world" (첫 번째 피연산자가 Truthy이므로 그 값이 반환됨)

// 활용
function greet(name) {
  name = name || "Guest";
  console.log("Hello, " + name);
}

greet("Alice"); // "Hello, Alice"
greet();        // "Hello, Guest" (name이 undefined이므로 기본값 사용)

AND 연산자 ('&&')

AND 연산자는 첫 번째 피연산자가 Falsy이면 그 값을 반환하고, 그렇지 않으면 두 번째 피연산자를 반환한다.

let a = true && "hello";
console.log(a); // "hello" (첫 번째 피연산자가 Truthy이므로 두 번째 피연산자가 반환됨)

let b = false && "world";
console.log(b); // false (첫 번째 피연산자가 Falsy이므로 그 값이 반환됨)

// 활용 1
let user = { name: "Alice", age: 25 };

user && console.log(user.name); // "Alice" (user가 Truthy이므로 이름 출력)

let nullUser = null;

nullUser && console.log(nullUser.name); // 실행되지 않음 (nullUser가 Falsy이므로 평가 중단)

// 활용 2
let execute = true;

execute && someFunction(); // execute가 true일 때만 someFunction() 호출

function someFunction() {
  console.log("Function executed!");
}

주의 사항

단축 평가를 사용할 때는 예상치 못한 부작용을 방지하기 위해 조건문에서 Truthy와 Falsy 값을 명확히 이해하고 사용하는 것이 중요하다.
예를 들어, 값이 0이나 빈 문자열("")인 경우에도 Falsy로 평가될 수 있으므로, 상황에 따라서는 이러한 값들을 별도로 처리해야 할 수 있다.

let count = 0;

let result = count || 10;
console.log(result); // 10 (count가 0이므로 Falsy로 평가됨)

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자(?.)는 ES11(ECMAScript2020)에서 도입된 문법으로, 객체의 속성에 접근할 때 좌항의 피연산자가 null 또는 undefined인 경우 오류를 발생시키지 않고 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
이를 통해 코드가 더 간결하고 안전하게 작성될 수 있다. 특히 깊이 중첩된 객체 구조를 다룰 때 유용하다. (ts에서 매우 유용)

객체 속성 접근

let user = {
  name: "Alice",
  address: {
    city: "Wonderland",
  }
};

let city = user?.address?.city;
console.log(city); // "Wonderland"

let street = user?.address?.street;
console.log(street); // undefined (address 객체에는 street 속성이 없음)

배열 요소 접근

let users = [
  { name: "Alice" },
  { name: "Bob" }
];

console.log(users?.[0]?.name); // "Alice"
console.log(users?.[2]?.name); // undefined (세 번째 요소가 없음)

null 병합 연산자

null 병합 연산자(??)는 ES11(ECMAScript2020)에서 도입된 문법으로, 좌측 피연산자가 null 또는 undefined일 때만 우측 피연산자를 반환한다.
이를 통해 기본값을 설정하거나 null 또는 undefined 값을 처리할 때 더 명확하고 간결한 코드를 작성할 수 있다.

let user = {
  name: "Alice",
  age: 0
};

let name = user.name ?? "Guest";
console.log(name); // "Alice" (name 속성이 존재하므로 "Alice" 반환)

let age = user.age ?? 18;
console.log(age); // 0 (age 속성이 0이므로 0 반환)

let city = user.city ?? "Unknown";
console.log(city); // "Unknown" (city 속성이 없으므로 "Unknown" 반환)

null 병합 연산자 vs. 논리 OR 연산자

논리 OR 연산자(||)와 null 병합 연산자(??)의 주요 차이점은 논리 OR 연산자는 Falsy 값 (0, NaN, "", false, null, undefined)을 모두 고려하는 반면, null 병합 연산자는 null과 undefined만 고려한다.

let value = 0;

let resultOr = value || 10;
console.log(resultOr); // 10 (0은 Falsy 값이므로 10 반환)

let resultNullish = value ?? 10;
console.log(resultNullish); // 0 (0은 null 또는 undefined가 아니므로 0 반환)

sveltekit에서 https 사용

석미니 — Wed, 1 May 2024 23:41:43 +0900

라이브러리 설치

npm i vite-plugin-mkcert -D

vite.config.js에서 아래 코드로 수정

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
	server: { proxy: {} },
	plugins: [sveltekit(), mkcert()]
});

npm run dev

구글 앱 비밀번호 발급 방법

석미니 — Tue, 30 Apr 2024 12:04:48 +0900

구글 앱 비밀번호 발급 방법

1. 구글 홈에서 계정 관리 선택

2. 상단 검색창에서 "앱 비밀번호" 입력 후 엔터 또는 아래 "앱 비밀번호" 클릭

3. 앱 이름 입력 후 만들기 클릭

4. 비밀번호 복사 후 사용

JavaScript Class

석미니 — Tue, 2 Apr 2024 22:36:04 +0900

용어 정리

인스턴스

클래스를 통해 만들어진 객체

// 자동차 클래스 정의
class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  drive() {
    console.log("The car is driving.");
  }
}

// Car 클래스를 사용하여 인스턴스 생성
const myCar = new Car("Toyota", "Camry");
const yourCar = new Car("Honda", "Accord");

// myCar와 yourCar는 Car 클래스의 인스턴스이다.

캡슐화

외부로 노출해야 하는 값과 내부에서만 사용하는 값을 구분하는 기능
외부에서 내부 데이터에 바로 접근을 하지 못하게 하고 필요한 메소드만 열어두는 특성

// ES6 이후에는 클래스 내에서 #을 사용하여 private 필드를 정의할 수 있다.
// (ts에서는 private 키워드 사용 가능)
// private 필드는 클래스 외부에서 직접 접근할 수 없으므로 정보 은닉을 달성

class Car {
  #make;   // 제조사 (private 필드)
  #model;  // 모델 (private 필드)
  #year;   // 연도 (private 필드)
  #speed;  // 현재 속도 (private 필드)

  constructor(make, model, year) {
    this.#make = make;
    this.#model = model;
    this.#year = year;
    this.#speed = 0;
  }

  // 속도를 증가시키는 메서드
  accelerate(amount) {
    this.#speed += amount;
  }

  // 속도를 감소시키는 메서드
  brake(amount) {
    this.#speed -= amount;
  }

  // 현재 속도를 반환하는 메서드
  getSpeed() {
    return this.#speed;
  }

  // 제조사를 반환하는 메서드
  getMake() {
    return this.#make;
  }

  // 모델을 반환하는 메서드
  getModel() {
    return this.#model;
  }

  // 연도를 반환하는 메서드
  getYear() {
    return this.#year;
  }
}

// Car 클래스의 사용 예시
const myCar = new Car("Toyota", "Camry", 2022);

// 속도를 증가시킴
myCar.accelerate(20);

// 현재 속도를 출력
console.log("Current Speed:", myCar.getSpeed());

// 모델을 출력
console.log("Car Model:", myCar.getModel());

// private 필드는 클래스 외부에서 접근할 수 없으므로 직접적인 변경을 막을 수 있다.
// myCar.#make = "Honda";  // 이 코드는 에러를 발생시킨다.

클래스 변수와 인스턴스 변수

정의

클래스 변수 (정적 변수)

클래스 자체에 속하는 변수
모든 인스턴스가 공유하는 공통된 값을 저장하며, 클래스명을 통해 직접 접근하고, static 키워드를 사용하여 선언

인스턴스 변수

각 인스턴스마다 개별적으로 존재하는 변수
인스턴스의 고유한 특성을 나타내는 값을 저장하며, this 키워드를 사용하여 접근

특징

클래스 변수

모든 인스턴스가 공유하기 때문에 메모리 효율성을 높인다.
값 변경 시 모든 인스턴스에 영향을 미친다.
클래스 초기화 시 자동으로 초기화
static 키워드를 사용하여 선언

인스턴스 변수

각 인스턴스마다 독립적으로 값을 가질 수 있다.
특정 인스턴스의 고유한 정보를 저장하는 데 유용
this 키워드를 사용하여 접근
인스턴스 생성 시 자동으로 초기화

예시 코드

클래스 변수

class Person {
  static count = 0; // 클래스 변수 선언

  constructor(name) {
    this.name = name;
    Person.count++; // 클래스 변수 접근 및 변경
  }
}

console.log(Person.count); // 0

const p1 = new Person('Alice');
console.log(Person.count); // 1

const p2 = new Person('Bob');
console.log(Person.count); // 2

인스턴스 변수

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

const p1 = new Person('Alice', 30);
console.log(p1.getName()); // Alice
console.log(p1.getAge()); // 30

const p2 = new Person('Bob', 25);
console.log(p2.getName()); // Bob
console.log(p2.getAge()); // 25

접근 제한자

static

정의

클래스 자체에 속하는 변수와 메서드를 선언할 때 사용

특징

모든 인스턴스가 공유하는 공통 데이터 및 함수
클래스명을 통해 직접 접근
인스턴스 생성 없이도 사용 가능
메모리 효율성을 높이고 코드 간결성을 유지하는 데 도움된다.

public

정의

클래스 외부에서 자유롭게 접근하고 사용할 수 있는 속성과 메서드를 선언할 때 사용

특징

객체 인스턴스를 통해 직접 접근하거나 변경할 수 있다.
다른 클래스에서도 자유롭게 사용 가능
코드 작성 시 편리하지만, 데이터 유출이나 의도치 않은 변경 가능성이 높다.

private

정의

클래스 내부에서만 접근하고 사용할 수 있는 속성과 메서드를 선언할 때 사용

특징

클래스 외부에서 직접 접근하거나 변경할 수 없다.
데이터 캡슐화를 통해 정보 은닉과 보안을 강화할 수 있습니다.
코드 복잡성을 증가시킬 수 있으며, 테스트하기 어려울 수 있다.

예시 코드

JavaScript

class Foo {
  x = 1;            // Field declaration
  #p = 0;           // Private field
  static y = 20;    // Static public field
  static #sp = 30;  // Static private field

  bar() {
    this.#p = 10; // private 필드 참조
    // this.p = 10; // 새로운 public p 필드를 동적 추가한다.
    return this.#p;
  }
}

const foo = new Foo();
console.log(foo); // Foo {#p: 10, x: 1}

console.log(foo.x); // 1
// console.log(foo.#p); // SyntaxError: Undefined private field #p: must be declared in an enclosing class
console.log(Foo.y); // 20
// console.log(Foo.#sp); // SyntaxError: Undefined private field #sp: must be declared in an enclosing class
console.log(foo.bar()); // 10

TypeScript

class Foo {
  public x = 1; // Field declaration
  private p = 0; // Private field
  public static y = 20; // Static public field
  private static sp = 30; // Static private field

  bar() {
    this.p = 10; // private 필드 참조
    // this.x = 10; // 새로운 public x 필드를 동적 추가한다.
    return this.p;
  }
}

const foo = new Foo();
console.log(foo); // Foo {p: 10, x: 1}

console.log(foo.x); // 1
// console.log(foo.p); // SyntaxError: Undefined private field p: must be declared in an enclosing class
console.log(Foo.y); // 20
// console.log(Foo.sp); // SyntaxError: Undefined private field sp: must be declared in an enclosing class
console.log(foo.bar()); // 10

http → http 크로스 도메인 쿠키 전송

석미니 — Mon, 18 Mar 2024 23:01:18 +0900

http → http로 서로 다른 도메인에서 쿠키를 심었을 경우

sameSite 기본값(Lax)일 경우

쿠키가 저장은 되는데 새로고침하면 증발함
쿠키 보내는 것 안됨
크롬에서 크로스 사이트를 사용 가능하도록 sameSite를 None 옵션으로 설정해주라고 메세지를 내뱉음. (서버에서 설정해줘야함)

client 코드 - svelte (주소 : localhost:5173)

<script>
  import axios from 'axios';

  const API = axios.create({
    baseURL: `http://localhost:8080`,
  });

  const getCookie = async () => {
    // 의미없는 데이터임
    const data = {
      id: 'id',
      pw: 'pw',
    };

    // withCredentials 옵션은 단어의 의미에서 알 수 있듯이, 서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼 지를 결정하는 항목입니다.
    // 여기서, credential 정보가 포함되어 있는 요청은 아래 두 가지 경우를 의미합니다.

    // 1. 쿠키를 첨부해서 보내는 요청
    // 2. 헤더에 Authorization 항목이 있는 요청
    const config = {
      withCredentials: true,
    };

    await API.post('/login', data, config);
  };
  
  const postCookie = async () => {
    const data = {
      id: 'haha',
      pw: 'bb',
    };
    const config = {
      withCredentials: true,
    };
    await API.post('/cookie', data, config);
  };

</script>

<main>
  <button on:click={getCookie}>쿠키 심기</button>
  <button on:click={postCookie}>쿠키 보내기</button>
</main>

server 코드 - node express (주소 : 172.~~~~~:8080)

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const PORT = 8080;
const app = express();

app.use(cookieParser());
app.use(express.json());

app.use(
  cors({
    origin: true, // 클라이언트의 Origin
    credentials: true, // 요청에 인증 정보를 포함할 것임을 허용
  })
);

app.get('/', function (req, res) {
  res.send('ㅎㅇㅎㅇ');
});

app.post('/login', (req, res) => {
  console.log('요청옴');
  // 가정: 로그인이 성공했을 때 사용자 정보를 생성하고 쿠키에 저장한다.
  const userInfo = { username: 'exampleUser', id: 123456 };

  // 쿠키 만료 시간 설정 (1시간)
  const oneHour = 60 * 60 * 1000; // milliseconds
  const expiryDate = new Date(Date.now() + oneHour);

  // 쿠키 생성
  res.cookie('userInfo', userInfo, {
    httpOnly: true, // HTTP Only 설정
    expires: expiryDate, // 만료 시간 설정
  });

  res.send('쿠키 심기');
});

app.post('/cookie', (req, res) => {
  console.log(req.cookies['userInfo']);
  res.send('쿠키 가져오기');
});

// 서버가 실행할 PORT를 지정하고, 실행했을 때 콘솔로그를 찍음
app.listen(PORT, function () {
  console.log(`Listening on port ${PORT}! <http://localhost>:${PORT}`);
});

쿠키를 심고 쿠키를 보내기 했을 경우 서버에서 undefined로 뜸

sameSite를 none 으로 설정할 경우

sameSite none 을 적용 할 경우 secure: true 도 설정해줘야 함
마찬가지로 쿠키가 저장은 되는데 새로고침하면 증발함
쿠키 보내는 것 안됨

서드 파티 쿠키 제한 확대

https://developers.google.com/privacy-sandbox/3pcd?hl=ko#report-issues

client 코드 (주소 : localhost:5173) 위와 동일

<script>
  import axios from 'axios';

  const API = axios.create({
    baseURL: `http://localhost:8080`,
  });

  const getCookie = async () => {
    // 의미없는 데이터임
    const data = {
      id: 'id',
      pw: 'pw',
    };

    // withCredentials 옵션은 단어의 의미에서 알 수 있듯이, 서로 다른 도메인(크로스 도메인)에 요청을 보낼 때 요청에 credential 정보를 담아서 보낼 지를 결정하는 항목입니다.
    // 여기서, credential 정보가 포함되어 있는 요청은 아래 두 가지 경우를 의미합니다.

    // 1. 쿠키를 첨부해서 보내는 요청
    // 2. 헤더에 Authorization 항목이 있는 요청
    const config = {
      withCredentials: true,
    };

    await API.post('/login', data, config);
  };

  const postCookie = async () => {
    const data = {
      id: 'haha',
      pw: 'bb',
    };
    const config = {
      withCredentials: true,
    };
    await API.post('/cookie', data, config);
  };
</script>

<main>
  <button on:click={getCookie}>쿠키 심기</button>
  <button on:click={postCookie}>쿠키 보내기</button>
</main>

server 코드 (주소 : 172.~~~~~:8080)

const express = require('express');
const cors = require('cors');
const cookieParser = require('cookie-parser');
const PORT = 8080;
const app = express();

app.use(cookieParser());
app.use(express.json());

app.use(
  cors({
    origin: true, // 클라이언트의 Origin
    credentials: true, // 요청에 인증 정보를 포함할 것임을 허용
  })
);

app.get('/', function (req, res) {
  res.send('ㅎㅇㅎㅇ');
});

app.post('/login', (req, res) => {
  console.log('요청옴');
  // 가정: 로그인이 성공했을 때 사용자 정보를 생성하고 쿠키에 저장한다.
  const userInfo = { username: 'exampleUser', id: 123456 };

  // 쿠키 만료 시간 설정 (1시간)
  const oneHour = 60 * 60 * 1000; // milliseconds
  const expiryDate = new Date(Date.now() + oneHour);

  // 쿠키 생성
  res.cookie('userInfo', userInfo, {
    httpOnly: true, // HTTP Only 설정
    expires: expiryDate, // 만료 시간 설정
    sameSite: 'none',
    secure: true, // Secure 설정
  });

  res.send('쿠키 심기');
});

app.post('/cookie', (req, res) => {
  console.log("req.cookies['userInfo'] = ", req.cookies['userInfo']);
  res.send('쿠키 가져오기');
});

// 서버가 실행할 PORT를 지정하고, 실행했을 때 콘솔로그를 찍음
app.listen(PORT, function () {
  console.log(`Listening on port ${PORT}! <http://localhost>:${PORT}`);
});

sameSite 옵션이 뭘까?

쿠키의 속성 중 하나로, 보안 및 개인 정보 보호 측면에서 중요한 역할을 합니다. SameSite 속성은 웹 브라우저가 쿠키를 어떻게 처리해야 하는지를 지정합니다.
즉, 쿠키에는 이 쿠키가 어떤 도메인에서만 사용할 수 있는지 설정할 수 있는 옵션

SameSite은 크게 세 가지 값으로 설정할 수 있습니다. (기본값은 Lax)

Strict: 이 옵션을 사용하면 브라우저는 SameSite를 엄격하게 적용하여, 쿠키가 해당 사이트의 페이지로만 전송될 수 있도록 합니다. 즉, 외부 사이트로의 요청에서는 쿠키가 전송되지 않습니다.
Lax: 이 옵션은 엄격한 제약을 완화시키는 데 사용됩니다. 외부 도메인으로의 GET 요청에 대해서는 쿠키를 전송하지 않지만, POST 요청이나 외부 도메인에서 자동으로 시작되는 요청(ex: 링크를 클릭하여 이동하는 경우)에는 쿠키가 전송됩니다.
None: 이 옵션은 SameSite를 사용하지 않음을 나타냅니다. 따라서 쿠키는 모든 요청에 대해 전송됩니다. 이 옵션을 사용할 때는 Secure 속성이 함께 설정되어야 하며, HTTPS 프로토콜을 사용하는 환경에서만 적용됩니다.

SameSite 속성은 주로 CSRF (Cross-Site Request Forgery) 공격과 관련이 있습니다. 이를 통해 외부 사이트에서 해당 사이트로 요청을 보내는 공격을 막기 위해 SameSite 속성을 설정할 수 있습니다. 또한 SameSite는 쿠키를 통한 사용자 추적을 제한하고 개인 정보 보호를 강화하는 데 도움이 됩니다.

크롬의 SameSite 기본값 변화(None → Lax)

원래 SameSite를 명시하지 않은 쿠키는 None으로 동작했지만, 2020년 2월 4일 크롬 80 버전이 배포되면서 SameSite의 기본값이 Lax로 변경되었다. 이에 따라 위에서 언급했던 것처럼 예외사항에 포함되지 않으면 다른 도메인 간의 요청에서 쿠키를 담아주지 않는다.

이를 해결하기 위해선 SameSite 속성을 None으로 변경하고 쿠키를 secure 쿠키로 만들어 주면 된다.

(SameSite를 None으로 하려면 무조건 secure를 true로 설정해야만 정상적으로 전송된다.)

secure: 쿠키가 SSL이나 HTTPS 연결을 통해서만 반횐될지 여부를 명시하는 값
SameSite: 쿠키가 같은 도메인에서만 접근할 수 있어야 하는지 여부를 결정하는 값

결론

크로스 도메인 쿠키를 제대로 사용하려면 HTTPS 를 적용하고 sameSite 설정을 none로 바꿔주자 !!

참고 사이트

https://velog.io/@wiostz98kr/다른-도메인간-쿠키-전송하기

TailwindCSS 재사용 컴포넌트 만들기 - feat: TypeScript

석미니 — Fri, 26 Jan 2024 21:00:42 +0900

TailwindCSS로 스타일링 할 때 재사용 컴포넌트를 만드려면 className 복사해서 사용해왔는데 여간 불편한 일이 아니다.

그래서 재사용 컴포넌트를 만들어서 코드의 중복을 줄이고, 디자인을 일관되게 유지하도록 만들어 보려 한다.

TypeScript + TailwindCSS를 이용한 재사용 컴포넌트 만들기

컴포넌트를 사용하는 곳에 타입을 지정한 뒤 props를 통해 이벤트 헨들러, 컬러, 색상 등을 받을 수 있게 제작하였다.

components/common/Button.tsx

import { ReactNode } from 'react';

type Color = 'default' | 'white';
type Size = 'sm' | 'md' | 'full';
type Type = 'button' | 'submit';

interface ButtonProps {
  children: ReactNode;
  onClick?: () => void;
  color?: Color;
  size?: Size;
  type?: Type;
}

export function Button({ children, onClick, color = 'default', type = 'button', size = 'md' }: ButtonProps) {
  return (
    <button
      className={`${buttonTheme.color[color]} ${buttonTheme.size[size]} text-center rounded-md font-semibold border`}
      type={type}
      onClick={onClick}
    >
      {children}
    </button>
  );
}

const buttonTheme = {
  color: {
    default: 'text-white bg-green-400 border-green-400',
    white: 'text-green-400 bg-white border-green-400',
  },

  size: {
    sm: 'px-2 py-1.5 text-sm',
    md: 'px-3 py-2 text-base',
    full: 'py-3 w-full text-base',
  },
};

공통으로 사용되는 css는 button의 className에 미리 정의해두고 중복을 제거하였다.
Default 값을 사용하여 일반적으로 많이 쓰이는 설정을 미리 지정함으로써 불필요한 props 설정을 제거하였다.

App.tsx

import React from 'react';
import { Button } from './components/common/Button';

export default function App() {
  return (
    <div>
      <Button>안녕</Button>
      <Button color="white">안녕</Button>
    </div>
  );
}

아쉬운 점

위 코드에서 살짝 아쉬운 부분이 있다. buttonTheme.color에 색상을 추가하면 type Color에서도 해당 키값을 추가해줘야 한다.

만약 neutral 색상을 추가하려면 buttonTheme.color와 type Color를 직접 맞춰줘야 한다.

나는 buttonTheme.color에 값을 추가하면 동적으로 Color 타입도 추가하고 싶었다.

개선된 코드

components/common/Button.tsx

import { ReactNode } from 'react';

type Color = keyof typeof buttonTheme.color;
// type Color = 'default' | 'white';
type Size = keyof typeof buttonTheme.size;
// type Size = type Size = 'sm' | 'md' | 'full';
type Type = 'button' | 'submit';

//...

const buttonTheme = {
  color: {
    default: 'text-white bg-green-400 border-green-400',
    white: 'text-green-400 bg-white border-green-400',
  },

  size: {
    sm: 'px-2 py-1.5 text-sm',
    md: 'px-3 py-2 text-base',
    full: 'py-3 w-full text-base',
  },
};

TypeScript의 keyof typeof을 활용하면 객체의 key들만 가져와 상수 타입으로 만들 수 있다.

prisma 명령어 모음

석미니 — Mon, 22 Jan 2024 01:42:43 +0900

현재 프로젝트에 prisma에 필요한 파일 생성

npx prisma init

데이터베이스 생성

npx prisma migrate dev --name init

웹에서 데이터베이스 보기

npx prisma studio

데이터베이스 초기화

npx prisma migrate reset

NestJS - dto

석미니 — Thu, 9 Nov 2023 20:48:20 +0900

dto 란?

DTO는 Data Transfer Object의 약자이며, 주로 클라이언트와 서버 간의 데이터 전송을 위한 객체입니다.

데이터 형식 지정: DTO는 특정 데이터의 형식을 정의하고, 클라이언트와 서버 간에 데이터를 일관된 형식으로 주고받을 수 있게 합니다.
유효성 검사: 서버에서는 클라이언트로부터 전달받은 데이터의 유효성을 검사하고 필요에 따라 오류를 처리합니다.
데이터 변환: 서버는 클라이언트로부터 받은 데이터를 필요한 형태로 가공하거나, 데이터베이스와 통신하기 전에 적절한 형식으로 변환합니다.

라이브러리 설치

npm i class-validator class-transformer

main.ts에서 ValidationPipe를 적용

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { ValidationPipe } from '@nestjs/common';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useGlobalPipes(
    new ValidationPipe({
      whitelist: true, // DTO에 정의되지 않은 속성이 들어오면 자동으로 제거
      forbidNonWhitelisted: true, // 허용되지 않은 속성이 DTO에 포함되면 요청을 거부
      transform: true, // DTO에 정의된 필드 유형이 일치하지 않는 경우 자동으로 타입 변환을 수행
    }),
  );
  await app.listen(3000);
}
bootstrap();

dto 파일 생성

src/board/dto/create-board.dto.ts

import {
  IsEmail,
  IsNotEmpty,
  IsOptional,
  IsString,
  MaxLength,
} from 'class-validator';

export class CreateBoardDto {
  @MaxLength(20) // 최대 20글자 이하인지 확인
  @IsNotEmpty() // 빈 값이나 Null이 아닌지 확인
  @IsString() // 문자 타입인지 아닌지 확인
  title: string;

  @IsString()
  @IsOptional() // 있을 수도 있고 없을 수도 있음
  desc: string;

  @IsString()
  @IsEmail() // 이메일 양식이 맞는지 확인
  writer: string;
}

src/board/board.service.ts

import { Injectable } from '@nestjs/common';
import { CreateBoardDto } from './dto/create-board.dto';

@Injectable()
export class BoardService {
  createBoard(boardData: CreateBoardDto) {
    return boardData;
  }
}

src/board/board.controller.ts

import { Body, Controller, Post } from '@nestjs/common';
import { BoardService } from './board.service';
import { CreateBoardDto } from './dto/create-board.dto';

@Controller('board')
export class BoardController {
  constructor(private boardService: BoardService) {}

  @Post()
  create(@Body() boardData: CreateBoardDto) {
    return this.boardService.createBoard(boardData);
  }
}

API 요청

dto에 설정된 타입과 다르면 에러 메세지를 반환한다.

class-validator 공식 사이트

https://github.com/typestack/class-validator

Socket.io 사용법

석미니 — Sun, 5 Nov 2023 02:39:07 +0900

Socket.io란?

Socket.io는 실시간 웹 어플리케이션을 개발하기 위한 JavaScript 라이브러리로, 웹 소켓(WebSocket) 프로토콜을 기반으로 동작
Socket.IO는 클라이언트와 서버 간의 실시간 통신을 위한 사용하기 쉬운 인터페이스를 제공
이벤트 기반으로 동작

통신 종류(채널 설정)

private

private은 1:1 통신을 말한다. 메신저를 예로 들면 1:1 채팅 같은 개념이다.

io.to(소켓 id).emit();

public

전송자를 포함한 모두에게 메세지를 전송한다.

io.emit();

broadcast

전송자를 제외한 모든 사용자에게 메세지를 전송한다.

socket.broadcast.emit();

연결과 해제

server

const { createServer } = require('http');
const express = require('express');
const { Server } = require('socket.io');

const app = express();
const httpServer = createServer(app);

const io = new Server(httpServer, {
  cors: {
    origin: 'http://localhost:3000',
  },
});

io.on('connection', (socket) => {
  console.log('connection', socket.id); // 클라이언트가 서버에 연결되었을 때 발생

  socket.on('disconnect', () => {
    console.log('연결 끊김'); // 클라이언트에서 소켓 연결 해제시 발생
  });
});

httpServer.listen(8000, () => {
  console.log('server running at http://localhost:8000');
});

clinet

import { useEffect, useState } from 'react';
import { io } from 'socket.io-client';

export default function ConnectionPage() {
  const [socket, setSocket] = useState();

  useEffect(() => {
    const newSocket = io('http://localhost:8000');
    setSocket(newSocket);

    return () => {
      newSocket.disconnect();
    };
  }, []);

  useEffect(() => {
    if (!socket) return;
    socket.on('connect', () => {
      // 소켓 연결되었을 때 발생
      console.log('소켓 연결 완료');
    });
    socket.on('disconnect', () => {
      // 소켓 연결이 끊겼을 때 발생
      console.log('소켓 연결 끊김');
    });
  }, [socket]);

  return <div>ConnectionPage</div>;
}

예약이 되어 있는 이벤트 모음

server

connection : 클라이언트가 서버에 연결되었을 때 발생
disconnecting : 클라이언트가 연결을 해제하려는 경우에 발생
disconnect : 클라이언트가 연결을 해제했을 때 발생
error : 연결중에 오류가 발생했을 때 발생

client

connect : 서버와 소켓이 연결 되었을 때 발생
disconnect : 서버와 소켓이 해제되었을 때 발생

소켓 함수 모음

// 클라이언트를 "roomA" 방으로 추가
socket.join("roomA");

// 클라이언트를 "roomA" 방에서 제거
socket.leave("roomA");

// 특정 방에 속한 모든 클라이언트에게 특정 이벤트와 데이터를 발송
io.to("roomA").emit("message", "Hello, Room A");

// 송신자를 제외한 특정 방에 속한 클라이언트에게 특정 이벤트와 데이터를 발송
socket.to("roomA").emit("message", "Hello, Room A");
socket.broadcast.to("roomA").emit("message", "Hello, Room A");

// 송신자를 제외한 서버에 연결된 모든 클라이언트에게 이벤트와 데이터를 발송
socket.broadcast.emit("message", "Hello, Room A");

// 송신자를 포함하여 모든 클라이언트에게 이벤트와 데이터를 전송
io.sockets.emit("message", "Hello, Room A");

// 특정 방에 속한 클라이언트들의 정보를 확인
const roomInfo = io.sockets.adapter.rooms.get(room);
console.log(roomInfo); // 방에 속한 클라이언트 id정보가 출력

[새싹x코딩온] 프로젝트 회고 (열줌쉬어) - 프로젝트 소개 및 폴더 구조 세팅

석미니 — Tue, 24 Oct 2023 10:33:12 +0900

프로젝트 소개

스탑워치 / 타이머기능을 통해 실시간으로 공부시간을 기록하고, 가입한 그룹 내에 공부량을 시각화하여 보여주는 웹사이트

개발 기간

23. 10. 23 ~ 23. 11. 10 (약 2주)

기술 스택

프론트 엔드 - 2명

Vite
ReactJS
JavaScript
Redux-Toolkit
TailwindCSS
Socket.IO-client

백엔드 - 3명

Express
Mongoose
JWT (jsonwebtoken)
Socket.IO
MongoDB, AWS EC2, NGINX

협업 툴

프론트 엔드 기술 스택 선택 이유

Vite VS create-react-app

매번 create-react-app으로만 했었는데 vite가 기존의 번들러와 비교하여 개발 속도가 월등히 빠르다고 하고, 요즘 Vite를 사용하여 프로젝트 하는 곳이 많아 이번 기회에 써보기로 했다.

작은 프로젝트에는 별 차이가 없겠지만 react 설치부터 시작해서 개발환경을 구축하는 과정이 create-react-app보다 간단하고 빠르다는 점이 마음에 들었다.

Redux-Toolkit VS Zustand

Zustand가 상태관리 라이브러리 중 사용이 간편하고 진입장벽이 낮다고 해서 사용할까 말까 많이 망설였다.

하지만 Redux-Toolkit을 사용한 이유는 아직 채용 공고를 보면 Redux-Toolkit을 사용하는 곳이 많다.

그리고 Redux-Toolkit을 먼저 사용해봐야 Zustand를 나중에 배웠을 때 장점이 보일 것 같아 일단은 Redux-Toolkit 상태관리 라이브러리를 선택했다.

TypeScript VS JavaScript

요즘 현업에서 많이 쓰는 TypeScript로 시작했었으나, 사용 중간에 타입 에러 잡는다고 시간을 많이 쏟아 프로젝트 기간 내에 못 맞출 거 같아 JavaScript로 전향했다.

프로젝트 끝나면 TypeScript로 리팩토링을 꼭 하고 싶다.

TailwindCSS VS Emotion

이전에 Emotion을 써봤고, 나는 클래스명과 변수명을 짓는데 시간을 꽤 사용한다.

TailwindCSS는 클래스명 생각할 시간에 개발에 더 집중할 수 있기 때문에 이번 기회에 사용했다.

~~하지만 처음 사용해 봐서 class명 찾는다고 시간을 더 쓴 거 같다...~~

폴더 구조

리액트 폴더 구조

components
- common - 여러 페이지에서 사용되는 공통 컴포넌트 모음
- layout - 전체 화면을 담당하는 컴포넌트 (Header, main, Footer)
data : 공통으로 사용되는 data 모음 (카테고리 등등)
hooks : 공통으로 사용되는 hooks 모음
pages : 페이지를 담당하는 폴더 - 각 페이지마다 한번씩 쓰는 컴포넌트는 여기서 관리
reducers : redux slice 모음
store : 리덕스 세팅
utils : 공통으로 사용되는 axios나 함수 모음
가독성을 유지하기 위해, React 컴포넌트는 .jsx 확장자를 사용하고, 일반적인 JavaScript 함수를 모아둔 파일은 .js 확장자를 사용

초기 세팅 (공통 로직) - 라이브러리의 도움을 받아 효율적으로 구현

레이아웃

공통적인 컴포넌트를 처리하기 위해 React-Router-Dom에 있는 <Outlet /> 속성을 이용했다.

components/layout/index.jsx

import { Outlet } from 'react-router-dom';
import Footer from './Footer';
import Header from './Header';

export default function Layout() {
  return (
    <div>
      <Header />
      <main>
        <Outlet />
      </main>
      <Footer />
    </div>
  );
}

App.jsx

import { Route, Routes } from 'react-router-dom';
import Layout from './components/layout';
import MainPage from './pages/MainPage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<MainPage />} />
        <Route path="/login" element={<LoginPage />} />
      </Route>
    </Routes>
  );
}

export default App;

<Route path="/" element={<Layout />}> 로 감싸주면 children와 같은 효과를 내어 내부 로직이 Layout 컴포넌트의 main 태그 안에 들어가게 된다.
이렇게 감싸주면 내부의 MainPage와 LoginPage의 컴포넌트에 매번 Layout 컴포넌트로 감싸주는 중복 로직을 제거 할 수 있다.

React-Router-Dom 공식 사이트 (Outlet)

https://reactrouter.com/en/main/components/outlet

CSS

자주 사용하는 색상 추가 및 tailwindcss 속성 커스텀을 위해 tailwind config 파일에 옵션을 추가하고, 공통으로 사용되는 heading 태그나 section 태그 통일성을 위해 tailwindcss에서 지원하는 @layer base 를 사용하여 기본 스타일을 지정해 주었다.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      colors: {
        primary: '#22a3cc',
        semi_primary: '#bce3ef',
        secondary: '#bfd9ff',
        danger: '#e74c3c',
      },
      container: {
        screens: {
          lg: '1024px',
          md: '768px',
          sm: '640px',
          xs: '390px',
        },
        padding: {
          DEFAULT: '1rem',
          sm: '0',
        },
      },
    },
  },
  plugins: [require('flowbite/plugin')],
};

src/index.css

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

@layer base {
  html {
    font-family: 'Roboto', system-ui, sans-serif;
  }

  textarea {
    resize: none;
  }

  section + section {
    @apply mt-12;
  }

  h2 {
    @apply text-2xl font-bold mb-8;
  }

  h3 {
    @apply text-lg font-semibold mb-5;
  }
}

@layer base 속성 안에다가 기본 스타일을 지정하는 이유
CSS 우선 순위 때문이다. @layer 밖에다 적으면 h2 태그를 커스텀 할 일이 생길 때 CSS 우선 순위 때문에 해당 클래스명이 안 먹을 수 있다. @layer 종류에는 base, components, utilities 등등 있다.
@apply 속성은 css 파일 내에서도 tailwindcss 클래스명을 사용할 수 있게 해준다.

tailwindcss 공식 사이트 (base styles)

https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

참고 자료

https://leesangwondev.vercel.app/tailwind-css-%EB%98%91%EB%98%91%ED%95%98%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

axios 요청

axios 인스턴스로 매번 백엔드 똑같은 주소(http://localhost:8000)를 적어야 하는 중복을 없앴다.

또한, 인터셉터 메소드를 이용하여 매번 headers에 토큰값을 넣어야 하는 사용자 인증 로직을 처리하였다.

인터셉터 메소드 : then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있습니다.
- request에서는 요청을 보내기 전에 하는 작업이 가능하다.
- response에서는 서버에서 받은 응답이 then과 catch로 처리되기 전에 인터셉터로 가로채서 원하는 작업들을 추가할 수 있다.

Interceptor을 설명한 이미지

utils/axios.js

import axios from 'axios';

export const API = axios.create({
  baseURL: import.meta.env.VITE_APP_API_URL,
});

API.interceptors.request.use(
  function (config) {
    config.headers.Authorization = 'Bearer ' + localStorage.getItem('accessToken');
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

API.interceptors.response.use(
  function (response) {
    return response;
  },
  function (error) {
    if (error.response.data.msg === '토큰 만료') {
      window.location.reload();
    }

    return Promise.reject(error);
  }
);

pages/Notice/NoticePage/index.jsx

import { API } from '../../../utils/axios';

export default function NoticePage() {
  const [notice, setNotice] = useState([]);

  useEffect(() => {
    const fetchNotices = async () => {
      try {
        const response = await API.get('/notices');
        const data = await response.data;
        setNotice(data);
      } catch (err) {
        console.error(err);
      }
    };
    fetchNotices();
  }, []);


  return (
    <div className="container">
     {...}
    </div>
  );
}

위 코드를 실행하면 매번 요청때마다 http://localhost:8001/api 가 기본주소로 등록이 되고, 매 요청마다 따로 설정 안해도 Request Headers Authorization 에 토큰값을 실어서 보낼 수 있다.

axios 요청 이미지

axios 공식 사이트 (인스턴스)

https://axios-http.com/kr/docs/instance

axios 공식 사이트 (인터셉터)

https://axios-http.com/kr/docs/interceptors

다음 블로그에서는 redux 세팅과 로그인 여부에 따른 제한 접근 라우팅 구현에 대해 적어야 겠다.

버블 정렬, 선택 정렬, 이진 탐색

석미니 — Mon, 9 Oct 2023 06:01:31 +0900

선택 정렬이란?

최솟값을 찾아서 가장 왼쪽 자리부터 스왑하며 정렬

그림 설명

선택 정렬을 설명한 이미지

유튜브 설명

https://www.youtube.com/watch?v=yXE9kFLHSOs

문제

N개이 숫자가 입력되면 오름차순으로 정렬하여 출력하는 프로그램을 작성하세요. 정렬하는 방법은 선택정렬입니다.

▣ 입력설명
첫 번째 줄에 자연수 N(1<=N<=100)이 주어집니다.
두 번째 줄에 N개의 자연수가 공백을 사이에 두고 입력됩니다. 각 자연수는 정수형 범위 안에 있습니다.

▣ 출력설명
오름차순으로 정렬된 수열을 출력합니다.

▣ 입력예제 1
6
13 5 11 7 23 15

▣ 출력예제 1
5 7 11 13 15 23

코드

function solution(arr) {
  const answer = arr;
  for (let i = 0; i < arr.length; i++) {
    let minIdx = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[j] < arr[minIdx]) minIdx = j;
    }
    [arr[i], arr[minIdx]] = [arr[minIdx], arr[i]];
  }
  return answer;
}

const arr = [13, 5, 11, 7, 23, 15];
console.log(solution(arr));

버블 정렬이란?

서로 인접한 두 원소를 검사하여 정렬하는 알고리즘
왼쪽부터 두 숫자를 비교하면서 큰 숫자를 오른쪽으로 스왑하며 정렬

그림 설명

버블 정렬을 설명한 이미지

유튜브 설명

https://www.youtube.com/watch?v=fxuhgRRqYsY

문제

N개이 숫자가 입력되면 오름차순으로 정렬하여 출력하는 프로그램을 작성하세요. 정렬하는 방법은 버블정렬입니다.

▣ 입력설명
첫 번째 줄에 자연수 N(1<=N<=100)이 주어집니다.
두 번째 줄에 N개의 자연수가 공백을 사이에 두고 입력됩니다. 각 자연수는 정수형 범위 안에 있습니다.

▣ 출력설명
오름차순으로 정렬된 수열을 출력합니다.

▣ 입력예제 1
6
13 5 11 7 23 15

▣ 출력예제 1
5 7 11 13 15 23

코드

function solution(arr) {
  const answer = arr;
  for (let i = 0; i < arr.length - 1; i++) {
    // arr.length - 1 한 이유는 어짜피 마지막에 제일 큰 수를 집어 넣을거라서 마지막은 제외
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
      console.log(i);
    }
  }
  return answer;
}

const arr = [13, 5, 11, 7, 23, 15];
console.log(solution(arr));

이진 탐색이란?

정렬되어 있는 리스트에서 탐색 범위를 절반씩 좁혀가며 데이터를 탐색하는 방법

그림 설명

이진 탐색을 설명한 이미지

유튜브 설명

https://www.youtube.com/watch?v=IfIuG95RH0o

문제

임의의 N개의 숫자가 입력으로 주어집니다. N개의 수를 오름차순으로 정렬한 다음 N개의 수 중 한 개의 수인 M이 주어지면 이분검색으로 M이 정렬된 상태에서 몇 번째에 있는지 구하는 프로그램을 작성하세요. 단 중복값은 존재하지 않습니다.

▣ 입력설명
첫 줄에 한 줄에 자연수 N(3<=N<=1,000,000)과 M이 주어집니다. 두 번째 줄에 N개의 수가 공백을 사이에 두고 주어집니다.

▣ 출력설명
첫 줄에 정렬 후 M의 값의 위치 번호를 출력한다.

▣ 입력예제 1
8 32
23 87 65 12 57 32 99 81

▣ 출력예제 1
3

코드

function solution(target, arr) {
  let answer;
  arr.sort((a, b) => a - b);
  let lt = 0,
    rt = arr.length - 1;
  while (lt <= rt) {
    let mid = parseInt((lt + rt) / 2);
    if (arr[mid] === target) {
      answer = mid + 1;
      break;
    } else if (arr[mid] > target) rt = mid - 1;
    else lt = mid + 1;
  }

  return answer;
}

const arr = [23, 87, 65, 12, 57, 32, 99, 81];
console.log(solution(32, arr));

React의 state와 props

석미니 — Sun, 8 Oct 2023 17:21:34 +0900

State란?

React 컴포넌트 내에서 관리되는 데이터의 현재 상태를 나타낸다.
각 컴포넌트는 자체적인 state를 가질 수 있으며, 이 데이터는 해당 컴포넌트 내에서 변경될 수 있다.

왜 사용할까?

동적인 데이터 관리
- state를 사용하여 애플리케이션의 상태를 저장하고 관리할 수 있다.
- 이는 사용자와의 상호작용, 서버에서 받은 데이터, 현재 애플리케이션 상태 등과 같이 변할 수 있는 데이터를 처리하는 데 유용
UI 업데이트
- state의 값이 변경되면 React는 해당 컴포넌트와 그 자식 컴포넌트의 렌더링을 다시 실행
- 이를 통해 UI가 업데이트되어 사용자에게 실시간으로 변경된 정보를 보여줄 수 있다.
조건부 렌더링
- state의 값에 따라 다른 UI나 동작을 구현할 수 있다.
- 예를 들어, 사용자의 인증 상태에 따라 로그인 폼이나 사용자 정보를 표시하는 등의 조건부 렌더링이 가능
컴포넌트 간 데이터 전달
- state를 통해 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 수 있다.
- 부모 컴포넌트의 state 값을 자식 컴포넌트의 props로 전달하여 데이터를 공유할 수 있다.

상태 관리

setState() 메서드

상태를 관리할 수 있게 해주는 메서드
useState 함수는 배열을 반환
- 첫 번째 요소는 현재 상태의 값
- 두 번째 요소는 상태를 업데이트하는 함수
setState 호출은 비동기적으로 동작

사용법

import React, { useState } from 'react';
import './style.css';

export default function App() {
  const [number, setNumber] = useState(0);
  const add = () => {
    setNumber(number + 1);
    console.log(number);
  };

  return (
    <div>
      <div>{number}</div>
      <button onClick={add}>+ 1</button>
    </div>
  );
}

실행 사이트

https://stackblitz.com/edit/stackblitz-starters-ju7hzt?file=src%2FApp.js,src%2Findex.js

해당 코드는 문제 없이 잘 작동한다.
하지만 개발자 도구에서 콘솔을 찍어보면 number 값이 한박자 늦게 찍히는 것을 볼 수 있다.
즉, setNumber 함수는 비동기적으로 작동한다는 말이다.

비동기적으로 작동하는 이유

UI를 그리는 작업(렌더링)은 계산적 비용이 많이 드는 작업 중 하나이다.

setState를 호출하면 React는 즉시 컴포넌트 상태를 업데이트하거나 렌더링하지 않는다. React는 상태 업데이트를 예약하고, 여러 상태 업데이트를 모아서 일괄 처리한 후, 단일 렌더링을 수행한다.

이렇게 상태 업데이트를 일괄로 처리하면 불필요한 재렌더링을 피하고 성능을 향상시킬 수 있다.

결국, setState는 성능 최적화를 위해 상태 업데이트를 일괄 처리하여 비동기적으로 동작하며, 이러한 방식으로 호출된 setState가 바로 상태를 업데이트하지 않는 것이다.

hombrew를 이용한 mysql 설치

석미니 — Sun, 8 Oct 2023 02:26:19 +0900

1. 설치

brew install mysql

2. 서비스 실행

brew services start mysql

3. 접속

mysql -uroot

4. 서비스 종료

brew services stop mysql

react-router-dom v6 사용법

석미니 — Tue, 3 Oct 2023 03:41:10 +0900

라우팅이란?

사용자가 요청한 URL 에 따라 해당 URL 에 맞는 페이지를 보여주는 것
가장 많이 쓰이는 라이브러리? React Router

리액트 라우터(React Router)

개발자가 주소별로 다른컴포넌트를 보여주기 위해 사용하는 라이브러리
여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트 제공

주요 컴포넌트

BrowserRouter

새로고침을 하지 않아도 새로운 컴포넌트를 렌더링 해주는 기능 담당
URL마다 컴포넌트가 바뀔 때 이때 바뀌는 부분의 최상단에 위치 해야 함

src/index.jsx

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

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

[mysql] 'Your password does not satisfy the current policy requirements' 오류 해결 방법

석미니 — Tue, 29 Aug 2023 12:55:20 +0900

오류가 뜨는 이유

비밀번호가 쉬워서

오류 해결 방법

mysql 접속 후 아래 명령어 실행

SHOW VARIABLES LIKE 'validate_password%';

validate_password.policy가 MEDIUM 인 경우 숫자, 대문자, 소문자, 특수문자가 모두 포함된 validate_password.length 길이 만큼 지켜져야 한다.

하지만 validate_password.policy 가 LOW 인 경우는 validate_password.length 길이만 지켜주면 된다.

아래 명령어는 비밀번호의 길이와 보안 등급을 낮추는 명령어이다.

SET GLOBAL validate_password.length=4;
SET GLOBAL validate_password.policy=LOW;

위 명령어 입력 후 다시 보안 규칙을 보면 아래처럼 바껴져있다.

SHOW VARIABLES LIKE 'validate_password%';

이후에 아래 명령어를 입력해서 mysql 계정을 생성하면 된다.

CREATE USER 'user'@'%' IDENTIFIED WITH mysql_native_password by '1234';

[mysql] 계정 생성, 비밀번호 변경, 권한 부여

석미니 — Tue, 29 Aug 2023 12:43:42 +0900

계정 생성

CREATE USER 'user'@'%' IDENTIFIED WITH mysql_native_password by '1234';

Your password does not satisfy the current policy requirements 오류 발생시

비밀번호 변경

ALTER USER 'user'@'%' IDENTIFIED WITH mysql_native_password by '1234';

계정에 대한 모든 권한 부여

GRANT ALL PRIVILEGES ON *.* TO 'user'@'%' WITH GRANT OPTION;

multer 사용법 (파일 업로드 미들웨어)

석미니 — Thu, 24 Aug 2023 14:29:46 +0900

multer 란?

Node.js에서 파일 업로드를 처리하기 위해 사용되는 미들웨어
express로 서버를 구축할 때 가장 많이 사용되는 미들웨어

설치

npm install multer express

사용법 - Form 태그

하나의 인풋에 하나의 파일을 업로드

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>Single file upload</h1>
  <p>하나의 인풋에 하나의 파일을 업로드</p>
  <!-- multer는 multipart가 아닌 폼에서는 동작하지 않음! 따라서 enctype="multipart/form-data" 속성 필수~ -->
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="userfile" /><br />
    <button type="submit">업로드</button>
  </form>
</body>

</html>

app.js

const express = require('express');
const multer = require('multer');
const app = express();
const PORT = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// multer 관련 설정
const upload = multer({
  // storage: 저장할 공간에 대한 정보
  // done(null, xx) 여기서 null은 error를 의미하는 매개변수
  // 에러가 없으므로 "null"이라고 전달하여 콜백 함수를 호출!
  storage: multer.diskStorage({
    destination(req, file, done) {
      // done: callback
      done(null, 'uploads/'); // 파일을 업로드할 경로 설정
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 파일 "확장자"를 추출
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  // limits: 파일 제한 정보
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

// 'userfile' = 클라이언트 <input type="file" name="userfile" /> 태그 name 값
app.post('/upload', upload.single('userfile'), (req, res) => {
  console.log(req.body); // 파일 외의 정보들
  console.log(req.file); // 파일 업로드 정보
  // 파일 업로드 처리 후 응답
  res.send('파일 업로드 완료!');
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

하나의 인풋에 여러 개의 파일을 업로드

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>Multi file upload v1</h1>
  <p>하나의 인풋에 여러 개의 파일을 업로드</p>
  <form action="/upload/array" method="POST" enctype="multipart/form-data">
    <!-- 하나의 인풋에 여러 파일을 입력받고 싶다면 multiple 속성을 추가 -->
    <input type="file" name="userfiles" multiple /><br />
    <button type="submit">업로드</button>
  </form>
</body>

</html>

app.js

const express = require('express');
const multer = require('multer');
const app = express();
const PORT = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// multer 관련 설정
const upload = multer({
  // storage: 저장할 공간에 대한 정보
  // done(null, xx) 여기서 null은 error를 의미하는 매개변수
  // 에러가 없으므로 "null"이라고 전달하여 콜백 함수를 호출!
  storage: multer.diskStorage({
    destination(req, file, done) {
      // done: callback
      done(null, 'uploads/'); // 파일을 업로드할 경로 설정
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 파일 "확장자"를 추출
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  // limits: 파일 제한 정보
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

app.post('/upload/array', upload.array('userfiles'), (req, res) => {
  console.log(req.files); // [ { 파일1_정보 }, { 파일2_정보 }, .. ] : 배열 형태로 각 파일 정보를 출력
  console.log(req.body);
  res.send('하나의 인풋에 여러 파일 업로드 완료!');
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

여러 인풋에 각각의 파일을 업로드

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>Multi file upload v2</h1>
  <p>여러 인풋에 각각의 파일을 업로드</p>
  <form action="/upload/fields" method="POST" enctype="multipart/form-data">
    <input type="file" name="userfile1" /><br />
    <input type="file" name="userfile2" /><br />
    <button type="submit">업로드</button>
  </form>
</body>

</html>

app.js

const express = require('express');
const multer = require('multer');
const app = express();
const PORT = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// multer 관련 설정
const upload = multer({
  // storage: 저장할 공간에 대한 정보
  // done(null, xx) 여기서 null은 error를 의미하는 매개변수
  // 에러가 없으므로 "null"이라고 전달하여 콜백 함수를 호출!
  storage: multer.diskStorage({
    destination(req, file, done) {
      // done: callback
      done(null, 'uploads/'); // 파일을 업로드할 경로 설정
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 파일 "확장자"를 추출
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  // limits: 파일 제한 정보
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

// fields() 매개 변수로 input 태그의 name을 각각 넣기
app.post('/upload/fields', upload.fields([{ name: 'userfile1' }, { name: 'userfile2' }]), (req, res) => {
  console.log(req.files); // { userfile1: [ {파일_정보} ], userfile2: [ {파일_정보} ]} 객체 안에 배열 형태로 각 파일 정보
  console.log(req.body);
  res.send('하나의 인풋에 여러 파일 업로드 완료!');
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

사용법 - fetch API

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>동적 파일 업로드</h1>
  <form>
    <input type="file" name="dynamicUserfile" id="dynamic-file" /><br />
    <button type="submit" class="btn">업로드</button>
  </form>
  <!-- 업로드한 이미지를 보여줄 img 태그 요소 -->
  <img src="" alt="" width="400" />
  <script>
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', (e) => {
      e.preventDefault();
      console.log('동적 파일 업로드');
      // js 만으로 폼을 전송 (파일데이터를 서버로 전송해야 하는 케이스)
      // FormData 객체를 활용하면 쉽게 전송 가능!
      const formData = new FormData();
      const file = document.querySelector('#dynamic-file');
      console.dir(file);
      console.dir(file.files); // 업로드한 파일 객체
      console.dir(file.files[0]); // 업로드한 첫 파일

      // append(key, value)
      formData.append('dynamicUserfile', file.files[0]);

      fetch('/dynamicFile', {
        method: 'post',
        header: {
          'Content-Type': 'multipart/form-data', // enctype="multipart/form-data"
        },
        body: formData
      }).then((response) => {
        return response.json();
      }).then((data) => {
        console.log(data);
        document.querySelector('img').src = '/' + data.path;
      });
    });

  </script>
</body>

</html>

app.js

const express = require('express');
const multer = require('multer');
const app = express();
const PORT = 3000;
const path = require('path');

app.use('/uploads', express.static(__dirname + '/uploads'));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// multer 관련 설정
const upload = multer({
  // storage: 저장할 공간에 대한 정보
  // done(null, xx) 여기서 null은 error를 의미하는 매개변수
  // 에러가 없으므로 "null"이라고 전달하여 콜백 함수를 호출!
  storage: multer.diskStorage({
    destination(req, file, done) {
      // done: callback
      done(null, 'uploads/'); // 파일을 업로드할 경로 설정
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 파일 "확장자"를 추출
      done(null, path.basename(file.originalname, ext) + Date.now() + ext);
    },
  }),
  // limits: 파일 제한 정보
  limits: { fileSize: 5 * 1024 * 1024 }, // 5MB
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

// 동적 폼 전송
app.post('/dynamicFile', upload.single('dynamicUserfile'), (req, res) => {
  console.log(req.file);
  res.send(req.file);
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

JavaScript fetch와 axios 사용법

석미니 — Tue, 22 Aug 2023 17:59:15 +0900

Fetch

비동기 HTTP 통신으로 클라이언트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 Web API

장점

브라우저에서 기본적으로 제공되는 API이므로 추가적인 라이브러리나 의존성 없이 사용 가능
Promise 기반

단점

브라우저 호환성 문제
axios에 비해 기능 부족
- HTTP 에러 처리, 요청 취소 기능 등등
nodejs 환경에서 사용 불가

기본 구조

fetch(url, options)
	.then((response) => console.log(response));

옵션(options)에 들어갈 중요 속성

method : HTTP 요청 메서드 (GET, POST, PUT, DELETE 등)
- 기본값은 GET
headers : HTTP 요청 헤더
- 객체나 String 값들을 가진 객체 리터럴로 제공
body : HTTP 요청에 추가하고자 하는 본문

fetch는 api 요청 시 Response 객체를 반환한다.

response 중요 속성 및 메서드

response.status – HTTP 상태 코드
response.ok - 응답의 성공 여부를 boolean값으로 나타냄
- HTTP 상태 코드가 200과 299 사이일 경우 true
response.text() – 응답을 텍스트를 반환
response.json() – 응답을 JSON 형태로 파싱한 결과로 반환
response.formData() – 응답을 FormData 객체 형태로 반환

get 방식

예시 코드

fetch(url) // fetch는 get 방식이 기본으로 작동, options 생략 가능
  .then((response) => {
    return response.json(); // 응답을 JSON 형태로 파싱한 결과로 반환
  })
  .then((data) => {
    console.log(data); // 결과 출력
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

post 방식

예시 코드

// 보낼 데이터
const dataToSend = {
  title: '제목',
  body: '내용',
  userId: 1,
};

// POST 요청 보내기
fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(dataToSend),
  // js 객체를 json으로 변경
  // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
})
  .then((response) => {
    return response.json(); // 응답을 JSON 형태로 파싱한 결과로 반환
  })
  .then((data) => {
    console.log(data); // 결과 출력
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

Axios

비동기 HTTP 통신으로 클라이언트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 라이브러리

장점

브라우저 호환성이 뛰어남
Promise 기반
브라우저와 nodejs 환경에서 사용 가능

단점

모듈 설치 or 호출을 해줘야 사용이 가능

axios 설치

npm install axios

axios CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

기본 구조

axios({
  url: '/user?ID=12345',
  method: 'get',
}).then((response) => {
  console.log(response.data); // 서버가 제공하는 응답(데이터)
  console.log(response.status); // HTTP 상태 코드
  console.log(response.statusText); // HTTP 상태 메시지
  console.log(response.headers); // HTTP 헤더
  console.log(response.config); // 요청을 위해 'Axios'가 제공하는 구성
});

get 방식

예시 코드

// 방법 1
axios({
  url: '', // 통신하고자 하는 주소
  method: 'get', // HTTP 요청 메서드
  params: { query: '검색어' },
  // URL 파라미터
  // {key: value, key: value}로 작성
  // params 객체 대신 URL에 쿼리스트링과 함께 보낼 수 있음
})
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });


// 방법 2
const options = {
  params: {
    query: '검색어',
  },
};

axios
  .get('url', options)
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

post 방식

예시 코드

// 방법 1
axios({
  url: '', // 통신하고자 하는 주소
  method: 'post', // HTTP 요청 메서드
  data: { userId: 'id', userPw: 'pw' },
  // {key: value, key: value}로 작성
  // method가 put, post, patch 일 때 사용
})
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });


// 방법 2
const data = {
  userId: 'id',
  userPw: 'pw',
};

axios
  .post('url', data)
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

실습

카카오 책 검색 Open API 사용해보기

카카오 책 검색 공식문서 : https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide#search-book

카카오 책 검색 Open API 공식문서 이미지

위 이미지를 코드로 정리해보자면 아래와 같이 바꿀 수 있다.

fetch 버전

const REST_API_KEY = '발급받은 REST_API_KEY';
const query = `?query=검색어`; // 검색어란에 원하는 값을 넣으면 됨

fetch(`https://dapi.kakao.com/v3/search/book${query}`, {
  method: 'get', // get method는 생략 가능
  headers: {
    Authorization: `KakaoAK ${REST_API_KEY}`,
  },
})
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    console.log(data);
  });

axios 버전

const REST_API_KEY = '발급받은 REST_API_KEY';
const options = {
  headers: {
    Authorization: `KakaoAK ${REST_API_KEY}`,
  },
  params: {
    query: '검색어',
  },
};

axios
  .get('https://dapi.kakao.com/v3/search/book', options)
  .then((response) => {
    return response.data;
  })
  .then((data) => {
    console.log(data);
  });

API_KEY 때문에 헷갈리는 경우가 있는데 헤더에 담아서 보내는 경우도 있고, URL 파라미터에 API 키를 같이 담아서 보내는 경우도 있다. 사이트마다 차이가 있는데 해당 사이트 공식문서에서 시키는 대로 하면 된다.

JavaScript 비동기 처리

석미니 — Thu, 17 Aug 2023 12:04:06 +0900

비동기 처리란?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 비동기 처리라고 한다.

왜 비동기 처리일까?

서버로 데이터를 요청 시, 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없음!
비동기 처리가 아니고 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고...

비동기 코드를 처리하기 위한 3가지 방법

callback 함수
promise
async / await

callback(콜백) 함수

JavaScript는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있는데, 인자(매개변수)로 대입되는 함수를 콜백함수라고 한다.
즉, 다른 함수가 실행을 끝낸 뒤 실행되는 함수
함수를 선언할 때는 parameter(인자, 매개변수)로 함수를 받아서 쓸 수 있다.

콜백 함수를 왜 사용할까?

예시 코드

const button = document.querySelector('button');
function sayHello() {
  console.log('hello~~~~');
}
button.addEventListener('click', sayHello);

독립적으로 수행되는 작업도 있는 반면 응답을 받은 이후 처리되어야 하는 종속적인 작업도 있을 수 있으므로 그에 대한 대응 방법이 필요

callback 함수 사용 방법

보통 함수를 선언한 뒤에 함수 타입 파라미터를 맨 마지막에 하나 더 선언해 주는 방식으로 정의

예시 코드

function sum(x, y, callback) {
  const add = x + y;
  callback(add); // 콜백함수 호출
}

function print(result) {
  console.log(result); // sum 함수에서 넘어온 매개변수 출력
}

sum(1, 2, print); // 3

콜백 함수 이해를 돕기 위한 이미지

Promise

비동기 방식으로 작성된 함수를 동기 방식처럼 순서대로 실행할 수 있도록 만들 수 있다. (하지만, 코드는 여전히 비동기 적으로 동작)
성공과 실패를 분리하여 반환
비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행할 수 있는 기능을 가짐

Promise 사용 방법

new Promise 로 만들어서 사용!
- new Promise가 만들어질 때, executor(실행 함수)가 자동으로 실행
- executor의 인수인 reject 와 resolve
- Promise가 생성되면 작업을 실행하고, 작업의 완료 여부를 executor의 매개변수를 통해서 전달
executor 매개변수 (resolve와 reject 모두 callback)
- resolve : 비동기 작업이 성공했을 때
- reject : 비동기 작업이 실패했을 때

Promise의 상태

Pending(대기) : Promise를 수행 중인 상태
Fulfilled(이행) : Promise가 Resolve 된 상태 (성공)
Rejected(거부) : Promise가 지켜지지 못한 상태. Reject 된 상태 (실패)
Settled : fulfilled 혹은 rejected로 결론이 난 상태

Promise의 상태를 설명한 이미지

Promise 메서드

then : Promise가 성공적으로 해결될 때 실행되는 콜백 함수를 등록하는 데 사용
- 이 메서드는 Promise가 해결될 때 그 결과값을 콜백 함수의 인자로 받아 처리할 수 있음
- 여러 개의 then 메서드를 체이닝하여 순차적으로 작업을 수행할 수 있음
  - 즉, 앞에서 return 한 값을 다음 then에서 매개변수로 이어 받을 수 있음
catch : Promise에서 발생한 오류를 처리하기 위한 콜백 함수를 등록하는 데 사용
- Promise 체인에서 어떤 위치에서든 오류가 발생하면 해당 오류를 처리하고 계속 체인을 이어나갈 수 있음
finally : Promise가 성공 또는 실패와 관계없이 마지막으로 실행되는 콜백 함수를 등록하는 데 사용
- 네트워크 요청을 보낸 후에 무조건 수행되어야 하는 정리 작업이나 리소스 해제 작업을 처리할 때 유용
- Ex) loading... 여부 등등

예시 코드

function promise1(flag) {
  return new Promise(function (resolve, reject) {
    if (flag) {
      resolve('promise 상태는 fulfilled!! then으로 연결됩니다. \n 이때의 flag가 true입니다.');
    } else {
      reject('promise 상태는 rejected!! catch로 연결됩니다. \n 이때의 flag는 false입니다.');
    }
  });
}

promise1(true)
  .then((result) => {
    console.log(result);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log('끝');
  });

// 결과
/*
  promise 상태는 fulfilled!! then으로 연결됩니다.
   이때의 flag가 true입니다.
  끝
*/

promise1(false)
  .then((result) => {
    console.log(result);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log('끝');
  });

// 결과
/*
  promise 상태는 rejected!! catch로 연결됩니다.
   이때의 flag가 false입니다.
  끝
*/


/** 여러 개의 then 메서드를 체이닝 */
function promise2() {
  return new Promise(function (resolve, reject) {
    resolve(1);
  });
}

promise2()
  .then((result) => {
    console.log(result); // 1
    return result * 2;
  })
  .then((result) => {
    console.log(result); // 2
    return result * 2;
  })
  .then((result) => {
    console.log(result); // 4
  });

Async / Await

프로미스 기반 코드를 좀 더 쓰기 쉽고 읽기 쉽게 하기 위해 등장
기능이 추가된 것이 아닌, Promise를 다르게 사용하는 것
에러는 try...catch로 핸들링

async

함수 앞에 붙여 Promise를 반환
프로미스가 아닌 값을 반환해도 프로미스로 감싸서 반환

await

'기다리다' 라는 뜻을 가진 영단어
프로미스 앞에 붙여 프로미스가 다 처리될 때까지 기다리는 역할을 하며 결과는 그 후에 반환

예시 코드

function delay(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(ms);
    }, ms);
  });
}

async function print() {
  console.log('1'); // 1
  try {
    const result = await delay(1000); // 1초를 기다리고 반환값을 result라는 변수에 저장
    console.log(result); // 1000
  } catch (err) {
    console.log('Error!', err);
  }
  console.log('2'); // 2
}

print();

// 출력
/*
  1
  1000
  2
*/

언제 어디서 어떻게 써야 할까?

영화 API를 가지고 박스 오피스 영화 순위, 순위에 맞는 영화 정보와 영화 예고편을 보여주는 사이트를 만든다고 가정해보자.
하지만 1개의 사이트에서 모든 정보를 제공하지 않는다. 찾아보니 3개의 API를 합치면 만들 수 있을 거 같다.
A 사이트에서 박스 오피스 영화 순위를 제공, B 사이트는 영화 정보를 제공, C 사이트는 영화 예고편을 제공해 주는 API가 있다고 해보자.

A 사이트에서 박스 오피스 순위 정보를 가지고 와서 B와 C 사이트에 해당 영화 순위에 맞는 정보와 예고편을 API 요청을 해야 한다.

위 내용을 순서대로 표현하면,

A 사이트에서 현재 박스 오피스 순위 정보를 가져온다.
가져온 순위 정보에 따라 B 사이트와 C 사이트에 영화 정보와 예고편을 요청한다.
B 사이트에서 해당 순위의 영화 정보를 받아오고, C 사이트에서 해당 순위의 영화 예고편을 받아온다.
받아온 영화 정보와 예고편을 화면에 그린다.

그림으로 표현하자면 아래와 같다.

예시 코드

async function getFromSiteA() {
  const url = '해당 사이트 url';
  const params = '가져올 정보';
  const response = await fetch(url + params);
  const data = await response.json();
  return data;
}

async function getFromSiteB(movieRankings) {
  const url = '해당 사이트 url';
  const dataList = [];
  for (const params of movieRankings) {
    const response = await fetch(url + params);
    const data = await response.json();
    dataList.push(data);
  }
  return dataList;
}

async function getFromSiteC(movieRankings) {
  const url = '해당 사이트 url';
  const dataList = [];
  for (const params of movieRankings) {
    const response = await fetch(url + params);
    const data = await response.json();
    dataList.push(data);
  }
  return dataList;
}

function displayMovieInfo(movieInfoList) {
  // 영화 정보를 그려주는 코드
}

function displayMovieTrailer(movieTrailerList) {
  // 영화 예고편을 그려주는 코드
}

async function main() {
  try {
    const movieRankings = await getFromSiteA(); // A 사이트에서 가져온 오피스 박스 순위를 movieRankings에 저장
    const movieInfoList = await getFromSiteB(movieRankings); // movieRankings 정보를 가지고 B 사이트에 정보 요청
    const movieTrailerList = await getFromSiteC(movieRankings); // movieRankings 정보를 가지고 C 사이트애 정보 요청

    displayMovieInfo(movieInfoList); // B 사이트에서 가져온 결과 값을 화면에 그려줌
    displayMovieTrailer(movieTrailerList); // C 사이트에서 가져온 결과 값을 화면에 그려줌
  } catch (err) {
    console.log('Error!', err);
  }
}

main();

위 코드를 순서대로 설명하면 아래와 같다.

A 사이트에 정보를 요청하고 끝날 때까지 기다린다.
A 사이트 응답이 끝나면 A 정보를 가지고 B 사이트에 정보를 요청하고 끝날 때까지 기다린다.
B 사이트 응답이 끝나면 A 정보를 가지고 C 사이트에 정보를 요청하고 끝날 때까지 기다린다.
C 사이트 응답이 끝나면 화면에 그려준다.

이 코드는 정상 동작은 하는데 약간 아쉬움이 있다.

B와 C는 서로 무관한데 getFromSiteC 함수를 쓰기 위해서는 getFromSiteB 함수가 끝날 때까지 기다려야 한다.
즉, getFromSiteB 함수 요청 시간이 2초, getFromSiteC 함수 요청 시간이 5초 이면 총 7초를 기다려야 한다.

위 코드를 개선하면 아래 코드로 바꿀 수 있다.

async function getFromSiteA() {
  const url = '해당 사이트 url';
  const params = '가져올 정보';
  const response = await fetch(url + params);
  const data = await response.json();
  return data;
}

async function getFromSiteB(movieRankings) {
  const url = '해당 사이트 url';
  const dataList = [];
  for (const params of movieRankings) {
    const response = await fetch(url + params);
    const data = await response.json();
    dataList.push(data);
  }
  return dataList;
}

async function getFromSiteC(movieRankings) {
  const url = '해당 사이트 url';
  const dataList = [];
  for (const params of movieRankings) {
    const response = await fetch(url + params);
    const data = await response.json();
    dataList.push(data);
  }
  return dataList;
}

function displayMovieInfo(movieInfoList) {
  // 영화 정보를 그려주는 코드
}

function displayMovieTrailer(movieTrailerList) {
  // 영화 예고편을 그려주는 코드
}

async function main() {
  try {
    const movieRankings = await getFromSiteA(); // A 사이트에서 가져온 오피스 박스 순위를 movieRankings에 저장

    const [movieInfoList, movieTrailerList] = await Promise.all([
      getFromSiteB(movieRankings),
      getFromSiteC(movieRankings),
    ]);
    // movieRankings 정보를 가지고 B 사이트와 C 사이트에 동시에 요청을 한다. 두개 함수 중 늦게 끝나는 함수 기준으로 결과값을 반환
    // await Promise.all에서 리턴값으로 배열이 반환되는데 구조 분해를 통해 movieInfoList와 movieTrailerList 변수에 결과값을 대입한다.

    displayMovieInfo(movieInfoList); // B 사이트에서 가져온 결과 값을 화면에 그려줌
    displayMovieTrailer(movieTrailerList); // C 사이트에서 가져온 결과 값을 화면에 그려줌
  } catch (err) {
    console.log('Error!', err);
  }
}

main();

Promise.all 메서드를 사용하면 getFromSiteB 함수와 getFromSiteC 함수를 동시에 실행하고 늦게 끝나는 함수 기준으로 결과값을 반환한다.

위 코드를 순서대로 설명하면 아래와 같다.

A 사이트에 정보를 요청하고 끝날 때까지 기다린다.
A 사이트 응답이 끝나면 A 정보를 가지고 B 사이트와 C 사이트에 동시에 정보를 요청한다.
B, C 사이트 중 응답이 늦게 끝나는 함수 기준으로 결과값을 반환한다.
B, C 사이트 응답이 끝나면 화면에 그려준다.

즉, getFromSiteB 함수 요청시간이 2초, getFromSiteC 함수 요청 시간이 5초 이면 총 5초만 기다리면 된다.
개선 이전 코드보다 2초를 더 줄일 수 있다.

Promise.all 메서드 예시 코드

function delay(ms, message) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(message);
    }, ms);
  });
}

async function sequentialExecution() {
  console.time('순차적 실행');
  const result1 = await delay(2000, '첫번째');
  const result2 = await delay(5000, '두번째');
  console.log(result1, result2, '<<=== 순차적 실행');
  console.timeEnd('순차적 실행');
}

async function parallelExecutionWithPromiseAll() {
  console.time('Promise.all');
  const [result1, result2] = await Promise.all([delay(2000, '첫번째'), delay(5000, '두번째')]);
  console.log(result1, result2, '<<=== Promise.all');
  console.timeEnd('Promise.all');
}

sequentialExecution(); // 걸리는 시간 7초
parallelExecutionWithPromiseAll(); // 걸리는 시간 5초

Promise.all 메서드를 사용 할 때에는, 등록한 프로미스 중 하나라도 실패하면, 모든게 실패 한 것으로 간주한다.

이를 해결 하려면 Promise.allSettled 메서드를 참고하면 되겠다.

JavaScript 배열 메서드 정리

석미니 — Tue, 15 Aug 2023 13:11:37 +0900

원본 배열 수정하는 메서드

push

배열의 끝에 하나 이상의 요소를 추가

const originalArray = [1, 2, 3];
originalArray.push(4, 5);
console.log(originalArray); // [1, 2, 3, 4, 5]

pop

배열의 마지막 요소를 제거하고 해당 요소를 반환

const originalArray = [1, 2, 3];
const removedElement = originalArray.pop(); // 3
console.log(removedElement); // 3
console.log(originalArray); // [1, 2]

unshift

배열의 시작 부분에 하나 이상의 요소를 추가

const originalArray = [2, 3];
originalArray.unshift(1);
console.log(originalArray); // [1, 2, 3]

shift

배열의 첫 번째 요소를 제거하고 해당 요소를 반환

const originalArray = [1, 2, 3];
const removedElement = originalArray.shift();
console.log(removedElement); // 1
console.log(originalArray); // [2, 3]

splice

배열에서 요소를 제거하거나 새로운 요소를 삽입하여 배열을 수정

array.splice(start[, deleteCount[, addItem1[, addItem2[, ...]]]])

start : 배열의 변경을 시작할 인덱스
- 음수인 경우 배열의 끝에서부터 요소를 세어나감
deleteCount : 배열에서 제거할 요소의 수
- 0 이하라면 어떤 요소도 제거하지 않음
addItem : 배열에 추가할 요소
- 아무 요소도 지정하지 않으면 splice()는 요소를 제거하기만 함

const originalArray = [1, 2, 3, 4, 5];
originalArray.splice(1, 2); // [2, 3] 제거
console.log(originalArray); // [1, 4, 5]

originalArray.splice(1, 0, 6, 7); // 인덱스 1에 6과 7 삽입
console.log(originalArray); // [1, 6, 7, 4, 5]

reverse

배열의 요소 순서를 역순으로 변경

const originalArray = [1, 3, 2, 4];
originalArray.reverse();
console.log(originalArray); // [4, 2, 3, 1]

sort

배열의 요소를 정렬

기본적으로는 문자열로 변환하여 정렬 (참고 사이트)
비교 함수를 제공하여 사용자 정의 정렬 기준을 설정

const originalArray = [3, 1, 2];
originalArray.sort((a, b) => a - b);
console.log(originalArray); // [1, 2, 3] # 오름차순 정렬하기

originalArray.sort((a, b) => b - a);
console.log(originalArray); // [3, 2, 1] # 내림차순 정렬하기

원본 배열의 일부를 복사하여 새로운 배열을 반환하는 메서드

원본 배열은 변경되지 않는다.

slice

원본 배열의 일부를 추출하여 새 배열을 반환

arr.slice([begin[, end]])

begin : 시작점에 대한 인덱스
- 음수인 경우 배열의 끝에서부터 길이를 나타냄
- undefined인 경우에는, 0번 인덱스부터 시작
- 배열의 길이보다 큰 경우에는, 빈 배열을 반환
end : 종료점에 대한 인덱스
- end 인덱스를 제외하고 추출
- 음수 인덱스는 배열의 끝에서부터의 길이를 나타냄
- end가 생략되면 배열의 끝까지 추출

const originalArray = [1, 2, 3, 4, 5];
const newArray = originalArray.slice(1, 4);
console.log(newArray); // [2, 3, 4]
console.log(originalArray); // [1, 2, 3, 4, 5]

concat

두 개 이상의 배열을 결합하여 새로운 배열을 반환

const array1 = [1, 2];
const array2 = [3, 4];
const newArray = array1.concat(array2);
console.log(newArray); // [1, 2, 3, 4]
console.log(array1); // [1, 2]
console.log(array2); // [3, 4]

filter

조건에 따라 원본 배열의 일부 요소를 선택하여 새로운 배열을 반환

const originalArray = [1, 2, 3, 4, 5];
const filteredArray = originalArray.filter(item => item > 2);
console.log(newArray); // [3, 4, 5]
console.log(originalArray); // [1, 2, 3, 4, 5]

map

원본 배열의 각 요소를 변환하여 새로운 배열을 생성

const originalArray = [1, 2, 3];
const newArray = originalArray.map(item => item * 2);
console.log(newArray); // [2, 4, 6]
console.log(originalArray); // [1, 2, 3]

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다.

developer.mozilla.org

맥북 에어(M1) 듀얼 모니터 사용하기

석미니 — Tue, 15 Aug 2023 10:51:25 +0900

맥북 에어(M1 칩) 듀얼 모니터 사용하기 (클램쉘 모드)

원래 M1 Pro 칩 이상부터 외장 모니터 수를 2대씩 지원하는데 M1 칩으로 듀얼 모니터를 사용하기 위해선 여러 방법이 있는데 그 중 한가지 방법을 소개함

맥북 에어 듀얼모니터 이미지

준비물

USB 3.0 이상 지원이 되고 HDMI가 있는 멀티 허브
외장 모니터 2대
HDMI 디스플레이 아댑터 변환젠더 (NEXT-JUA354)

NEXT-JUA354

NEXT-JUA354 제품 이미지

해당 제품은 4K 30Hz 또는 1080p 60Hz를 지원한다.

나의 모니터는 QHD(1440p) 한대와 1080 모니터 한대여서 4K는 체험해보지 못했다.

USB 3.0 포트에 JUA354 연결하기

USB 3.0 포트에 JUA354 제품을 연결한 이미지

JUA354 드라이버 다운로드

https://en.j5create.com/pages/drivers/#jua354-show

Drivers & Downloads - j5create

Download the latest drivers, manuals, quick install guides, and view important updates for your j5create products.

en.j5create.com

JUA354 드라이버 다운로드 사이트 이미지

위 링크에 들어가서 해당 맥북 버전에 맞는 드라이버 다운로드 후 맥북 재실행

드라이브 설치 과정 이미지

맥북 버전 확인 방법

좌측 상단 애플 로고 클릭
이 Mac에 관하여(About This Mac) 클릭
macOS 버전 확인

설치 후 시스템 설정

프로그램 설치 후 맥북을 재실행하고, 응용프로그램에 USB Display Device 라는 프로그램을 실행

JUA354 프로그램 이미지

위 이미지에서 빨간색 동그라미를 친 부분을 클릭하고 Show Diagnostics... 버튼을 클릭

JUA354 프로그램 실행 이미지

위 이미지처럼 나오면 아래 이미지 순서대로 설정해주면 된다.

프로그램 설정에 관한 이미지

좌측 상단 애플로고 - 시스템 설정 - 개인정보 보호 및 보안 (밑으로 쭉 스크롤 후 세부사항... 클릭)
USB Display Device 버튼 활성화하고 확인
화면 기록 알람창이 뜨면 시스템 설정 열기 버튼 클릭
화면 기록에서 DJTVirtualDisplayAgent 버튼 활성화
맥북 재실행

위 순서대로 진행하고 나면 듀얼 모니터가 연결되어 있는 모습을 볼 수 있다.

맥북 에어(M1 칩) 듀얼 모니터 연결 후 장, 단점

장점

저렴한 가격으로 외장 모니터 2대 사용 가능

단점

넷플릭스나 쿠팡 플레이 시청시 소리만 나옴 (외장 모니터 1개 빼야 볼 수 있음) | 유튜브는 잘나옴
보조 모니터로 쓰기엔 적합하나 주 모니터로 쓰기에는 약간 버벅임? 현상이 있음

결론 : 맥북을 클램쉘 모드 사용해서 2개의 모니터를 쓸거면 맥 미니가 낫지 않을까?

제품 링크

USB 3.0 지원 가능한 멀티 허브

https://link.coupang.com/a/6QCkN

애니포트 5포트 C타입 맥북 삼성 덱스 미러링 멀티포트 USB 허브 AP-TC51PH

COUPANG

www.coupang.com

NEXT-JUA354

https://link.coupang.com/a/6QDDr

넥스트 USB3.0 to 4K HDMI 디스플레이 아답터 변환젠더

COUPANG

www.coupang.com

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

[새싹x코딩온] 웹 개발자 부트캠프 4주차 | Express

석미니 — Mon, 14 Aug 2023 06:26:17 +0900

Express란?

NodeJS를 사용하여 쉽게 웹 서버를 생성하는 것과 관련된 기능을 담당하는 프레임워크

웹 애플리케이션을 만들기 위한 각종 메소드와 미들웨어 등이 내장되어 있다.
라우팅, 인증, 데이터베이스 연결, 에러 처리 등 다양한 기능을 제공한다.

Express 설치

npm install express

Express 사용

app.js

const express = require('express');
// Node.js의 CommonJS 모듈 시스템을 사용하여 'express' 모듈을 가져옴

const app = express();
// express() 함수를 호출하여 새로운 Express 애플리케이션 객체 app을 만듦

const PORT = 8000;
// 서버가 사용할 포트 번호를 8000으로 설정

app.get('/', function (req, res) {
// '/' 경로로 들어오는 GET 요청을 처리
  res.send('hello express');
  // 응답 객체의 send 메서드를 사용하여 클라이언트로 'hello express' 문자열을 보냄
});


app.listen(PORT, function () {
// 서버를 시작하고 포트 8000에서 수신 대기하도록 설정
  console.log(`Listening on port ${PORT}! http://localhost:${PORT}`);
});

서버 실행

node app.js

Express 미들웨어

미들웨어란?

요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것
서버와 클라이언트를 이어주는 중간 작업
use() 를 이용해 등록할 수 있다.

미들웨어를 설명하는 이미지

쉽게 말해 클라이언트와 서버 사이에서 통역사 역할을 해준다고 보면 된다.

자주 쓰는 내장 미들웨어

클라이언트로부터 오는 요청 데이터를 서버에서 사용할 수 있는 형식으로 파싱하는 역할

app.use(express.urlencoded({ extended: true })); // URL 인코딩된 데이터 파싱
app.use(express.json()); // JSON 데이터 파싱

정적 파일을 제공하기 위해 사용

app.use('/public', express.static(__dirname + '/static'));
// /public 경로로 들어오는 요청을 현재 파일의 디렉토리에 위치한 'static' 디렉토리 안의 정적 파일로 제공하도록 설정합니다.
// 이렇게 함으로써 예를 들어 이미지 파일이나 다른 정적 파일들을 웹 브라우저에서 직접 접근할 수 있게 됩니다.

클라이언트와 서버 데이터 전송 방법

form 태그 이용 방법

GET 방식

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>GET 방식</h1>
  <form action="/getForm" method="get">
    <div>
      <input type="text" name="id" placeholder="ID" required />
    </div>
    <div>
      <input type="password" name="pw" placeholder="PW" required />
    </div>
    <div>
      <button type="submit">제출</button>
    </div>
  </form>
</body>

</html>

app.js

const express = require('express');
const app = express();
const PORT = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

// GET 방식은 클라이언트에서 보낸 데이터가 req.query에 저장
app.get('/getForm', (req, res) => {
  console.log(req.query);
  res.send(req.query);
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

POST 방식

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>POST 방식</h1>
  <form action="/postForm" method="post">
    <div>
      <input type="text" name="id" placeholder="ID" required />
    </div>
    <div>
      <input type="password" name="pw" placeholder="PW" required />
    </div>
    <div>
      <button type="submit">제출</button>
    </div>
  </form>
</body>

</html>

app.js

const express = require('express');
const app = express();
const PORT = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

// POST 방식은 클라이언트에서 보낸 데이터가 req.body에 저장
app.post('/postForm', (req, res) => {
  console.log(req.body);
  res.send(req.body);
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

fetch API 이용 방법

GET 방식

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>GET 방식</h1>
  <form class="form">
    <div>
      <input type="text" name="id" placeholder="ID" required />
    </div>
    <div>
      <input type="password" name="pw" placeholder="PW" required />
    </div>
    <div>
      <button type="submit" class="btn">제출</button>
    </div>
  </form>

  <script>
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', (e) => {
      e.preventDefault();
      const form = document.querySelector('.form');
      const id = form.id.value;
      const pw = form.pw.value;
      const query = `?id=${id}&pw=${pw}`;

      fetch(`/getFetch${query}`).then((response) => {
        return response.json();
      }).then((data) => {
        console.log(data);
      })
    })
  </script>
</body>

</html>

app.js

const express = require('express');
const app = express();
const PORT = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

// GET 방식은 클라이언트에서 보낸 데이터가 req.query에 저장
app.get('/getFetch', (req, res) => {
  console.log(req.query);
  res.send(req.query);
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

POST 방식

views/index.html

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>폼 전송</title>
</head>

<body>
  <h1>POST 방식</h1>
  <form class="form">
    <div>
      <input type="text" name="id" placeholder="ID" required />
    </div>
    <div>
      <input type="password" name="pw" placeholder="PW" required />
    </div>
    <div>
      <button type="submit" class="btn">제출</button>
    </div>
  </form>

  <script>
    const btn = document.querySelector('.btn');

    btn.addEventListener('click', (e) => {
      e.preventDefault();
      const form = document.querySelector('.form');
      const id = form.id.value;
      const pw = form.pw.value;

      const data = {
        id,
        pw,
      };

      fetch(`/postFetch`, {
        method: 'post',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
      }).then((response) => {
        return response.json();
      }).then((data) => {
        console.log(data);
      })
    })
  </script>
</body>

</html>

app.js

const express = require('express');
const app = express();
const PORT = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/views/index.html'));
});

// post 방식은 클라이언트에서 보낸 데이터가 req.body에 저장
app.post('/postFetch', (req, res) => {
  console.log(req.body);
  res.send(req.body);
});

app.listen(PORT, () => {
  console.log('연결 성공');
});

결과 화면

요청 성공 결과 이미지

Git 대용량 파일 저장 방법

석미니 — Mon, 7 Aug 2023 00:11:45 +0900

Git에 대용량 파일 저장하는 방법

# Git LFS 설치

brew install git-lfs

git lfs install

# 대용량 파일 LFS로 추적

git lfs track "assets/video/iphone77.mp4"

"*.확장자명" 해주면 모든 확장자 파일을 추가 할 수 있다.

# 변경사항 다시 커밋

git add .gitattributes
git commit -m "Track large video file with LFS"

# 변경사항 푸시

git push origin main

Git에 대용량 파일 다운로드하는 방법

# Git LFS 설치

brew install git-lfs

git lfs install

# 대용량 파일 받아오기

git lfs fetch
git lfs checkout

[CSS] display: flex (flexbox) 정리

석미니 — Sat, 29 Jul 2023 04:50:27 +0900

flexbox의 등장 배경

기존의 CSS 레이아웃 방법은 복잡하고 어려움
기존의 CSS 레이아웃 방법은 유연성이 부족
모바일 웹의 등장으로 유동적인 레이아웃이 필요

flexbox를 제외한 속성들로 아래 이미지 레이아웃을 코드로 작성해보자

header 레이아웃 이미지

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      header {
        background-color: gainsboro;
        padding: 0px 20px;
      }
      header .wrap {
        position: relative;
        line-height: 50px;
        text-align: center;
      }
      header .wrap .logo,
      header .wrap .login {
        position: absolute;
        top: 0;
        bottom: 0;
      }
      header .wrap .logo {
        left: 0;
      }
      header .wrap .login {
        right: 0;
      }
      header .wrap nav {
        display: inline-block;
      }
      header .wrap .menus li {
        display: inline-block;
        margin: 0 10px;
      }
      header a {
        color: #000;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="wrap">
        <div class="logo"><a href="#">로고</a></div>
        <nav>
          <ul class="menus">
            <li><a href="#">MENU1</a></li>
            <li><a href="#">MENU2</a></li>
            <li><a href="#">MENU3</a></li>
          </ul>
        </nav>
        <div class="login">
          <a href="#">로그인</a>
        </div>
      </div>
    </header>
  </body>
</html>

위 코드가 정답은 아니지만 이렇게 간단한 레이아웃을 짜는데도 복잡해진다.
나중 flexbox를 배우고 난 이후에 해당 코드와 비교해보자.
TMI
나는 이전 회사가 지방자치단체, 교육기관 홈페이지 개발 위주였는데 퍼블리싱 할 때마다 flex를 못쓰게 해서(IE9까지 맞춰야 됨) 눈물 흘리면서 코드를 짰다. 반응형 들어갈 때는 콧물까지 흐른 기억이 난다.

flexbox의 기본 용어

flex-container: flex 속성을 갖는 요소로 flex 부모 요소

flex-items: flex 속성을 갖는 요소의 자식 요소들로 flex 자식 요소

flex-container와 flex-items를 설명한 이미지

주축 (main axis): 아이템의 배치 방향의 축

교차축 (cross axis): 주축의 수직축

아래 이미지는 아이템들이 수평으로 있을 때 주축과 교차축

아이템들이 수평으로 있을 때 주축과 교차축 설명한 이미지

아래 이미지는 아이템들이 수직으로 있을 때 주축과 교차축

아이템들이 수직으로 있을 때 주축과 교차축을 설명한 이미지

flexbox의 속성

flexbox 컨테이너에 적용하는 속성

flexbox 속성을 사용하기 위해선 우선 컨테이너에 display: flex를 설정해 주셔야 아래 속성들을 사용 가능합나다.

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: skyblue;
        height: 100vh;
        display: flex;
        /* 여기에 아래 속성들 들어갈 자리 */
      }
      .container .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #000;
      }
      .container .item1 {
        background-color: red;
      }
      .container .item2 {
        background-color: orange;
      }
      .container .item3 {
        background-color: yellow;
      }
      .container .item4 {
        background-color: green;
      }
      .container .item5 {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
  </body>
</html>

flex-direction

아이템들이 배치되는 방향을 설정 (주축 방향 설정)

row(default): 수평 정렬 (좌 → 우)
row-reverse: 수평 정렬 (우 → 좌)
column: 수직 정렬(위 → 아래)
column-reverse: 수직 정렬 (아래 → 위)

flex-direction:

row; row-reverse; column; column-reverse;

주축 (main axis)

교차축 (cross axis)

justify-content

주축을 따라 아이템들을 어떻게 정렬할지 설정

flex-start(default): 아이템들을 시작점으로 정렬
- flex-direction 속성이 row(수평)일 때는 왼쪽, column(수직)일 때는 위
flex-end: 아이템들을 끝점으로 정렬
- flex-direction이 row(수평)일 때는 오른쪽, column(수직)일 때는 아래
center: 아이템들을 가운데로 정렬
space-between: 양쪽 여백을 없애고 나머지 아이템들이 공간을 나누어 갖는다.
space-around: 아이템들의 여백을 모두 공평하게 나누어 갖는다.
space-evenly: 모든 아이템들의 간격이 일정

justify-content:

flex-start; flex-end; center; space-between; space-around; space-evenly;

space-around와 space-evenly의 차이점

space-around와 space-evenly의 차이를 설명한 이미지

align-items

교차 축을 따라 아이템들을 어떻게 정렬할지 설정

stretch(default): 아이템 크기 설정이 없으면 부모 요소의 세로 크기를 따라 확장
flex-start: 아이템들을 시작점으로 정렬
- flex-direction 속성이 row(수평)일 때는 위, column(수직)일 때는 왼쪽
flex-end: 아이템들을 끝점으로 정렬
- flex-direction이 row(수평)일 때는 아래, column(수직)일 때는 오른쪽
center: 아이템들을 가운데로 정렬
baseline: 아이템 텍스트 baseline 기준으로 정렬

align-items:

stretch; flex-start; flex-end; center; baseline;

baseline 이해하기 쉬운 이미지

baseline 설명 이미지

flex-wrap

컨테이너(부모)가 한 줄에 아이템을 다 수용하지 못할 때, 줄바꿈 관련 설정

nowrap(default): 줄 바꿈 하지 않고 넘치면 삐져 나감
wrap: 넘치면 줄 바꿈함
wrap-reverse: 넘치면 역순으로 줄 바꿈

wrap, wrap-reverse에서 드래그바를 움직여 보세요.

flex-wrap:

nowrap; wrap; wrap-reverse;

align-content

여러 줄이 있을 때 교차 축을 따라 줄들을 어떻게 정렬할지 설정 (두 줄 이상 이루어진 플렉스 컨테이너에만 적용)

※ 여러 줄일 경우 align-items 속성 대신 align-content 속성이 적용된다.

stretch(default): 아이템 크기 설정이 없으면 부모 요소의 세로 크기를 따라 확장
flex-start: 아이템들을 시작점으로 정렬
- flex-direction 속성이 row(수평)일 때는 위, column(수직)일 때는 왼쪽
flex-end: 아이템들을 끝점으로 정렬
- flex-direction이 row(수평)일 때는 아래, column(수직)일 때는 오른쪽
center: 아이템들을 가운데로 정렬
space-between: 양쪽 여백을 없애고 나머지 아이템들이 공간을 나누어 갖는다.
space-around: 아이템들의 여백을 모두 공평하게 나누어 갖는다.
space-evenly: 모든 아이템들의 간격이 일정

flex-wrap: wrap;

align-content:

stretch; flex-start; flex-end; center; space-between; space-around; space-evenly;

space-around와 space-evenly의 차이점

space-around와 space-evenly의 차이를 설명한 이미지

Tip. flex에서 아이템 사이 간격 주는 방법
column-gap: 수평일 때 아이템 사이 여백 사이즈를 줄 수 있다.
row-gap: 수직일 때 아이템 사이 여백 사이즈를 줄 수 있다.
※ margin처럼 아이템 양끝 여백을 신경 안 써도 된다.

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        display: flex;
        background-color: skyblue;
        height: 300px;
      }
      .container .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
      }
      .container .item1 {
        background-color: blue;
      }
      .container .item2 {
        background-color: green;
      }
      .container .item3 {
        background-color: red;
      }
      .container1 {
        flex-direction: row;
        column-gap: 20px;
      }
      .container2 {
        flex-direction: column;
        row-gap: 20px;
      }
    </style>
  </head>
  <body>
    <p>flex-direction: row;</p>
    <div class="container container1">
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
    </div>
    <p>flex-direction: column;</p>
    <div class="container container2">
      <div class="item item1"></div>
      <div class="item item2"></div>
      <div class="item item3"></div>
    </div>
  </body>
</html>

아래는 연습을 위해 flexbox 컨테이너 속성을 모아놓았습니다.
stretch 효과를 보기위해 아이템들 사이즈는 설정을 안했습니다.
헷갈리시면 아이템 사이즈 설정을 체크해 주세요 !

flexbox 아이템에 적용하는 속성

아이템에 적용하는 속성은 아이템 전체로 주거나 아이템 한 개씩 컨트롤을 할 수 있다.

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: skyblue;
        height: 100vh;
        display: flex;
      }
      .container .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #000;
        /* 여기에 아래 속성들 들어갈 자리 */
      }
      .container .item1 {
        background-color: red;
      }
      .container .item2 {
        background-color: orange;
      }
      .container .item3 {
        background-color: yellow;
      }
      .container .item4 {
        background-color: green;
      }
      .container .item5 {
        background-color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
    </div>
  </body>
</html>

flex-basis

Flex 아이템의 기본 크기를 설정 (flex-direction이 row일 때는 너비, column일 때는 높이)

auto(default): 아이템의 원래 너비 적용
content: 아이템의 크기는 내부 콘텐츠의 크기에 따라 결정
px, %, em 등

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: skyblue;
        display: flex;
        height: 300px;
      }
      .container .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #000;
      }
      .container .item1 {
        background-color: red;
        flex-basis: 400px;
      }
      .container .item2 {
        background-color: orange;
        flex-basis: 200px;
      }
      .container .item3 {
        background-color: yellow;
        flex-basis: auto;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
  </body>
</html>

결과 화면

flex-grow

자식 요소가 적거나 크기가 작아 컨테이너에 공간이 남을 때 빈 공간을 메울만큼 늘어나도록 설정하는 속성

0(default): 아이템의 원래 너비 적용
양수: 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 됨

flex-grow:

0; 1;

응용 코드 (아이템 개별 속성 지정)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: skyblue;
        height: 300px;
        display: flex;
      }
      .container .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #000;
      }
      .container .item1 {
        background-color: red;
        flex-grow: 1;
      }
      .container .item2 {
        background-color: orange;
        flex-grow: 2;
      }
      .container .item3 {
        background-color: yellow;
        flex-grow: 3;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
  </body>
</html>

결과 화면 (1:2:3 비율로 커짐)

flex-shrink

아이템들이 컨테이너 내에서 사용 가능한 공간보다 작을 때 어떻게 줄어들지를 결정하는 데 사용

1(default): 모든 아이템들이 동등하게 줄어든다.
0: 해당 아이템은 줄어들지 않는다.
- 일반적으로 아이템이 컨테이너의 사용 가능한 공간보다 크기를 유지해야 하는 경우에 유용
양수: 아이템이 줄어드는 비율

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: skyblue;
        display: flex;
        height: 300px;
      }
      .container .item {
        flex-basis: 100px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #000;
      }
      .container .item1 {
        background-color: red;
        flex-shrink: 1;
      }
      .container .item2 {
        background-color: orange;
        flex-shrink: 2;
      }
      .container .item3 {
        background-color: yellow;
        flex-shrink: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
  </body>
</html>

결과 화면 (드래그바를 이용해 컨테이너 사이즈를 줄여보세요.)

flex

flex-grow, flex-shrink, flex-basis 속성을 한 줄에 축약해서 사용할 수 있도록 해주는 단축 속성 (순서 지켜야 함)

flex-grow flex-shrink flex-basis;
- Ex) flex: 1 0 100px;
- /* flex-grow: 1, flex-shrink: 0, flex-basis: 100px; */

flex-basis, flex-grow, flex-shrink 속성은 저도 잘 써보지 않아서 설명이 좀 미흡하네요 ㅠ
나중에 개념이 좀 더 잡히면 내용을 추가하도록 하겠습니다~!

order

각 아이템들의 시각적 나열 순서를 결정하는 속성

※ 참고 : order 속성을 사용하면 실제 DOM 순서와 화면에 보여지는 콘텐츠의 순서가 서로 연결되지 않기 때문에, 시각으로 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있음

0(default): 순서를 바꾸지 않음
양수: 원하는 순서를 지정
음수: 좌측으로 자리를 바꾸는 횟수

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: skyblue;
        display: flex;
        height: 300px;
      }
      .container .item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        color: #000;
      }
      .container .item1 {
        background-color: red;
        order: 1;
      }
      .container .item2 {
        background-color: orange;
        order: 0;
      }
      .container .item3 {
        background-color: yellow;
        order: -1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
  </body>
</html>

결과 화면

align-self

자식 요소 중 선택된 항목에 대해서만 교차축으로 다시 정렬하는 속성

auto(default): align-items 설정을 상속
stretch: 아이템 크기 설정이 없으면 부모 요소의 세로 크기를 따라 확장
flex-start: 아이템을 시작점으로 정렬
- flex-direction 속성이 row(수평)일 때는 위, column(수직)일 때는 왼쪽
flex-end: 아이템을 끝점으로 정렬
- flex-direction이 row(수평)일 때는 아래, column(수직)일 때는 오른쪽
center: 아이템을 가운데로 정렬
baseline: 아이템 텍스트 baseline 기준으로 정렬

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex</title>
    <style>
      .container {
        background-color: skyblue;
        display: flex;
        height: 300px;
      }
      .container .item {
        padding: 30px;
        text-align: center;
        color: #000;
      }
      .container .item1 {
        background-color: red;
      }
      .container .item2 {
        background-color: orange;
        align-self: center;
      }
      .container .item3 {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
    </div>
  </body>
</html>

결과 화면

이제 처음에 보았던 이미지를 flex를 이용하여 만들어 보자.

header 레이아웃 이미지

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      * {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      header {
        background-color: gainsboro;
        padding: 0px 20px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      header .menus {
        display: flex;
        column-gap: 20px;
      }
      header a {
        color: #000;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <header>
      <div class="logo"><a href="#">로고</a></div>
      <nav>
        <ul class="menus">
          <li><a href="#">MENU1</a></li>
          <li><a href="#">MENU2</a></li>
          <li><a href="#">MENU3</a></li>
        </ul>
      </nav>
      <div class="login">
        <a href="#">로그인</a>
      </div>
    </header>
  </body>
</html>

코드 비교

flex 쓰고 난 후 코드를 비교한 이미지

코드가 잘 보이진 않는데 얼핏 봐도 코드가 훨씬 짧아지고 가독성도 좋아진다.

결론 : flex, grid는 필수로 배우도록 하자 !!

[새싹x코딩온] 웹 개발자 부트캠프 2주차 | CSS

석미니 — Wed, 26 Jul 2023 12:36:04 +0900

CSS란 무엇일까?

CSS는 Cascading Style Sheets의 약자이다.
HTML로 문서(웹 페이지)의 뼈대를 만들면, CSS는 문서(웹 페이지)를 디자인하기 위해 사용하는 언어

CSS 참조 방식

인라인 방식

태그에 직접 CSS를 정의해주는 기법
스타일을 공통 CSS로 수정할 수 없음
재사용 불가능
우선순위가 절대적으로 높아야 할 경우 사용

아래 코드 예시를 보자

<p>Hello HTML !</p>
<p>Hello CSS !</p>

위 태그에서 p 태그 두개에 똑같은 스타일을 한다면 각각의 p태그에 style 속성에 스타일을 두번씩 적어야 한다.

<p style="color: blue; background-color: yellow;">Hello HTML !</p>
<p style="color: blue; background-color: yellow;">Hello CSS !</p>

내장 방식

HTML의 <head> 태그 내부에 사용할 Style을 <style> 태그로 미리 선언하여 사용
공통 스타일 적용 가능
간단한 스타일에 적합

예시 코드

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <p>Hello HTML !</p>
  <p>Hello CSS !</p>
</body>
</html>

인라인 방식과는 다르게 p태그는 재활용이 가능해진다.

p태그를 쓸 때마다 같은 스타일의 태그를 가지게 된다.

링크 방식

모든 Style을 하나의 CSS 파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식
html 파일에 <link rel="stylesheet" href="css 파일 경로" /> 형식으로 사용
HTML 문서와 분리가 되어 코드가 깔끔해진다.
가장 많이 사용하는 방법

링크 방식을 설명하기 위한 이미지

예시 코드

index.html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <p>Hello HTML !</p>
        <p>Hello CSS !</p>
    </body>
</html>

style.css

p {
    color: blue;
    background-color: yellow;
}

결과 화면 (인라인 방식, 내장 방식, 링크 방식 동일)

Hello HTML !

Hello CSS !

CSS 선택자

CSS 선택자를 설명하는 이미지

선택자로 HTML 요소를 선택하고 { } 내에 속성 값을 지정하여 다양한 style을 정의
여러 개의 프로퍼티를 연속해서 지정할 수 있으며 세미콜론(;)으로 구분
속성은 표준스펙으로 이미 지정되어 있는 것을 사용, 사용자가 임의로 정의할 수 없다
값은 해당 속성에 사용할 수 있는 값을 키워드나 크기 단위 또는 색상 단위등의 특정 단위로 지정

CSS 선택자 종류

태그 선택자

태그 이름을 선택자로 사용

id 선택자

id 이름을 선택자로 사용
CSS에서 id 선택자 앞에 "#"을 붙여서 사용

class 선택자

class 이름을 선택자로 사용
CSS에서 class 선택자 앞에 "."을 붙여서 사용

전체 선택자

모든 요소를 선택
"*"로 표시

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      /* 전체 선택자 */
      * {
        background-color: skyblue;
      }
      /* 태그 선택자 */
      p {
        border: 1px solid blue;
        margin-bottom: 5px;
      }
      /* id 선택자 */
      #atxt {
        color: green;
      }
      /* class 선택자 */
      .btxt {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>태그 입니다.</p>
    <p id="atxt">id 선택자</p>
    <p class="btxt">class 선택자</p>
  </body>
</html>

결과 화면

태그 입니다.

id 선택자

class 선택자

하위 선택자

요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 " "(공백)으로 분리

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      /* 하위 선택자 */
      .box p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>.box의 자식</p>
      <p>.box의 자식</p>
      <ul>
        <li><p>.box의 자손</p></li>
        <li><p>.box의 자손</p></li>
      </ul>
    </div>
    <p>.box의 형제</p>
  </body>
</html>

결과 화면

.box의 자식

.box의 자손
.box의 자손

.box의 형제

.box의 하위 요소 p 태그가 전체 선택이 된다. (자식 선택자와 헷갈림 주의)

자식 선택자

요소 내부에 있는 바로 하위 요소만 가르키고, 선택자 사이를 ">"으로 분리

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <style>
      /* 자식 선택자 */
      .box > p {
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>.box의 자식</p>
      <p>.box의 자식</p>
      <ul>
        <li><p>.box의 자손</p></li>
        <li><p>.box의 자손</p></li>
      </ul>
    </div>
    <p>.box의 형제</p>
  </body>
</html>

결과 화면

.box의 자식

.box의 자손
.box의 자손

.box의 형제

.box 하위 요소 중 .box의 자식 p태그만 선택이 된다.

가상클래스 선택자

사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택 시
각 요소의 상황에 따라 사용자가 원하는 요소를 선택 할 때 사용
종류
- :link = 방문한 적이 없는 링크 선택 (a 태그에 해당)
- :visited = 방문한 적이 있는 링크 선택 (a 태그에 해당)
- :hover = 요소에 마우스 커서가 올라가 있는 동안 선택
- :active = 요소에 마우스를 클릭하고 있는 동안 선택
- :focus = 요소가 포커스되면 선택 (input 태그 등)
- :checked = 라디오 버튼이나 체크박스가 체크되었을 때 선택
- :first-child = 형제 요소 중 첫 번째 요소 선택
- :last-chlid = 형제 요소 중 마지막 요소 선택
- :nth-child(n) = 형제 요소 중 (n)번째라면 선택
  - :nth-child(odd) = 형제 요소 중 홀수 선택
  - :nth-child(even) = 같은 요소 중 짝수 선택
- :not(x) = 부정 선택자 (x 요소 아닌 요소 선택)
- :has = 해당 요소 중 자손 선택자를 가지고 있는 경우 선택 (css의 if문)
  - 최신 스펙이라 지원 안되는 브라우저도 있음 (확인하러 가기)
  - Ex) div:has(img) = div 요소 중 자손으로 img를 가지고 있을 경우
  - Ex) div:has(+ p) = div 요소 중 형제로 p를 가지고 있을 경우
  - Ex) div:has(p, img) = div 요소 중 자손으로 p, img를 가지고 있을 경우 (and 연산자)

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      body > * {
        border: 1px solid black;
        margin-bottom: 10px;
        padding: 5px;
      }
      /* hover */
      .hover:hover {
        background-color: skyblue;
      }
      /* active */
      .active:active {
        background-color: blue;
        color: #fff;
      }
      /* focus */
      .focus:focus {
        background-color: pink;
      }
      /* checked */
      .checked .radio input:checked + label {
        color: blueviolet;
      }
      .checked .checkbox input:checked + label {
        color: green;
      }
    </style>
  </head>
  <body>
    <p class="hover">hover : 여기에 마우스 커서 올려보세요.</p>
    <p class="active">active : 여기에 마우스 클릭해 보세요.</p>
    <input type="text" class="focus" /> focus : input 태그를 클릭해 보세요.
    <div class="checked">
      <div class="radio">
        <input type="radio" id="contactChoice1" name="contact" value="email" checked />
        <label for="contactChoice1">Email</label>

        <input type="radio" id="contactChoice2" name="contact" value="phone" />
        <label for="contactChoice2">Phone</label>
      </div>
    </div>
    <div class="checked">
      <div class="checkbox">
        <div>
          <input type="checkbox" id="coding" name="interest" value="coding" />
          <label for="coding">코딩</label>
        </div>
        <div>
          <input type="checkbox" id="music" name="interest" value="music" />
          <label for="music">음악</label>
        </div>
      </div>
    </div>
  </body>
</html>

결과 화면

hover : 여기에 마우스 커서 올려보세요.

active : 여기에 마우스 클릭해 보세요.

focus : input 태그를 클릭해 보세요.

Email Phone

코딩

음악

가상 요소 선택자

선택 된 요소의 앞, 뒤로 별도의 Content를 삽입하는 선택자
실제로 의미 없는 HTML 태그를 만들지 않고 요소 삽입이 가능하여 자주 사용 !
- Ex) 쇼핑몰 페이지 메뉴에 Hot, 추천 등(가상 요소 선택자를 활용하여 처리)
반드시 content 라는 속성을 사용
- 빈 값("") 이라도 넣어야 적용이 됨
종류
- ::after = 요소의 뒤에 내용 삽입
- ::before = 요소의 앞에 내용 삽입

예시 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      .box::before {
        content: '택시';
      }
      .box::after {
        content: '빨리';
      }
    </style>
  </head>
  <body>
    <div class="box">요기요</div>
  </body>
</html>

결과 화면

요기요

선택자 우선순위

선택자	우선순위(점수)
전체 선택자( * )	0
태그 선택자 ( p, div, h1, ul, ... )	1
class 선택자 ( .box, ... )	10
가상클래스 선택자( :first-child, ... )	10
id 선택자 ( #box, ... )	100

!important, inline style을 제외한 우선순위 수치를 모두 합한 값으로 우선순위가 결정
같은 요소라도 값이 높은 선택자가 부여한 속성이 우선으로 적용
부여한 속성이 적용되지 않는다면 이전에 작성한 CSS 중 더 높은 순위를 갖는 선택자가 있는지 의심해봐야 됨
동일한 값이라면 나중에 기술한 것이 먼저 기술한 것보다 우선순위가 높다.

※ 전체 우선순위
태그 선택자 < class 선택자, 가상클래스 선택자 < id 선택자 < inline style < !important

예시 코드

<div id="box">
  <ul class="list">
    <li>
      <p>우선 순위를 알아보자</p>
    </li>
  </ul>
</div>

우선 순위 값 계산

선택자	우선순위 계산
ul	1
.list	10
ul.list	1 + 10 = 11
#box ul	100 + 1 = 101
#box .list	100 + 10 = 110
#box ul.list	100 + 1 + 10 = 111

퀴즈

아래 코드 중 p 태그의 색상은 무슨 색일까?

<!DOCTYPE html>
<html lang="ko">
  <head>
    <style>
      ul.list li p {
        color: red;
      }
      ul li p {
        color: orange;
      }
      #box ul.list li p {
        color: yellow;
      }
      #box .list li p {
        color: green;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <ul class="list">
        <li>
          <p>우선 순위를 맞혀보자</p>
        </li>
      </ul>
    </div>
  </body>
</html>

정답을 선택하세요.

red
orange
yellow
green

HTML table 태그

석미니 — Wed, 26 Jul 2023 02:23:48 +0900

table 태그 (표 관련 태그) : 블록 요소

table 태그의 기본 구성

<table border="1" width="100%">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

결과 화면

1	2	3
4	5	6
7	8	9

결과 화면을 보면 우리가 아는 table과 약간 다를 것이다.
HTML에서 table에 border="1" 이라는 속성을 주면 두 줄로 생성이 된다.
이거는 css 편에서 알아보도록 하자.

table 태그의 구성 요소를 쉽게 설명한 이미지

<table></table> 태그

의미 및 특징
- 표를 정의 할 때 사용하는 태그이며, 행 (Row)과 열(Column)의 2차원 정보로 구성
- 자식 요소로 반드시 tr 태그를 정의해 주어야 하며 table -> tr -> td 순으로 마크업해야 한다.
속성
- border : 테두리 두께
- cellspacing : 테두리 간격 사이의 너비
- cellpadding : 셀 내부의 간격
- align : 테이블의 정렬 속성
- width 와 height : 테이블의 너비와 높이
- bgcolor 와 bordercolor : 테이블 배경색과, 테두리 색

<tr></tr> 태그

의미 및 특징
- table 태그의 자식 요소로 표에서 행 (Row)을 정의할 때 사용

<td></td> 태그

의미 및 특징
- tr 태그의 자식 요소로 표에서 열 (Column)을 정의할 때 사용
속성
- colspan : 해당 칸이 점유하는 열의 수 지정
- rowspan : 해당 칸의 점유하는 행의 수 지정

예시 코드

<p>colspan</p>
<table border="1" width="100%">
    <tr>
        <td colspan="3">1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<p>rowspan</p>
<table border="1" width="100%">
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
    </tr>
</table>

결과 화면

colspan

1
2	3	4

rowspan

1	2	3
	4	5

<th></th> 태그

의미 및 특징
- 제목 역할을 하는 셀을 정의할 때 사용
- td 태그와는 달리 글씨가 굵고 가운데 정렬이 기본 스타일 속성
속성
- colspan : 해당 칸이 점유하는 열의 수 지정
- rowspan : 해당 칸의 점유하는 행의 수 지정
- scope : 열 (Column) 제목이나 행 (Row) 제목 셀 th에 정의
  - 브라우저에서는 th 요소에 scope 속성을 명시해도 아무런 시각적 효과도 나타나지 않지만, 스크린 리더기와 같은 장치에서는 유용하게 사용될 수 있다.
  - 열 (Column)의 제목일 경우 <th scope="col">로 정의
  - 행 (Row)의 제목일 경우 <th scope="row">로 정의

예시 코드

<table border="1" width="100%">
    <tr>
        <th scope="col">교과목</th>
        <th scope="col">점수</th>
    </tr>
    <tr>
        <th scope="row">수학</th>
        <td>95</td>
    </tr>
    <tr>
        <th scope="row">영어</th>
        <td>45</td>
    </tr>
</table>

결과 화면

교과목	점수
수학	95
영어	45

<thead></thead>, <tbody></tbody>, <tfoot></tfoot> 태그

의미 및 특징
- HTML table에서 콘텐츠들을 그룹으로 묶을 때 사용
- thead, tbody, tfoot 요소는 기본적으로 웹 페이지의 레이아웃에 전혀 영향을 주지 않지만, 이 요소들의 스타일을 CSS를 사용하여 변경할 수는 있다.
- thead와 tfoot는 없는 경우도 있다.
  - table 태그를 사용시 브라우저가 자동으로 tbody는 삽입을 해주는 거 같다.

<colgroup></colgroup> 태그

의미 및 특징
- table의 열을 그룹으로 묶을 때 사용
- 자식 요소 <col></col> 태그와 함께 사용할 수도 있다.

<caption></caption> 태그

의미 및 특징
- 표의 설명 또는 제목을 정의할 때 사용

table의 모든 태그를 활용한 코드

<table width="100%" border="1">
    <caption>
        학교 성적에 대한 표
    </caption>
    <colgroup>
        <col style="width: 30%; background: skyblue" />
        <col />
    </colgroup>
    <thead>
        <tr>
            <th scope="col">교과목</th>
            <th scope="col">점수</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">수학</th>
            <td>90</td>
        </tr>
        <tr>
            <th scope="row">영어</th>
            <td>70</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>평균</th>
            <td>80</td>
        </tr>
    </tfoot>
</table>

결과 화면

학교 성적에 대한 표
교과목	점수
수학	90
영어	70
평균	80

[새싹x코딩온] 웹 개발자 부트캠프 1주차 | HTML

석미니 — Sat, 22 Jul 2023 01:41:51 +0900

HTML이란 무엇일까?

HTML은 Hypertext Markup Language의 약자이다.

Hypertext : 웹 페이지를 다른 페이지로 연결하는 링크
Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지

여기서 Hypertext는 이해가 가는데 Markup이 이해가 안가서 검색을 해보았다.

예를 들어 아래와 같은 텍스트가 있는데 텍스트에서 "HTML" 이라는 단어를 강조하고 싶다고 가정해보자.

오늘은 HTML에 대해서 배웠다.

만약 블로그에서 "HTML" 단어를 강조하고 싶다면 강조하고 싶은 글자를 드래그해서 에디터를 활용하면 되겠지만 이거는 인간이 입장에서의 얘기고, 브라우저에서 저 글자를 강조해!라고 지시를 내린다면 어떻게 내릴 것인가?

브라우저에서 "HTML"을 강조하기 위해서 앞뒤로 특수한 의미를 갖고 있다고 구분 지어야 하는데, 이럴 때 필요한 게 태그이다.

오늘은 <b>HTML</b>에 대해서 배웠다.

아직 <b></b>태그에 대해서는 안 배웠지만 이렇게 태그로 강조하고 싶은 범위를 표시(Mark)하는 게 마크업이라고 한다.

HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>여기에는 문서의 제목을 입력해주세요</title>
  </head>
  <body>
    여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
  </body>
</html>

<!DOCTYPE html> : 문서의 형식 선언
- DOCTYPE은 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 역할
- DOCTYPE의 뒤에 html이라고 쓰여 있는 것은 '이 문서는 HTML5로 작성되었습니다'라는 뜻
<html> : 문서의 시작과 끝
- 문서 형식 선언 이후 실제 문서의 내용을 표시하는 태그가 바로 <html> 태그 (여는 태그가 문서의 시작을, 닫는 태그가 문서의 끝을 의미)
- 이 태그에는 선택적으로 lang이라는 속성을 추가할 수 있는데, 이는 문서의 주요 언어를 표기하기 위해 추가하는 속성
  ex) 한국어를 사용한 경우 "ko", 영어를 사용한 경우 "en" 등 다양한 언어 코드를 속성값으로 입력할 수 있다.
<head> : 문서의 정보
- 브라우저에게 문서의 정보를 전달
- <head>의 안에 작성되는 태그들은 웹 브라우저 화면에 표시될 콘텐츠를 나타내는 것은 아니지만, 웹페이지의 품질에 영향을 주는 중요한 정보들이다.
<meta> : 문서의 키워드, 설정 등 문서와 관련된 항목들을 지정
- 페이지 설명, 키워드, 저자, 화면 크기 등의 정보
- 주로 브라우저 또는 검색 엔진에서 사용
- charset="utf-8" 은 하단 설명 참조
<title> : 문서의 제목
- 문서의 제목을 입력하는 태그, 웹 브라우저의 탭 메뉴에 표시
<body> : 화면에 표시될 콘텐츠
- 웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그
- 다양한 태그를 사용하여 웹 페이지의 구조를 설계할 수 있다.

meta 태그에 charset="utf-8" 을 설정하는 이유

한글이 깨진 메모장 이미지

한 번쯤 컴퓨터를 쓰다 보면 위와 같이 글씨가 깨진 현상을 봤을 것이다.

세상에는 한국어, 영어, 일본어 등 다양한 언어 및 문자가 존재한다. 그리고 컴퓨터가 이를 해석하기 위해서는 각 문자에 맞는 인코딩 방식을 사용해야 한다. 가장 흔히 사용되는 인코딩 방식 중 하나는 utf-8이다.

utf-8 방식으로 설정하면, 한글을 비롯한 세상의 모든 언어를 표시할 수 있다.

HTML 태그 구조

HTML 태그 기본 구조 (출처 : 새싹x코딩온)

HTML 구성요소

HTML 구성요소에는 태그, 요소, 속성으로 나뉜다.

Tag(태그)

<태그의이름>콘텐츠</태그의이름>
<!-- <> 기호로 묶인 부분이 바로 태그이다. -->

HTML 태그는 HTML 문서를 작성하는 데 사용되는 기본 요소이다.
HTML 태그는 시작 태그와 종료 태그로 구성된다. 시작 태그는 콘텐츠의 시작을 나타내고 종료 태그는 콘텐츠의 끝을 나타낸다.
시작 태그와 종료 태그가 짝을 이루기 위해서는 태그의 이름이 같아야 하며, 종료 태그에는 < 기호 바로 뒤에 / 기호를 붙여 시작 태그와 구별해야 한다.
태그의 이름은 해당 태그가 웹페이지에 어떤 콘텐츠를 표시하는지를 의미한다.
예를 들어 텍스트 문단을 표시할 때는 'paragraph'의 약자인 'p'를 태그의 이름으로 사용하고, 이미지를 표시할 때는 'image'의 약자인 'img'를 태그의 이름으로 사용한다.

단일 태그

<태그의이름>

내용 없이 구조적인 기능만 하는 요소
단일 태그는 태그 이름만으로 작성되며 닫는 태그가 없다.
Ex) <br> : 줄 바꿈, <hr> 수평선

Element(요소)

요소의 유형은 블록 요소와 인라인 요소로 나뉜다.

블록 요소(Block Element)

기본적으로 부모 요소의 전체 너비(100%)를 차지한다.
태그가 시작되면 무조건 개행(줄바꿈)이 일어난다.
모든 인라인 요소를 포함하거나 다른 블록 요소를 포함한다.
※ 블록 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있다.

인라인 요소(Inline Element)

텍스트 혹은 이미지 크기에 맞는 필요한 공간만을 차지하는 요소이다. (줄 바꿈이 일어나지 않는다.)
너비와 높이를 지정할 수 없다.
텍스트와 인라인 요소를 자식 요소로 포함할 수 있다.
모든 블록 요소를 자식 요소로 포함할 수 없다.

Attribute(속성)

태그를 보조하는 명령어로 태그 안쪽에서 작동
Ex) id, class, style, width, height 등등
태그마다 사용 가능한 속성이 정해져 있음
Ex) <a href="" style=""></a>
※ id, class, style은 모든 요소가 사용할 수 있는 속성

❗️ id 속성과 class 속성의 차이점
id : 문서 전체에서 유일한 고유식별자(ID)를 정의, 즉 "exciting" 이라는 id 값을 사용했으면 한 HTML 문서에 "exciting" 라는 id 값은 더 이상 사용 할 수 없다.
class : id 속성과 달리 여러번 사용이 가능하다. (주로 css를 작성할 때 사용된다.)

예시 코드

<p class="foo" style="color: green">This is a paragraph.</p>

결과 화면

This is a paragraph.

[새싹x코딩온] 웹 개발자 부트캠프 1주차 | Git 설치 및 환경설정

석미니 — Wed, 19 Jul 2023 01:15:18 +0900

깃 설치

깃 주소 : https://git-scm.com/

Git

git-scm.com

위 사이트에 들어가서 운영체제에 맞게 설치를 해주면 된다.

※ git 홈페이지에서 유저 운영체제를 인식해서 운영체제에 맞는 download url을 제공해주는 거 같다. Tip : NavigatorUAData

깃 초기 설정

window : 시작 프로그램 - Git - Git Bash 실행 후 아래 명령어 입력
mac : 응용 프로그램 - 유틸리티 or 기타 - 터미널 실행 후 아래 명령어 입력

Step1 : 유저 이름 설정

git config --global user.name "your_name"

Step2 : 유저 이메일 설정

git config --global user.email "your_email"

Step3 : 기본 브랜치명 main으로 설정하기

git config --global init.defaultBranch main

※ git의 기본 브랜치명인 master가 노예제를 연상시킨다는 이유로 main 으로 변경되었다고 한다.

Step4 : 정보 확인하기

git config --global --list

※ 정보 확인 후 q를 누르면 빠져나갈 수 있다.

VSCode 자동완성 세팅(code snippets)

석미니 — Sun, 23 Apr 2023 07:40:13 +0900

snippets 파일 생성

1. Cmd + Shift + P키를 누르고, 검색창에 Configure User Snippets을 입력합니다.

>Snippets: Configure User snippets

2. Enter 키를 누르면, 스니펫 설정 관련 메뉴가 나타납니다. 처음 설정하는 경우, New Global Snippets file... 항목을 선택합니다.

>New Global Snippets file...

3. 파일 이름을 입력하고 Enter 키를 누릅니다. 파일 이름은 [fileName].code-snippets로 설정해주는 것이 일반적입니다.

snippets 설정

파일이 열리면, 스니펫을 작성합니다. 스니펫은 JSON 형식으로 작성하며, prefix와 body 속성이 필요합니다.

▼ 예시 코드

{
  "Console log": {
    "prefix": "cl",
    "body": "console.log($1);"
  },
  "Console log with string template": {
    "prefix": "clt",
    "body": "console.log(`$1 ${$2}`);"
  },
  "Function": {
    "prefix": "fc",
    "body": ["function $1(){", "  $2", "}"]
  },
  "Arrow Function": {
    "prefix": "afc",
    "body": ["const $1 = () => {", "  $2", "};"]
  },

  // react
  "Arrow Function Callback": {
    "prefix": "ucb",
    "body": ["const $1 = useCallback(() => {", "  $2", "}, []);"]
  },
  "useState": {
    "prefix": "us",
    "body": ["const [$1, set${1/(.*)/${1:/capitalize}/}] = useState($2);"]
  },
  "useEffect": {
    "prefix": "ue",
    "body": ["useEffect(() => {", "  $1", "}, []);"]
  },
  "useEffect return": {
    "prefix": "uer",
    "body": ["useEffect(() => {", "  $1", "", "return () => {", "$2", "}", "}, []);"]
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      // 단일 정규식으로 변환: 첫 글자 또는 하이픈(-) 뒤 글자를 대문자로 변경
      "export default function ${1:${TM_FILENAME_BASE/^(.)|-(.)/${1:/upcase}${2:/upcase}/g}}() {",
      "  return (",
      "    <div>",
      "      ${2:$TM_FILENAME_BASE}", // 원본 파일명 표시
      "    </div>",
      "  );",
      "}",
      ""
    ],
    "description": "Creates a React functional component, converting kebab-case filename to PascalCase component name."
  },
  "React Custom Hook": { // 새로 추가된 스니펫
    "prefix": "uhook", // 또는 uhook (use custom hook) 등 원하는 prefix 사용
    "body": [
      // 파일명을 useCamelCase 형태로 변환 (예: data-fetcher -> useDataFetcher)
      "export default function ${1:${TM_FILENAME_BASE/-(.)/${1:/upcase}/g}}($2) {",
      "  $0", // 최종 커서 위치
      "}",
      ""
    ],
    "description": "Creates a default exported React custom hook function, deriving the name from the filename (kebab-case to usePascalCase)."
  },
  
  // storybook
  "Storybook Meta": {
    "prefix": "sm",
    "body": [
      "import type { Meta, StoryObj } from '@storybook/react';",
      "import { fn } from '@storybook/test';",
      "",
      "const meta = {",
      "  title: '$1',",
      "  component: ${2:Component},",
      "  tags: ['autodocs'],",
      "  parameters: {",
      "    layout: 'centered',",
      "  },",
      "  argTypes: {",
      "    children: { control: 'text' },",
      "  },",
      "  args: { ${3:event}: fn() },",
      "} satisfies Meta<typeof ${2:Component}>;",
      "",
      "export default meta;",
      "type Story = StoryObj<typeof meta>;",
      "",
      "export const Primary: Story = {",
      "  args: {",
      "    children: 'Button',",
      "  },",
      "};",
      ""
    ]
  },
  "Storybook Meta Render": {
    "prefix": "smr",
    "body": [
      "import type { Meta, StoryObj } from '@storybook/react';",
      "import { fn } from '@storybook/test';",
      "import { useArgs } from '@storybook/preview-api';",
      "",
      "const meta = {",
      "  title: '$1',",
      "  component: ${2:Component},",
      "  tags: ['autodocs'],",
      "  parameters: {",
      "    layout: 'centered',",
      "  },",
      "  argTypes: {",
      "    children: { control: 'text' },",
      "  },",
      "  args: { ${3:event}: fn() },",
      "} satisfies Meta<typeof ${2:Component}>;",
      "",
      "export default meta;",
      "type Story = StoryObj<typeof meta>;",
      "export const Primary: Story = {",
      "  args: {",
      "    children: 'Button',",
      "  },",
      "  render: (args) => {",
      "    const [{ isOpen }, updateArgs] = useArgs();",
      "",
      "    function onChange() {",
      "      updateArgs({ isOpen: !isOpen });",
      "    }",
      "",
      "    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;",
      "  },",
      "};",
      ""
    ]
  },

}

us의 경우 변수명을 입력하고 tab을 누르면 set 다음 바로 나오는 첫번째 글자가 대문자로 바뀐다.

https://www.youtube.com/watch?v=umeqCopb96w 유튜브 강의
https://snippet-generator.app/ 이 사이트에 접속해서 편리하게 세팅해서 복사해와도 됨
https://code.visualstudio.com/docs/editor/userdefinedsnippets 관련 문서

제네릭(Generic) 타입

석미니 — Fri, 21 Apr 2023 12:53:24 +0900

제네릭은 TypeScript에서 타입을 추상화하여 재사용 가능한 코드를 작성하는 방법 중 하나입니다. 함수, 클래스, 인터페이스 등 여러 곳에서 사용될 수 있으며, 특정 타입 대신 코드가 실행될 때 타입이 결정되도록 합니다. 제네릭을 사용하면 코드의 재사용성과 유지 보수성이 향상되며, 코드의 유연성과 확장성이 높아집니다.

▼ 제네릭을 사용하지 않은 코드

function getFirstNumber(numbers: number[]): number | undefined {
  return numbers[0];
}

function getFirstString(strings: string[]): string | undefined {
  return strings[0];
}

const numbers = [1, 2, 3];
const firstNumber = getFirstNumber(numbers);
console.log(firstNumber); // 1

const strings = ['a', 'b', 'c'];
const firstString = getFirstString(strings);
console.log(firstString); // a

위의 코드에서 getFirstNumber 함수와 getFirstString 함수가 각각 숫자와 문자열 배열에 대해 작동하도록 구현되어 있습니다. 이 경우 함수 구현이 중복되기 때문에 코드의 가독성과 유지보수성이 저하될 수 있습니다. 또한, 새로운 유형의 데이터에 대해 함수를 작성할 때마다 새로운 함수를 구현해야 하는 문제점이 있습니다.

▼ 제네릭을 사용한 코드

function getFirstItem<T>(items: T[]): T | undefined {
  return items[0];
}

const numbers = [1, 2, 3];
const firstNumber = getFirstItem(numbers);
console.log(firstNumber); // 1

const strings = ['a', 'b', 'c'];
const firstString = getFirstItem(strings);
console.log(firstString); // a

위의 코드에서 <T>는 제네릭 타입 매개변수로 사용됩니다. 함수의 items 매개변수는 T 배열입니다. 따라서 함수의 반환 유형은 T 또는 undefined 입니다. getFirstItem 함수는 numbers 배열과 strings 배열 모두에 대해 작동합니다. 제네릭은 타입스크립트의 강력한 기능 중 하나이며, 타입 안정성을 유지하면서 다양한 유형의 데이터를 다룰 수 있도록 도와줍니다.

공식문서 : https://www.typescriptlang.org/docs/handbook/2/generics.html

Tiptab font-size 기능 구현

석미니 — Wed, 19 Apr 2023 15:31:21 +0900

1. 라이브러리 설치

npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-text-style

2. 폰트 사이즈 수정 라이브러리 만들기

위 라이브러리에는 font-size 수정하는 내장함수가 포함이 안 되어 있다.
~~♧ Tiptab 라이브러리 자체가 필요한 것들을 따로 설치해서 사용해야 되는 거 같다.(리액트 같은 느낌)~~
직접 커스텀 해서 만들거나 npm install tiptap-extension-font-size 라이브러리를 설치해서 사용하여야 한다.
나는 필요시 수정도 할 수 있을 거 같아 스택오버플로우를 참고해 라이브러리를 따로 만들었다.

src/editor/lib/font-size.js

import { Extension } from '@tiptap/react';

export const FontSize = Extension.create({
  name: 'fontSize',
  addOptions() {
    return {
      types: ['textStyle'],
    };
  },
  addGlobalAttributes() {
    return [
      {
        types: this.options.types,
        attributes: {
          fontSize: {
            default: null,
            parseHTML: (element) =>
              element.style.fontSize.replace(/['"]+/g, ''),
            renderHTML: (attributes) => {
              if (!attributes.fontSize) {
                return {};
              }
              return {
                style: `font-size: ${attributes.fontSize}`,
              };
            },
          },
        },
      },
    ];
  },
  addCommands() {
    return {
      setFontSize:
        (fontSize) =>
        ({ chain }) => {
          return chain().setMark('textStyle', { fontSize: fontSize }).run();
        },
      unsetFontSize:
        () =>
        ({ chain }) => {
          return chain()
            .setMark('textStyle', { fontSize: null })
            .removeEmptyTextStyle()
            .run();
        },
    };
  },
});

커스텀 만드는 방법 : https://tiptap.dev/guide/custom-extensions/
~~나도 위 사이트 보고 이해 안되서 다른 코드를 보고 참고했음~~
이미 만들어진 익스텐션들 : https://tiptap.dev/api/extensions

3. 라이브러리를 불러와 사용해보자

src/editor/index.jsx

import React, { useState, useCallback } from 'react';
import { useEditor, EditorContent } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import TextStyle from '@tiptap/extension-text-style';
import { FontSize } from './lib/font-size';
import Toolbar from './Toolbar.jsx';
import { StyledEditor } from './styledEditor.js';

export default function Editor() {
  const [fontSize, setFontSize] = useState('16px');

  const editor = useEditor({
    extensions: [StarterKit, TextStyle, FontSize],
    content: '',
  });

  const handleFontSizeChange = useCallback(
    (event) => {
      if (!editor) return null;
      const button = event.target;
      const fontSize = button.innerText;
      setFontSize(`${fontSize}px`);
      editor.chain().focus().setFontSize(`${fontSize}px`).run();
    },
    [editor]
  );

  return (
    <StyledEditor>
      <Toolbar editor={editor} onFontSizeChange={handleFontSizeChange} />
      <EditorContent editor={editor} />
    </StyledEditor>
  );
}

src/editor/Toolbar.jsx

import React from 'react';

const fontSize = ['14', '16', '18', '24', '28', '30', '34', '38'];

export default function Toolbar({ editor, onFontSizeChange }) {
  if (!editor) {
    return null;
  }
  return (
    <div className="toolbar">
      {fontSize.map((value) => (
        <button
          key={value}
          onClick={onFontSizeChange}
          className={
            editor.isActive('textStyle', { fontSize: `${value}px` })
              ? 'is-active'
              : ''
          }
        >
          {value}
        </button>
      ))}
    </div>
  );
}

npm i @emotion/styled @emotion/react

에디터를 스타일링 하기위해 emotion을 택했다.
~~처음엔 .css 파일로 작성하려 했는데 나중에 props로 state를 전달 받아 사용해야 될 거 같아 설치하게 되었다.~~

src/editor/styledEditor.js

import styled from '@emotion/styled';

export const StyledEditor = styled.div`
    .toolbar {
        margin-bottom: 10px;
        display: flex;

        button {
            cursor: pointer;
            background-color: #fff;
            font-size: 16px;
            border-radius: 5px;
            margin: 0 1px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;

            &:hover {
                background-color: rgba(0, 0, 0, 0.07);
            }

            &.is-active {
                background-color: #333;
                color: #fff;
            }
        }

    }

    /* 에디터 */
    .ProseMirror {
        padding: 20px;
        height: 400px;
        border: 1px solid;
        overflow-y: auto;
        overflow-x: hidden;

        &:focus {
            outline: none;
        }

        p {
            margin: 10px 0;
        }

        ol {
            padding-left: 30px;
        }
    }
`;

https://stackblitz.com/edit/react-8fcue8?file=src/editor/styledEditor.js

위 주소로 들어가면 font-size 수정이 가능하다. 하지만 보통 에디터들처럼 버그? 투성이다.

커서 사이즈 버그(빈 에디터일 때 38px 폰트를 클릭해도 커서는 커지지 않고 그대로임)
실행 시 첫 폰트 사이즈를 따로 지정해 줘야 됨
텍스트를 쳤다가 빈 에디터로 만들면(계속 삭제) 폰트 사이즈가 초기화됨

4. 버그 수정

1. 커서 사이즈 버그 수정

src/editor/styledEditor.js

    // 기존 스타일 코드
    // ...

    /* 에디터 */
    .ProseMirror {
        padding: 20px;
        height: 400px;
        border: 1px solid;
        overflow-y: auto;
        overflow-x: hidden;

        &:focus {
            outline: none;
        }

        p {
            margin: 10px 0;

            /* 텍스트 없을 때 커서 사이즈 유지 */
            &:last-child:has(br) {
                font-size: ${(props) => props.editorFontSize};
            }
        }

        ol {
            padding-left: 30px;
        }
    }

src/editor/index.jsx

  // 기존 코드
  // ...
  return (
    <StyledEditor editorFontSize={fontSize}>
      <Toolbar editor={editor} onFontSizeChange={handleFontSizeChange} />
      <EditorContent editor={editor} />
    </StyledEditor>
  );

✔️ 해결 방법
개발자 도구로 에디터 html을 까보면 빈 에디터일 때 <p><br></p>를 볼 수 있다.
&:has(br) 이렇게 하면 p 태그 중 br 태그만 포함 된 p 태그를 선택할 수 있다. 하지만 모든 br 상위인 p 태그를 선택하게 되면 나중에 새로운 버그를 만들어 낼 거 같아 &:last-child:has(br) 이렇게 마지막 br 상위인 p 태그를 선택하게 되었다.
마지막으로 fontSize를 props으로 받아와 font-size를 지정해 주었다.

2. 실행시 첫 폰트사이즈 지정

src/editor/index.jsx

  // 기존 코드
  // ...
  
  const editor = useEditor({
    extensions: [StarterKit, TextStyle, FontSize],
    content: '',
    onCreate({ editor }) {
      editor.chain().focus().setFontSize(`${fontSize}`).run();
    },
  });
  
  // 기존 코드
  // ...

✔️ 해결 방법
https://tiptap.dev/api/events#create
위 주소에 보면 에디터의 이벤트에 대한 설명이 자세히 나와있다.
create (에디터가 생성되고 난 후) 이벤트를 활용해
editor.chain().focus().setFontSize(`${fontSize}`).run(); (폰트 사이즈를 결정짓는 함수)를 사용하였다.

3. 텍스트를 쳤다가 빈 에디터로 만들면(계속 삭제 시킴) 폰트 사이즈가 초기화는 현상 수정

src/editor/index.jsx

  // 기존 코드
  // ...
  
  const editor = useEditor({
    extensions: [StarterKit, TextStyle, FontSize],
    content: '',
    onCreate({ editor }) {
      editor.chain().focus().setFontSize(fontSize).run();
    },
    onUpdate({ editor }) {
      if (editor.isEmpty) {
        const currentFontSize = editor.getAttributes('textStyle').fontSize;
        const newFontSize = currentFontSize || fontSize;

        editor.chain().focus().setFontSize(newFontSize).run();
        setFontSize(newFontSize);
      }
    },
  });
  
  // 기존 코드
  // ...

✔️ 해결 방법
https://tiptap.dev/api/events#update
마찬가지로 위 주소에 보면 에디터의 이벤트에 대한 설명이 자세히 나와있다.
update(내용이 바뀌었을 때) 이벤트를 이용해 내용 바뀌는 것을 감지한다.

if (editor.isEmpty) 이 부분은 에디터가 빈 값일 대 true를 반환해준다.
(에디터가 빈 값일 때만 실행해 주면 되기 때문 아래 함수 호출을 최소화할 수 있다.)

const currentFontSize = editor.getAttributes('textStyle').fontSize; <- 현재 fontSize를 반환해준다.

const newFontSize = currentFontSize || fontSize;
currentFontSize는 빈 텍스트일 때 null을 반환해서 or 연산자를 이용해 null일 경우 state 값인 fontSize를 지정해 주게 한다.

editor.chain().focus().setFontSize(newFontSize).run();
setFontSize(newFontSize);
현재 폰트 사이즈를 newFontSize 값을 넣음으로 써 최신 값이 유지가 된다.
마지막으로 fontSize는 css에서 커서 사이즈를 조절하기 때문 setFontSize을 써서 fontSize를 최신화해주었다.

완성 코드

https://stackblitz.com/edit/react-1bqplt?file=src/editor/index.jsx

react-quill Custom

석미니 — Mon, 17 Apr 2023 20:28:13 +0900

toolbar 기존 아이콘 변경

import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";

const icons = Quill.import("ui/icons");
icons["bold"] = "<span>B</span>";

export default function Editor() {
    return (
        <div>
            <ReactQuill />
        </div>
    );
}

▼ 종류

종류	설명 (아이콘)
icons["bold"]	굵기
icons["italic"]	기울임
icons["underline"]	밑줄
icons["strike"]	취소선
icons["blockquote"]	인용
icons["color"]	글자색
icons["background"]	배경색
icons["image"]	이미지 첨부
icons["link"]	링크
icons["list"]["ordered"]	순서 있는 리스트
icons["list"]["bullet"]	순서 없는 리스트
icons["list"]["check"]	체크 리스트
icons["align"][""]	왼쪽 정렬
icons["align"]["center"]	가운데 정렬
icons["align"]["right"]	오른쪽 정렬
icons["align"]["justify"]	양쪽 정렬

더 많은 종류는 node_modules > quill > ui > icons.js 파일 참고

toolbar 폰트 사이즈 변경

default.js

export const fontSize = ["14px", "16px", "18px", "24px", "28px", "32px"];

Toolbar.jsx

import { fontSize } from "./default";

export default function Toolbar() {
    return (
        <div id="toolbar">
            <span className="ql-formats">
                <select className="ql-size">
                    {fontSize.map((val) => (
                        <option value={val} selected={val === "16px"}>
                            {val.replace(/[^0-9]/g, "")}
                        </option>
                    ))}
                </select>
            </span>
        </div>
    );
}

index.jsx

import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
import Toolbar from "./Toolbar";
import { fontSize } from "./default";

var Size = Quill.import("attributors/style/size");
Size.whitelist = fontSize;
Quill.register(Size, true);

const modules = {
    toolbar: {
        container: "#toolbar",
        handlers: {},
    },
};

export default function Editor() {
    return (
        <div>
            <Toolbar />
            <ReactQuill modules={modules} />
        </div>
    );
}

https://stackblitz.com/edit/react-vz6kkz?file=src%2Findex.js

React에서 Tooltip 만들기

석미니 — Sat, 15 Apr 2023 15:26:00 +0900

Tooltip.js

import React, { useState } from 'react';
import styled from 'styled-components';

function Tooltip({ children, text }) {
  const [show, setShow] = useState(false);

  return (
    <StyledWrap>
      <StyledBlock
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        {children}
      </StyledBlock>
      <StyledTooltip isShow={show}>{text}</StyledTooltip>
    </StyledWrap>
  );
}

export default Tooltip;

const StyledWrap = styled.div`
    position: relative;
`;

const StyledTooltip = styled.span`
    display: flex;
    align-items: center;
    width: max-content;
    visibility: ${({ isShow }) => (isShow ? 'visible' : 'hidden')};
    background: rgb(235, 236, 239);
    position: absolute;
    padding: 0 12px;
    font-size: 14px;
    border-radius: 5px;
    left: 55px;
    top: 0;
    bottom: 0;
    &:before {
        display: block;
        position: absolute;
        content: "";
        left: -18px;
        border-top: 8px solid transparent;
        border-right: 12px solid rgb(235, 236, 239);
        border-bottom: 8px solid transparent;
        border-left: 8px solid transparent;
    }
`;

const StyledBlock = styled.div`
    width: max-content;
`;

App.js

import React from 'react';
import styled from 'styled-components';
import Tooltip from './Tooltip';

export default function App() {
  return (
    <StyledWrapper>
      <StyledBlock>
        <Tooltip text="확대하기 +">
          <StyledButton>
            <svg
              width="24"
              height="24"
              fill="rgba(26,26,26,0.8)"
              fillOpacity="1"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 96 96"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M45 18c-14.912 0-27 12.088-27 27s12.088 27 27 27 27-12.088 27-27-12.088-27-27-27ZM12 45c0-18.225 14.775-33 33-33s33 14.775 33 33c0 8.032-2.87 15.395-7.64 21.117L83.12 78.88a3 3 0 1 1-4.242 4.242L66.117 70.36A32.866 32.866 0 0 1 45 78c-18.225 0-33-14.775-33-33Zm33-17a3 3 0 0 1 3 3v12h12a3 3 0 1 1 0 6H48v12a3 3 0 1 1-6 0V49H30a3 3 0 1 1 0-6h12V31a3 3 0 0 1 3-3Z"
              ></path>
            </svg>
          </StyledButton>
        </Tooltip>
      </StyledBlock>
      <StyledBlock>
        <Tooltip text="축소하기 -">
          <StyledButton>
            <svg
              width="24"
              height="24"
              fill="rgba(26,26,26,0.8)"
              fillOpacity="1"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 96 96"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M45 18c-14.912 0-27 12.088-27 27s12.088 27 27 27 27-12.088 27-27-12.088-27-27-27ZM12 45c0-18.225 14.775-33 33-33s33 14.775 33 33c0 8.032-2.87 15.395-7.64 21.117L83.12 78.88a3 3 0 1 1-4.242 4.242L66.117 70.36A32.866 32.866 0 0 1 45 78c-18.225 0-33-14.775-33-33Zm14 1a3 3 0 0 1 3-3h32a3 3 0 1 1 0 6H29a3 3 0 0 1-3-3Z"
              ></path>
            </svg>
          </StyledButton>
        </Tooltip>
      </StyledBlock>
    </StyledWrapper>
  );
}

const StyledButton = styled.button`
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 4px;
`;

const StyledWrapper = styled.div`
    display: flex;
    flex-direction: column;
`;

const StyledBlock = styled.div`
    margin: 10px;
`;

https://stackblitz.com/edit/react-tvv9mg?file=src/App.js

커스텀 훅(Custom Hook)

석미니 — Sat, 8 Apr 2023 08:55:35 +0900

React Hooks의 개념을 확장하여 재사용 가능한 로직을 만들 수 있는 기능입니다. 커스텀 훅을 사용하면 여러 컴포넌트에서 공통으로 사용되는 로직을 쉽게 추출하고 관리할 수 있습니다. 기본적으로 커스텀 훅은 일반 JavaScript 함수이며, 내부에서 기존의 React Hooks를 사용할 수 있습니다.

커스텀 훅의 이름은 보통 use로 시작합니다. 이렇게 작명하는 이유는 훅 사용 규칙을 준수하고, 커스텀 훅이 일반 함수와 혼동되지 않게 하기 위함입니다.

커스텀 훅 사용 전 로직

import React, { useState } from 'react';

const App = () => {
  const [id, setId] = useState('');
  const [nick, setNick] = useState('');
  const [password, setPassword] = useState('');

  const onChangeId = (e) => {
    setId(e.target.value);
  };
  const onChangeNick = (e) => {
    setNick(e.target.value);
  };
  const onChangePassword = (e) => {
    setPassword(e.target.value);
  };

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(`id : ${id}, nick : ${nick}, password : ${password}`);
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="user-id">아이디 : </label>
        <input
          id="user-id"
          name="user-id"
          value={id}
          required
          onChange={onChangeId}
        />
      </div>
      <div>
        <label htmlFor="user-nick">닉네임 : </label>
        <input
          id="user-nick"
          name="user-nick"
          value={nick}
          required
          onChange={onChangeNick}
        />
      </div>
      <div>
        <label htmlFor="user-password">비밀번호 : </label>
        <input
          id="user-password"
          name="user-password"
          type="password"
          value={password}
          required
          onChange={onChangePassword}
        />
      </div>
      <button type="submit">전송</button>
    </form>
  );
};

export default App;

커스텀 훅 사용 후 로직

import { useState } from 'react';

const useInput = (initialValue) => {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return [value, onChange];
};


const App = () => {
  const [id, onChangeId] = useInput('');
  const [nick, onChangeNick] = useInput('');
  const [password, onChangePassword] = useInput('');

  const onSubmit = (e) => {
    e.preventDefault();
    console.log(`id : ${id}, nick : ${nick}, password : ${password}`);
  };

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label htmlFor="user-id">아이디 : </label>
        <input
          id="user-id"
          name="user-id"
          value={id}
          required
          onChange={onChangeId}
        />
      </div>
      <div>
        <label htmlFor="user-nick">닉네임 : </label>
        <input
          id="user-nick"
          name="user-nick"
          value={nick}
          required
          onChange={onChangeNick}
        />
      </div>
      <div>
        <label htmlFor="user-password">비밀번호 : </label>
        <input
          id="user-password"
          name="user-password"
          type="password"
          value={password}
          required
          onChange={onChangePassword}
        />
      </div>
      <button type="submit">전송</button>
    </form>
  );
};


export default App;

https://stackblitz.com/edit/react-1vbvtx?file=src/App.js

React에서 Canvas 이미지 줌, 이동 기능 만들기

석미니 — Fri, 7 Apr 2023 19:06:37 +0900

canvas에서 이미지 줌, 이동 기능을 구현 코드

import React, { useRef, useEffect } from 'react';

const img = new Image();
const INITIAL_POSITION = { x: 0, y: 0 };
const MIN_SCALE = 0.1;
const MAX_SCALE = 10;

function App() {
  const zoomCanvasRef = useRef(null);
  const scaleRef = useRef(1);
  const panningRef = useRef(false);
  const viewPosRef = useRef(INITIAL_POSITION);
  const startPosRef = useRef(INITIAL_POSITION);

  const setTransform = () => {
    const zoomCanvas = zoomCanvasRef.current;
    const context = zoomCanvas.getContext('2d');
    context.setTransform(
      scaleRef.current,
      0,
      0,
      scaleRef.current,
      viewPosRef.current.x,
      viewPosRef.current.y
    );
  };

  const draw = () => {
    const zoomCanvas = zoomCanvasRef.current;
    const context = zoomCanvas.getContext('2d');
    zoomCanvas.width = zoomCanvas.width;
    setTransform();
    context.drawImage(img, 0, 0, zoomCanvas.width, zoomCanvas.height);
  };

  useEffect(() => {
    img.src =
      'https://firebasestorage.googleapis.com/v0/b/storege-974dc.appspot.com/o/image%2Frabbit.jpeg?alt=media&token=cc501a63-0258-4aa3-809f-c45b743d2735';
    // Load image
    img.onload = function () {
      draw();
    };
  }, []);

  const handleMouseDown = (e) => {
    const { offsetX, offsetY } = e.nativeEvent;
    e.preventDefault();
    startPosRef.current = {
      x: offsetX - viewPosRef.current.x,
      y: offsetY - viewPosRef.current.y,
    };
    panningRef.current = true;
  };

  const handleMouseUp = (e) => {
    panningRef.current = false;
  };

  const handleMouseMove = (e) => {
    const { offsetX, offsetY } = e.nativeEvent;
    e.preventDefault();
    if (!panningRef.current) {
      return;
    }
    viewPosRef.current = {
      x: offsetX - startPosRef.current.x,
      y: offsetY - startPosRef.current.y,
    };
    draw();
  };

  const handleWheel = (e) => {
    const { offsetX, offsetY } = e.nativeEvent;
    e.preventDefault();
    const xs = (offsetX - viewPosRef.current.x) / scaleRef.current;
    const ys = (offsetY - viewPosRef.current.y) / scaleRef.current;
    const delta = -e.deltaY;
    const newScale =
      delta > 0 ? scaleRef.current * 1.2 : scaleRef.current / 1.2;

    if (newScale >= MIN_SCALE && newScale <= MAX_SCALE) {
      scaleRef.current = newScale;
      viewPosRef.current = {
        x: offsetX - xs * scaleRef.current,
        y: offsetY - ys * scaleRef.current,
      };
    }
    draw();
  };

  return (
    <canvas
      ref={zoomCanvasRef}
      width="500"
      height="500"
      style={{ border: ' 1px solid' }}
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onWheel={handleWheel}
    />
  );
}
export default App;

코드 설명

useState 대신 useRef를 사용한 이유는 상태를 변경할 때마다 컴포넌트가 다시 렌더링되는 것을 방지하기 위해서입니다.

마우스 이벤트에서 draw 함수를 호출해 다시 그려주기 때문에 useState 대신 useRef로 관리 하는 것이 낫다고 생각하여 useRef를 사용하였습니다.

const scaleRef : 현재 확대/축소 비율을 저장합니다.
const panningRef : 드래그 중인지 여부를 저장합니다.
const viewPosRef : 현재 이미지 위치를 저장합니다.
const startPosRef : 마우스 드래그 시작 위치를 저장합니다.

setTransform 함수는 캔버스에 현재 확대/축소 비율과 화면 위치를 설정합니다.

handleWheel 함수를 풀어보면 다음과 같습니다.

const xs = (offsetX - viewPosRef.current.x) / scaleRef.current;
마우스 포인터의 X 좌표(offsetX)에서 현재 이미지 위치(viewPosRef.current.x)를 빼고, 이미지의 현재 스케일(scaleRef.current)로 나누어 xs 값을 계산합니다.

const ys = (offsetY - viewPosRef.current.y) / scaleRef.current;
마우스 포인터의 Y 좌표(offsetY)에서 현재 이미지 위치(viewPosRef.current.y)를 빼고, 이미지의 현재 스케일(scaleRef.current)로 나누어 ys 값을 계산합니다.

xs, ys 값은 이미지의 어느 부분이 확대/축소되는지를 결정하는 데 사용됩니다.

const delta = -e.deltaY;
e.deltaY는 마우스 휠 이벤트의 수직 휠 위치 변경 값을 나타냅니다. 이 값을 -1을 곱하여 delta 변수에 저장합니다. 마우스 휠 이벤트에서 deltaY 값이 양수이면 축소, 음수이면 확대로 처리하기 위함입니다.

const newScale = delta > 0 ? scaleRef.current * 1.2 : scaleRef.current / 1.2;
delta 값이 양수일 경우, 이미지를 확대하려면 현재 스케일에 1.2를 곱하고, 음수일 경우 축소하려면 현재 스케일에 1.2로 나눕니다. 이렇게 계산된 결과를 newScale 변수에 저장합니다.

if (newScale >= MIN_SCALE && newScale <= MAX_SCALE) { ... }
newScale 값이 MIN_SCALE과 MAX_SCALE 사이에 있는지 확인합니다. 그렇다면 이미지의 스케일을 갱신하고, 이미지 위치를 업데이트하여 확대/축소된 이미지가 마우스 포인터를 기준으로 정상적으로 보이게 합니다. 이렇게 함으로써 이미지가 설정한 최소 및 최대 스케일 범위를 벗어나지 않도록 제한할 수 있습니다.

Canvas setTransform 함수

이 함수의 주 목적은 canvas의 기본 확대, 경사도, 이동거리를 설정하기 위해 사용

setTransform(a, b, c, d, e, f)

매개변수 설명

a: 수평 방향 확대 또는 축소 비율
b: 수직 방향 경사율
c: 수평 방향 경사율
d: 수직 방향 확대 또는 축소 비율
e: 수평 방향 이동 거리
f: 수직 방향 이동 거리

실행화면

https://stackblitz.com/edit/react-eyyxfk?file=src/App.js

useImperativeHandle

석미니 — Fri, 7 Apr 2023 17:57:31 +0900

React의 커스텀 훅(hook) 중 하나로, 부모 컴포넌트에서 자식 컴포넌트의 함수 또는 값을 직접 호출하거나 사용할 수 있도록 해줍니다. 일반적으로 컴포넌트 간의 상호작용을 위해 props를 사용하지만, 때때로 부모 컴포넌트가 자식 컴포넌트의 인스턴스를 직접 참조해야 하는 경우가 있습니다. 이때 useImperativeHandle을 사용할 수 있습니다.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const CustomInput = (props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} type="text" />;
};

const ForwardedCustomInput = forwardRef(CustomInput);

const ParentComponent = () => {
  const inputRef = useRef();

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <button onClick={handleClick}>Focus on input</button>
      <ForwardedCustomInput ref={inputRef} />
    </div>
  );
};

export default ParentComponent;

코드 설명

CustomInput 컴포넌트는 forwardRef 를 사용하여 ref를 전달받을 수 있게 하고 있습니다.
ParentComponent는 inputRe를 통해 CustomInput 컴포넌트의 인스턴스를 참조하고, handleClick 함수에서 inputRef.current.focus()를 호출하여 자식 컴포넌트의 focus 함수를 실행합니다.
이를 통해 input에 포커스가 이동하게 됩니다.

마우스 이벤트(client, page, offset, screen)의 차이점

석미니 — Fri, 7 Apr 2023 17:29:25 +0900

client

브라우저 창 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 스크롤바가 있어도 스크롤바를 제외한 브라우저의 좌측 상단을 원점으로 삼습니다.

page

문서 전체를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 스크롤바를 포함한 문서의 좌측 상단을 원점으로 삼습니다

offset

이벤트 대상 엘리먼트를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다. 이벤트가 발생한 엘리먼트의 좌측 상단을 원점으로 삼습니다.

screen

모니터 화면 전체를 기준으로 마우스 클릭 위치의 x, y좌표를 나타냅니다.

<div style="width: 300px; height: 300px; background-color: red; display:flex; align-items: center; justify-content: center;" id="box">마우스 클릭</div>
<div id="show" style="margin-top: 20px;">
  clientX : 0, clientY : 0<br/>
  pageX : 0, pageY : 0<br/>
  offsetX : 0, offsetY : 0<br/>
  screenX : 0, screenY : 0
</div>
<script>
  const box = document.getElementById('box');
  const show = document.getElementById('show');
  box.addEventListener('click', (e) => {
    show.innerHTML = `
      clientX : ${e.clientX}, clientY : ${e.clientY}<br/>
      pageX : ${e.pageX}, pageY : ${e.pageY}<br/>
      offsetX : ${e.offsetX}, offsetY : ${e.offsetY}<br/>
      screenX : ${e.screenX}, screenY : ${e.screenY}
    `
  });
</script>

마우스 클릭

clientX : 0, clientY : 0

pageX : 0, pageY : 0

offsetX : 0, offsetY : 0

screenX : 0, screenY : 0

CSS 효과 모음

석미니 — Wed, 14 Sep 2022 12:30:06 +0900

원 튕기듯한 느낌

<style>
    .circle {
        display: block;
        width: 38px;
        height: 38px;
        margin: auto;
        border-radius: 50%;
        background-color: #a4ece1;
    }
    .circle:hover {
        animation: jello-vertical 0.8s both;
    }
    @keyframes jello-vertical {
        0% {
            transform: scale3d(0.9, 0.9, 1);
        }
        30% {
            transform: scale3d(0.85, 1.21, 1);
        }
        40% {
            transform: scale3d(1.15, 0.85, 1);
        }
        50% {
            transform: scale3d(0.92, 1.08, 1);
        }
        65% {
            transform: scale3d(1.03, 0.95, 1);
        }
        75% {
            transform: scale3d(0.95, 1.03, 1);
        }
        100% {
            transform: scale3d(1, 1, 1);
        }
    }
</style>
<div class="circle"></div>

VSCode 단축키 모음

석미니 — Sat, 23 Apr 2022 14:27:36 +0900

VSCode 단축키 모음

커서

Alt + Shift + I	선택 영역 다중 커서
Shift + Alt + 마우스 드래그	다중 커서
Alt + Click	다중 커서
Alt + Ctrl + ↑/↓	다중 커서를 위/아래로 넓힌다
Ctrl + ←/→	단어의 앞으로 커서 이동
Ctrl + U	이전 커서 위치로 이동

이동

Alt + ↑ / ↓	현재 라인 위치 이동
Ctrl + ↑/↓	커서 위치는 그대로 두고 위 아래로 스크롤
Ctrl + Home/End	파일의 맨 앞 혹은 맨 뒤로 이동
Alt + PgUp/PgDn	커서 위치는 그대로 두고 Page Up/ Page Down

삭제 / 변경

Ctrl + shift + k	한 줄 삭제
Ctrl + BackSpace	단어 부분 삭제 (커서 위의 왼쪽)
Ctrl + Delete	단어 부분 삭제(커서 위치의 오른쪽)
Ctrl + H	단어 변경

선택

Ctl + cmd + Shift + →	태그 단위로 확장 선택
Ctl + cmd + Shift + ←	태그 단위로 축소 선택
cmd + F2	같은 단어 전체 선택
cmd + D	같은 단어 한 개씩 선택
Ctrl + Shift + ← / →	단어 선택
Ctrl + L	라인 단위 선택

기타

Ctrl + Enter	라인 중간에 커서 있어도 다음 라인 생성
Alt + Shift + ↑ / ↓	현재 라인 아래로 복사
Ctrl + /	해당 라인 주석
Ctrl + B	토글 슬라이드바
Ctrl + Shift + P, F1	커맨드 팔렛
Ctrl + P	퀵 오픈
Ctrl + ,	유저 셋팅
Ctrl + J	터미널 열고 / 닫기

웹스톰 단축키 모음

석미니 — Sat, 9 Apr 2022 12:58:52 +0900

웹스톰 단축키

단축키	속성
Ctrl + Alt + L	코드 정렬
Ctrl + W	텍스트 확장 선택
Ctrl + D	선택된 블럭을 복제 / 라인 복제
Ctrl + Y	라인 삭제
Alt + J	같은 단어 차례선택
Ctrl + Shift + Alt + J	같은 단어 모두 선택
Alt + Shift + ↑, ↓	라인 이동
Ctrl + G	라인번호 이동
Shift + Enter	아래로 새로운 라인으로 줄바꿈하기
Ctrl + Alt + Enter	윗줄로 새로운 라인으로 줄바꿈하기
Ctrl + Drag	드래그 한 코드를 마우스로 원하는 위치로 이동시키기
Ctrl + Shift + v	최근 복사했던 목록 보여주기
파일/폴더 선택 후 Ctrl + Shift + R	해당 파일에서 일치 단어 전체 찾기
Ctrl + Shift + M	괄호이동
Ctrl + Shift + ] / [	가장 가까운 괄호 시작/종료로 이동
Ctrl + Alt + ← , →	이전 커서가 있던 화면으로 이동
Ctrl + g	특정 line 번호로 이동
Ctrl + Shift + N	파일 검색