방과후 개발&계발노트

디자인 시스템이 무너질 때, Tailwind로 유연하게 대응하는 법

czecze — Tue, 8 Apr 2025 08:00:01 +0900

// tailwind.config.js
theme: {
  extend: {
    colors: {
      campaign: {
        primary: '#ff3c00',
        secondary: '#ffe8e0',
      }
    }
  }
}

Tailwind CSS를 쓰다 보면 “와, 이거 진짜 빠르고 편하다!” 싶을 때가 많죠.
디자인 시스템 기반으로 클래스만 조합하면 바로 UI가 완성되고,
CSS 파일 따로 안 만들고도 컴포넌트 개발을 뚝딱 해낼 수 있으니까요.

그런데 실무에서는 꼭 이런 상황이 생깁니다:

브랜드 캠페인이나 이벤트 페이지
강한 브랜딩이 필요한 프로모션 섹션
특정 시즌이나 트렌드에 맞춘 비주얼 요구

이럴 때는 기존의 디자인 시스템을 벗어난 스타일이 요구되고,
“어… 이건 시스템으로는 커버가 안 되는데?” 하는 일이 자주 발생합니다.
Tailwind로만 깔끔하게 유지하던 스타일 구조가,
순식간에 무너지는 기분이 들죠.

그럼 이런 상황에서는 어떻게 대응하면 좋을까요?

목표는 “유연하게 대응하면서도 시스템을 지키는 것”

Tailwind는 유틸리티 기반이라 확실히 빠르긴 하지만,
설계 없이 예외 스타일을 덕지덕지 붙이기 시작하면
곧바로 유지보수 지옥이 펼쳐집니다.

그래서 중요한 건:

디자인 시스템은 기본으로 유지하면서,
예외적인 요구는 구조적으로 유연하게 대응하는 것.

Tailwind를 잘 활용하면 이게 충분히 가능합니다.

✅ 실무에서 자주 쓰는 Tailwind 예외 대응 전략 5가지

1. @layer로 캠페인 스타일 따로 분리하기

Tailwind는 @layer 기능을 통해 스타일 우선순위를 컨트롤할 수 있어요.
캠페인용 스타일만 따로 관리하면,
기존 디자인 시스템을 건드리지 않고도 원하는 스타일을 덧붙일 수 있습니다.

/* campaign.css */
@layer components {
  .campaign-heading {
    @apply text-[48px] font-extrabold text-[#ff3c00];
  }

  .campaign-button {
    @apply px-6 py-3 rounded-full bg-[#ff3c00] text-white hover:bg-[#d93200];
  }
}

이렇게 분리해두면 디자인 팀과 협업할 때도 훨씬 명확해져요.

2. JIT 유틸리티로 한정된 스타일만 빠르게 적용하기

Tailwind JIT 모드를 사용하면, 아래처럼 인라인에서 자유롭게 수치를 조절할 수 있습니다.

<div class="text-[40px] tracking-[0.03em] text-[#ff6600] font-bold">
  キャンペーン開催中！
</div>

이런 방식은 “한 번 쓰고 끝날” 스타일에 잘 어울려요.
하지만 반복되거나 여러 곳에서 쓰일 예정이라면, @layer나 컴포넌트 추출이 더 좋습니다.

3. clsx나 tailwind-variants로 조건 분기 처리하기

예외 스타일이 있는 컴포넌트를 분기 처리할 땐, clsx나 tailwind-variants를 쓰면 깔끔하게 정리할 수 있어요.

const headingClass = clsx(
  "text-2xl font-semibold",
  isCampaign && "text-[48px] text-[#ff3c00] tracking-tight"
);

혹은 더 구조적인 방식이 좋다면:

const heading = tv({
  base: "font-semibold",
  variants: {
    type: {
      default: "text-2xl",
      campaign: "text-[48px] text-[#ff3c00] tracking-tight",
    }
  }
});

이렇게 하면 UI 컴포넌트 내에서도 디자인 시스템 기반 + 예외 대응을 동시에 다룰 수 있어요.

4. tailwind.config.js에서 토큰을 확장해서 관리하기

예외 스타일이 반복될 것 같다면, 아예 Tailwind의 설정을 확장해서 관리하는 것도 좋아요.

// tailwind.config.js
theme: {
  extend: {
    colors: {
      campaign: {
        primary: '#ff3c00',
        secondary: '#ffe8e0',
      }
    }
  }
}

<button class="bg-campaign-primary hover:bg-campaign-secondary">
  応募する
</button>

이렇게 하면 기존 디자인 시스템을 깨지 않고,
캠페인만의 “확장된 토큰”으로 정리할 수 있어요.

5. 팀 안에서 “예외 디자인 처리 기준”을 정해두기

마지막으로 가장 중요한 건, 팀의 기준을 명확히 정해두는 것이에요.

예를 들어 이런 식의 가이드라인이 있으면 좋아요:

✅ 기본은 Tailwind 유틸리티만 사용
✅ 예외는 campaign-* 클래스 또는 별도 CSS 파일로 관리
✅ 반복성 있는 스타일은 디자인 시스템에 흡수 고려
❌ 인라인 스타일(style="")이나 !important는 지양

이런 기준이 있으면, 실무에서 “이건 시스템에 넣을까, 그냥 예외 처리할까?”를 결정하는 게 훨씬 쉬워져요.

✍️ 정리하며

Tailwind는 규칙을 잘 지키면서 사용하면 빠르고 일관성 있는 UI 구현이 가능한 강력한 도구입니다.
하지만 현실적인 요구는 언제나 시스템 밖에 있기 마련이죠.

디자인 시스템을 완전히 깨버리는 게 아니라,
“예외를 예외로 다룰 수 있도록 구조를 갖춰두는 것”,
그게 Tailwind를 실무에서 진짜 잘 쓰는 방법이라고 생각합니다.

Tailwind가 불편했던 나에게 – 왜 인기 있고, 어떻게 잘 써야 할까?

czecze — Mon, 7 Apr 2025 18:13:09 +0900

프론트엔드를 하다 보면 CSS를 어떻게 관리할지에 대한 고민이 끝이 없다.
그 중 하나가 바로 Tailwind CSS. 최근엔 거의 “프론트엔드의 표준”처럼 쓰이지만, 나는 처음엔 Tailwind가 너무 불편하게 느껴졌다.

‍♀️ Tailwind, 처음엔 진짜 보기 힘들었다

Tailwind를 처음 접했을 때의 느낌은 이랬다

<div class="flex flex-col items-center justify-between px-6 py-4 bg-white text-gray-800 rounded shadow-md hover:bg-gray-100 transition duration-200 ease-in-out">

“이걸 어떻게 읽지?”
“로직과 스타일이 왜 이렇게 섞여있지?”
“이 상태에서 버튼 스타일 바꾸려면 어디를 건드려야 하지?”

Tailwind를 쓰다 보면 HTML과 로직 안에 스타일 클래스가 범벅돼서
가독성도 떨어지고,
UI 버그 추적도 어려워지고,
컴포넌트 재사용도 안 되고,
결국 유지보수 지옥이 되기 쉽다.

그런데 왜 이렇게 인기일까?

이렇게 불편한 면이 있는데도, Tailwind는 왜 그렇게 인기 있을까?
한 마디로 말하면, “빠르고 실용적이기 때문”이다.

Tailwind의 장점 정리

장점	설명
⚡ 빠른 개발 속도	스타일 파일 없이도 바로 클래스만으로 디자인 가능
일관된 디자인 시스템	spacing, color, font 등을 테마 기반으로 자동 정리
불필요한 CSS 제거	안 쓰는 클래스는 자동 제거(PurgeCSS/JIT)
빌드 크기 작음	필요한 유틸리티만 컴파일됨
반응형, 상태 관리 쉬움	hover:, md:, dark: 등 클래스 하나로 대응 가능
디자인 시스템 없이도 UI 구현 가능	작은 프로젝트나 MVP에 최적

단점도 명확하다

Tailwind는 마법의 해결책은 아니다. 잘못 쓰면 오히려 더 지저분해질 수 있다.

Tailwind의 단점

단점	설명
클래스 지옥	많은 속성을 가진 요소는 클래스가 너무 길어짐
‍♀️ 추상화 어려움	같은 스타일을 반복해서 쓰게 됨 (컴포넌트 추출 없으면)
학습 난이도	pt-6, text-base, gap-4 등 익숙해지기까지 시간이 걸림
디자인 시스템 없이 사용하면 비일관성	팀 단위 사용 시 기준이 없으면 혼란
잘못된 동적 클래스 사용 시 빌드 용량 폭증	bg-${color}-500 같은 코드가 purge되지 않음

CSS-in-JS / CSS Modules와 비교

항목	Tailwind	CSS-in-JS(styled-components등)	CSS Modules
개발 속도	빠름	보통	느릴 수 있음
스타일 추상화	약함 (@apply 또는 컴포넌트 추출 필요)	강함 (props로 분기 가능)	강함
가독성	낮을 수 있음	좋음	좋음
재사용성	낮음 -> 직접 분리해야	높음	높음
유지보수	잘하면 쉬움	쉬움	쉬움
빌드 성능	빠름, 가볍다	런타임 존재로 느릴 수 있음	중간
러닝커브	약간 있음	적음	적음
디자인 시스템 지원	내장(theme)	별도 구축 필요	없음

✨ Tailwind를 올바르게 사용하는 팁

Tailwind를 불편하지 않게 쓰기 위해선 “구조화”와 “정리”가 핵심이다.

1. 컴포넌트화

Tailwind 클래스가 많은 경우, 반드시 컴포넌트 단위로 추출해야 유지보수하기 쉽다.

// Before
<button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  저장
</button>

// After
<Button>저장</Button>

2. clsx, tailwind-variants로 클래스 정리

const btnClass = clsx(
  "px-4 py-2 rounded",
  variant === 'primary' && "bg-blue-500 text-white"
);

또는 더 구조적으로

const button = tv({
  base: "px-4 py-2 rounded",
  variants: {
    variant: {
      primary: "bg-blue-500 text-white",
      secondary: "bg-gray-100 text-black"
    }
  }
})

3. @apply로 유틸리티 클래스 추출

.btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded;
}

4. JIT-safe 클래스만 쓰기

JIT에서는 문자열로 동적으로 만든 클래스는 제거되지 않음.

// ❌ 이런 식은 purge 안 됨
const btnClass = `bg-${color}-500`;

// ✅ 명시적 조건 분기
color === 'red' ? 'bg-red-500' : 'bg-blue-500';

결론: “Tailwind는 강력한 도구지만, 설계 없이 쓰면 독이 된다”

Tailwind는 MVP나 빠른 개발, 디자인 가이드가 없는 프로젝트에 엄청난 속도를 제공한다.
하지만 구조 없이 쓰면 지저분해지고, 유지보수가 어려운 스타일 스파게티가 된다.

Tailwind를 쓸 때 가장 중요한 건:

✅ “구조화된 컴포넌트 설계”
✅ “클래스 정리”
✅ “디자인 기준의 일관성 유지”

Tailwind가 처음엔 낯설고 보기 불편했지만,
지금은 오히려 “디자인 시스템이 없는 팀”이나 “빠르게 움직이는 팀”에서 가장 효율적인 선택지가 될 수 있다고 느낀다.

너무 많거나 무겁게 느껴진다면,
Tailwind를 “CSS 프레임워크”가 아니라 “디자인 규칙 도우미”로 생각해보자.
그 순간부터, Tailwind는 꽤 쓸만한 조력자가 될지도 모른다.

프론트엔드엔지니어가 갖춰야할 모션그래픽기술

czecze — Fri, 28 Feb 2025 10:00:11 +0900

프론트엔드 분야에서는 이제 단순히 화면에 데이터를 뿌려주는 것만으로는 부족해지고 있습니다. 사용자 경험(UX)을 향상시키기 위해서는 자연스럽고 매끄러운 모션 그래픽이 점점 더 중요해지고 있죠. 부드러운 애니메이션과 미려한 전환(transition)은 단순히 시각적 만족을 넘어 사용자의 몰입감과 이해도를 높여주며, 브랜드 이미지를 강화하는 데도 큰 역할을 합니다. 이번 글에서는 프론트엔드 엔지니어가 갖춰야 할 모션 그래픽 기술과 함께, 어떤 부분에 집중해 학습하면 좋을지 정리해보겠습니다.

1. CSS 애니메이션과 트랜지션

CSS Transition

• 간단한 상태 변화

버튼 호버 시 색상이 부드럽게 바뀌거나, 요소의 위치가 슬라이드 되는 등 기본적인 모션을 구현할 때 주로 사용됩니다.

• 사용 예시

button {
  background-color: #007aff;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0051af;
}

• 장점

• 구현이 간단하고, 브라우저 호환성도 비교적 넓습니다.
• 사소한 상호작용(micro-interaction)에서 가볍게 사용하기 좋습니다.

CSS Animation

• Keyframes 기반 애니메이션

@keyframes를 정의하여 시작과 끝, 또는 여러 중간 상태를 순차적으로 연결해 애니메이션을 만들 수 있습니다.

• 복잡한 애니메이션

트랜지션으로 구현하기 어려운 반복 동작, 순차적 움직임 등을 표현할 때 유용합니다.

• 성능 고려

특히 transform과 opacity를 활용하면, GPU 가속을 통한 매끄러운 모션을 구현할 수 있습니다.

2. JavaScript 애니메이션 라이브러리

GSAP (GreenSock Animation Platform)

• 세밀한 제어

타임라인 기반으로 여러 요소들을 순차 또는 병렬로 제어할 수 있어, 복잡한 장면 전환에 적합합니다.

• 성능 최적화

GSAP은 브라우저 성능을 고려해 설계되어 있어, 비교적 무거운 애니메이션도 부드럽게 처리하는 편입니다.

• 실무 적용 예

광고 배너, 게임, 대화형 웹 페이지 등 화려한 모션이 필요한 곳에서 자주 사용됩니다.

Framer Motion (React 전용)

• React 친화적

React 컴포넌트에 props 형태로 애니메이션을 설정할 수 있어, 선언형 방식으로 쉽게 모션을 제어할 수 있습니다.

• Variants와 트랜지션

컴포넌트 상태별 애니메이션 정의가 간편하며, 마운트·언마운트 시 자연스러운 진입·퇴장 모션을 지정할 수 있습니다.

• 실무 적용 예

React 기반 프로젝트에서 페이지 전환, 카드 리스트 애니메이션, 드래그 & 드롭 인터랙션 등 다양한 모션 구현.

Anime.js, Velocity.js 등

• 라이트웨이트

GSAP보다 비교적 가벼우며, 간단한 애니메이션에는 최적화된 선택지가 될 수 있습니다.

• 적용 범위

숫자 카운팅, SVG Path 애니메이션, 스크롤 트리거 효과 등 다양한 영역에 활용 가능합니다.

3. SVG 애니메이션 & Lottie

SVG 애니메이션

• 벡터 그래픽의 장점

해상도에 구애받지 않고 선명하며, 경로(Path)를 활용해 정교한 모션을 만들 수 있습니다.

• 애니메이션 기법

stroke-dasharray, stroke-dashoffset 등을 이용해 선이 그려지는 효과, 혹은 transform을 사용한 회전·이동 등을 구현할 수 있습니다.

• 인터랙션과 결합

마우스 오버, 스크롤 위치 등에 따라 SVG가 부분적으로 움직이거나 색이 바뀌는 인터랙션을 만들 수 있습니다.

Lottie (Bodymovin)

• 에프터 이펙트(After Effects) 연동

디자이너가 만든 에프터 이펙트 애니메이션을 JSON으로 내보내, 웹·모바일에서 그대로 재생 가능

• 부드러운 이미지 애니메이션

벡터 기반이므로 가벼운 파일 크기로 정교한 애니메이션을 표현할 수 있습니다.

• 실무 사용 예

로딩 스피너, 앱 첫 화면의 브랜드 로고 애니메이션, 동작 안내 튜토리얼 등.

4. 인터랙티브 스크롤 및 마이크로인터랙션

Scroll 기반 모션

• Parallax 효과

배경 레이어와 전경 레이어가 서로 다른 속도로 움직여 깊이감을 주는 기법으로, scrollY 값을 이용하거나 라이브러리(ScrollMagic 등)를 사용할 수 있습니다.

• Scroll Trigger

특정 스크롤 위치에 도달하면 애니메이션이 재생되거나, 요소가 시야에 들어오면 점차 나타나는 등의 효과를 구현할 수 있습니다.

마이크로인터랙션 (Micro-interaction)

• 사용자 피드백

버튼 클릭 시 또는 폼 입력 완료 시, 사소하지만 즉각적인 피드백을 제공해 사용감(UX)을 대폭 개선합니다.

• 예시

• 좋아요 버튼을 누르면 하트가 튀어오르는 애니메이션

• 토글 스위치를 켜고 끄는 동작에 자연스러운 모션 추가

• 숫자 카운터가 천천히 증가하며 최종값을 표시

5. 성능과 최적화

하드웨어 가속(Transform & Opacity)

• transform, opacity

GPU 가속을 받을 수 있는 CSS 프로퍼티를 애니메이션할 때, 브라우저 전체 성능이 향상됩니다.

• 주의할 점

박스 섀도우, 높이(height) 등의 속성을 과도하게 애니메이션하면 성능 문제가 발생할 수 있습니다.

RequestAnimationFrame 활용

• JavaScript 애니메이션

setInterval 대신 requestAnimationFrame을 사용해 브라우저 렌더링 타이밍에 맞춘 애니메이션을 작성할 수 있습니다.

• React, Vue, GSAP도 활용

대부분의 JS 애니메이션 라이브러리는 내부적으로 requestAnimationFrame을 적절히 사용해 최적화를 수행합니다.

최적화 툴과 모니터링

• DevTools Performance

Chrome DevTools의 Performance 탭에서 애니메이션이 프레임 드롭을 일으키는 지점을 찾아낼 수 있습니다.

• Profiling

React, Vue 등의 프레임워크 별로 제공되는 프로파일러를 이용해 특정 컴포넌트에서 과도한 리렌더링이 있는지 점검합니다.

프론트엔드 엔지니어가 알아두면 좋을 모션 그래픽 스킬에 대해 살펴봤습니다. CSS의 기초적인 트랜지션과 애니메이션부터 시작해, JavaScript 라이브러리를 활용한 정교한 모션, SVG 및 Lottie 등 다양한 기술을 적절히 결합하면 시각적으로 훌륭한 사용자 경험을 만들어낼 수 있습니다. 중요한 것은 단순히 “보여주기용” 애니메이션이 아니라, 사용자가 자연스럽게 화면을 이해하고 상호작용할 수 있도록 직관적이고 매끄러운 효과를 설계하는 점입니다.

실시간으로 변하는 퍼포먼스 요구 사항과 다양한 기기에서 일관된 모션을 유지하기 위해, 각 요소가 사용자 경험에 어떤 의미가 있는지 끊임없이 고민해보면 좋겠습니다.

프론트엔드 엔지니어 스킬향상을 위한 100가지 과제

czecze — Thu, 27 Feb 2025 16:16:30 +0900

프론트엔드 분야는 변화가 빠르고 새롭고 흥미로운 기술들이 끊임없이 등장하는 만큼, 꾸준한 학습과 실습이 무엇보다 중요합니다.
작은 예제부터 실무 수준의 프로젝트까지 다양한 과제를 경험해 보면, 해당 기술을 이해하는 데 큰 도움이 됩니다.

최근에 팀원들의 역량강화를 위해 커리큘럼을 준비하고 있는데요.
이번 글에서는 프론트엔드 개발 역량을 단계적으로 쌓을 수 있는 100가지 과제를 카테고리별로 정리해보았습니다.

1. HTML & CSS 기초 (1~10)

1. 시맨틱 태그 익히기

• <header>, <nav>, <section> 등을 활용해 자기소개 페이지를 만들어 보세요. 제목, 단락, 리스트 등 시맨틱 태그로 문서를 구조화하면 SEO와 접근성에 유리합니다.

2. CSS 박스 모델 체험

• 여러 개의 박스 요소에 패딩, 마진, 보더 등을 각각 다르게 적용해 시각적으로 어떻게 달라지는지 확인해 보세요.

3. Flexbox 레이아웃 구성

• 헤더, 네비게이션, 메인, 푸터를 모두 Flexbox만으로 나열하는 1페이지 사이트를 만들어 봅니다.

4. Grid로 갤러리 만들기

• CSS Grid로 이미지 혹은 카드 형태의 갤러리를 구성해 봅니다. grid-template-columns와 gap 등을 활용해 화면을 구성해 보세요.

5. 반응형 웹 디자인

• 미디어 쿼리를 써서 모바일, 태블릿, 데스크톱 해상도별로 레이아웃이 달라지는 페이지를 만들어 보세요.

6. 폼(Form) 유효성 검사

• 이메일 입력 폼 등에서 HTML5 속성(required, pattern 등)을 사용해 기본적인 유효성 검사를 적용해 봅니다.

7. 트랜지션과 애니메이션

• 버튼 호버 시 색이 부드럽게 바뀌거나, 특정 요소가 페이드 인/아웃되는 애니메이션을 CSS로 만들어 보세요.

8. 의사 클래스·의사 요소 연습

• :hover, :focus, ::before, ::after 등을 활용해 시각적 효과와 콘텐츠를 추가해 봅니다.

9. 시맨틱 구조 강화

• <article>, <aside>, <footer> 등 HTML5 태그로 웹 페이지를 구성하고, 각각의 의미를 살려 보세요.

10. 접근성(A11y) 고려

• 이미지에 alt 텍스트 넣기, 폼 요소에 라벨 연결하기, 색 대비 확인 등 접근성을 고려한 페이지를 만들어 봅니다.

2. JavaScript 기초 (11~20)

11. 변수·상수 제대로 알기

• var, let, const의 스코프와 재할당 가능 여부를 비교해 보고, 각 특징을 코드로 실습해 보세요.

12. 데이터 타입과 형 변환

• 문자열·숫자·불리언 등을 자유롭게 변환하고, typeof로 타입을 확인하는 스크립트를 작성해 봅니다.

13. 제어문 연습

• 1부터 100까지 반복하며, 3의 배수일 때만 다른 문구를 출력하는 for 혹은 while문 코드를 만들어 보세요.

14. 함수(Function) 기본기

• 화살표 함수, 함수 선언식, 함수 표현식 등 다양한 방식으로 함수를 작성해 보면서 차이를 확인해 봅니다.

15. 스코프(Scope)와 클로저(Closure)

• 내부 함수가 외부 함수의 변수를 참조해 사용하는 예시 코드를 만들어, 클로저 특성을 경험해 보세요.

16. 배열 조작 메서드

• push, pop, shift, unshift 등을 사용해 간단한 큐나 스택을 흉내 내는 코드를 작성해 봅니다.

17. 고차 함수(map, filter, reduce)

• 배열 데이터를 변환하거나 집계할 때 map, filter, reduce를 활용해 최소한의 코드로 원하는 결과를 얻어 보세요.

18. 객체(Object) 다루기

• 중첩된 객체를 생성·조회·수정하는 코드를 작성해 보고, for...in 등을 사용해 키를 순회해 봅니다.

19. 표준 라이브러리 이해

• Date 객체로 현재 시간이나 특정 날짜를 다뤄 보고, Math 객체로 난수 생성 등도 시도해 보세요.

20. DOM 제어 기초

• 버튼 클릭 시 DOM 요소가 생성·삭제되거나 스타일이 변경되는 간단한 예제를 작성해 봅니다.

3. TypeScript (21~30)

21. TypeScript 프로젝트 셋업

• tsconfig.json을 생성하고 컴파일해 실행해 보기. ESNext 기능이 어떻게 변환되는지 확인해 보세요.

22. 기본 타입 지정

• string, number, boolean, any, unknown 등을 코드로 테스트해 보고, 에디터에서 뜨는 에러 메시지를 살펴봅니다.

23. 인터페이스와 객체 타입

• 인터페이스를 이용해 객체 구조를 정의하고, 실제 객체가 이를 만족하는지 실습해 봅니다.

24. 함수의 타입 주석

• 파라미터와 리턴 타입을 명시한 함수를 만들고, 컴파일러가 타입 오류를 어떻게 잡아내는지 체험해 봅니다.

25. 제네릭(Generics)

• 재사용 가능한 함수나 클래스에 제네릭을 적용해 다양한 타입에 대응해 보세요.

26. 클래스와 상속

• 부모 클래스를 만들고, 자식 클래스가 이를 상속 받아 메서드를 오버라이드하도록 구성해 봅니다.

27. 접근 제한자(public, private, protected)

• 클래스에서 private로 선언된 속성을 외부에서 직접 접근하지 못하도록 설정해 보세요.

28. getter/setter

• 값을 읽고 쓸 때 검증이나 변환 로직을 넣기 위해 클래스에 getter, setter를 작성해 봅니다.

29. 모듈 시스템

• ES 모듈(import, export)로 여러 파일 간 코드를 나누고, 각 파일이 어떻게 상호작용하는지 학습해 봅니다.

30. 유니온 타입과 타입 가드

• string | number 같이 여러 타입을 허용하는 경우, 런타임에 타입 판별(typeof)로 분기 처리해 보세요.

4. 비동기 처리·API (31~40)

31. Promise 기초

• fetch나 가짜 비동기 함수를 만든 뒤, then과 catch 체인을 통해 결과를 처리해 봅니다.

32. async/await

• 동일한 로직을 async/await과 Promise 체인 방식 두 가지로 작성해, 가독성을 비교해 보세요.

33. 에러 핸들링

• try/catch 구조로 오류가 발생했을 때 사용자에게 메시지를 보여주는 간단한 예제를 만들어 봅니다.

34. 여러 API 동시 호출

• Promise.all을 사용해 여러 개의 API를 병렬로 호출해 보고, 결과를 한꺼번에 처리해 보세요.

35. AXIOS 사용

• axios 라이브러리를 설치해 GET/POST 요청을 보내 보고, 응답을 React나 Vue 컴포넌트에서 처리해 봅니다.

36. REST API 연습

• 간단한 CRUD 기능을 하는 서버(혹은 Mock API)에 GET/POST/PUT/DELETE를 요청해 보고, 결과를 화면에 뿌려 주세요.

37. GraphQL 기초

• 공개된 GraphQL API에 쿼리나 뮤테이션을 요청해 보고, JSON 형태로 반환되는 데이터를 확인합니다.

38. JSON 데이터 렌더링

• 서버에서 받아온 JSON을 HTML 리스트나 테이블 형태로 가공해 표시해 봅니다.

39. CORS 원리 이해

• 다른 도메인에서 API를 호출할 때 CORS 에러가 나는 상황을 재현하고, Access-Control-Allow-Origin 등을 확인해 보세요.

40. WebSocket 체험

• WebSocket 서버(또는 Firebase 같은 서비스)를 통해 실시간으로 메시지를 주고받는 작은 채팅 UI를 구현해 봅니다.

5. React 기초 (41~50)

41. Create React App으로 시작

• 빠르게 개발 환경을 구성하고, npm start로 브라우저에서 초기 화면을 확인해 봅니다.

42. 컴포넌트 분리

• 부모 컴포넌트에서 자식 컴포넌트로 props를 전달하고, 자식은 이를 화면에 렌더링하도록 만들어 보세요.

43. useState 사용

• 버튼을 클릭할 때마다 숫자가 증가하는 카운터 컴포넌트를 만들어, 상태 변경 흐름을 익힙니다.

44. useEffect 기초

• 컴포넌트가 마운트될 때 서버에서 데이터를 가져와 화면에 표시해 보세요.

45. 이벤트 처리

• 폼에 입력된 텍스트를 실시간으로 상태에 저장하고, 제출 시 콘솔에 출력해 봅니다.

46. 컴포넌트 재렌더링 분석

• 부모 상태가 변할 때 자식 컴포넌트가 불필요하게 렌더링되지 않는지 확인하고, 성능도 체크해 봅니다.

47. 커스텀 훅(Custom Hook)

• 공통 로직을 별도의 훅으로 분리해, 여러 컴포넌트에서 재사용할 수 있도록 만들어 보세요.

48. React Router

• SPA 형태로 여러 페이지를 구성하고, URL에 따라 다른 컴포넌트를 표시하는 라우팅 기능을 구현합니다.

49. Context API

• 전역 상태를 Context로 관리하고, 깊은 자손 컴포넌트까지 데이터를 전달하거나 업데이트해 보세요.

50. React + TypeScript

• TypeScript를 도입해 컴포넌트의 props와 state에 타입을 적용하고, 에디터에서 제공되는 자동 완성과 에러 검사를 체험해 봅니다.

6. Vue 기초 (51~60)

51. Vue CLI 혹은 Vite 프로젝트 생성

• Vue 3 프로젝트를 간단히 세팅하고, Hello World 화면을 띄워 봅니다.

52. 템플릿 문법과 반응형 데이터

• {{ }} 구문으로 data에 있는 변수를 표시하고, 값이 바뀌면 실시간으로 DOM이 갱신되는 과정을 살펴보세요.

53. v-bind / v-if / v-for / v-model

• Vue 디렉티브의 기본 패턴을 여러 가지 예제(리스트, 폼 입력, 조건부 렌더링 등)로 익혀 봅니다.

54. 컴포넌트 구조화

• 부모 자식 간에 props와 emit을 사용해 데이터를 주고받는 간단한 예제를 작성해 보세요.

55. 라이프사이클 훅(onMounted 등)

• Vue 3에서 제공하는 라이프사이클 훅을 사용해, 컴포넌트 초기화나 정리 작업을 시도해 봅니다.

56. Composition API

• Vue 3 고유의 Composition API를 이용해 setup 함수 안에서 reactive, ref 등을 정의하고, 로직을 분리해 보세요.

57. Vue Router

• 라우팅을 추가해, 여러 페이지가 하나의 Vue 앱 안에서 전환되는 SPA를 구성합니다.

58. Pinia 또는 Vuex

• 상태 관리 라이브러리를 도입해, 다수의 컴포넌트가 전역 상태를 공유하고 업데이트하게 만들어 보세요.

59. API 호출과 에러 처리

• axios로 서버에서 데이터를 가져오고, 실패할 때 메시지를 보여주는 로직을 구현해 봅니다.

60. Vue + TypeScript

• TypeScript 기반 Vue 3 프로젝트를 설정해 .vue 파일에서 타입 지원을 받고, 컴포넌트 로직에 타입을 적용해 봅니다.

7. 애플리케이션 구축 (61~70)

61. 간단한 Todo 앱

• 추가, 삭제, 완료 체크가 가능한 Todo 리스트를 만들어, 가장 기초적인 CRUD와 상태 관리를 연습합니다.

62. CRUD 앱 확장

• 로컬 스토리지나 Mock API를 이용해 데이터 생성(C), 읽기(R), 수정(U), 삭제(D)을 처리하고 화면에 반영해 보세요.

63. 인증 기능 구현

• 로그인 페이지를 만들고, 토큰이나 쿠키를 통해 사용자의 로그인 상태를 관리하는 간단한 방식을 시도합니다.

64. 대시보드 UI

• 차트 라이브러리(Chart.js 등)를 활용해 통계 그래프나 리스트가 있는 대시보드를 구성해 봅니다.

65. 이미지 업로드 & 미리보기

• 파일을 업로드하기 전에 화면에서 미리 확인할 수 있는 기능을 구현해, 폼 다루는 법을 익혀 보세요.

66. 디버깅 툴 활용

• 브라우저의 DevTools에서 Network, Performance 등 항목을 살펴보고, 자잘한 문제를 해결해 봅니다.

67. SPA 라우팅 관리

• URL 이동 시 서버가 아닌 클라이언트 라우터가 적절히 대응하도록 설정해, 페이지 전환 속도를 높여 보세요.

68. 서버 사이드 렌더링(SSR)

• Next.js나 Nuxt.js 같은 프레임워크를 사용해, 초기 페이지 로드를 서버에서 처리하는 방식을 체험해 봅니다.

69. 실시간 기능(WebSocket/Firebase 등)

• 채팅앱 혹은 알림 시스템처럼, 서버에서 변경 사항이 생길 때마다 자동으로 반영되는 기능을 개발해 보세요.

70. 다국어(i18n) 적용

• 화면 문구를 여러 언어로 전환할 수 있게 만들고, 한국어/영어/일본어 등을 스위치로 바꿔 보세요.

8. 테스트 & 품질 관리 (71~80)

71. 유닛 테스트 환경 세팅

• Jest나 Vitest 등을 설치해 간단한 함수 로직을 테스트하고, 테스트 스크립트를 돌려 봅니다.

72. 컴포넌트 테스트

• React Testing Library나 Vue Test Utils를 써서, 특정 컴포넌트가 기대한 대로 렌더링되는지 확인해 봅니다.

73. 스냅샷 테스트

• UI가 변경될 경우 테스트에서 감지하도록, 스냅샷을 생성하고 비교하는 방식을 익혀 보세요.

74. E2E 테스트

• Cypress나 Playwright를 사용해 실제 브라우저 상에서 사용자 행동을 자동화하고, 결과를 검증합니다.

75. Lint & Format 도입

• ESLint, Prettier를 설정해 일관된 코드 스타일을 유지하고, 사소한 문법 오류를 예방합니다.

76. Git Hooks 연동

• Husky 등을 사용해 커밋이나 푸시 전 자동으로 테스트와 린트가 실행되도록 세팅해 봅니다.

77. 타입 정의 파일 점검

• TypeScript 사용 시, 외부 라이브러리에 대한 @types 정의가 올바른지, 오류가 없는지 살펴봅니다.

78. 테스트 커버리지 측정

• 커버리지 도구(예: Istanbul)로 어떤 부분이 테스트가 부족한지 파악해 보세요.

79. 버그 트래킹 & 이슈 관리

• GitHub Issues나 Jira를 사용해 버그를 등록하고, 해결 과정과 테스트 케이스를 연결해 협업해 봅니다.

80. CI(Continuous Integration)

• GitHub Actions 같은 CI 툴을 이용해 Pull Request마다 자동으로 테스트를 수행해 품질을 점검합니다.

9. 퍼포먼스 최적화 (81~90)

81. 이미지 최적화

• Lazy Loading을 적용해 이미지가 화면에 등장하기 직전에 로드되도록 설정해 봅니다.

82. 코드 분할(Code Splitting)

• Webpack이나 Vite에서 특정 라우트나 모듈을 별도 번들로 분리하고, 필요할 때만 로드하도록 구성합니다.

83. 캐싱 전략 수립

• 브라우저 캐시나 Service Worker를 활용해 리소스 재다운로드를 최소화하고, 오프라인 지원도 고려해 봅니다.

84. Critical Rendering Path 단축

• CSS, JS 로드 순서를 최적화해 초기 렌더링을 빠르게 하는 방안을 실험해 보세요.

85. Lighthouse 점수 개선

• Chrome DevTools에서 Lighthouse를 돌려 보고, 성능, 접근성, SEO 점수를 올리기 위해 필요한 액션들을 해 봅니다.

86. 웹 폰트 최적화

• 웹 폰트를 지연 로드하거나, 폰트 표시 전략(FOUT/FOIT)을 제어해 레이아웃이 튀지 않도록 설정합니다.

87. HTTP/2, HTTP/3 이해

• 서버 설정에 따라 어떻게 전송 속도가 달라지는지 간단히 확인해 보세요.

88. 이미지 포맷 비교

• PNG, JPEG, WebP, AVIF 등을 비교하고, 각각의 파일 크기와 화질 차이를 테스트합니다.

89. PWA(Progressive Web App) 시도

• 웹 앱 매니페스트와 Service Worker를 추가해, 설치 가능하고 오프라인에서도 동작하는 앱을 만들어 봅니다.

90. 재렌더링 최적화

• React의 memo, Vue의 computed 등을 사용해 불필요한 렌더링을 줄이고, 성능 차이를 체감해 보세요.

10. 응용·실무 스킬 (91~100)

91. UI 라이브러리 활용

• Material UI, Vuetify, Chakra UI 등에서 제공하는 컴포넌트로 페이지를 간단하게 구성해 봅니다.

92. 디자인 툴 연동

• Figma나 Adobe XD에서 내보낸 디자인 파일을 참고해, 실제 마크업을 최대한 똑같이 재현해 봅니다.

93. 모듈 번들러(Webpack, Vite) 이해

• 직접 구성 파일을 작성해 리소스를 합치고 압축해 보는 과정을 체험해 보세요.

94. Git 브랜치 전략

• Git Flow나 trunk-based 개발 방식을 가상으로 적용해 보고, 협업 시 충돌을 어떻게 해결할지 연습합니다.

95. 코드 리뷰 문화 정착

• Pull Request 템플릿을 만들어, 리뷰어가 어떤 부분을 중점적으로 봐야 할지 안내하고, 체계적으로 피드백을 주고받습니다.

96. 보안 대책(XSS, CSRF 등)

• 입력 폼에 스크립트 태그를 삽입하는 시나리오를 테스트해 보고, 이를 방어하는 법을 알아봅니다.

97. 에러 모니터링 도구 연동

• Sentry나 Datadog을 붙여, 런타임 에러가 발생했을 때 바로 알림을 받거나 로그를 분석할 수 있도록 해 봅니다.

98. 지속적 배포(CD)

• Netlify, Vercel, GitHub Pages 등을 이용해 특정 브랜치에 머지되면 자동 빌드·배포가 이루어지도록 설정합니다.

99. i18n 확장

• 단순 번역뿐 아니라, 날짜/시간/통화 등 로케일별 포맷도 자동 처리되도록 구현합니다.

100. 협업형 프로그래밍(Mob/Pair)

• 팀원과 동시에 한 코드베이스를 공유해 실시간으로 수정·의견을 교환하면서 개발해 봅니다.

[JavaScript] 비동기 프로그래밍: 콜백, 프로미스, async/await

czecze — Thu, 11 Jul 2024 05:59:19 +0900

비동기 프로그래밍은 JavaScript에서 매우 중요한 부분을 차지하며, 웹 개발에서 자주 사용됩니다. JavaScript는 기본적으로 단일 스레드 언어이기 때문에, 비동기 작업을 효율적으로 처리할 수 있는 방법이 필요합니다. 이를 위해 콜백, 프로미스, 그리고 async/await 같은 패턴 및 구문이 사용됩니다.

콜백 (Callback)

콜백 함수는 다른 함수에 인자로 넘겨지는 함수로서, 어떤 이벤트가 발생한 후나 특정 작업이 완료된 후에 호출됩니다. 콜백은 비동기 프로그래밍에서 오랜 기간 사용된 패턴이지만, 너무 많이 중첩되면 코드가 복잡해지는 “콜백 지옥”이 발생할 수 있습니다.

const fs = require('fs'); // Node.js의 파일 시스템 모듈

fs.readFile('example.txt', 'utf8', function(err, data) {
    if (err) {
        console.error("에러 발생:", err);
    } else {
        console.log(data);
    }
});

위 코드에서 fs.readFile은 비동기 함수로서 파일을 읽은 후, 그 결과를 처리하기 위해 콜백 함수를 사용합니다.

프로미스 (Promise)

프로미스는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. 프로미스는 비동기 작업을 간편하게 처리할 수 있게 해주며, 콜백 지옥 문제를 해결해줍니다. 프로미스는 then, catch, finally 메소드를 사용하여 결과를 처리합니다.

function fetchData(url) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            try {
                // 데이터 처리 로직 (예시)
                resolve('데이터 받기 성공');
            } catch (error) {
                reject('데이터 받기 실패');
            }
        }, 2000);
    });
}

fetchData('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error(error));

위 코드는 프로미스를 생성하고, 비동기적으로 데이터를 처리한 뒤 결과를 반환합니다. 성공 시 resolve가 호출되고, 실패 시 reject가 호출됩니다.

async/await

async와 await은 프로미스를 더욱 쉽게 사용할 수 있게 해주는 ES2017(ES8)의 추가 기능입니다. async 함수는 항상 프로미스를 반환하며, 함수 내부에서 await 키워드를 사용하여 프로미스의 결괏값을 기다릴 수 있습니다.

async function fetchData(url) {
    try {
        let response = await fetch(url); // `fetch`는 네트워크 요청을 위한 웹 API
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('데이터 가져오기 실패:', error);
    }
}

fetchData('https://api.example.com/data');

위 예시에서 fetchData 함수는 async 함수로 선언되어 있으며, fetch 함수의 프로미스가 해결될 때까지 기다린 후, 데이터를 처리합니다. await은 비동기 작업이 마치 동기적으로 수행되는 것처럼 코드를 작성할 수 있게 해줍니다.
이처럼 콜백, 프로미스, 그리고 async/await는 JavaScript의 비동기 프로그래밍을 위한 강력한 도구들로서, 복잡한 비동기 로직을 보다 효과적이고 이해하기 쉬운 방식으로 관리할 수 있게 도와줍니다.

[JavaScript] 프로토타입과 상속: 객체 지향 프로그래밍 개념, 프로토타입 체인, 상속 방법

czecze — Wed, 10 Jul 2024 09:10:06 +0900

JavaScript에서 프로토타입과 상속은 객체 지향 프로그래밍의 핵심 개념 중 하나입니다. 이 개념들은 객체들이 속성과 메소드를 공유하고 상속받는 방법을 정의합니다. JavaScript에서는 전통적인 클래스 기반 언어와 달리, 프로토타입을 통한 상속 모델을 사용합니다.

프로토타입 (Prototype)

JavaScript의 모든 객체는 prototype 객체를 가집니다. 이 프로토타입 객체는 다른 객체에 공유 속성(메서드 포함)을 제공하는 데 사용됩니다. 즉, JavaScript의 상속은 프로토타입 객체를 통해 속성과 메서드를 자식 객체에 전달하는 방식으로 이루어집니다.

function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log("Hello, my name is " + this.name);
};

const alice = new Person("Alice");
const bob = new Person("Bob");

alice.greet();  // 출력: "Hello, my name is Alice"
bob.greet();    // 출력: "Hello, my name is Bob"

위 예에서, Person 함수는 생성자 역할을 하며, Person.prototype.greet을 통해 모든 Person 인스턴스는 greet 메소드를 공유합니다. 즉, alice와 bob은 각각 자신의 이름을 가지고 있지만 greet 메소드는 공유합니다.

프로토타입 체인 (Prototype Chain)

프로토타입 체인은 객체가 속성이나 메소드를 찾을 때, 자신의 프로토타입뿐만 아니라 연쇄적으로 상위 프로토타입을 검색하는 메커니즘을 말합니다. 만약 객체 자체에 요청된 속성이나 메소드가 없으면, JavaScript는 객체의 프로토타입에서 찾고, 거기에도 없다면 프로토타입의 프로토타입을 찾는 과정을 계속합니다.

function Animal(sound) {
    this.sound = sound;
}

Animal.prototype.makeSound = function() {
    console.log(this.sound);
};

function Dog(name, sound) {
    Animal.call(this, sound);  // Animal 생성자를 호출하여 'sound' 초기화
    this.name = name;
}

Dog.prototype = Object.create(Animal.prototype); // Dog의 프로토타입을 Animal의 프로토타입으로 설정
Dog.prototype.constructor = Dog; // 생성자를 Dog로 재설정

Dog.prototype.introduce = function() {
    console.log("My name is " + this.name + " and I say " + this.sound);
};

const myDog = new Dog("Rex", "Woof");
myDog.makeSound();   // 출력: "Woof"
myDog.introduce();   // 출력: "My name is Rex and I say Woof"

여기서 Dog 객체는 Animal의 속성과 메소드를 상속받습니다. Dog의 인스턴스인 myDog는 자신의 메소드(introduce)뿐만 아니라, 상속받은 Animal의 메소드(makeSound)도 사용할 수 있습니다. 이는 프로토타입 체인 덕분입니다.

상속 방법

상속을 구현하는 표준 접근 방법은 Object.create()를 사용하여 프로토타입 체인을 설정하는 것입니다. 이 방법은 하위 객체가 상위 객체의 프로토타입을 직접 참조하도록 하여 속성과 메소드를 상속받게 합니다.

위의 Dog와 Animal 예시가 이를 잘 보여줍니다. 여기서 Dog.prototype = Object.create(Animal.prototype);라인은 Dog의 프로토타입을 Animal의 인스턴스로 설정하여 Animal의 모든 속성과 메소드를 상속받도록 합니다.

이러한 방식으로 JavaScript에서 프로토타입과 상속을 이해하고 사용하면, 코드 재사용성을 높이고, 보다 효율적이고 유지보수가 용이한 애플리케이션을 구축할 수 있습니다.

[JavaScript] this 키워드: 함수 호출 맥락에 따른 this의 의미

czecze — Tue, 9 Jul 2024 21:00:40 +0900

JavaScript에서 this 키워드는 함수가 호출되는 맥락(context)에 따라 그 의미가 달라집니다. this의 값은 함수가 호출되는 방식에 따라 결정되며, 다양한 시나리오에서 다르게 작동합니다.

1. 전역 컨텍스트에서의 this

전역 실행 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저에서는 window 객체가, Node.js에서는 global 객체가 됩니다.

console.log(this === window); // 브라우저에서는 true

2. 함수에서의 this

일반 함수에서 this의 값은 함수를 호출하는 방식에 따라 결정됩니다.

일반 함수 호출

함수 내에서 this는 전역 객체를 가리키는 경우가 일반적입니다(엄격 모드에서는 undefined).

function showThis() {
    console.log(this);
}

showThis(); // 브라우저에서는 window 객체를 출력, 엄격 모드에서는 undefined 출력

메서드로서의 호출

객체의 메서드로서 함수가 호출될 때, this는 해당 메서드를 호출한 객체에 바인딩됩니다.

const myObject = {
    name: 'ChatGPT',
    showThis: function() {
        console.log(this);
    }
};

myObject.showThis(); // myObject를 출력

3. 생성자 함수에서의 this

새로운 객체를 생성할 때 생성자 함수를 사용하면, this는 새로 생성되는 객체를 가리킵니다.

function Person(name) {
    this.name = name;
}

const person1 = new Person('Alice');
console.log(person1.name); // Alice

4. 화살표 함수에서의 this

화살표 함수에서는 this가 함수 자체의 this가 아니라, 화살표 함수를 둘러싼 외부 함수의 this를 상속받습니다.

const myObject = {
    name: 'ChatGPT',
    showThis: () => {
        console.log(this);
    }
};

myObject.showThis(); // 브라우저에서는 window 객체를 출력

화살표 함수는 주변의 실행 컨텍스트에서 this를 “계승”하기 때문에, 객체의 메서드로 화살표 함수를 사용하는 것은 일반적으로 피해야 합니다. 대신, 함수 표현식을 사용하는 것이 적합합니다.

5. this를 명시적으로 바인딩하기

call, apply, bind 함수를 사용하여 함수의 this 값을 명시적으로 설정할 수 있습니다.

function greet() {
    console.log(`Hello, I am ${this.name}`);
}

const user = { name: 'John' };
greet.call(user);  // Hello, I am John
greet.apply(user); // Hello, I am John

const boundGreet = greet.bind(user);
boundGreet();      // Hello, I am John

[JavaScript] Scope스코프와 Closer클로저

czecze — Tue, 9 Jul 2024 14:37:13 +0900

JavaScript에서 스코프와 클로저는 매우 중요한 개념입니다. 스코프는 변수와 함수가 어디서 어디까지 접근 가능한지를 정의하는 범위입니다. 클로저는 함수가 정의될 때의 렉시컬 환경을 기억하여, 함수가 스코프 밖에서 호출되어도 해당 환경에 접근할 수 있게 하는 기능입니다.

스코프 (Scope)

JavaScript의 주요 스코프 유형은 다음과 같습니다:

1. 전역 스코프 (Global Scope): 코드의 모든 부분에서 접근 가능한 변수나 함수.
2. 함수 스코프 (Function Scope): 함수 내부에서 선언된 변수나 함수는 함수 외부에서 접근할 수 없습니다.
3. 블록 스코프 (Block Scope): let과 const로 선언된 변수는 그들이 선언된 블록(일반적으로 {} 내부) 내에서만 접근 가능합니다.

var x = 10; // 전역 변수

function myFunction() {
    var y = 20; // 함수 스코프 변수
    console.log(x); // 전역 변수 x는 함수 내에서 접근 가능
    console.log(y); // 지역 변수 y는 함수 내에서 접근 가능
}

myFunction();
console.log(x); // 전역 변수 x는 여전히 접근 가능
// console.log(y); // 오류: y는 myFunction의 지역 변수로서 함수 외부에서는 접근 불가능

클로저 (Closure)

클로저는 함수가 생성될 때 그 함수가 선언된 렉시컬 환경을 “기억”하는 특성을 말합니다. 이는 함수가 스코프 외부에서 실행될 때도 그 환경에 있는 변수에 접근할 수 있게 합니다.

function makeCounter() {
    var count = 0; // `count`는 `makeCounter` 함수의 지역 변수

    return function() {
        return count++; // 내부 함수가 외부 함수의 변수 `count`를 참조
    };
}

var counter = makeCounter(); // `counter`는 이제 클로저
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

// 각각의 `counter` 인스턴스는 독립적인 `count` 변수의 참조를 가집니다.
var anotherCounter = makeCounter();
console.log(anotherCounter()); // 0
console.log(anotherCounter()); // 1

이 클로저 예시에서, makeCounter 함수는 내부 함수를 반환하고, 이 내부 함수는 부모 함수의 count 변수를 참조합니다. 이 내부 함수는 makeCounter 함수의 스코프 밖에서 호출되더라도, count 변수에 대한 참조를 유지합니다. 이것이 클로저의 핵심적인 특성입니다.

클로저의 사용 사례

클로저는 데이터 캡슐화, 이벤트 핸들러, 콜백 함수, 모듈 패턴 등 다양한 상황에서 유용하게 사용됩니다. 예를 들어, 개인 정보를 외부로부터 보호하면서 접근을 제어하려는 경우 클로저를 활용할 수 있습니다.

이러한 스코프와 클로저의 개념은 JavaScript를 깊이 이해하고 효과적으로 사용하는 데 있어 필수적입니다.

[Flutter] 클립보드에 데이터를 복사하고 사용하는 방법

czecze — Mon, 17 Apr 2023 11:00:28 +0900

// import
import 'package:flutter/services.dart';

// 복사
final data = ClipboardData(text: "테스트데이터");
await Clipboard.setData(data);
print("복사했어요");

// 클립보드로부터 데이터를 취득
final data = await Clipboard.getData("text/plain");
print(data.text);

[CSS] 창사이즈에 맞춰서 height를 유연성있게 변경해야 할 경우 flex-grow, calc

czecze — Wed, 27 Oct 2021 14:00:43 +0900

infinite scroll을 사용한다던지 디자인에 맞춰 높이를 창사이즈에 맞춰 조절해야 할 때
CSS를 사용하여 조절이 가능합니다

예를 들어 이하의 구조가 있다고 하면
.content의 높이 = container의 높이 - header의 높이가 되게 하는 경우의 높이 설정방법입니다

<div class="container">
  <header class="header"></header>
  <main class="content">
    <section></section>
  </main>
</div>

방법 1

flex-grow

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
 
  .header {
    height: 96px; // 높이가 정해져있을 경우 설정
  }
 
  .content {
    flex-grow: 1; // 단말브라우저에 맞춰 높이를 조절
    overflow-y: scroll;
  }
}

( 브라우저 호환성 )

https://caniuse.com/?search=flex-grow (2021/10)

방법2

calc(100% - xxx)

.container {
  position: relative;
  height: 100%;
  $headerHeight: 96px;
 
  .header {
    height: $headerHeight;
  }
 
  .content {
    position: relative;
    height: calc(100% - $headerHeight);
  }
}

( 브라우저 호환성 )

https://caniuse.com/?search=calc

[Linux] 터미널에 path와 git브랜치명 표시하기 (bash, zsh)

czecze — Fri, 1 Oct 2021 20:45:04 +0900

터미널로 작업을 할 때 내가 작업하는 폴더나, 브랜치명이 표시 되어있으면 편하지 않나요?
그리고 $이 너무 오른쪽에 있으면 긴 명령어를 입력할 때 보기 불편하죠.

그래서 전 터미널의 표시 부분을 커스터마이즈 합니다.

.bashrc

#path＆브랜치표시
function git_ps() {
  git branch --no-color 2> /dev/null | sed -e 's/ //g' | sed -e '/^[^*]/d' -e 's/*\(.*\)/\1/'
}
export PS1='\[\033[32m\]\w\[\033[31m\] [$(git_ps)]\[\033[00m\] \n\$ '

현재의 출력내용을 확인하기

$ echo $PS1

표시내용의 의미

값	의미
\h	호스트명 (처음의 .까지)
\H	호스트명
\t	시간(24시간형식)
\u	유저명
\w	현재 디렉토리(풀path)
\W	현재 디렉토리

글자색설정

값	색
30	Black
31	Red
32	Green
33	Yellow
34	Blue
35	Magenta
36	Cyan
37	White

값	의미
\a	ASCII Bell문자(07)를 표시한다(경고음을 울린다)
\d	「요일 월 일」의 형식（예：Fri Jan 5）의 날짜를 표시한다
\e	ASCII의 이스케이프문자(033)를 표시한다
\h	호스트이름중에 첫「.」까지를 표시한다
\H	호스트이름을 표시한다
\n	줄바꿈
\r	복귀
\s	쉘이름을 표시한다
\t	현재의 시각을 24시간의 「HH:MM:SS」형식으로 표시한다
\T	현재의 시각을12시간의「HH:MM:SS」형식으로 표시한다
\@	현재의 시각을12시간의「am/pm」형식으로 표시한다
\u	현재의 유저명을 표시한다
\v	bash의 버전을 표시한다
\V	bash의 릴리즈를 표시한다
\w	현재 작업디렉토리를 유저의 HOME디렉토리로부터 절대path로 표시한다
\W	현재의 작업디렉토리를 표시한다
\!	이 명령어의 히스토리번호を 표시한다
\#	이 명령어의 명령번호(현재의 쉘의 섹션중에 실행된 명령의 시퀀스의 위치)를 표시한다
\$	실효한 UID가 0인 경우#가 되고, 그 이외의 경우 $가 된다
\nnn	8진수nnn에 대응하는 문자를 표시한다
\\	백슬러쉬를 표시한다
\[	비표시문자의 시퀀스를 개시한다. 이것을 사용하여 PROMPT중의 단말의 제어시퀀스를 포함할 수 있다
\]	비표시문자의 시퀀스를 종료한다

.zshrc

# VCS의 정보를 취득하는 zsh함수
autoload -Uz vcs_info
autoload -Uz colors # black red green yellow blue magenta cyan white
colors

# PROMPT변수안에서 변수참조
setopt prompt_subst

zstyle ':vcs_info:git:*' check-for-changes true #formats 설정항목에서 %c,%u 가 사용가능
zstyle ':vcs_info:git:*' stagedstr "%F{green}!" #commit 하지 않은 파일이 있는 경우
zstyle ':vcs_info:git:*' unstagedstr "%F{red}" #add 하지 않은 파일이 있는 경우
zstyle ':vcs_info:*' formats "%F{cyan}%c%u[%b]%f" #보통
zstyle ':vcs_info:*' actionformats '[%b|%a]' #rebase도중, merge 충돌, formats 이외의 표시 등

# glob에서 사용되는 메타문자(*,[],?…)를 허가
setopt nonomatch

# %b 브랜치정보
# %a 액션이름(merge같은..)
# %c changes
# %u uncommit

# PROMPT표시직전에 vcs_info 를 불러냄
precmd () { vcs_info }

# PROMPT（좌）
PROMPT='%{$fg[green]%}[%n@%m](%~)%{$reset_color%}'
PROMPT=$PROMPT'${vcs_info_msg_0_} 
%{${fg[green]}%}%}$%{${reset_color}%} '

# PROMPT（우）
RPROMPT=''

[Linux] alias설정해서 작업효율성 높이기 (bash, zsh)

czecze — Fri, 1 Oct 2021 00:50:56 +0900

터미널에서 코드를 칠때 자주 사용하는 명령어들이 있나요?
그런 명령어들이 너무 길어서 치기 귀찮을 때, 전 alias를 설정하곤 합니다.

컴퓨터를 포멧하거나 바꿀때마다 매번 설정을 하는 내용을 정리해봤어요.

alias 명령 / unalias 명령

# 설정한 alias를 확인
$ alias

# 설정
$ alias [ 옵션 ] 이름 [= 내용]

# 설정한 alias를 삭제
$ unalias [ 옵션 ] 이름
# 한꺼번에 삭제
$ unalias -a

설정파일들

# bash를 사용하는 경우
$ vi ~/.bashrc

# zsh를 사용하는 경우
$ vi ~/.zshrc

alias 입력이 끝나면 esc :wp 로 저장하고 반영하기

# bash를 사용하는 경우
$ source ~/.bashrc

# zsh를 사용하는 경우
$ source ~/.zshrc

alias로 설정내용이 반영되었는지 확인

설정할 alias가 많을 경우 따로 .aliases라는 파일을 만들어서 저장해 반영하는 방법도 있다

# bash를 사용하는 경우
$ vi ~/.bash_aliases

# zsh를 사용하는 경우
$ vi ~/.zsh_aliases

.bashrc에 아래의 내용을 입력하고 반영(source ~/.bashrc)

if [ -f ~/.bash_aliases ]; then
    . ~/.bash_aliases
fi

.zshrc의 경우에는 아래의 내용을 입력하고 반영 (source ~/.zshrc)

[ -e "${HOME}/.zsh_aliases" ] &amp;
&amp;
 source "${HOME}/.zsh_aliases"

자주 사용하는 alias

#alias
alias l.='ls -d .* --color=auto'
alias ll='ls -la --color=auto'
alias ls='ls -F'

##再起動
alias restart='sudo apachectl restart'
##ホスト修正
alias edithost='sudo vi /private/etc/hosts'


#git
alias gst='git status'
alias gs-c='git switch -c'
alias gc-m='git commit -m'
alias gps='git push'
alias gpl='git pull'

zsh의 경우 -g(글로벌)옵션이 사용가능하다

이 설정을 하면 첫 명령어부분만이 아닌 중간부분의 명령어도 alias가 가능해진다 (bash는 대응이 안되니 주의)
예를 들어 이런 식으로 파이프를 사용하여 연결해서 사용하는 경우

alias -g G='| grep'
alias -g L='| less'

[티스토리] 구독과 댓글이 안되는 분들께

czecze — Sun, 26 Sep 2021 21:35:57 +0900

안녕하세요
저의 조촐한 블로그에 들어와주셔서 감사드려요

현재 저의 블로그는 2차도메인 czenhe.xyz를 사용중입니다.
하지만 이 2차도메인을 사용중에는 티스토리의 로그인이 해제되어버리기 때문에 구독과 댓글이 안된다고 합니다

[안내] 2차 도메인 사용 시 유의사항

혹시나 구독과 댓글을 원하시는 분들께
불편을 드려 죄송하지만 아래의 티스토리 주소로 접속을 하시면 구독,구독해지 & 댓글이 가능해집니다

https://bisaza.tistory.com/

방과후 개발&계발노트

방과후 공부, 독서, IT노트 //////// 도쿄거주중인 프론트엔드 개발자

czenhe.xyz

다시한번 불편을 드려 죄송하고 방문해주셔서 감사합니다

하루 빨리 티스토리의 인터페이스가 개선되었음 좋겠네요 ;ㅁ;

[티스토리] 2차도메인설정시에 유의점 (+애드센스)

czecze — Sat, 25 Sep 2021 11:11:01 +0900

애드센스의 ads.txt문제로 경고가 뜨는게 영 찝찝해하다가 드디어 해결되어서 안심하고
열심히 블로그 써야지!!! 하고 의욕에 불타오르고 있었는데
이래저래 만지작만지작하다가 2차도메인을 설정하면서 신경쓰이는 부분들이 생겨서
공유를 하고자 합니다.

2차도메인이 애드센스에 어떤 영향을 미치나?

지금 이 사이트는 2차도메인 czenhe.xyz 를 사용하고 있습니다.
이 블로그 이외에도 다른 블로그도 쓰고 있고, 그 곳도 2차도메인을 설정하고
애드센스는 2차도메인으로 설정을 했는데

관리화면에서 뜨는 접속수와 애드센스에서 확인하는 페이지뷰수가 너무나 크게 차이가 납니다
뭐, 접속의 정의가 틀리면 그럴 수 있겠거니 하고 넘어갔는데

시간이 흐를수록 좀 이상하다는 생각이 들어서 테스트를 해보기로 했어요.

티스토리의 블로그 관리화면에서 애드센스의 설정을 다 꺼놓고
애드센스 관리화면에서 자동광고를 설정해주었습니다
그러자 2차도메인으로 확인하면 광고가 뜨는데
역시나 티스토리 주소로 들어가면 광고가 안뜨네요

티스토리의 관리화면, 스토리, 프로필 링크는 2차도메인대응을 하지 않는다?

다시한번 말하지만, 지금 이 사이트는 2차도메인 czenhe.xyz 를 사용하고 있습니다.
여러분이 보고 있는 이 곳의 url은 뭐가 표기 되고 있나요?

아마도 검색결과나 제가 남긴 댓글에서 이름을 누르고 들어오셨다면 czenhe.xyz
이름옆에 뜬 제 프로필링크 또는 스토리를 통해 들어온 분들이라면
bisaza.tistory.com 으로 들어오셨겠죠.

그런데 제가 2차도메인인 czenhe.xyz만 애드센스 신청&자동광고설정을 하고 티스토리 주소인 bisaza.tistory.com는 신청을 안한다면?
애드센스 효과가 많이 떨어지겠죠.

그래서 조금 전에 티스토리 주소로 다시 애드센스 신청을 넣었습니다.
그 결과는 애드센스승인이 난 뒤에 경과를 지켜보고 다시 알려드릴께요

2차도메인으로 접속시 구독과 댓글에 영향이?

어제 다른 분들의 블로그에 댓글을 남기고 왔는데요
몇몇분들이 댓글을 못다시거나 구독이 안되거나 이상하다고 알려주셔서

확인을 해보니
2차도메인으로 들어오게 되면 티스토리를 벗어나서? 로그인을 안한 상태가 되는 것 같아요

스팸이 무서워서 댓글을 로그인한 유저만으로 제한을 했었는데 불편한것 같아서 설정을 바꿨습니다.

계정관리의 프로필레이어에서 서브블로그의 링크를 2차도메인으로 했었는데 티스토리url로 변경했어요

기껏 2차도메인을 준비했는데 어떻게 설정을 해도
결국 이름을 누르고 들어오는 경우에는 구독과 댓글달때 영향을 미치니 불편하네요

일단 경과를 보고 대책이 없을까 더 알아봐야겠어요.

[Git] git switch 작업중인 브랜치를 다른 브랜치로 바꿔볼까?

czecze — Fri, 24 Sep 2021 10:00:11 +0900

예전에는 git checkout으로 브랜치를 변환했었는데
작년 2020/8/16 Git이2.23.0버전으로 릴리즈하면서 git switch와 git restore가 새로 도입되었죠

git brunch을 이용해서 작업중인 브랜치를 확인하거나 이제 사용하지 않는 브랜치를 삭제하는 건 이 전 포스트에 올렸었는데
이번에는 작업중인 브랜치를 바꿔서 작업하는 방법을 알아보려고 합니다

git switch

git switch는 이름 그대로 브랜치를 변경하는 기능입니다
작년에 git switch가 도입되기 전까지 사용해오던 git checkout도 지금까지 써온대로 사용이 가능합니다
(checkout으로 다양한 기능이 들어가 있었기 때문에 switch와 restore로 기능을 나눴는데 실험적인 단계이기에 추후에 변경이 있을 수도 있다고 하네요)

브랜치 전환하기

# checkout을 사용할 경우
$ git checkout <branch>

# switch를 사용할 경우
$ git switch <branch>

브랜치를 새로 작성하여 전환하는 경우

# checkout을 사용할 경우
$ git checkout -b <branch>

# switch를 사용할 경우
$ git switch -c <branch>

공식문서(영문)

git-checkout | git-switch

git checkout의 옵션

git checkout [-q] [-f] [-m] [<branch>]
git checkout [-q] [-f] [-m] --detach [<branch>]
git checkout [-q] [-f] [-m] [--detach] <commit>
git checkout [-q] [-f] [-m] [[-b|-B|--orphan] <new_branch>] [<start_point>]
git checkout [-f|--ours|--theirs|-m|--conflict=<style>] [<tree-ish>] [--] <paths>…
git checkout [<tree-ish>] [--] <pathspec>…
git checkout (-p|--patch) [<tree-ish>] [--] [<paths>…]

git switch의 옵션

git switch [] [--no-guess] 
git switch [] --detach []
git switch [] (-c|-C)  []
git switch [] --orphan

[Git] gitconfig설정

czecze — Thu, 23 Sep 2021 19:51:48 +0900

메인설정(global)

$ git config --global user.name "이름"
$ git config --global user.email "메일주소"

위에와 같이 설정을 하게 되면 ~/.gitconfig 에 아래와 같이 설정이 들어가게 된다

# This is Git's per-user configuration file.
[user]
	name = 이름
	email = 메일주소

서브설정

회사프로젝트랑 개인프로젝트로 설정을 변경하는 경우

$ cd ../프로젝트path/
$ git config --local user.name "이름"
$ git config --local user.email "주소"

※프로젝트리포지토리안에 있는 ./.git/config에 설정내용이 들어가게 됨

설정확인

$ git config -l

[Node.js] nvm으로 NodeJS버전관리하기

czecze — Wed, 22 Sep 2021 18:00:45 +0900

※맥OS만 대응합니다. 윈도우즈는 죄송.

우선, nvm을 설치하시죠(이건 나중에 다시 정리를 할께요)

[GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions](https://github.com/nvm-sh/nvm)

Node.js 인스톨

nvm을 인스톨했다면 nvm을 이용하고 Node.js를 인스톨합니다

일반적인 유저라면 LTS(장기서포트)의 최신버전을 설치하는 게 좋을테니 밑의 코드를 실행합니다.

$ nvm install --lts

설치가능한 버전을 확인하고

$ nvm ls-remote

버전을 지정해서 설치할 수도 있어요

$ nvm install v15.8.0

잘 설치가 되었는지 설치한 버전들을 확인해봐요

$ nvm ls

에일리어스설정을 확인

$ nvm alias

이용할 버전을 지정

$ nvm use v15.8.0

만약에 프로젝트 안에 `.nvmrc`화일이 존재한다면 `$ nvm use`만으로 지정이 가능하다
.nvmrc라는 화일안에 아래과 같이 버전만 적어놓고 같이 프로젝트화일을 이용하는 다른 개발자도 nvm을 이용할 경우, 간편하게 버전을 공유해서 작업할 수 있으니 참고하시길

v15.8.0

현재 이용중인 버전을 표시

$ nvm current

npm패키지의 버전관리

자주사용하는 패키지는 글로벌설치해놓기

$ npm install -g ncu npm-check-updates

최신의 LTS를 설치해서 현재 이용하고 있는 Node.js의 패키지도 설치

$ nvm install "lts/*" --reinstall-packages-from=current

실수로 지정한 node에 적절하지 않은 다른 버전의 npm을 설치해버렸을때는?(간혹 에러가 남)

~/.nvm/versions/node/[your-version]/lib/node_modules/npm

이 부분을 확인해서 고쳐넣기

[your-version]를 폴더채로 삭제하고 다시 설치하는 편이 편리하다

[JS정규표현식] URL에서 화일명을 취득하는 정규표현식

czecze — Wed, 22 Sep 2021 13:30:04 +0900

const url = window.location.href;

// 확장자포함한 파일명
const filename_ex = url.match(".+/(.+?)([\?#;].*)?$")[1];
// 확장자없이 파일명만
const filename = url.match(".+/(.+?)\.[a-z]+([\?#;].*)?$")[1];

[JS라이브러리] dayjs를 이용하여 자주 사용하는 날짜 변환클래스 작성하기

czecze — Wed, 22 Sep 2021 09:00:43 +0900

일단 프로젝트안에서 dayjs를 인스톨할것

https://day.js.org/

$ npm install dayjs

간단한 dayjs사용법

import dayjs from 'dayjs'

let dayjsDate = dayjs('2019-03-01') // 2019-03-01일자 dayjs 객체 할당
dayjsDate.add(1, 'day') // 1일 추가(반영 X)
console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'가 아닌 '2019-03-01'가 출력됨
dayjsDate = dayjsDate.add(1, 'day') // 1일 추가
console.log(dayjsDate.format('YYYY-MM-DD')) // '2019-03-02'

utility/date.ts를 작성

typesctipt를 이용합니다

/**
* 날짜 변환 관련된 util
*/
import dayjs, { Dayjs } from 'dayjs'
// FIX: https://github.com/iamkun/dayjs/issues/254
// @see https://github.com/iamkun/dayjs/issues/73#issuecomment-464443622
import customParseFormat from 'dayjs/plugin/customParseFormat'
import utc from 'dayjs/plugin/utc'
import ko from 'dayjs/locale/ko'
dayjs.extend(customParseFormat)
dayjs.extend(utc)
dayjs.locale(ko)

const CUSTOM_PARSE_FORMAT = 'YYYY-MM-DDTHH:mm:ss.000ZZ'

export const SERVER_FORMAT = {
    DATE: 'YYYY-MM-DD',
    DEFAULT: 'YYYY-MM-DDTHH:mm:ss.SSSZZ',
    START_TIME: 'YYYY-MM-DDTHH:mm:00.SSSZZ',
    END_TIME: 'YYYY-MM-DDTHH:mm:59.SSSZZ'
}

export const DISPLAY_FORMAT = {
    DATE: 'YYYY/MM/DD',
    DATE_AND_TIME: 'YYYY/MM/DD HH:mm'
}

/**
 * 날짜문자열, 수치, Date오브젝트, Dayjs오브젝트로부터 Dayjs오브젝트를 건네주기
 * 인수가 없는 경우 현재시간의 Dayjs오브젝트가 돌아온다
 * @param date
 */
export const getDayjs = (date?: string | number | Date | Dayjs, isUTC = false): Dayjs => {
    // UTC의 경우
    if (isUTC) {
        return dayjs.utc(date)
    }

    // string이외에는 커스텀포맷으로 하지 않음
    if (typeof date === 'string') {
        return dayjs(date, CUSTOM_PARSE_FORMAT)
    }
    return dayjs(date)
}

/**
 * 정확한 날짜인지 확인
 * @param date
 */
export const isValidDate = (date?: string | number | Date | Dayjs, isUTC = false): boolean => {
    return getDayjs(date, isUTC).isValid()
}

/**
 * 포맷을 지정하여 날짜를 취득
 * @param date
 * @param format
 */
export const formattedDate = (date?: string | number | Date | Dayjs, format?: string, isUTC = false): string => {
    if (typeof date === 'string' && !date) {
        return ''
    }
    return getDayjs(date, isUTC).format(format)
}

/**
 * 개시시간용: 날짜문자열을 서버에서 사용하는 포멧으로 변환
 * 초수를`00`으로한다
 *
 * @example 2019-09-20T23:00 -> 2019-09-20T23:00:00.000+0900
 * @param date
 */
export const convertStartTimeToServerFormat = (date?: string | Date): string => {
    return formattedDate(date, SERVER_FORMAT.START_TIME)
}

/**
 * 종료시간용: 날짜문자열을 서버에서 사용하는 포멧으로 변환
 * 초수를`59`으로한다
 *
 * @example 2019-09-20T23:59 -> 2019-09-20T23:59:59.000+0900
 * @param date
 */
export const convertEndTimeToServerFormat = (date?: string | Date): string => {
    return formattedDate(date, SERVER_FORMAT.END_TIME)
}

/**
 * 날짜문자열을 서버에서 사용하는 포멧으로 변환
 *
 * @example 2019-09-20T23:59 -> 2019-09-20T23:59:00.000+0900
 * @param date 날짜문자열
 */
export const convertToServerFormat = (date?: string | Date): string => {
    return formattedDate(date, SERVER_FORMAT.DEFAULT)
}

/**
 * 날짜문자열을 서버에서 사용하는 포멧으로 변환
 *
 * @example 2019-09-09T22:56:12.755+0000 -> 2019-09-20
 * @param date 날짜문자열
 */
export const convertToDateServerFormat = (date?: string | Date): string => {
    return formattedDate(date, SERVER_FORMAT.DATE)
}

/**
 * 날짜문자열을 표시용포멧(년월일)으로 변환
 *
 * @example 2019-09-09T22:56:12.755+0000 -> 2019/09/10
 * @param date 날짜문자열
 */
export const convertToDateDisplayFormat = (date?: string | Date): string => {
    return formattedDate(date, DISPLAY_FORMAT.DATE)
}

/**
 * 날짜문자열을 표시용포멧(년월일분)으로 변환
 *
 * @example 2019-09-09T22:56:12.755+0000 -> 2019/09/10 22:56
 * @param date 날짜문자열
 */
export const convertToDateAndTimeDisplayFormat = (date?: string | Date): string => {
    return formattedDate(date, DISPLAY_FORMAT.DATE_AND_TIME)
}

/**
 * 날짜문자열(UTC)을 표시용포멧(년월일분)으로 변환
 *
 * @example 2019-09-27T08:39:45Z -> 2019/09/27 08:39
 * @param date 날짜문자열(UTC)
 */
export const convertToUTCDateAndTImeDisplayFormat = (date?: string | Date): string => {
    return formattedDate(date, DISPLAY_FORMAT.DATE_AND_TIME, true)
}

/**
 * 두 날짜의 차분을 취득(일)
 */
export const daysDiff = (startDate: string | Date, endDate: string | Date): number => {
    return dayjs(endDate).diff(dayjs(startDate), 'day')
}

/**
 * num일 이후의 날을 취득
 */
export const daysAdd = (date: string | Date, num: number, unit: any = 'day'): any => {
    return dayjs(date).add(num, unit)
}

/**
 * num일 이전의 날을 취득
 */
export const daysSubtract = (date: string | Date, num: number, unit: any = 'day'): any => {
    return dayjs(date).subtract(num, unit)
}

다른 파일에서 date util를 불러들여서 이용(예)

import { convertStartTimeToServerFormat } from '~/utility/date.ts'

const serverTime = convertStartTimeToServerFormat('2019-09-20T23:00')
console.log(serverTime) // 2019-09-20T23:00:00.000+0900 가 출력된다

[Git] 로컬프로젝트를 git init해서 gitHub/gitLab에 push하기까지

czecze — Tue, 21 Sep 2021 18:00:23 +0900

GitHub/gitLab에서 리포지토리를 작성한다

로컬에서 작업중인 프로젝트를 git init

$ git init 
$ git add . 
$ git commit -m ':tada: First commit'

리모트 리포지토리(GitHub/gitLab에서 만든 리포지토리)를 등록
```
$ git remote add origin git@github.com:user/xxx.git
```
push
```
$ git push origin master
```
브런치를 전부 push하는 경우에는 이렇게
```
$ git push -u origin --all
```

[Git] git branch 작업중인 브랜치를 확인하고 필요없는 브랜치는 삭제하고

czecze — Tue, 21 Sep 2021 13:00:05 +0900

로컬상에서 브랜치 확인

$ git branch

브랜치 삭제

로컬에서 만든 브랜치 삭제

$ git branch --delete [브런치명]
$ git branch -d [브런치명]

리모트에서도 삭제

$ git branch -D [브런치명]

소개

czecze — Tue, 21 Sep 2021 10:30:03 +0900

안녕하세요.

저는 일본에서 프론트엔드 개발을 하고 있어요

이 곳은 제가 개발을 하면서 자주 사용하는 팁과 스니펫코드들을 모아두기 위해
또한 공부한 것들의 기록을 남겨두기 위해 만든 곳입니다.

각 내용에 대해서 자세한 개념설명같은 건 잘 안할거에요.
왜냐면 그런거 써놔봤자 이해를 못하는 분은 이해를 못하고 이해를 하시는 분에게는 중요한 게 아니거든요.

예전에 썼던 글들을 나중에 수정 또는 보완하기도 하니,
보는 분들도 의견이나 질문이 있으시다면 적극적으로 리뷰와 댓글 부탁드려요

[Git] git commit 또는 push를 취소하고 싶을때

czecze — Tue, 21 Sep 2021 07:29:09 +0900

// 커밋을 지정해서 취소한다
$ git reset HEAD ●●
// add를 취소, 수정한 내용은 보존된다
$ git reset HEAD
// add를 취고, 수정하기 전으로 되돌린다
$ git reset --hard
// 직전의 commit을 취소, 수정하기 전으로 되돌린다
$ git reset --hard HEAD^
// commit과add를 전부 취소
$ git reset --mixed
// commit만 취소
$ git reset --soft
// --amend를 취소,  ●는 $ git reflog 로 확인
$ git reset --soft HEAD@{●}

git reset을 취소하기

$ git reflog
f78da58 (HEAD -> develop, upstream/master, origin/master, origin/HEAD, master) HEAD@{0}: reset: moving to HEAD^
00943ac (upstream/develop, origin/develop) HEAD@{1}: pull upstream develop: Fast-forward
f78da58 (HEAD -> develop, upstream/master, origin/master, origin/HEAD, master) HEAD@{2}: checkout: moving from f78da5815d5cbefdcf1e7509d3b2f3b787a77f51 to develop
f78da58 (HEAD -> develop, upstream/master, origin/master, origin/HEAD, master) HEAD@{3}: checkout: moving from master to origin/develop
f78da58 (HEAD -> develop, upstream/master, origin/master, origin/HEAD, master) HEAD@{4}: clone: from {git주소}

내가 리셋한 로그를 확인하고 그 부분을 지정해서 취소

$ git reset --soft HEAD@{0}

실수로master에 push한commit을 취소하고 싶을 때

// 직전의 commit을 확인
$ git log
// 직전의 commit을 취소
$ git reset --hard HEAD^
// 강제적으로 push
$ git push -f origin master

다른 사람의 commit을 삭제하지 않도록 팀플레이 할때는 금지!!

[영상리뷰] EBS 당신의 문해력 1-3부

czecze — Wed, 21 Apr 2021 22:34:22 +0900

우연히 유튜브의 알고리즘이 나를 이 컨텐츠로 이끌어줘서 보게 되었는데
꽤 흥미로워서 기록을 하게 되었다

[당신의 문해력 홈페이지]

1부- 읽지 못하는 사람들

2부- 공부가 쉬워지는 힘, 어휘력

(영상 하나가 삭제된듯...)

중학교 2학년 역사시간
어려운 단어들이 많이 나와서 아이들이 내용을 잘 이해를 못하고 있었다
수업이 끝나고 기억하고 있는 내용으로 마인드맵을 작성하게 했는데 잘 못적는 아이들이 많은 상황이었다

선생님은 여태까지와는 다른 방식의 수업을 시작했다
우선 모르는 단어에 동그라미치고 단어를 알아보게 하고
그 뒤에 수업을 시작하니 아이들이 이해하기 시작했다

주요어휘를 미리 학습한 뒤에 공부할 때 더 빨리 습득할 수 있었다

미국 캘리포니아의 초등학교
단어를 배우고 그 단어를 그룹으로 나눠 복습하기
어휘에 많은 시간을 들이고 있어서
국어시간처럼 보이지만 사실 역사시간이었다
교과서에도 주요어휘가 적혀있어서 어휘를 제대로 익히게끔 되어있었다

2010년 미국 교육과정을 대폭개정하면서
미래교육에 반드시 필요한 핵심역량으로 '문해력'을 뽑았고
문해력향상을 위해 '어휘교육'을 핵심으로 잡았다

어휘력 향상 프로젝트
- 사회교과서에서 모르는 단어를 찾으라고 했는데 꽤 많은 단어들을 모르고 있었다
- 똑같은 내용인데 하나는 어려운 단어를 사용했고 또 하나는 난이도가 낮은 단어를 사용한 두개의 글을 읽게했다
시선추적방식(시선이 이동하는 위치 또는 움직임을 추적하는 방식)으로 어떤 변화가 있는지 관찰했다
모르는 단어가 등장하자 그 문장을 안 읽기 시작했다
평소에 글을 많이 읽는 학생에게 똑같은 테스트를 했을때 그 학생들은 어려운 단어가 나와도 그대로 읽었고, 어려운 단어가 있는 글이 더 심도있게 느끼고 있었다

어휘력은 어떻게 길러질까
어휘프로젝트 STEP1 사회교과서를 이해하는 데 필요한 학습도구어를 공부
어휘프로젝트 STEP2 배운 어휘가 실제 생활에 어떻게 쓰이는 지 한 문장 쓰기를 통해 복습

3부- 학교속의 문맹자들

역사나 과학등 다방면으로 관심이 많은 9세 아이가
책을 읽을 때 글을 제대로 읽지 못하고 읽으면서 내용을 확실하게 이해하지 못하고 있었다
지적능력과 상관없는 문해력?

코로나때문에 학습퇴행이 심해지고, 학습격차가 벌어지고 있다
학교 폐쇄후에 아이들의 읽기능력이 떨어지고 있었다
이 격차를 어떻게 회복할 것인가

초등학교 6학년인데 저학년이 읽는 책도 읽기 힘들어하는 아이
수학문제를 풀때 계산은 가능한데, 문제를 이해하지 못하고 있었다
목표를 정하고 매일 읽기 쉬운 책을 읽기 시작했다
소리를 내서 읽고 그것을 녹음하고 선생님한테 보내는 숙제를 시켰다

잘 배우려면 자신을 되돌아봐라 (모니터링)

뉴질랜드의 한 초등학교
2학년 국어수업

리딩리커버리(읽기 부진 아동을 평균수준으로 올리기위한 프로젝트)
1. 읽기 부진 아동 지원
2. 1:1 개별화 수업
3. 매일 30분, 1년간 90~120시간 지원

뉴질랜드는 학년별 도달해야할 읽기 수준이 정해져있다
그 수준에 도달하지 못하면 리딩리커버리대상이 된다

나도 어릴적에 그렇게 책을 많이 읽는 편이 아니었는데 그래도 책을 읽으면서 모르는 단어는 그다지 없었던 것 같다.
당시에는 인터넷을 찾는 것도 없었고, 사전을 가지고 있었기에 굳이 모르는 단어를 선생님한테 물어보기보다 스스로 사전을 찾아보고 이해하는 게 당연한 시기여서일까, 이 영상을 보면서 너무 충격적이었다.
간혹 트위터나 유튜브에 올라오는 악플들을 볼때 적혀있는 글을 제대로 이해하지 못하고, 오해하고 악플을 다는 경우가 너무나 많아서 당황스러울 때가 많았는데 이 영상을 보고나니 좀 이해가 되었다.
세상이 편해지면서 글을 읽고 이해하는 능력이 떨어지고 있고, 사회인인 나조차도 글을 읽을때 이전보다 이해력이 떨어지는 감각이 더 커졌기 때문이 나도 반성과 긴장을 하는 계기가 되었다.

4~6부의 리뷰는 나중에...(오늘은 너무 졸려서 이만)

[독서노트] 헬위크 - 에릭 라르센-

czecze — Wed, 24 Mar 2021 09:58:03 +0900

일요일 저녁 친구에게서 헬위크에 관련된 유튜브영상을 추천받아서 보다가

리디셀렉트에 헬위크가 있다는 얘기에 가볍게 속독하면서 정리해보았다.

헬위크 저자에릭 라르센출판한빛비즈발매2017.12.21.

아니, 이미 인생이 헬인데, 헬위크라니 끔찍하다 라고 생각하고 있었는데 거기에 대해서도 작자는 얘기를 하고 있었다.

남들보다 뛰어난 사람이 되는 것은 핵심이 아니다.
더 나은 자신을 만드는 것,
나아가 나 자신의 최고 버전에 이르는 것이 목표가 되어야 한다.
따라서 중요한 것은 성공에 대한 나의 정의다.

일주일간 더 지옥같은 스케쥴을 견뎌야 하는건가.. 했는데 어떻게 보면 지금 헬같다고 느끼는 상황을 가볍게 만들기 위한 수단이 될 수도 있겠다 싶어서 몇가지 요점을 추려봤다

성공적인 삶을 위한 법칙
• 몸을 움직여라
• 즐겨라!
• 멋진 취미를 만들어라.
• 일찍 일어나서 그날 하루 계획을 세워라.
• 건강한 음식을 먹고 운동을 자주하라.
• 누구보다 원대한 목표를 추구하라.
• 소중한 사람들을 챙겨라.
• 당신의 가치를 존중하고 거기에 따라 살아라.
• 언제나 ‘현재에 충실하게 살기 위해’ 노력하라.
• 절대 포기하지 마라.
• 좋아하는 일을 하라.
• 죽도록 열심히 일해라.
• 언제나 자기 자신을 믿어라.

헬위크 동안 평소와 똑같은 일상을 보내되 다만 모든 일을 더 맑은 정신으로, 더 배짱 두둑하게, 더 집중해서 최선을 다해 할 것, 그리고 일상의 새로운 영역들로 관심을 넓혀 마찬가지로 최선을 다할 것. 평소보다 훨씬 뚜렷한 목적의식을 가지고, 더 집중해서 생활하기 때문에 뇌는 평소보다 더 지칠 수 있겠지만 이것들이 나를 강하게 할것이다.

많은 예시들이 있었는데 그 중에 난 이 이야기가 제일 마음에 들었다

한 교수가 자신의 철학 수업을 들으러 온 학생들을 마주 보고 섰다. 그의 앞 책상 위에는 여러 가지 물건이 놓여 있었다. 수업이 시작되었다. 교수는 말없이 커다란 빈 마요네즈 병을 들어 올리더니 그 안에 골프공을 채워 넣기 시작했다. 병이 다 채워지자 학생들에게 병이 가득 찼냐고 물었다. 학생들은 자신 있게 그렇다고 대답했다.

교수가 이번에는 조약돌이 든 통을 집어 들더니 마요네즈 병에 조약돌을 쏟아부었다. 그러고 나서 병을 살짝 흔들자 조약돌이 골프공 사이사이 비어 있던 공간을 메웠다. 교수는 학생들을 향해 이제는 병이 가득 찼냐고 물었다. 학생들은 다시 그렇다고 대답했다.

이번에는 교수가 모래가 든 용기를 집어 들더니 병 안에 쏟아부었다. 모래알이 병에 남아 있던 공간을 채웠다. 교수가 이제는 병이 가득 찼냐고 물었다. 학생들은 두말하면 잔소리라는 듯 힘찬 목소리로 그렇다고 대답했다.

교수가 책상 아래서 컵 두 개를 꺼내더니 그 안에 담겨 있던 커피를 병에 쏟아부었다. 커피가 모래알 주변의 공간을 가득 채웠다. 학생들이 웃었다.

“나는 여러분이 이 병을 여러분의 삶이라고 생각하기를 바랍니다.

골프공은 중요한 것들을 나타내지요. 가족, 아이들, 건강, 친구들, 그리고 여러분의 가장 뜨거운 열정 같은 것들 말입니다. 그런 것들은 만약 여러분이 모든 것을 잃는다 해도 여러분의 삶을 가치 있게 해줄 겁니다.

조약돌은 여러분의 삶 속에 다른 것들, 이를테면 직장이나 집, 자동차 같은 것들을 나타냅니다.

모래는 그 밖에 자잘한 모든 것들을 의미하고요.”

교수가 말을 이었다.

“만약 여러분이 병 속에 모래를 맨 먼저 붓는다면 여러분에게는 조약돌과 골프공을 넣을 공간이 남지 않을 겁니다. 그리고 그건 여러분의 삶도 마찬가지입니다. 여러분이 작은 일에 시간과 에너지를 전부 쏟는다면 정작 여러분에게 정말 의미 있는 것에 쏟을 시간이 없을 겁니다. 그러니까 여러분의 행복에 가장 중요한 것들을 챙기십시오. 아이들과 놀아주세요. 정기적으로 건강검진을 받으세요. 여자 친구와 멋진 저녁 식사를 하러 가세요. 집을 치우고 쓰레기를 버릴 시간은 언제든 있습니다. 무엇보다 골프공을, 정말 중요한 것들을 보살피세요. 우선순위를 명확히 정하는 겁니다. 그 밖에 다른 모든 것들은 모래알에 불과하니까요.”

한 학생이 손을 번쩍 들더니 커피는 무얼 나타내는 거냐고 물었다. 교수가 씨익 웃으며 말했다.

“물어봐줘서 다행이네요. 커피는 여러분의 삶이 얼마나 정신없이 바쁘든 친구와 커피 한잔 마실 여유는 항상 있다는 걸 의미합니다.”

나의 삶을 돌아보고 체크해보자.

당신은 얼마나 살았나?
그동안 무엇을 얻었는가?
스스로 정한 목표들을 달성했는가?
목표를 정하기는 했는가?
당신의 삶 그 자체로 만족하는가?
만족스럽지 않은 부분이 있다면 어떤 부분인가?
그것을 바꾸기 위해 무엇을 할 수 있는가?
당신 스스로 자랑스러운가?
균형 잡힌 삶을 살고 있고 스스로를 잘 통제하는가?
한 인간으로서, 가족의 구성원으로서, 누군가의 동료로서 당신 스스로에게 만족하는가?

세가지 과제

• 당신의 삶을 계획하라.
• 당신의 잠재력을 최대로 끌어올려 크게 향상시키고 싶은 분야를 정하라.
• 헬위크의 목표를 명확하게 정의하고 목표를 달성하기 위한 전략을 세워라.

타인의 의견을 구하기(피드백)

고치고 싶은 것들을 적기

앞으로의 일들을 머리속에 그리기

건강하게 먹고 매일 운동하기

• 운동

　=> 매일 적어도 한번운동 할때마다 최소1시간 일주일에 최소두번은 숨이 턱까지 찰만큼 격렬하게 일상생활속에 활동량을 최대한으로

• 식사

　=> 평상시보다 적게, 자주 단 음식과 정크푸드는 금지

10년, 5년, 1년, 1주의 목표 세우기

성공적인 헬위크를 위한 규칙
• 월요일 아침 5시에 시작해서 일요일 밤 10시에 끝난다.
• 매일 아침 5시에 일어난다.
• 매일 밤 10시에 잠자리에 든다.
• 일주일 내내 맑은 정신으로 열심히 집중해서 일하라.
• 계획대로 실행하는 데 전념하라.
• 언제나 당신 기분을 의식하고 집중하라.
• 하루 일과 중 당신이 해야 하는 여러 역할을 의식하고, 지금 하고 있는 역할에 최선을 다하라.
• 긍정적인 마음가짐으로 항상 기분 좋게 지내고, 해결지향적인 태도로 생활하라.
• 활기차고 주도적인 사람이 돼라.
• 재충전을 위해 양질의 휴식을 취하라.
• 평소보다 외모와 복장에 조금 더 신경 써라.
• 저녁때까지는 모든 사적인 질문에 반드시 답변하라.
• 근무시간에는 소셜 미디어를 하지 않는다.
• 근무시간에는 친구와의 문자메시지, 전화, 이메일이 금지된다.
• 동료들과의 비공식적인 잡담은 최소한으로 한다.
• 하루에 최소한 한 번 이상 운동을 하되, 되도록 아침에 한다.
• 일주일 내내 건강한 음식만 먹는다.
• TV 시청은 금지다.

월요일: 먼저 습관부터 바꿔라	1. 내 습관을 기록하기 습관을 보면 내가 어떤 사람인지, 뭘 달성할지 알 수 있다. 무의식적이고, 사소하고, 반복적인 모든 습관을 하나도 빠뜨리지 말고 종이에 적어라. 2. 좋은 습관과 나쁜 습관을 분류하기 나의 대표적인 습관은 좋은 습관일까, 나쁜 습관일까? 구분하기 어렵다면 배우자나 자식, 친구, 직장 동료에게 물어보자. 내 삶을 구성하는 각 영역에서 최소 한 가지 이상의 습관을 찾아 그것이 좋은 습관인지 나쁜 습관인지 가려보라. 3. 나쁜 습관은 바꾸고 좋은 습관은 강화하기 하루에 딱 1분만 투자해 나쁜 습관을 좋은 습관으로 바꿔라. 아침에 딱 1분만 일찍 일어나자. 하루에 딱 1분만 팔굽혀펴기를 하자. 딱 1분만 계획을 세우는 데 투자하자.
화요일: 좋은 기분을 만들어 집중하라	1. 집중하기 눈앞에 먹잇감을 둔 호랑이처럼 집중하자. 모든 감각과 관심을 한 가지 임무에 집중해 보라. 특히 삶의 긍정적인 부분들에 집중하자. 생각도 못했던 엄청난 보상이 돌아올 것이다. 2. 내가 느끼는 다양한 기분을 통제하기 배우가 된 것처럼 상황에 맞는 기분과 감정을 만들어보자. 내가 어떤 기분과 태도로 이 자리에 있을지 정하자. 뛰어난 배우와 형편없는 배우의 차이는 기분을 통제할 수 있느냐에 달렸다. 내 생각과 기분을 통제할 수 있는 건 ‘나’뿐이란 사실을 명심하라. 3. 기분을 바꾸는 훈련하기 ‘기분’이란 ‘마음의 상태’를 의미한다. 어떤 일을 최고 수준으로 해내려면 어떤 기분이어야 할지 진지하게 생각해 보자. 유능한 사람들은 기분을 바꾸는 데 능하다. 하루에도 몇 번씩 최적의 기분을 만들기 위해 노력하라.
수요일: 계획을 세워 시간을 관리하라	1. 할 일 목록 작성하기 시간 압박에 시달릴 때면 종이를 꺼내 할 일을 모두 적어보자. 그냥 적는 것만으로도 마법처럼 마음이 편해질 것이다. 목록에서 할 일을 하나씩 지울 때마다 마음의 평화는 점점 더 커질 것이다. 2. 연간, 월간, 주간, 일일 계획 세우기 연간 계획표에 중요한 일, 임무, 궁극적인 목표를 적고 중요한 날짜들을 표시하자.\| 월간 일정에 계획을 세우는 시간을 반드시 포함하고 매달 셋째 주 마지막에는 시간을 따로 내어 다음 달 계획을 세우자. 일요일 밤마다 다음 주 계획을 세우고, 전날 밤에는 다음 날 계획을 세워라. 계획을 세우는 것 자체에 엄청난 가치가 있음을 믿자. 3. 한 번에 하나씩 하기 멀티태스킹은 허상이다. 산만한 사람보다는 한 가지에 집중하는 사람이 성공할 가능성이 훨씬 높다. 할 일 목록이 길고 계획이 많다고 해서 한 번에 여러 가지를 하려고 해서는 안 된다. 한 번에 한 가지씩 하라. 집중, 또 집중하라.
목요일: 극한 상황에서 쾌감을 맛보라	1. 잠 안 자고 24시간 일하기 목요일에 밤샘을 하고 금요일에는 계획대로 종일 일을 해보자. 나 자신의 한계가 어디까지인지 알아내자. 2. TV와 SNS 사용금지 시간이 지날수록 일에 집중되며 오히려 편안함을 느낄 것이다. 3. 계속 미뤘던 업무 처리하기 줄곧 미뤘던 업무를 해치우자. 껄끄러운 관계인 클라이언트에게 전화를 거는 것도 좋고, 생각만 해도 울렁거리는 프레젠테이션도 좋다. 강렬한 목요일엔 해내지 못할 일이 없다. 4. 용기를 발휘해 두려움에 직면하기 용기란 간절히 피하고 싶지만 반드시 해야 할 일을 하기 위해 내면의 힘을 끌어모으는 것이다. 늘 두려워했던 일에 직면해 보자. 이번 목요일엔 그 두려움에 맞서자.
금요일: 최고의 휴식법을 찾아라	1. 휴식의 가치를 배우기 휴식은 방전된 배터리를 충전하고 기운을 되찾는 시간이다. 우리를 더 창의적으로 생각하게 해주고, 학습효과를 높여주며, 넓은 시야와 균형감을 가져다준다. 의욕적으로 일하는 사람들은 다른 사람들보다 더 자주 쉰다. 2. 효과적으로 쉬는 방법 익히기 집에 오면 업무에 관한 생각을 접자. 휴대전화 전원을 끄고 가족이나 친구와 시간을 보내자. 때로는 전혀 다른 일에 집중하는 것도 휴식이 될 수 있다. 3. 명상하기 밤잠을 설쳤을 때 명상은 특히 효과적이다. 방해받지 않을 장소를 찾아 5~20분 정도 호흡에 집중하라. 머릿속에 있는 생각을 모두 비우자. 머리가 맑아지고 마음이 차분해지며 좀 더 균형 잡힌 삶을 살게 될 것이다.
토요일: 내면의 대화로 나를 긍정하라	1. 내면의 대화하기 내 안에서 끊임없이 일어나는 부정적인 웅성거림을 멈추자. 스스로를 단련시킬 수 있는 단어, 문장, 질문을 의식하고 동기를 부여할 수 있는 말을 건네자. 2. 잘하는 것 리스트 만들기 기분이 우울할 때는 용기가 나지 않으며 아무리 해도 상황이 바뀌지 않을 거란 비관적인 생각이 들 것이다. 바로 이럴 때, 내가 잘하는 것의 목록을 만들어라. 자신을 과소평가 하지 않는 것이 오늘의 과제이다. 3. 스스로에 대해 긍정적인 생각만 하기 내가 쓰는 단어가 돌멩이고 내 몸이 물이라고 상상해 보자. 돌멩이를 던지는 것도 나, 맞는 것도 나다. 크고 무거운 돌멩이를 던지듯 강력한 말을 하면 선명한 파문이 퍼질 것이다. 가능한 한 자주 나 자신을 칭찬하고, 자랑하고, 에너지를 마음껏 뿜어내자.
일요일: 더 넓은 관점에서 삶을 바라보라	1. 혼자만의 시간 갖기 삶의 더 큰 그림에 대해 심사숙고하자. 헬위크를 돌아보고, 여기서 했던 경험을 분류하고, 더 넓은 관점에서 내 삶을 바라보자, 이 7일의 시간과 지금까지 살아온 세월을 다른 각도에서 평가해 보자. 2. 작은 것들의 의미를 발견하기 청명한 하늘, 따스한 햇살, 졸졸 흐르는 시냇물의 고마움을 느껴보자. 돌아갈 집이 있고, 누군가 나만을 위해 식사를 준비해 주는 데에 감사하자. 내가 자연이나 우주처럼 더 큰 무언가의 일부라는 사실에 경외감을 가지자. 다정한 미소, 수줍은 칭찬, 사랑하는 이의 웃음소리를 결코 잊지 말자. 3. 일요일 오후를 마음껏 즐기기 일주일 동안 스스로에게 금지했던 것을 마음껏 즐기자. 마침내 일요일이 되었다는 사실을 진심으로 축하하자. 갓 구운 뜨거운 팬케이크, 시원한 아이스크림, 달콤한 초콜릿만으로 우리는 행복해질 수 있다. 나 자신의 앞날에 행운을 빌어주자!

월요일: 먼저 습관부터 바꿔라

1. 나에게 어떤 습관이 있는 지 파악하고 의식하고 평가하기

• 어떤 것이 좋은 습관이고, 어떤 것이 나쁜 습관인가?
• 개발하고 싶은 습관은 무엇이고, 뿌리 뽑고 싶은 습관은 어떤 것인가?

2. 새로 들일 습관을 행동으로 옮기고 그 행동을 무의식적으로 하게 될 때까지 반복하기

습관을 기록해보자
나의 좋은 습관, 나쁜 습관을 빠짐없이, 생각이 안나면 주변사람에게 물어서 구체적으로

예시 ↓

• 아침에 욕실에 갈 때 발을 질질 끌며 가는가, 아니면 콧노래를 흥얼거리며 가는가?
• 평소에 그냥 화장만 하는가, 아니면 화장할 때 오늘 이 특별한 하루 동안 당신이 하고 싶은 대화나 되고 싶은 사람, 이루고 싶은 일 등을 생각하는가?
• 셔츠나 블라우스를 다림질하면서 그걸 해야만 하는 일이라고 생각하는가, 아니면 기분 좋게 정성 들여 반듯하게 하는가?
• 되는대로 손에 잡히는 옷을 입는가, 아니면 때와 장소에 맞춰 멋지고 우아하게 입는가? 그렇다면 그렇게 입는 이유가 있는가?
• 아침에 뚱한 기분으로 침대에서 나와 툴툴거리는가, 아니면 기대에 부풀어 활기차게 하루를 시작하고 아침 식탁에서도 행복하고 열정적인 태도를 보이는가?
• 구부정한 자세로 느릿느릿 걸어서 출근하는가, 아니면 환하게 웃으며 등을 꼿꼿이 세우고 걸으며 온몸으로 열정을 내뿜는가?
• 하루의 시작부터 당신은 주위 사람들과 여유 있게 어울리며 좋은 기운을 퍼트리는가, 아니면 약간 움츠려 있는가?
• 하루 계획을 세우는가, 아니면 닥치는 대로 하는가?
• 슬슬 지겨워지거나 피곤해지기 시작할 때 어떤 조치를 취하는가?
• 맥없이 설렁설렁 악수를 하는가?
• 당신과 인사를 나누는 사람의 이름을 자주 잊는 편인가?
• 새로운 사람을 만나면 시선을 못 마주치고 눈알을 굴리는가?
• 직장에서 소셜 미디어를 사용하는가?
• 대화나 회의에서 충분히 듣는가?
• 주위 사람들을 관심 있게 살피는가? 그들이 어떻게 지내는지 아는가? 지금 당신이 있는 그 자리에서 그들의 상황을 조금이나마 나아지게 하기 위해 할 수 있는 일은 무엇인가?
• 일을 곧바로 처리하는가, 아니면 뒤로 미루는가?
• 필요하다면 도움을 청하는가?
• 메일함을 확인하고 메일을 열어서 대충 읽어보고 일에 관한 내용인 것만 확인하고 다시 닫는가?
• 아이들과 함께 있을 때 그 순간에 완전히 전념하는가?
• 일찍 잠자리에 드는가, 아니면 늦게 드는가?
• 잠자리에 들 때 무엇을 떠올리며 행복해하는가?

[Mac OS] macOS Apache에서 Sites폴더를 localhost서버로 이용하는 방법

czecze — Sun, 21 Mar 2021 18:08:24 +0900

개인맥북이 공장수리에서 돌아와서 개인작업을 위해 로컬호스트로 서버를 설정하면서 메모를 남깁니다.

유저디렉토리를 유효화

$ sudo vi /etc/apache2/httpd.conf

아래의 부분이 코멘트아웃되었다면 앞에 있는 # 을 삭제해서 코멘트를 유효화시켜주세요

LoadModule userdir_module libexec/apache2/mod_userdir.so 
LoadModule authz_core_module libexec/apache2/mod_authz_core.so 
LoadModule authz_host_module libexec/apache2/mod_authz_host.so 

# User home directories 
Include /private/etc/apache2/extra/httpd-userdir.conf

개인적으로는 PHP도 사용할 예정이기 때문에 PHP도 유효화하겠습니다

LoadModule php7_module libexec/apache2/libphp7.so

유저설정화일의 불러들이기 설정

$ sudo vi /etc/apache2/extra/httpd-userdir.conf

UserDir Sites 

Include /private/etc/apache2/users/*.conf 
<IfModule bonjour_module> 
	RegisterUserSite customized-users
</IfModule>

유저설정화일의 작성

{username} 는 $ whoami 로 알수 있습니다

$ sudo vim /etc/apache2/users/{username}.conf

처음 설정하는 분은 Sites폴더를 만들어주세요

$ mkdir ~/Sites

DocumentRoot "/Users/{username}/Sites/" 
<Directory "/Users/{username}/Sites/"> 
	AllowOverride All 
    Options Indexes FollowSymLinks Multiviews 
    Require all granted 
</Directory>

Apache에 적용

$ sudo apachectl -t
$ sudo apachectl restart

이제 http://localhost 을 열면 /Users/{username}/Sites/ 의 내용이 표시됩니다.