Juun의 개발 기록

Next.js 이미지 충돌 문제 해결기: GCP 로드밸런서와 캐시 이슈

Juun — Tue, 13 May 2025 12:58:09 +0900

2025년 5월, 운영 중인 Next.js 서비스에서 사용자 프로필 이미지가 간헐적으로 다른 유저의 이미지로 표시되는 현상이 발생했습니다.
주요 증상은 다음과 같았습니다.

현상 요약

동일한 이미지 요청임에도 불구하고 다른 이미지가 표시됨
브라우저 개발자 도구에서 _next/image?... 경로의 이미지 응답이 서버마다 다름
특정 환경에서 304 Not Modified 응답이 의도와 다르게 작동

원인 분석

문제는 최근 GCP 로드밸런서의 정책 변경과 Next.js 이미지 최적화 캐시 처리 방식이 충돌하면서 발생했습니다.

1. GCP 로드밸런서 정책 변경 (2025.04.28 적용)

Google Cloud는 2025년 4월 28일부터 다음과 같은 정책을 적용했습니다:

HTTP/1.1 트래픽에서 hop-by-hop 헤더를 참조하는 커스텀 헤더 사용 제한

(참조: GCP Release Notes)

해당 변경으로 인해 프록시나 로드밸런서가 Vary, Connection 등의 캐시 제어 헤더를 무시하거나 제거하는 사례가 발생할 수 있습니다.

2. 서버 간 이미지 캐시 불일치

Next.js는 _next/image 경로를 통해 이미지를 서버에서 리사이징하고 .next/cache/images에 저장합니다.
여러 서버가 분산되어 있는 환경(GCP에서 라운드 로빈 분산)에서는 아래 문제가 발생합니다:

서버 A와 B가 서로 다른 캐시 상태를 유지
동일한 요청에 대해 다른 이미지 결과를 반환

3. 세션 어피니티 미설정

로드밸런서에 세션 어피니티가 설정되지 않아 클라이언트 요청이 매번 다른 서버로 전달되며 충돌 확률이 증가했습니다.

문제 해결: unoptimized 설정

즉각적인 대응책으로 Next.js 이미지 최적화 기능을 비활성화했습니다.
이를 통해 서버에서 캐시 처리나 이미지 리사이징을 하지 않고, 브라우저가 원본 URL을 직접 요청하게 했습니다.

// Next.js 13 이상
// Next.js 13 이상에서는 next.config.js에서 전역 설정이 가능합니다:
// next.config.js
module.exports = {
  images: {
    unoptimized: true,
  },
};

//Next.js 12에서는 전역 설정 불가
//하지만 Next.js 12 버전에서는 unoptimized 옵션이 전역 설정으로 지원되지 않으며, 개별 컴포넌트에서 직접 설정

<Image
  src={userImageUrl}
  alt="User profile"
  width={100}
  height={100}
  unoptimized
/>

이 조치를 통해:

서버 간 이미지 결과 불일치 문제 해결
브라우저 캐시에 저장되어 재요청 시 일관성 확보
이미지 충돌 현상 즉시 해결됨

추후 대책 및 고려사항

이번 문제를 겪고 나서, 단순히 unoptimized 하나로 넘기기보단 조금 더 근본적인 개선이 필요하겠다는 생각이 들었습니다.

아래는 저희 팀이 실제로 검토했거나 적용 중인 후속 대응들입니다.

1. 세션 어피니티는 꼭 설정해두자

서버가 여러 대인 환경에서는 같은 사용자의 요청이 매번 다른 서버로 전달되면 캐시 충돌이 발생할 수 있습니다.
GCP 로드밸런서를 사용하는 경우, 백엔드 서비스 설정에서 세션 어피니티를 ‘Client IP’ 기반으로 설정해 주는 것이 좋습니다.
이를 통해 같은 클라이언트의 요청이 항상 동일한 서버로 전달되도록 유도할 수 있습니다.

2. 이미지 캐시 디렉토리는 공유하면 좋다

Next.js에서 이미지 최적화를 켜면 .next/cache/images에 서버별로 캐시가 쌓이는데, 이게 서버마다 다르면 똑같은 요청도 결과가 달라집니다.
가능하다면 이 디렉토리를 NFS나 Cloud Filestore 같은 네트워크 스토리지로 묶어서 공유하면 안정성이 높아집니다.

물론 운영 복잡도는 좀 올라갑니다.

3. 헤더 관련해서도 꼼꼼히 보자

디버깅 과정에서 Vary, Accept, Authorization 등의 헤더가 로드밸런서나 프록시에서 필터링되거나 누락되는 경우, 의도한 캐싱 동작이 깨질 수 있다는 사실을 확인했습니다.
특히 Vary 헤더는 브라우저와 CDN이 어떤 기준으로 캐시할지를 결정하는 핵심 요소이므로, 누락될 경우 동일한 URL 요청에 대해 서로 다른 응답이 캐시될 수 있습니다.

4. Cloud CDN도 쓴다면 캐시 정책을 체크

Cloud CDN을 이미지 경로에 적용하고 있다면, 단순히 활성화하는 것만으로는 부족합니다.
캐시 키 구성에 어떤 요소가 포함되는지, 특히 헤더 기반 분기가 고려되는지를 반드시 확인해야 합니다.
예를 들어 Vary 헤더를 포함한 상태에서 브라우저 포맷(WebP 등)에 따라 다른 응답이 나가도록 되어 있다면, 이를 CDN이 제대로 인식하고 처리하고 있는지 검토해야 합니다.

5. Next.js 13

Next.js 13부터는 _next/image 경로로 반환되는 이미지 응답에 Vary: Accept 헤더가 기본적으로 포함됩니다.
이 헤더는 브라우저가 지원하는 이미지 포맷(WebP, AVIF 등)에 따라 다른 리소스를 캐시할 수 있도록 돕는 역할을 합니다.

문제는 GCP 로드밸런서나 기타 프록시 계층에서 이 헤더가 차단되거나 제거되는 경우, 서버 또는 브라우저에 잘못된 이미지가 캐시될 수 있다는 점입니다.
Next.js 12에서는 이 헤더가 기본 포함되지 않기 때문에, 버전 업 이후 예상치 못한 캐시 충돌이 발생하는 경우가 생길 수 있습니다.

따라서 Next.js 13 이상을 사용하는 경우, Vary: Accept 헤더가 클라이언트까지 정확히 전달되고 있는지를 반드시 점검해야 합니다.

저희 팀은 Next 12를 사용중이라 이번 일을 통해 Next13으로 마이그레이션을 고려하고 있습니다.

결론

이번 문제는 단순한 이미지 충돌처럼 보였지만, 로드밸런서의 정책 변경, Next.js 내부 캐시 전략, 서버 아키텍처 구성이 복합적으로 얽힌 이슈였습니다.
unoptimized: true는 빠른 대응책으로 유효하지만, 장기적으로는 분산 환경에 맞는 캐시 전략과 로드밸런서 설정 최적화가 필요하며 비슷한 이슈를 겪고 있는 다른분들에게도 도움이 되는 글이면 좋겠습니다.

[Next.js] next/dynamic 2. 효율적으로 활용하기

Juun — Tue, 10 Dec 2024 16:02:44 +0900

https://puenti.tistory.com/100

[Next.js] next/dynamic 1. 사용법과 빌드 과정

회사 내 서비스가 커지다보니 빌드 시간과 초기 JS 파일의 크기가 커지는 문제가 있었습니다.이는 곧 성능과 속도에 문제가 생길 수 있어 next/dynamic을 적용시켜 개선해보았습니다. next/dynamic은 Ne

puenti.tistory.com

이전 글과 이어지는 내용입니다.

이전 글에서는 기본적이고 원론적인 사용법과 빌드 과정에 대해서 포스팅을 했는데요.

이번 글은 실무에서 적용시키면서 생긴 의문과 적절하게 적용시키는 방법에 대해 포스팅해보겠습니다.

next/dynamic은 동적 로드를 지원합니다.

근데 만약 해당 컴포넌트가 한 개가 아니라 여러 개일 경우 어떻게 적용시키면 좋을까에서 시작했습니다.

A 컴포넌트가 5곳에서 사용되고, 2곳에서만 next/dynamic을 적용한 경우:

동적 로드가 적용된 2곳:
- 이 경우, A 컴포넌트는 초기 번들에서 제외됩니다.
- 해당 페이지가 클라이언트에서 렌더링될 때, A 컴포넌트는 네트워크 요청을 통해 로드됩니다.
- 이로 인해 초기 로드 속도가 개선될 수 있지만, A 컴포넌트를 사용하는 시점에 추가 네트워크 요청이 발생합니다.
동적 로드가 적용되지 않은 3곳:
- 이 경우, A 컴포넌트는 초기 번들에 포함됩니다.
- A 컴포넌트가 필요한 페이지를 방문하면 즉시 렌더링됩니다.
- 네트워크 요청 없이 바로 사용 가능하므로 클라이언트 사이드 성능이 더 좋습니다.

빌드 시 처리 방식:

Next.js는 동적 로드가 적용된 경우와 그렇지 않은 경우를 개별적으로 처리합니다.
- 동적 로드를 사용하는 2곳에서는 A 컴포넌트를 별도의 청크(chunk)로 분리합니다.
- 나머지 3곳에서는 A 컴포넌트를 각 해당 페이지의 번들에 포함합니다.
따라서, A 컴포넌트는 두 가지 방식으로 빌드됩니다:
- 동적 로드용 청크 (사용되는 페이지마다 네트워크 요청으로 로드)
- 초기 번들에 포함된 형태 (해당 페이지를 로드할 때 함께 로드)

주의사항:

A 컴포넌트가 크거나 자주 사용되지 않는다면 next/dynamic을 사용하는 것이 이점이 될 수 있습니다.
하지만 A 컴포넌트가 매우 작거나, 앱에서 자주 사용되는 경우라면 next/dynamic은 불필요한 네트워크 요청을 초래해 오히려 성능에 부정적인 영향을 줄 수 있습니다.
동일한 컴포넌트를 동적 로드와 정적 로드로 혼용하면, 코드 스플리팅 전략이 복잡해질 수 있으니 관리에 유의해야 합니다.

고려사항:

1. 컴포넌트의 크기

컴포넌트가 크고 복잡한 경우:
- 큰 컴포넌트(예: 복잡한 그래프 라이브러리, 무거운 UI 요소)를 next/dynamic으로 분리하면 초기 번들 크기를 줄일 수 있습니다.
- 초기 페이지 로딩 속도가 개선되고, 컴포넌트가 필요한 시점에만 로드되므로 효율적입니다.
컴포넌트가 작거나 경량인 경우:
- next/dynamic으로 분리해도 성능 이점이 크지 않습니다.
- 오히려 네트워크 요청 오버헤드가 발생해 성능 저하가 생길 수 있습니다.

2. 사용 빈도

자주 사용되지 않는 컴포넌트:
- 예: 특정 조건에서만 렌더링되는 모달, 설정 페이지에서만 사용하는 요소.
- 이러한 컴포넌트는 next/dynamic을 적용하면 초기 로드 시 불필요한 코드를 줄일 수 있어 효과적입니다.
자주 사용되는 컴포넌트:
- 예: 대부분의 페이지에서 사용되는 공통 UI 컴포넌트(헤더, 푸터).
- 이런 경우 next/dynamic을 사용하면 매번 네트워크 요청을 해야 하므로 불필요한 오버헤드가 발생합니다.

3. 초기 로드 시간 개선 필요 여부

초기 로드 속도에 민감한 경우:
- 사용자 첫 화면에 표시되는 주요 콘텐츠가 빠르게 로드되어야 하는 경우, 불필요한 컴포넌트를 분리하면 효과가 큽니다.
- 이를 통해 "First Contentful Paint (FCP)"와 "Largest Contentful Paint (LCP)" 메트릭을 개선할 수 있습니다.
로드 속도보다 인터랙티브 경험이 더 중요한 경우:
- 동적 로드로 인해 필요한 순간에 컴포넌트가 지연 로드된다면 사용자 경험이 나빠질 수 있습니다

4. 코드 스플리팅 효과

Next.js는 next/dynamic을 활용해 코드를 스플리팅합니다.
- 동적 로드된 컴포넌트는 별도의 청크로 분리되며, 초기 번들 크기가 감소합니다.
- 따라서 페이지 크기가 크게 줄어드는 경우 next/dynamic의 효과가 매우 큽니다.
- 하지만 컴포넌트를 너무 많이 동적으로 로드하면 요청 횟수가 증가해 HTTP/2 환경이 아닌 경우 성능 저하가 있을 수 있습니다.

권장 사항:

컴포넌트를 사용하는 모든 곳에 대해 next/dynamic을 적용하거나, 모든 곳에서 적용하지 않는 일관된 접근을 사용하는 것이 관리 측면에서 더 효율적일 수 있습니다.
필요하다면 dynamic의 ssr: false 옵션이나 loading 옵션을 사용해 성능을 세부적으로 조정하는 것이 좋습니다.

효과가 큰 시나리오

페이지 전환 후 렌더링되는 컴포넌트:
- 예: 특정 페이지에서만 사용하는 무거운 컴포넌트.
- dynamic(import('...'))으로 처리하면 다른 페이지 로드에 영향을 주지 않음.
SSR이 필요 없는 컴포넌트:
- 클라이언트에서만 동작하는 요소(예: 브라우저 전용 애니메이션).
- ssr: false 옵션으로 서버사이드 렌더링을 비활성화해 더 빠른 렌더링이 가능.

결론:

자주 사용하는 컴포넌트라면 next/dynamic 사용하지 않는게 성능에 더 좋을 수 있음.
만약 사용할 것이라면 dynamic 옵션을 조정할 것!!
자주 사용하는 공통 컴포넌트를 분리할 때는 효과가 미미할 수 있음.

[Next.js] next/dynamic 1. 사용법과 빌드 과정

Juun — Tue, 10 Dec 2024 15:39:51 +0900

회사 내 서비스가 커지다보니 빌드 시간과 초기 JS 파일의 크기가 커지는 문제가 있었습니다.

이는 곧 성능과 속도에 문제가 생길 수 있어 next/dynamic을 적용시켜 개선해보았습니다.

next/dynamic은 Next.js에서 동적 임포트를 지원하는 기능으로, 컴포넌트를 필요한 시점에 로드하도록 설정할 수 있습니다.

특정 컴포넌트에 next/dynamic을 적용하면 해당 컴포넌트는 초기 번들에 포함되지 않고 클라이언트에서 필요할 때 로드됩니다.

next/dynamic을 사용하는 방법은 다음과 같습니다:

import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('./DynamicComponent'));

function Page() {
  return (
    <div>
      <h1>My Page</h1>
      <DynamicComponent />
    </div>
  );
}

export default Page;

next/dynamic은 기본적으로 동적 컴포넌트를 로드하면서 렌더링할 때까지 기다리지만, 다양한 옵션을 추가할 수 있습니다.

1. Loading Component: 로딩 중에 표시할 컴포넌트를 지정할 수 있습니다.

const DynamicComponent = dynamic(
  () => import('./DynamicComponent'),
  { loading: () => <p>Loading...</p> }
);

2. 서버 사이드 렌더링 비활성화: 일부 컴포넌트는 서버 사이드 렌더링이 필요 없는 경우가 있습니다. ssr: false를 사용하면 클라이언트에서만 렌더링할 수 있습니다.

const DynamicComponent = dynamic(
  () => import('./DynamicComponent'),
  { ssr: false }
);

next/dynamic은 페이지나 컴포넌트를 렌더링하는 동안 필요하지 않은 자바스크립트 번들을 지연시켜, 페이지 로딩 성능을 향상시킬 수 있습니다.

또한 next/dynamic을 사용하면 동적으로 import된 컴포넌트는 빌드 시에 정적으로 포함되지 않고, 별도의 청크(chunk)로 분리되어 클라이언트에서 필요한 시점에 로드됩니다. 즉, 빌드 시에는 해당 컴포넌트가 포함되지 않으며, 실행 시에만 로드됩니다.

빌드 과정에서의 동작:

컴파일 단계: next/dynamic을 사용하여 동적으로 import된 컴포넌트는 Next.js 빌드 중에 별도의 청크 파일로 분리됩니다. 이 파일은 페이지가 로드될 때만 브라우저에서 다운로드됩니다.
클라이언트에서 로드: 해당 컴포넌트가 실제로 필요해질 때, 즉 사용자가 해당 페이지를 방문하거나 해당 컴포넌트가 렌더링되는 시점에 동적으로 로드됩니다.

따라서, 빌드 시에 dynamic import된 컴포넌트는 바로 포함되지 않고, 클라이언트 사이드에서 로드될 때만 번들로 포함되며, 초기 로딩 시간은 줄어듭니다.

빌드 후에는 Chart 컴포넌트가 별도의 파일(예: Chart-abc123.js)로 분리되어 클라이언트에서 필요한 시점에만 로드됩니다.

이번 포스팅은 원론적인 내용만 다뤘는데 다음 포스팅은 next/dynamic을 실무에서 적용해보면ㅅ 느낀 점을 포스팅했습니다.

https://puenti.tistory.com/101

[Next.js] next/dynamic 2. 효율적으로 활용하기

https://puenti.tistory.com/100 [Next.js] next/dynamic 1. 사용법과 빌드 과정회사 내 서비스가 커지다보니 빌드 시간과 초기 JS 파일의 크기가 커지는 문제가 있었습니다.이는 곧 성능과 속도에 문제가 생길

puenti.tistory.com

우테코(우아한테크코스) 프론트엔드 폴더 구조 톺아보기

Juun — Mon, 5 Aug 2024 11:22:36 +0900

유유자적 깃헙을 돌아다니며 뛰어난 사람들의 코드를 보며 좌절하던 도중 우연히 우테코 깃헙을 발견했습니다.

네카라쿠배라 불릴 정도로 개발자라면 한 번쯤은 다니고 싶어하는 배민의 부트캠프인 우테코에서는 어떤식으로 디렉토리 구조를 설계하고 코드는 어떻게 짜는지 궁금해서 살펴보았습니다.

배민의 웹서비스는 리액트와 자바로 구성되어 있다고 알고 있습니다.

그래서 그런지 우테코에서도 자바, 리액트로 프로젝트로 되어 있는 것을 확인했습니다.

저는 프론트엔드 주니어 개발자라 프론트엔드 위주로 살펴보았습니다.

1. packge.json

해당 부분에서 눈 여겨본 부분은 3가지 입니다.

1. Next.js의 부재

리액트 공식문서에서 조차 Next.js 사용을 권장하고 있습니다.

근데 우테코의 프로젝트들을 살펴보면 Next.js를 사용하여 프레임워크라는 이점을 이용하기보단

리액트(라이브러리)의 자유도를 더 중요하게 생각하는 것 같았습니다.

많은 분들이 아시겠지만 리액트는 라이브러리입니다. Next.js는 리액트의 프레임워크죠.

Next.js에서 제공하는 편리한 기능 대신 본인들이 필요한 라이브러리들을 하나하나 찾아가며 목적에 맞게 사용한다는 느낌을 받았습니다.

그 예로, 많은 프로젝트에서 상태관리 라이브러리, Redux, Recoil, Zustand와 같은 편리한 라이브러리보단 리액트 ContexAPI를 사용하는 점이 인상 깊었네요.

이러한 과정에서 해당 라이브러리가 왜 필요하고 공부하고 팀원들과 토론하는 과정에서 많은 것을 얻을 수 있겠구나라는 생각을 했습니다.

2. TDD

모든 프로젝트에서 jest와 testing-library 같은 라이브러리를 통해 테스트 코드 작성을 통해 코드의 품질을 높이려는 노력이 보였습니다.

3. msw

msw란 먼저 MSW를 간략하게 설명하면, MSW(Mock Service Worker)란, 클라이언트가 HTTP 요청을 전송하면 Service Worker가 요청을 가로챈(intercept) 후 Mocking된 응답 값을 반환함으로써 서버와의 통신을 모방하는 오픈소스 라이브러리입니다.

요즘 웹 서비스는 프론트엔드와 백엔드가 분리되어 있습니다.

풀스택을 제외한 프로젝트나 신규 기능 개발을 하게 되면 우리는 협업을 통해 프로젝트를 진행하게 됩니다.

이런 협업 과정 중에서 종종 생기는 문제는 프론트엔드가 화면을 구성한 후 백엔드를 개발이 완료될 때 까지 대기시간이 존재한다는 것입니다.

이러한 애로사항을 해소할 수 있는 라이브러리고, 저 역시 이러한 부분에 크게 공감을 하고 있어서 신규 기능 개발할 때 적극 도입해보려고 생각했습니다.

2. 프론트엔드 디렉토리 구조

src
├── apis
├── components
├── constants
├── contexts or store
├── hooks
├── mocks
├── pages
├── types
├── styles
├── routers
├── utils
└── ....etc

우테코의 모든 프론트엔드 프로젝트가 위의 구조처럼은 되어 있지 않지만 거의 비슷하게 되어 있었습니다.

디렉토리 구조를 보면서 느낀점은 객체지향의 5원칙이 생각났습니다.

각각의 목적에 맞게 분리를 잘해놨다는 생각을 했습니다.

폴더 별로 느낀점입니다.

1. coponents 폴더

컴포넌트를 모아놓은 폴더. 마이크로 프론트엔드에 맞춰서 설계가 잘되어 있는 느낌

2. constants 폴더

공통적으로 사용되는 init value나 상수들을 정의한 파일들이 위치하는 폴더.

3. contexts or Store

상태관리 관련된 파일을 정리한 폴더.

4. hooks

리액트 hooks 관련 폴더. 프로젝트마다 엄청난 양의 리액트 hooks들이 존재...

5. mocks

위에서 언급한 msw 관련 폴더, 가데이터와 handler 등이 있음.

6. routers

라우터 관련 폴더. 라우팅을 별도의 폴더에서 관리하는게 새로웠습니다.

폴더가 없으면 Router.tsx와 같은 파일에서 관리

마치며...

모든 프로젝트가 이렇다는건 아닙니다. 우테코 깃헙에 있는 많은 프로젝트를 보며 느낀점이니 참고만 해주시길 바랍니다.

아는 만큼 보인다라는 말이 있습니다.

아직 주니어 개발자다 보니 보이는게 이 정도입니다... 아는게 많으신 분들은 분명 더 많이 보일거라 생각됩니다.

이번 우테코 프로젝트를 하나하나 상세히 보지는 못 했지만 살펴보면서 저희 회사 코드랑 비교도 해보고 좋아보이는건 도입해봐야지 라는 생각도하고 더 좋은 구조와 개발에 대해 고민하게 되는 좋은 시간이었습니다.

더 많은 우테코 프로젝트에 관심있으시면 아래 우테코 깃헙 프로젝트 참고해주시면 될 거 같습니다.

https://github.com/woowacourse-teams

woowacourse-teams

woowacourse-teams has 82 repositories available. Follow their code on GitHub.

github.com

GCP로 node 배포하기 2. (HTTPS, SSL 인증 받기)

Juun — Wed, 31 Jul 2024 13:15:41 +0900

이전 글과 이어지는 내용입니다.

이전 글 내용이 궁금하신 분은 아래의 링크를 참고해주시면 됩니다.

https://puenti.tistory.com/97

[GCP] GCP로 node 배포하기 1. (네트워크, DNS 세팅)

이번 토이 프로젝트로 구글에서 제공하는 API, storage를 사용해서 간단한 서비스를 만들어 봤습니다.구글에서 제공하는 서비스를 쓰다보니 배포 역시 AWS 보단 GCP를 사용해보기로 했습니다.번외로

puenti.tistory.com

저번 포스팅에서 DNS 설정까지 했습니다.

이번에는 HTTPS 인증을 받기 위한 SSL 인증을 해보겠습니다.

HTTPS란 무엇인가?

HTTPS는 인터넷에서 데이터를 안전하게 주고받기 위해 사용하는 프로토콜입니다. HTTP에 SSL/TLS를 추가해 보안을 강화한 것입니다.

프론트엔드 서버와의 통신 시, 특정 도메인을 통해 요청을 보내는 것이 일반적입니다.

그러나 HTTP 프로토콜을 사용하는 도메인으로 요청을 보내는 경우, "Mixed Content" 오류가 발생할 수 있습니다.

이 오류는 브라우저의 보안 정책에 의해 발생하며, HTTPS를 통해 보안된 연결이 아닌 경우 브라우저에서 차단됩니다.

이를 방지하기 위해 SSL 인증서를 통해 도메인을 HTTPS로 설정하는 것이 중요합니다.

왜 HTTPS를 설정하는데 SSL 인증을 받아야 하는가?

데이터 암호화: SSL/TLS 인증서는 데이터를 암호화하여 중간에서 해커가 정보를 가로채거나 도청하지 못하게 합니다. 이는 사용자 이름, 비밀번호, 신용카드 정보 등의 민감한 데이터를 보호하는 데 필수적입니다.
서버 인증: SSL/TLS 인증서는 사용자가 접속하는 웹사이트가 실제로 신뢰할 수 있는 사이트인지 확인해 줍니다. 이를 통해 피싱 사이트나 가짜 웹사이트를 구분할 수 있습니다.
데이터 무결성: SSL/TLS 인증서는 데이터가 전송되는 동안 변경되지 않도록 보호합니다. 이를 통해 사용자와 웹사이트 간에 주고받는 데이터가 안전하게 도착했는지 확인할 수 있습니다.

1. Nginx && fowarding

웹 사이트 중에 도메인:3000 이런 사이트를 본적 없을겁니다.

대부분의 웹사이트들은 뒤의 포트포워딩으로 포트 번호를 감춰버립니다.

포트 포워딩을 통해 외부 트래픽을 내부 서버의 특정 포트로 전달하거나, Nginx와 같은 리버스 프록시 서버를 사용해 클라이언트 요청을 실제 서버로 전달하면서 포트 번호를 감춥니다. 이를 통해 사용자에게는 단순한 도메인 이름만 보이게 됩니다.

Nginx를 통해 포트포워딩을 진행해보고 더 나아가 HTTPS까지 적용해보겠습니다.

인스턴스를 실행시켜줍시다.

1.1 Nginx 설치

$ sudo apt-get install nginx
$ sudo su
$ vim /etc/nginx/nginx.conf

Nginx 설정

http { } 안의 include 바로 밑 코드 추가

server {
       server_name 도메인 주소
       listen 80;
       location / {
                proxy_set_header HOST $host;
                proxy_pass http://127.0.0.1:3000;
                proxy_redirect off;
       }
}

입력 후 :wq

이 설정은 지정된 도메인으로 오는 모든 HTTP 요청을 받아 로컬에서 실행 중인 3000번 포트의 애플리케이션(예: Node.js 서버)으로 전달합니다. Nginx가 리버스 프록시 역할을 하여 외부 요청을 내부 서비스로 라우팅하는 구조입니다.

설정 후 Nginx 재시작

$ sudo service nginx restart

이제는 도메인 뒤 3000 포트 없어도 잘 나옵니다.

2. HTTPS 설정

Certbot은 Let's Encrypt에서 제공하는 무료 SSL/TLS 인증서를 쉽게 발급받고 관리할 수 있게 해주는 도구입니다.

2.1 certbot 설치

$ sudo snap install --classic certbot

2.2 Nginx 설정

$ sudo certbot --nginx

영어로 등록할 도메인, 이메일 입력하라는 문구들이 나오면 순서대로 진행.

Congratulations! You have successfully enabled https://[도메인 이름]

이 메시지는 HTTPS 설정이 성공적으로 완료되었음을 나타냅니다.

2.3 Nginx 80 포트 설정

마지막으로 80 포트로 접속했을때 https 기본 포트인 443으로 리다이렉트 처리만 해주면 됩니다.

$ sudo su
$ vi /etc/nginx/nginx.conf

server {
    if ($host = 본인 도메인) {
        return 301 https://$host$request_uri;
    } # managed by Certbot
    
    listen 80 ;
    listen [::]:80 ;
    server_name 본인 도메인;
    return 404; # managed by Certbot // 제거
    return 301 https://$host$request_uri; // 추가
}

입력 후 :wq, Nginx 재실행해주면 됩니다.

$ sudo service nginx restart

설정 후 해당 등록한 도메인으로 접속해보면 https가 적용된 것을 확인할 수 있습니다.

※ 번외

GCP에서는 위 방법말고 부하 분산(로드 밸런스)를 통해 HTTPS를 설정할 수 있습니다.

다양한 방법이 있으므로 본인에게 맞는 서비스를 선택해서 적용하면 되겠습니다.

GCP로 node 배포하기 1. (네트워크, DNS 세팅)

Juun — Tue, 30 Jul 2024 18:14:44 +0900

이번 토이 프로젝트로 구글에서 제공하는 API, storage를 사용해서 간단한 서비스를 만들어 봤습니다.

구글에서 제공하는 서비스를 쓰다보니 배포 역시 AWS 보단 GCP를 사용해보기로 했습니다.

번외로 회사에서 GCP를 사용해서 겸사겸사 해보면 좋을거 같다는 생각도 했습니다.

1. GCP 접속

GCP > Compute Engine > VM 인스턴스 > 인스턴스 만들기

2. 인스턴스 만들기

본인의 사양에 맞게 머신 구성

저는 제일 저렴한 지역과 머신으로 선택했습니다.

액세스 할 서비스 계정을 설정하고 방화벽은 HTTP/ HTTPS 트래픽 허용

3. 프로젝트 세팅 (Git & Node)

SSH 연결을 통해 인스턴스를 실행해봅시다.

GCP는 기본적으로 git이 설치되어 있지만 확인해보기

$ git --version

// 설치가 안되어 있다면
$ sudo apt install git

Git으로 프로젝트 클론

$ git clone 내프로젝트 주소

Node 설치

프로젝트 세팅한 노드로 설치

$ sudo apt-get update
$ sudo apt-get install -y build-essential
$ sudo apt-get install curl
$ curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash --
$ sudo apt-get install -y nodejs

설치 잘되었는지 확인

$ node -v
$ npm -v

프로젝트 디렉토리에서 패키지 설치

$ npm install

무중단 배포를 위한 pm2 설치

$ sudo npm i pm2 --location=global

서버 시작하기 전에 환경 변수 세팅하고 시작해주세요~

// 본인 환경에 맞는 환경변수 세팅하기
$ vim .env

$ pm2 start app.js

이렇게 되면 정상적으로 설정 완료

4. 방화벽 규칙 만들기

4.1 서버 포트 확인

방화벽 설정하기 전에 백엔드 서버 포트 확인하기

프로젝트 app.js에서 확인 가능

저는 3000번 포트를 열어놨습니다.

인스턴스 외부ip:3000 을 통해서 접근이 가능하다는 얘기입니다.

TCP 포트 3000: 이 포트는 네트워크 서비스나 애플리케이션이 데이터를 송수신하는 데 사용됩니다.

예를 들어, 웹 개발에서 자주 사용하는 Node.js 서버는 기본적으로 TCP 포트 3000을 사용합니다.

4.2 VPC 네트워크 > 방화벽 > 방화벽 규칙 만들기

이름은 my-project-3000으로 설정해줬습니다.

소스 IPv4 범위는 0.0.0.0/0 모든 ip 접근을 허용해줍니다.

위에서 확인한 Node 서버 포트인 3000 번을 TCP 포트 추가해줍니다.

위에서 설정한 방화벽 규칙을 저희 인스턴스에 적용해봅시다.

GCP > Compute Engine > 생성한 VM 인스턴스 > 수정

네트워크 태그에 설정한 방화벽 규칙 추가

서버가 열렸으니 접근이 가능한지 확인

인스턴스의 외부ip:3000 접속하면 아래와 같이 접근되면 완료입니다.

4.3 고정 ip 승급

마지막으로 해당 인스턴스의 외부ip 고정ip로 승급시켜주면 됩니다.

고정 IP (Static IP): 고정 IP는 할당된 후에는 변경되지 않습니다. 인스턴스가 재부팅되거나 일시적으로 중지되더라도 IP 주소가 그대로 유지됩니다.

VPC > IP 주소

프로젝트의 인스턴스 외부 Ip인지 확인 후 고정 IP주소로 승급해주면 됩니다.

5. DNS 설정

DNS 설정 전에 도메인부터 구매합시다.

프론트엔드 서버와의 통신 시, 특정 도메인을 통해 요청을 보내는 것이 일반적입니다.

그러나 HTTP 프로토콜을 사용하는 도메인으로 요청을 보내는 경우, "Mixed Content" 오류가 발생할 수 있습니다.

이 오류는 브라우저의 보안 정책에 의해 발생하며, HTTPS를 통해 보안된 연결이 아닌 경우 브라우저에서 차단됩니다.

이를 방지하기 위해 SSL 인증서를 통해 도메인을 HTTPS로 설정하는 것이 중요합니다.

네트워크 서비스 > Cloud Domains > 도메인 등록

도메인 구매 후 Cloud DNS 설정을 해줍니다.

네트워크 서비스 > Cloud DNS > DNS 영역 만들기

영역 이름은 본인이 설정한 이름을 적고 DNS 이름은 구매한 도메인으로 설정해줍니다.

만들고 난 후 영역 세부정보로 들어갑니다.

영역 세부정보에 처음 들어가면 2가지 항목이 나올텐데 표준 추가를 추가해줍니다.

DNS 이름은 별도 설정 안해줘도 되고 리소스 레코드 유형은 A, IPv4 주소는 이전에 설정했던 고정 IP 주소를 넣어줍니다.

그리고 설정한 도메인:3000 를 주소창에다 입력하면 고정 IP:3000을 넣어야 접근이 가능했던걸 이제는 도메인:3000를 입력하면 접근이 가능하게 됩니다.

다음 포스팅은 nginx를 통한 포트포워딩과 SSL 인증에 대해 작성해보겠습니다.

[Next.JS] 성능개선 LCP 최적화

Juun — Thu, 4 Jul 2024 12:59:22 +0900

통합검색 성능 개선 이후로 진행한 성능개선 작업 2편입니다.

1편인 통합검색 성능 개선이 궁금하신 분은 아래 링크 참고해주세요.

https://puenti.tistory.com/89

메인페이지 관련 개발 중 해당 로그를 발견했습니다.

싲

이 메시지는 Next.js 애플리케이션에서 Largest Contentful Paint (LCP)를 최적화하기 위해 이미지를 우선적으로 로드해야 한다는 경고입니다. LCP는 사용자가 페이지를 로드할 때 가장 큰 콘텐츠 요소가 화면에 나타나는 시간을 측정하는 웹 성능 지표이며 이는 사용자 경험을 개선하는 데 중요하다고 볼 수 있습니다.

로그를 확인해보니 메인 페이지에 배너와 사용자 사진 등이 들어가는데 이 부분에서 LCP가 발생하는 것으로 파악했습니다.

LCP (Largest Contentful Paint)란?

LCP는 페이지가 로드를 시작한 시점부터 뷰포트 내에서 가장 큰 이미지나 텍스트 블록이 렌더링되는 시간을 측정합니다. 이는 페이지의 주요 콘텐츠가 사용자에게 표시되는 시점을 나타내므로, 사용자가 페이지를 "유용하다"고 인식하는 시간을 반영합니다.

2.5초 시간 이내에 LCP를 달성해야 좋은 사용자 경험을 제공 할 수 있다고 합니다.

LCP 측정 대상

LCP는 다음과 같은 요소들을 측정 대상으로 고려합니다:

<img> 요소
<svg> 요소 내부의 <image> 요소
<video> 요소 (포스터 이미지 사용 시)
CSS background-image를 통해 로드된 이미지
텍스트 노드나 인라인 텍스트 요소를 포함하는 블록 수준 요소

LCP 목표 수치

Google은 다음과 같은 LCP 목표 수치를 제시합니다:

좋음: 2.5초 이하
개선 필요: 2.5초 ~ 4초
나쁨: 4초 초과

LCP 최적화 방법

LCP를 개선하기 위해 다음과 같은 방법들을 고려할 수 있습니다:

1. 서버 응답 시간 개선:

서버 성능 최적화
CDN(Content Delivery Network) 사용
캐싱 전략 구현

2. JavaScript와 CSS 최적화:

렌더링 차단 리소스 최소화
중요한 CSS 인라인화
JavaScript 지연 로딩

3. 리소스 최적화:

이미지 압축 및 최적화
적절한 이미지 형식 사용 (예: WebP)
이미지 크기 조정

4. 클라이언트 측 렌더링 최소화:

서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG) 고려
LCP 요소를 서버에서 미리 렌더링

5. 프리로드 중요 리소스:

<link rel="preload"> 사용하여 중요한 리소스 미리 로드

6. 브라우저 캐싱 활용:

적절한 캐시 헤더 설정

위 방법을 참고해서 제가 한 방법은 이렇습니다.

1. Image 컴포넌트 최적화

priority 속성 추가, 이 속성은 Next.js가 이미지 로딩을 우선시해줍니다.

<Image
	style={{ cursor: 'pointer' }}
	src={src}
	alt={src}
	layout="fill"
	onClick={() => onClickViewDetail(itemProp)}
	priority
/>

2. 폰트 요청 결합하기

// 기존
<link
	href="https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,700,700italic&subset=latin,vietnamese,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek&display=optional"
	rel="stylesheet"
	/>
<link
	href="https://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext&display=optional"
	rel="stylesheet"
	/>
<link
	href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=optional"
	rel="stylesheet"
	/>
    
// 변경
 <link
	rel="stylesheet preload"
	as="style"
	href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,300i;0,400;0,400i;0,700;0,700i&family=Oswald:wght@300;400;700&family=Montserrat:wght@400;700&family=Open+Sans+Condensed:wght@300;300i;700&display=swap"
	/>

여러 개의 폰트를 사용할 경우, 이를 하나의 요청으로 결합하여 요청 수를 줄였습니다.

또한 preload 옵션을 사용함으로서 의도적으로 먼저 로딩시키게 하였습니다.

3. avif 포맷 사용

png나 jpg 등 기존의 포맷보다 작은 용량인 webp지만 여전히 용량이 큰 문제가 있어 webp보다 20% 더 높은 압축률을 보여준다는 avif를 적용했습니다.

Next.js는 v12.0.0부터 avif를 지원하기 시작했습니다. 다음과 같이 next.config.js를 설정하면 avif 지원을 활성화할 수 있습니다.

※ Next.js에서 avif 포맷을 사용하고 싶다면 당연하지만 Image 컴포넌트를 사용해야 합니다.

[참고] AVIF는 인코딩하는 데 일반적으로 WebP보다 20% 더 오래 걸리지만, 결과 파일 크기는 20% 더 작습니다. 따라서 이미지를 처음 요청할 때는 로딩 속도가 느릴 수 있지만, 이후 캐시된 요청에서는 더 빠른 성능을 기대할 수 있습니다.

module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'], // default: ['image/webp']
  },
};

이런 식으로 avif로 인코딩해서 출력되는 것을 확인할 수 있습니다.

LCP 성능은 3.4 -> 1.4초로 개선 된 것을 확인 할 수 있었습니다.

LCP 최적화 외에도 로컬 스토리지 활용, lazy 활용 등 방법을 적용해서 Light house 성능 향상 시킨 방법은 추후 포스팅에 기재하겠습니다.

참고

https://heycoding.tistory.com/130

debounce와 throttle

Juun — Mon, 1 Jul 2024 09:41:07 +0900

프론트엔드 개발에서 debounce와 throttle는 성능 최적화와 사용자 경험 향상을 위해 자주 사용되는 기술입니다.

제가 담당하고 있는 서비스에서도 많이 쓰이진 않지만 debounce는 종종 보이곤 합니다.

처음 debounce를 마주했을 때 이걸 왜 쓰는지에 대해 알아봤는데 debounce와 함께 나오는 개념이 throttle과 함께 정리해봤습니다.

Debounce

Debounce는 특정 이벤트가 여러 번 발생할 때, 지정된 시간 동안 이벤트가 발생하지 않을 때까지 대기했다가 한 번만 실행되도록 하는 기술입니다. 이를 통해 연속된 이벤트 호출을 줄여 불필요한 처리를 방지합니다. 예를 들어, 사용자가 검색창에 글자를 입력할 때마다 검색 요청을 서버에 보내면 서버에 과부하가 걸릴 수 있습니다. 이 때 debounce를 사용하면 사용자가 입력을 멈춘 후 일정 시간 동안 입력이 없을 때 한 번만 검색 요청을 보냅니다.

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

const handleSearch = debounce((query) => {
    console.log('Searching for', query);
}, 300);

document.getElementById('searchInput').addEventListener('input', (event) => {
    handleSearch(event.target.value);
});

위 코드에서 handleSearch 함수는 사용자가 입력을 멈추고 300밀리초 후에만 실행됩니다.

Throttle

Throttle는 특정 이벤트가 여러 번 발생할 때, 지정된 시간 간격 동안 이벤트를 한 번만 실행되도록 하는 기술입니다. 이를 통해 이벤트가 일정 간격으로만 발생하게 하여 시스템 자원을 절약할 수 있습니다. 예를 들어, 사용자가 스크롤 이벤트를 발생시킬 때, 스크롤 이벤트 핸들러가 너무 자주 실행되면 성능 저하가 발생할 수 있습니다. 이 때 throttle을 사용하면 일정 시간마다 한 번씩만 이벤트가 실행되도록 제한할 수 있습니다.

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => {
                inThrottle = false;
            }, limit);
        }
    };
}

const handleScroll = throttle(() => {
    console.log('Scroll event handler');
}, 200);

window.addEventListener('scroll', handleScroll);

위 코드에서 handleScroll 함수는 사용자가 스크롤할 때마다 200밀리초에 한 번씩만 실행됩니다.

요약

Debounce: 지정된 시간 동안 이벤트가 발생하지 않을 때까지 대기 후 한 번 실행 (입력 필드의 실시간 검색).
Throttle: 지정된 시간 간격마다 이벤트를 한 번만 실행 (스크롤, 리사이즈 이벤트).

이 두 개념은 특히 사용자 인터페이스에서 이벤트를 효율적으로 처리하여 성능을 최적화하고, 불필요한 서버 요청이나 화면 렌더링을 줄이는 데 매우 유용합니다.

[Next.JS] getStaticProps를 이용해서 서버 자원을 효율적으로 사용하고, 비용을 절감하기

Juun — Tue, 4 Jun 2024 21:24:34 +0900

개요

getStaticProps를 이용하려는 생각은 회사에서 서비스 중인 그룹웨어 메인 페이지를 부분을 개발하면서 시작하게 됩니다.

메인페이지에 접속하게 되면 google api, 전자결재, 조직도, 게시판, 개인정보 등등 수 많은 API를 요청 보내고 있습니다.

여기서 가장 주목했던건 엄청난 양의 데이터가 담긴 조직도 데이터였습니다.

조직도는 그룹웨어 내에 가장 많이 쓰이는 시스템 중 하나로 개선을 한다면 눈에 뛰는 효과가 분명하다고 생각헀습니다.

또한 조직도 같은 경우는 자주 변경되지도 않는 데이터인데 사용자가 로그인 할 때마다 데이터를 호출할 필요가 있을까? 라는 생각을 가지게 되었습니다.

물론 서버상태관리 라이브러리인 SWR 덕에 사용자가 최초 메인페이지에 접속했을 경우에만 1번 호출하지만 새로고침을 하거나 재접속을 하여도 굳이 같은 데이터를 받아올 필요가 있을까 하는 생각을 가지게 되었습니다.

이전 노션 API를 통해 게시판을 만드는 경험이 있어서 getStaticProps를 통해 정적 데이터를 서버에 들고 있으면서 클라이언트 쪽에 요청이 오면 빌드 시점에 불러온 조직도 데이터를 불러주면 API 요청은 줄이면서 사용자는 미리 불러진 데이터를 통해 더 빠르게 화면을 확인 할 수 있어 사용자 경험 측면에서도 분명 좋을거라 생각했습니다.

SSR vs SSG

프론트엔드 개발을 하시는 분이라면 SSG와 SSR은 많이 들어보셨을겁니다.

간단하게 설명하자면 아래와 같습니다.

SSR (Server-Side Rendering)

각 요청마다 서버에서 HTML을 생성합니다.
최신 데이터를 제공하므로 실시간 데이터를 반영할 수 있습니다.
페이지 요청 시마다 서버에서 처리가 필요하므로 서버 부하가 발생하고, 로드 속도가 느릴 수 있습니다.

SSG (Static Site Generation)

빌드 타임에 HTML을 생성하여 정적 파일로 저장합니다.
생성된 정적 파일은 서버 요청 없이 클라이언트에게 바로 제공됩니다.
초기 페이지 로드 속도가 매우 빠르고, 서버 부하가 적습니다.
데이터가 변경될 때마다 빌드가 필요하지만, revalidate 옵션을 통해 특정 간격으로 재생성할 수 있습니다.

getStaticProps vs getServerSideProps

getStaticProps

getStaticProps는 빌드 시 데이터 페칭을 처리하여 정적 생성(static generation)을 가능하게 합니다. 이 메서드는 빌드 타임에 호출되며, 데이터를 미리 가져와 HTML 파일로 생성합니다. 그 결과, 페이지는 빠르고 효율적으로 제공됩니다.

콘텐츠가 자주 변경되지 않는 경우
블로그 게시물, 마케팅 페이지 등 변경 빈도가 낮은 페이지
SEO가 중요한 경우
빌드 타임에 데이터가 페칭됩니다.
데이터를 정적으로 생성하므로 페이지 로드 속도가 빠릅니다.
재생성(revalidate)을 설정하여 데이터가 변경될 때마다 정적 페이지를 갱신할 수 있습니다.

getServerSideProps

getServerSideProps는 요청 시마다 서버에서 데이터를 페칭하여 SSR(Server-Side Rendering)을 가능하게 합니다. 이 메서드는 각 요청마다 호출되며, 최신 데이터를 기반으로 HTML을 생성합니다.

데이터가 자주 변경되는 경우
사용자별 데이터를 처리해야 하는 경우
실시간 데이터를 반영해야 하는 경우
각 요청 시마다 서버에서 데이터를 페칭합니다.
최신 데이터를 제공하므로 실시간 데이터 반영이 가능합니다.
페이지 로드 시마다 서버에서 처리되므로 다소 지연될 수 있습니다.

getStaticProps:

빌드 타임에 데이터를 페칭하여 정적 페이지를 생성합니다. 페이지 로드 속도가 빠르고 변경 빈도가 낮은 데이터에 적합합니다.

getServerSideProps:

요청 시마다 서버에서 데이터를 페칭하여 최신 데이터를 반영합니다. 변경 빈도가 높거나 사용자별 데이터를 처리해야 할 때 적합합니다.

조금 더 쉬운 예로 들자면 아래와 같습니다.

SSR(getServerSideProps) : 매 요청마다 서버가 페이지를 동적으로 생성하고 데이터를 페칭해야 합니다. 100명의 사용자가 동시에 접속하면 100번의 서버 요청이 발생하며, 이는 서버 자원을 많이 소모하게 됩니다.

SSG(getStaticProps) : 페이지가 미리 생성되어 정적 파일로 제공됩니다. 100명의 사용자가 동시에 접속해도 동일한 정적 파일을 받으므로, 추가적인 서버 요청이 거의 없습니다. 이는 서버 비용을 크게 절감합니다.

따라서 자주 변하지 않는 정적 데이터라 getStaticProps 를 이용했고 혹시나 변하는 경우 revalidate로 2시간마다 데이터를 업데이트 할 수 있게 처리하였습니다.

export async function getStaticProps() {
  // Fetch data from an API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return {
    props: {
      data,
    },
    revalidate: 2 * 60 * 60, // Optional: Regenerate the page every 2 hours
  };
}

Issue 사항

1. 데이터 페칭 이슈

getStaticProps는 빌드시점에 데이터를 페칭하는 것으로 공식 문서에 나와 있습니다.

콘솔을 찍어봐도 null로 나오는 경우가 있었습니다.

백엔드 쪽 CORS 설정이 어떻게 되어 있는지 확인해보았습니다.

스프링 쪽 allowedOrigins 쪽에 모든 경로에 대한 요청을 허용하게 되어 있습니다.

보통 서비스 하는 도메인 경로만 허용하게 되어 있게 설정이 되어 있지만 저희 그룹웨어 특성상 SAP, ERP, IT시스템 등등 수 많은 시스템과 연동이 되어 있어서 일단 모든 요청에 대한 허용을 한 것으로 보였습니다.

자사 내부에서 쓰이는 그룹웨어라 외부에 도메인이 노출되진 않았지만 그래도 보안정책과 허용되지 않은 도메인에서 요청이 온다면 어떻게 할까? 생각할 수 있습니다. 이 부분은 아래 적혀 있습니다.

그러면 왜 데이터를 빌드 시점에 불러오지를 못 할까??

@Controller 쪽 소스를 확인해보니

@AuthenticantionPrincipal을 통해서 Member 정보, 즉 저희 직원 정보가 있어야 요청을 받을 수 있게 처리해놓은 것으로 확인되었습니다.

그래서 빌드 시점에 ADMIN 계정에 대한 정보를 넣어 데이터를 페칭할 수 있게 처리하였습니다.

[React Conf 2024] 이제 useMemo, useCallback 필요 없음. 리액트 컴파일러란??

Juun — Fri, 31 May 2024 20:37:13 +0900

이번 2024년 5월 15일부터 16일까지 개최한 행사인 React Conf 2024에서 발표된 내용을 기반으로 작성되었습니다.

리액트 컴파일러란?

리액트 19에 도입될 리액트 컴파일러는 공식 문서의 일부분에는 이렇게 설명되어 있습니다.

React Compiler automatically memoizes your code. You may be familiar today with memoization through APIs such as useMemo, useCallback, and React.memo. With these APIs you can tell React that certain parts of your application don’t need to recompute if their inputs haven’t changed, reducing work on updates. While powerful, it’s easy to forget to apply memoization or apply them incorrectly. This can lead to inefficient updates as React has to check parts of your UI that don’t have any meaningful changes.

애플리케이션을 최적화하기 위해 React Compiler는 자동으로 코드를 메모합니다. useMemo, useCallback, 등의 API를 통한 메모이제이션은 오늘날 익숙하실 것입니다 React.memo. 이러한 API를 사용하면 입력이 변경되지 않은 경우 애플리케이션의 특정 부분을 다시 계산할 필요가 없음을 React에 알릴 수 있으므로 업데이트 작업이 줄어듭니다. 강력하지만 메모를 적용하는 것을 잊어버리거나 잘못 적용하기 쉽습니다. 이는 React가 의미 있는 변경 사항이 없는 UI 부분을 확인해야 하기 때문에 비효율적인 업데이트로 이어질 수 있습니다.

리액트 컴파일러가 없었을땐??

리액트에서 값을 메모이제이션을 할때 보통 useMemo나 useCallback을 사용하고 있습니다.

// useMemo
const computedValue = useMemo(() => expensiveComputation(count), [count]);

useMemo는 계산 비용이 큰 값을 메모이제이션하여 성능을 최적화하는 데 사용됩니다. 의존성 배열이 변경되지 않는 한, 메모이제이션된 값을 반환합니다.

// useCallback
const handleClick = useCallback(() => {
    console.log('Button clicked');
    setCount(count + 1);
  }, [count]);

useCallback은 콜백 함수의 메모이제이션을 위해 사용됩니다. 의존성 배열이 변경되지 않는 한, 동일한 함수 인스턴스를 반환합니다.

이 두 예시는 각각 useMemo와 useCallback을 사용하여 성능을 최적화하는 방법을 보여줍니다. useMemo는 계산 비용이 큰 값을 메모이제이션하고, useCallback은 함수의 인스턴스를 메모이제이션하여 불필요한 렌더링을 방지합니다.

이전에는 이러한 방법으로 성능 최적화를 하곤 했습니다.

그러나 의존성 관리를 잘못 관리하면 아래와 같은 문제가 생기곤 했습니다.

1. 불필요한 재계산 및 재생성:

의존성 배열에 필요 이상의 변수를 포함하면, 의존성이 변경될 때마다 불필요하게 함수나 값이 재계산됩니다. 이는 오히려 성능을 저하시킬 수 있습니다.
예를 들어, useMemo나 useCallback의 의존성 배열에 변화가 자주 발생하는 값을 포함하면, 해당 훅이 너무 자주 재평가되어 성능 이점이 사라집니다.

2. 의도하지 않은 메모이제이션 실패:

의존성 배열에 필요한 변수를 포함하지 않으면, 의존성이 변경되어도 값이나 함수가 업데이트되지 않습니다. 이는 의도한 동작을 방해하고, 최신 상태를 반영하지 못하게 됩니다.
예를 들어, 의존성 배열에서 상태 값이나 props를 누락하면, 해당 상태나 props가 변경되어도 훅이 다시 계산되지 않아 버그가 발생할 수 있습니다.

리액트 컴파일러는 어떻게 성능최적화를 할까?

리액트 컴파일러의 깃헙을 살펴보면 세 가지 기능에 중점을 둘 예정입니다.

1. 컴포넌트의 계단식 재렌더링 방지 (성능 최적화)

부모 컴포넌트의 재렌더링이 자식 컴포넌트 트리의 여러 컴포넌트를 재렌더링하게 만드는 경우, 메모이제이션을 통해 부모 컴포넌트만 변경되었을 때 자식 컴포넌트들의 불필요한 재렌더링을 방지할 수 있습니다.

2. React 외부의 비용이 큰 계산을 건너뛰기 (성능 최적화)
컴포넌트나 훅 내에서 expensivelyProcessAReallyLargeArrayOfObjects()와 같은 비용이 큰 함수를 호출하는 경우, 메모이제이션을 통해 이러한 계산을 건너뛰고 성능을 최적화할 수 있습니다.

3. 효과 훅의 의존성 메모이제이션:

useEffect와 같은 훅에서 의존성이 변경되지 않았음을 보장하여, 무한 루프를 방지하고 재렌더링 시 동일한 의존성 값을 유지하기 위해 메모이제이션을 사용합니다.

React Compiler의 초기 버전은 주로 업데이트 성능(즉, 기존 컴포넌트의 재렌더링 성능)을 개선하는 데 중점을 두고 있으며, 따라서 주로 첫 번째와 두 번째 사례에 집중하고 있습니다.

아래의 링크는 리액트 컴파일러 공식 문서입니다. 더 많은 자료는 아래의 링크에서 확인하실 수 있습니다.

https://react.dev/learn/react-compiler

[모바일 / Flutter] 플러터 개발환경 세팅하기

Juun — Fri, 8 Mar 2024 13:31:22 +0900

회사에서 프론트엔드 뿐만 아니라 모바일 개발도 맡게 되었습니다ㅎ...

평소 모바일 개발도 해보고 싶었던지라 좋은 기회라 생각하고 수락했습니다!

회사 내 모바일 개발자가 없고 외주사를 통해 앱 개발을 진행했던지라

버전만 달랑 명시되어 있고 혼자 머리 깨져가며 세팅한 과정과 에러를 공유합니다.

1. Xcode 설치

앱스토어에서 설치했다고 끝이 아님!!

반드시 앱을 한 번 실행 시켜서 마저 다운로드

맥북이 업데이트 됨에 따라 CommandLinTools를 해당 경로로 설정해주는게 좋다고 합니다.

// 경로 확인
xcode-select -p
// 경로가 Library/Developer/CommandLineTools로 나오면 아래 실행
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
// 경로가 /Applications/Xcode.app/Contents/Developer로 나와야 됨

라이센스 동의

sudo xcodebuild -license

// agree 입력

이렇게 나오면 라이센스 동의까지 완료

버전 확인

// Xcode 설정
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

// 설정2
sudo xcodebuild -runFirstLaunch

Xcode 14.2 버전 설치

세아웍스 Xcode는 14.2에서 정상 작동함

앱스토어에서 제공하는 Xcode는 최신버전이라 에러발생

Xcodes app 다운로드

애플 Developer에서 다운로드도 가능하지만 저는 Xcodes라는 버전 관리툴을 사용해서 진행했답니다

brew install --cask xcodes

모바일 버전은 14.2 버전으로 실행이 가능해서 해당 14.2 버전 다운로드

다운 받은 Xcode를 Xcode-14.2.0.app으로 이름 변경

Xcode 14.2.0 버전 실행 할때

터미널에서 아래 명령어 실행 후 프로젝트 실행

모바일 프로젝트 > ios 폴더 실행

/Applications/Xcode-14.2.0.app/Contents/MacOS/Xcode

2. 코코아팟, 자바, 루비 설치

회사 앱 플러터 버전이 2.10.5이라 코코아팟도 해당 플러터 버전과 호환되는 버전으로 설정

// 코코아팟 설치
sudo gem install cocoapods -v 1.11.3

// 설치 확인
pod --version

// 자바 설치
brew install openjdk@11

java --version

// 설치된 자바 버전 확인
/usr/libexec/java_home -V

// 원하는 버전으로 변경
export JAVA_HOME=$(/usr/libexec/java_home -v 11.0.22)
source ~/.bash_profile

아니면

// .zshrc 파일에서 환경변수 설정
export JAVA_HOME=/Users/루트디렉토리/Library/Java/JavaVirtualMachines/azul-11.0.22/Contents/Home

//Ruby 설치
brew install rbenv ruby-build
rbenv install 3.0.6
rbenv global 3.0.6
ruby --version

//환경변수 설정
//편집기 실행
vi ~/.zshrc

// Ruby PATH 추가
[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"

//저장 후 적용
source ~/.zshrc

3. 플러터 설치

공식 문서 있는 설치 방법대로 따라하기

https://docs.flutter.dev/get-started/install/macos/desktop?tab=download

Start building Flutter native desktop apps on macOS

Configure your system to develop Flutter desktop apps on macOS.

docs.flutter.dev

환경변수 설정

// 기본 쉘 사용할 경우
vim ~/.zshrc vim

//경로
export PATH="$PATH:/Users/나의폴더명/flutter/bin"


// 전부 볷붙
export ANDROID_HOME="/Users/나의폴더명/Library/Android/sdk"
export PATH="$PATH:$ANDROID_HOME/tools\:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools"
 
export PATH="$PATH:/Users/나의폴더명/workspace/flutter/bin"

설정 후 터미널 껐다가 flutter --version 입력

flutter 버전 변경

회사 앱은 플러터 2.10.5 버전이라 아래 과정을 거침

flutter 디렉토리로 이동 후 아래 명령어

git checkout 2.10.5

flutter --version
// flutter 버전 2.10.5 잘나오는지 확인

flutter doctor

4. Android Studio 설치

공홈에서 다운로드 받아주세요

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자 | Android Studio | Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

실행 후 플러그인 dart, flutter 설치

Android SDK cmdline-tools 설치

Android Studio 프로젝트 > SETTINGS > Language & Frameworks > SDK Tools > Android SDK Command-line Tools 체크

Android SDK Build-Tool 33.0.1 체크

• Android Studio 프로젝트 > SETTINGS > Language & Frameworks > SDK Tools > Android SDK Build-Tool 33.0.1 체크

Android SDK Command Line-Tool 8.0 체크

Android Studio 프로젝트 > SETTINGS > Language & Frameworks > SDK Tools > Android SDK Command Line-Tool 8.0 체크

커맨드라인 도구를 설치한 후 아래 명령어 실행

// 안드로이드 라이센스 허가
flutter doctor --android-licenses

플러터 닥터 명령어로 현재 상황 확인해보기

flutter doctor

Dart / Project 환경 세팅

flutter 버전 확인

다트 / 프로젝트 세팅

5. flutter 의존성 설치

// 라이브러리 설치 명령어실행
flutter pub get

정상적으로 설치 완료 시

Build & Run

flutter pub run build_runner build --delete-conflicting-outputs

실무에서 개발, 로컬 Node 버전 업데이트를 해보자

Juun — Fri, 26 Jan 2024 23:23:13 +0900

서론

회사 내 TDD를 적용하려 리액트 테스트 라이브러리인 Jest와 RTL(React Testing Library)을 설치하려 하니??

현재 쓰는 Node 버전이 낮아서 설치가 안된다는 문구가ㅠ....

알아보니 현재 내가 사용하는 Node 버전은 16.7.0

Jest를 설치하기 위한 최소 Node 버전은 16.10.0 이라 설치가 안된다는 문구;;

그래서 운영서버와 개발서버 노드를 확인 해보니

운영 node : 16.14.0

개발 node : 16.13.0

로컬 node : 16.7.0

왜 셋 다 다른건지ㅠㅠㅠ

심지어 로컬 환경 세팅 가이드는 16.7.0으로 세팅되게 되어 있었네요...

TDD 도입하려다 노드 버전까지 바꾸게 되는 작업까지 했네요ㅠ...

서론은 여기까지 하고 이번 포스팅의 내용은 노드 버전 업데이트 후기입니다.

1. 노드 버전 다운로드

원하는 노드 버전을 다운로드 합니다.

아래의 링크에 접속해서 원하는 노드 버전 숫자를 바꾸면 쉽게 접근 가능해요!

https://nodejs.org/download/release/v16.14.0/

2. 환경변수 세팅

회사 컴퓨터는 윈도우라 따로 환경변수 설정이 필요했습니다.

다운로드 받은 경로에서

여담으로 개인 컴퓨터는 맥북인데 맥북은 brew, nvm 으로 쉽게 원하는 노드 버전을 바꿀 수 있었습니다!

세팅이 완료되면 터미널에서 아래 코드 실행 해봅시다

node -v
npm -v

이렇게 나오면 설정이 잘됐습니다!

3. node_modules, .next 폴더 삭제

기존 node_modules, .next 폴더는 이전 node 버전으로 라이브러리가 설치되어 있어 삭제 필요합니다!

프로젝트에 설치되어 있는 node_modules 폴더 삭제

.next 폴더는 Next.JS 관련 빌드, 구성 등 파일들이 포함되어 있습니다!

어차피 빌드하면 다시 생기므로 있으면 같이 삭제해줍시다!

프로젝트 폴더에서 해당 폴더 삭제해도 되고 아래의 명령어로 삭제해도 됩니다

rm -rf node_modules
rm -rf .next

4. yarn 설치

yarn이 설치되어 있는지 확인하기!

그리고 캐시 클린 후 install하고 프로젝트 run 하면 된다!

yarn -v

npm install -g yarn

yarn cache clean

yarn install

5. 우분투에서 node 버전 변경

개발 서버는 우분투에 노드가 올라가 있어서 바꾸는 방법이 달랐습니다.

많은 방법이 있었지만 저는 n으로 버전을 변경해봤습니다

// n 설치
sudo npm install -g n

// n 설치확인
n -V 

// lts 버전 설치
n lts  
// 최신 버전 설치
n latest 
// 특정 버전 설치
n 16.14.0

n list // 설치된 노드 확인

// 노드 버전을 변경하기 전에 현재 사용 중인 버전을 사용 중지합니다
n rm <현재_버전>

// 목표로 하는 노드 버전을 사용 가능한 버전으로 설치합니다.
n use 16.14.0

터미널 껐다 켜고 버전 확인하기

결과

1. 운영, 개발, 로컬 노드 버전 통일 (node 16.14.0)

2. 로컬 개발환경 세팅 가이드 업데이트

3. 팀내 노드 버전 업데이트 가이드 작성

진짜 해보면서 다른 개발자분들 컴퓨터에서 이런저런 다양한 에러가 많이 발생해서 웬만한 에러는 다 겪어본거 같네요ㅠㅠ

혹시나 질문 있으신 분들 질문 남겨주세요!

에러

1. yarn.lock과 package-lock.json 충돌

패키지 매너저로 yarn을 사용한다면 package-lock.json 없어도 됨 npm install 때리면 현재 package.json 기준으로 다시 생김
npm, yarn 두개 같이 사용하는건 권장하지 않음. 충돌 자주 발생함.
package.json 파일이 가장 중요

2. npm cache clean --force

npm cache clean --force 안되는 문제 발생
branch 새로 따고 node_modules, yarn.lock, package-lock.json 삭제 후 처음부터 진행

3. 노드 비트 문제

64비트 컴퓨터에 32비트 노드를 설치했을 때 발생
error - uncaughtException: RangeError: Array buffer allocation failed
환경 설정하고 컴퓨터 재시작 후 안되는 현상 발생, 다음날 다시 하니 잘됨

왜 그런지 찾아보니 이런 문제가 아니었을까?

cpu에 붙어있는 L1, L2, L3 메모리는 SRAM 이라고 하는 휘발성 메모리.

CPU 전원 공급이 안되면 날아가는 데이터

컴퓨터를 재시작하는 경우, 전원이 끊기지 않고 즉시 다시 켜지기 때문에 전원이 완전히 꺼진 것과는 다릅니다.

재시작하는 동안에는 L1, L2, L3 캐시의 데이터가 일반적으로 손실되지 않습니다.

대부분의 현대 컴퓨터는 재시작 과정에서 메모리의 내용을 보존하려고 노력하며, 캐시 메모리 역시 그에 포함됩니다.

64비트로 설치, 환경 변수 설정 후 컴퓨터 완전히 껐다가 켜기

[React] 실무에서 리팩토링으로 리액트 성능 개선 후기

Juun — Thu, 28 Dec 2023 17:30:37 +0900

리액트 성능 개선 후기

안녕하세요? 준입니다.
그간 현생이 너무 바빠 글을 많이 올리지 못 했는데요.
어쩌다 보니 리액트 성능 개선을 한 후기와 제가 고민했던 부분을 적어보려 합니다.
결론부터 말씀드리자면 통합검색 로직 개선을 통해 약 50% 성능 향상이 있었습니다.

먼저 보안 때문에 코드와 많은 사진을 못 보여드리는 점 양해부탁드립니다.

1. 개선

통합검색 페이지는 3가지 섹션으로 구성되어 있습니다.
1. 전계열사 임직원 정보(소속, 담당업무 등), 2. 전자결재, 3. 게시판으로 이루어져 있습니다.

에러 픽스 요청으로 게시판과 전자결재에서 '더보기' 버튼 클릭 시 동일한 컨텐츠가 중복 노출되는 문제를 발견하게 되었고,
이를 수정하면서 통합검색 로직이 비효율적으로 동작하는 것을 확인했습니다.

통합검색 로직
1. 메인페이지에서 통합검색을 하면 검색할 때 통합검색 api 호출
2. 통합검색 페이지로 라우팅
3. 통합검색 페이지에서 useEffect를 통해서 동일한 통합검색 api 호출

왜 이렇게 비효율적으로 되어 있나라는 생각에 로직을 좀 더 파보니
통합검색은 아래처럼 페이지 접근이 가능합니다.
메인 페이지 검색 -> 통합검색 페이지(임직원 정보, 전자결재, 게시판) -> 통합검색 상세페이지(전자결재, 게시판)

통합검색 상세페이지에서 뒤로가기를 했을때 통합검색 페이지에서 이전 검색 결과를 다시 보여주려 통합검색 페이지에서 useEffect를 통한 호출을 하는걸 확인하였습니다.

1번 로직을 삭제하여 검색어만 통합검색 컴포넌트로 넘겨주는 방식으로 했습니다.
다행히 예상되는 부분이 있어 해당 로직 부분 개선은 수월하게 했습니다.
(이 방법이 옳은 방법이라 생각한건 아닙니다. 더 좋은 방법이 있을거라 생각하지만 저 때는 저게 최선이었습니다ㅠ..)

개선 후 기존 평균 43점 (10회 측정) 개선 후 67점 (10회 측정)
약 50% 성능 향상이 있었습니다.

2. 고민(?)했던 부분

개인적으로 이번 개선을 통해 제일 고민을 많이 했던 부분은 3가지입니다.

1. 좋은 설계와 유지보수

통합검색 로직을 보면서 개인적으로 로직이 너무 복잡하다라는 생각을 했습니다.
여러 페이지와 컴포넌트를 오가고 Redux 로직 등을 보면서 좋은 설계와 유지보수가 용이한 코드에 대해서 많이 생각했습니다.
주석 한 줄 없는 코드 속에서 한 줄의 주석을 보면서 사막의 오아시스를 느끼며 주석의 중요성을 한 번 더 느끼곤 했습니다.

2. useEffect 더 잘 사용하기

리액트 공식 문서에서 useEffect에서는 방대한 로직은 피하라고 되어 있습니다.
방대한 로직이 포함해야 할 경우 useEffect 여러 개로 나눠 사용하라는 말도 있죠.

메인페이지에서 통합검색을 하면 검색할 때 통합검색 api 호출하는게 나을까?
통합검색 페이지에서 useEffect를 통해서 동일한 통합검색 api 호출하는게 나을까?
useEffect에 방대한 로직을 담는게 맞는건가? 방대한 로직을 어떻게 분리하면 좋을까?
등등

3. 이상적인 코드, 설계와 실무 그리고 리팩토링

많은 개발자, 현업에 계신 분들은 공감하실텐데요.
바로 일정의 압박이죠...
이런 시간의 압박 속에서 이상적인 코드와 설계는 어렵지 않나 라는 생각을 했습니다.
그렇다고 시간을 많이 들인다고 더 좋은 코드와 설계를 할 수 있을까? 하는 생각도 했네요.

개인적으로 이상적인 코드와 설계도 중요하지만 그보다 더 중요한건 일정이라고 생각하는 사람 중 한 사람입니다.
그래서 저는 일단 기능 구현, 요구사항 만족을 기간 내에 하고 시간이 남으면 더 나은 코드, 유지보수가 용이하게 수정하는 편인데요.
막상 일정의 압박과 넘치는 업무에서 위처럼 하기란 쉽지 않습니다.
그래서 리팩토링의 중요성을 한 번 더 체감하지 않았나...

3. 결론

뭔가 적다보니 제 넋두리인 것 같은데요ㅎㅎ;;;
제가 성능 개선 한 방법 말고도 더 나은 방법, 방향이 있다고 생각합니다.
글을 적다보니 엄청 거창하거나 특별한 방법이 있는게 아니라 쑥스럽긴 합니다ㅎ;;

라이트 하우스를 통해 병목지점, 여러 문제 등을 확인하고 해당 로직을 개선 할 수 있는 방법도 있는데
다음엔 라이트 하우스를 이용해 성능개선 할 수 있는 포스팅을 할 수 있었으면 좋겠네요ㅎ
구글에 수 많은 최적화, 성능 개선 방법 중 하나였다고 읽어주시면 좋겠습니다!

세줄요약
1. 통합검색 성능 개선 약 50% 향상
2. 로직 개선
3. 방법은 아주 많음!

[React] useState는 동기일까? 비동기일까?

Juun — Wed, 5 Jul 2023 14:27:50 +0900

useState는 동기일까? 비동기일까?

결론부터 말하자면 React에서 setState를 호출하면 상태 업데이트는 일반적으로 비동기적으로 처리됩니다.

이는 React가 여러 상태 업데이트를 batch 처리하고, 성능을 향상시키기 위해 상태 업데이트를 함께 묶어서 처리하기 때문입니다.

예를 들어, 다음과 같이 useState를 사용하여 상태 변수를 업데이트하는 예제를 살펴봅시다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
    console.log(count); // 이 부분에서는 업데이트된 count 값을 가져오지 못합니다.
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

위의 예제에서 setCount를 호출한 직후에 console.log(count)를 실행하면 업데이트된 count 값을 가져오지 못합니다.

setCount는 비동기적으로 처리되며, React는 상태 업데이트를 batch로 처리하여 성능을 최적화하기 때문입니다.

리액트에서 batch 처리란?

리액트는 불필요한 렌더링을 줄이기 위해서 state 변경 호출을 단 한번의 호출로 합니다.

이렇게 합치는 과정을 batch라고 합니다.

batch를 하기 위해 함수는 비동기로 처리가 되어 변경됩니다.

useState를 동기적으로 사용하려면?

useState만큼 많이 사용하는 hook인 useEffect를 사용하면 됩니다.

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 hook입니다.

다음 코드처럼 useEffect의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 동기적으로 사용가능합니다.

useEffect(() => {
  // ... //
},[바꾸고싶은 state]);

[Next.JS] getServerSideProps와 getStaticProps, revalidate

Juun — Thu, 29 Jun 2023 11:58:19 +0900

이번에 만들어본 서비스에 SSR을 지원하는 Next.JS를 적용하고 Notion API를 이용해서 공지사항을 구현하는 과정을 기록합니다.

https://puenti.tistory.com/85

[React] Notion API 연동해보기

https://about-home.net/ 우리집은 안전할까? 우리집 정보 확인하기 우리집은 안전할까? 우리집 정보 확인하기 about-home.net 이번에 친구와 사이드 프로젝트를 진행했던 어바웃홈입니다. 기본적인 기능

puenti.tistory.com

먼저 Next.JS에서 지원하는 getSerSideProps와 getStaticProps에 대해 알아보면 이렇습니다.

getServerSideProps

getServerSideProps는 매번 요청이 있을 때마다 서버 측에서 데이터를 가져옵니다. 즉, 매 요청마다 실행되며, 데이터를 서버에서 가져와 페이지를 렌더링합니다. 이는 데이터가 항상 최신 상태를 유지해야 하는 경우에 유용합니다. 예를 들어, 외부 API로부터 실시간 데이터를 가져와야 하는 경우에 적합합니다. 이 방법은 페이지가 항상 최신 데이터로 업데이트되어야 하는 동적인 페이지에 적합합니다.

getStaticProps

getStaticProps는 빌드 시점에 데이터를 미리 가져옵니다. 이 메서드는 서버 측에서 한 번 실행되며, 데이터를 사전 렌더링하여 정적인 HTML 파일을 생성합니다. 이렇게 생성된 정적 파일은 요청 시 클라이언트에게 제공됩니다. 이는 페이지가 자주 변하지 않거나, 모든 요청마다 데이터를 다시 가져오지 않아도 되는 경우에 유용합니다. 예를 들어, 블로그 게시물, 제품 목록 등과 같이 정적으로 유지되는 데이터에 적합합니다. 정적 생성을 사용하면 서버 부하가 줄어들고, 성능이 향상됩니다.

기존 구현, getStaticProps

기존에는 성능과 사용자 경험 측면에서 보았을 때 getStaticProps를 이용해서 구현을 했습니다.

확실히 서버에서 데이터를 사전에 렌더링(SSR)해서 성능과 사용자 경험 측면에서 매우 좋았습니다.

하지만 문제가 있었습니다. "getStaticProps는 빌드 시점에 데이터를 미리 가져옵니다"

즉, 이후에 데이터가 변경되어도 정적 파일은 업데이트되지 않고 이전에 생성된 데이터를 계속 사용합니다.

따라서 클라이언트는 새로운 데이터를 알지 못하고 이전의 데이터만을 볼 수 있게 됩니다.

그래서 부랴부랴 getServerSideProps로 바꿔봅니다.

변경, getServerSideProps

위 문제 때문에 이용자가 공지사항에 들어가면 매번 요청을 하는 getServerSideProps로 바꾸게 됩니다.

그러나 getServerSideProps를 이용하니 성능에 문제가 생깁니다...

즉, 이용자가 공지사항에 들어갈때마다 서버에 요청을 하다보니 렌더링하기까지 짧으면 1초에서 길면 4초라는 시간이 걸렸습니다.

이는 사용자 측면에서 최악이라는 생각이 들어 다른 방법을 찾게 됩니다.

최종 getStaticProps와 revalidate

Next.js는 데이터의 업데이트 주기에 따라 정적 파일을 다시 생성할 수 있는 기능을 제공합니다. 이를 통해 정적 사이트 재생성 (Static Site Regeneration)이 가능합니다. 재생성 주기를 설정하여 일정 시간마다 정적 파일을 갱신하거나, 요청 시마다 업데이트된 데이터를 가져올 수 있습니다.

데이터 업데이트 주기를 설정하려면 getStaticProps의 options 매개변수를 사용하여 revalidate 값을 설정합니다. revalidate 값은 정적 파일을 재생성하는 주기를 지정하는데 사용됩니다. 예를 들어, 다음과 같이 설정하면 10초마다 정적 파일이 재생성됩니다.

export async function getStaticProps() {
  // 데이터 가져오기 로직
  return {
    props: {},
    revalidate: 10, // 10초마다 재생성
  };
}

이렇게 설정하면 Next.js는 설정된 주기에 따라 정적 파일을 재생성하고 클라이언트에게 업데이트된 데이터를 제공합니다. 따라서 getStaticProps를 사용하더라도 일정 주기로 데이터를 업데이트할 수 있습니다.

공지사항 페이지 특성상 게시글이 자주 올라가는 게시판이 아니라 getStaticProps를 이용해서 미리 렌더링을 하되 revalidate를 통해 주기적으로 서버에 요청을 해서 성능과 사용자 경험을 해결할 수 있도록 하였습니다.

[React] Notion API 연동해보기

Juun — Wed, 28 Jun 2023 12:50:04 +0900

https://about-home.net/

우리집은 안전할까? 우리집 정보 확인하기

about-home.net

이번에 친구와 사이드 프로젝트를 진행했던 어바웃홈입니다.

기본적인 기능 구현은 다되어 있고 공지사항을 어떻게 구현할지에 대한 고민이 있었습니다.

친구와 말한 기존안은 어드민 페이지를 만들어서 거기에 공지사항 CRUD 페이지를 만들고 클라이언트에서 DB에 저장되어 있는 공지사항을 호출하는 방식을 생각했는데....

친구도 이직을 하고 시간도 많이 없어 일단 노션 API를 통해 공지사항을 구현하기로 했습니다.

많은 레퍼런스들이 많지만 구현시 어려웠던 부분만 정리해보았습니다.

1. 사용 라이브러리

"dependencies": {
    "@notionhq/client": "^2.2.5",
    "notion-client": "^6.16.0",
    "react-notion-x": "^6.16.0",
    "notion-to-md": "^3.1.0",
  },

@notionhq/client와 notion-client

어떤 분은 notionhq/client를 쓰고 다른 분은 notion-client 쓰는 사람도 있고 둘 다 같은거 같은데 찾아보니 아래와 같은 차이를 가지고 있습니다.

notionhq/client와 notion-client는 Notion API를 사용하기 위한 두 가지 서드파티 라이브러리입니다. 이 라이브러리들은 Notion API를 호출하고 데이터를 가져오거나 업데이트하는 등의 작업을 수행할 수 있습니다.

notionhq/client는 Notion의 공식 클라이언트 라이브러리로, Notion에서 직접 유지보수하고 지원합니다. 이 라이브러리는 Node.js 및 브라우저 환경에서 사용할 수 있으며, Notion API의 다양한 기능을 활용할 수 있는 많은 메서드와 도우미 함수를 제공합니다.

notionhq/client는 안정적이고 문서화가 잘 되어 있으며, 공식 지원을 받기 때문에 업데이트 및 버그 수정이 빠르게 이루어집니다.

반면에 notion-client는 notionhq/client와는 별개의 개발자에 의해 만들어진 라이브러리입니다. 이 라이브러리도 Notion API와 상호작용할 수 있지만, 공식적인 Notion 지원이 아니므로 업데이트나 버그 수정이 느리게 이루어질 수 있습니다.

또한, notionhq/client보다는 기능이 제한적일 수도 있습니다. 따라서, Notion API를 사용하여 개발을 진행할 때는 공식 지원을 받는 notionhq/client를 사용하는 것이 가장 좋습니다. 이는 안정성과 업데이트, 지원 측면에서 더 많은 혜택을 받을 수 있기 때문입니다.

저는 둘 다 써봤지만 공식문서가 잘되어 있는 notionhq/client를 사용했습니다.

react-notion-x

react-notion-x는 Notion의 블록 구조와 일치하는 컴포넌트 구조를 가지고 있어, Notion 페이지의 구조를 정확하게 재현할 수 있습니다. 또한, Notion의 스타일과 테마를 적용하여 일관된 뷰를 제공할 수 있습니다. 라이브러리는 다양한 커스터마이징 옵션과 플러그인을 제공하므로, Notion 페이지를 개발자의 필요에 맞게 조정하고 확장할 수 있습니다.

해당 라이브러리는 notionhq/client가 아닌 notion-client를 사용해야 해서 사용하지는 않았습니다.

아래 블로그는 react-notion-x를 통해서 구현 예시를 잘보여줘 참고바랍니다.

https://enfp-jake.tistory.com/214

[React][NextJS][Notion] React에 Notion페이지를 가져오는 방법

# react-notion-x를 사용해서 React에서 Notion 페이지 보여주기 - Notion은 쉽게 웹 상에 공개된 페이지를 만들 수 있고, 기본 제공되는 디자인이 훌륭하기 때문에, 약관 동의나 사용법과 같은 서비스의

enfp-jake.tistory.com

notion-to-md

notion-to-md는 Notion 페이지를 Markdown 형식으로 변환하는 도구나 라이브러리입니다. 이 라이브러리를 사용하면 Notion에서 작성한 콘텐츠를 Markdown 파일로 내보낼 수 있습니다.

2. notion api와 block 이해

이번 기능을 구현하면서 개인적으로 notion api를 이해하는 부분이 가장 어려웠습니다.

노션 데이터베이스라는 개념이 있고 해당 데이터베이스를 호출하고 response 값을 아래처럼 받아왔습니다.

저는 해당 하위 프로퍼티에 접근할 수 있을줄 알았는데 그렇지 못 했습니다.

더 찾아보니 공식notion api를 통해서는 제가 원하는 content에 접근할 수 있는 방법은 없더라구요.

notion block

노션(Notion)의 API를 사용할 때 "block"은 중요한 개념입니다. 노션은 다양한 유형의 콘텐츠를 블록(block) 단위로 구성합니다. 블록은 텍스트, 이미지, 목록, 코드 등 다양한 형태의 콘텐츠를 나타내며, 이러한 블록들이 모여서 페이지를 구성합니다.

노션의 블록 구조는 트리 형태로 되어 있습니다. 페이지는 최상위 블록이며, 이 아래에 다양한 블록 유형이 포함될 수 있습니다. 블록은 부모-자식 관계를 가지며, 자식 블록은 부모 블록에 속합니다. 이러한 구조를 통해 복잡한 콘텐츠 구성을 가능하게 합니다.

그래서 너는 구현 어떻게 했는데??

저는 저희 홈페이지 내에서 마크다운된 content를 보여주고 싶었습니다.

notionhq/client를 통해 page_id를 가져오고 그 아이디를 notion-to-md를 통해 마크다운하기를 하고 싶었으나 렌더링 문제, fetch 문제로 인해서 아래처럼 구현했습니다.

notionhq/client를 통해 title과 created_date, 해당 page_id를 가져올 수 있었습니다.

그래서 공지사항 list를 구현하고 해당 상세 페이지는 page_id를 통해 해당 페이지로 이동할 수 있게 하였습니다.

그래서 해당 상세 페이지를 클릭하면 해당 페이지로 이동하게 하였습니다.

아무래도 노션 page로 이동하는 문제가 있다보니 해당 페이지 내에 "공지사항 돌아가기", "어바웃홈 돌아가기" url을 삽입해서 사용자 편의성을 높이려고 했습니다.

결론

노션을 통해 채용페이지나 많은 페이지를 만드는걸 볼 수 있었는데 이건 notion-client와 react-notion-x을 통해 구현했겠구나 라는 생각이 들었습니다. 저는 제가 만든 페이지 내에서 해당 페이지 내에서 notion api를 호출한 데이터로 이리저리 사용하다보니 렌더링 문제, 성능 문제 외에도 많은 문제가 있었지만 다음에 노션 api를 사용해 페이지를 만든다면 notion-client / react-notion-x 조합이나 notionhq/client / notion-to-md 조합을 이용해서 구현해볼 생각입니다.

해당 기능 구현에 화해 블로그의 도움을 많이 받았습니다.

https://blog.hwahae.co.kr/all/tech/10960

Notion API와 함께 정적 페이지로의 여정 – 화해 블로그 | 기술 블로그

Notion API와 함께 정적 페이지로의 여정 정적 페이지를 notion으로 관리하는 방법으로 접근하기까지의 과정을 약 3주 간 리서치한 과정을 글로 옮겼습니다. 과제 완성 후 최종 결과물을 공유하는 것

blog-wp.hwahae.co.kr

[JavaScript] 이벤트 루프(event loop) 란???

Juun — Tue, 9 May 2023 08:03:34 +0900

이 글을 읽기 전 참고하면 좋은 글
https://puenti.tistory.com/82

[JavaScript] 자바스크립트에서 heap, stack, queue란?

1. Heap(힙) Heap은 동적으로 할당되는 메모리 영역으로, 객체와 배열과 같은 복합 데이터 타입이 저장되는 곳입니다. Heap의 데이터는 크기가 동적으로 결정되기 때문에 메모리 공간이 필요한 만큼

puenti.tistory.com

이벤트 루프(event loop) 란?

이벤트 루프란 자바스크립트에서 가장 중요한 개념 중 하나 입니다.
자바스크립트는 싱글 스레드 기반의 언어(인터프리터 언어)로서 한 가지 작업 밖에 못하는 언어적 한계를 가지고 있습니다.
그러다보니 자바와 같은 컴파일 언어와 비교하면 컴파일 하는 과정이 없기 때문에 컴파일 하는 시간은 소요되지 않으나, 인터프리터 언어는 실행파일을 별도로 생성하지 않기 때문에 실행시마다 인터프리트 과정이 반복 수행되어 실행 속도가 느리다는 단점이 있습니다.

이러한 단점을 상쇄시키기 위해 나온 개념이 바로 이벤트 루프입니다.
코드의 실행이 차단(blocked)되는 동기(synchronous) 처리 방식으로 작성하면 다른 작업을 수행할 수 없습니다.
그러나 JavaScript에서는 비동기 방식으로 처리를 해서 이러한 제한을 극복할 수 있습니다.

이벤트 루프는 이러한 비동기성을 지원하는 방식 중 하나로, 브라우저나 Node.js와 같은 JavaScript 실행환경에서 이벤트 처리를 담당합니다. 이벤트 루프는 이벤트 발생 시 해당 이벤트를 처리하기 위해 콜백(callback) 함수를 대기열(Queue)에 추가하고, 대기열(Queue)에서 이벤트를 꺼내와 실행합니다.

출처 - 자바스크립트 MDN

이벤트 루프는 크게 두 가지 단계로 구성됩니다.
첫 번째 단계는 이벤트 발생을 감지하고, 두 번째 단계는 대기열에서 콜백 함수를 꺼내와 실행하는 것입니다.

1. 이벤트 발생 감지는 브라우저와 Node.js일 경우로 나뉘게 됩니다.

브라우저의 경우 DOM 이벤트, 타이머 이벤트, XMLHttpRequest 이벤트 등을 감지하고, Node.js의 경우 I/O 작업, 타이머 이벤트 등을 감지합니다.
2. 대기열에서 콜백 함수를 꺼내와 실행할 때는 콜백 함수가 완료될 때까지 기다리지 않고, 다음 이벤트 발생을 감지하기 위해 바로 대기열로 돌아갑니다.

간단한 코드로 이벤트 루프의 작동원리에 대해 알아보겠습니다

(function Test() {

  console.log('시작');

  setTimeout(function cb() {
    console.log('콜백 1: 콜백 메시지');
  }); // has a default time value of 0

  console.log('평범한 메시지');

  setTimeout(function cb1() {
    console.log('콜백 2: 콜백 메시지');
  }, 0);

  console.log('종료');

})();

// "시작"
// "평범한 메시지"
// "종료"
// "콜백 1: 콜백 메시지"
// "콜백 2: 콜백 메시지"

위 코드를 실행하면 "시작"→"콜백 1: 콜백 메시지"→"평범한 메시지"→"콜백 2: 콜백 메시지"→"종료" 순서대로 출력되는 것이 아니라
"시작"→"평범한 메시지"→"종료"→"콜백1: 콜백 메시지"→"콜백2: 콜백 메시지" 순서대로 출력이 됩니다.

이는 setTimeout 함수를 호출하면, 이벤트 루프에서는 콜백 함수를 이벤트 큐에 저장하고, 일정 시간이 지난 후에 이벤트 큐에서 콜백 함수를 꺼내 실행하기 때문입니다.

즉, 이벤트 루프에서 스택과 큐를 조합하여 비동기 작업을 처리하는데, 스택에 있는 작업이 모두 처리되면 이벤트 큐에서 대기 중인 작업을 하나씩 꺼내어 스택에 쌓아 처리합니다. 이렇게 함으로써 자바스크립트 엔진은 비동기 작업을 순서대로 처리하는 것이 아니라, 가능한 빠르게 처리할 수 있도록 구현되어 있습니다.

이렇게 이벤트 루프를 통해 JavaScript는 비동기적으로 처리되는 코드들을 순서대로 실행하면서, 다른 작업을 수행할 수 있습니다.
이를 통해 JavaScript는 효율적인 비동기 처리를 구현할 수 있습니다.

[JavaScript] 자바스크립트에서 heap, stack, queue란?

Juun — Mon, 8 May 2023 15:24:15 +0900

1. Heap(힙)

Heap은 동적으로 할당되는 메모리 영역으로, 객체와 배열과 같은 복합 데이터 타입이 저장되는 곳입니다.

Heap의 데이터는 크기가 동적으로 결정되기 때문에 메모리 공간이 필요한 만큼 동적으로 할당되고, 필요하지 않은 메모리는 가비지 컬렉터(garbage collector)에 의해 자동으로 해제가 됩니다.

※ 메모리 생존주기

필요할때 할당
할당된 메모리를 사용 (읽기, 쓰기)
더 이상 필요하지 않으면 해제

2. Stack(스택)

Stack은 정적으로 할당되는 메모리 영역으로, 함수 호출 시 함수 내의 변수, 매개변수, 복귀 주소 등의 정보가 저장되는 곳입니다.

함수가 호출될 때마다 스택 프레임(stack frame)이 생성되고, 함수가 종료될 때마다 스택 프레임이 제거됩니다.

이를 스택(stack)이라고 부릅니다.

3. Queue(큐)

Queue는 자바스크립트에서는 일반적으로 메모리 구조로 사용되지 않지만, 자바스크립트에서 비동기(asynchronous) 처리를 위해 사용되는 자료 구조입니다. 비동기 처리에서는 작업을 처리하는 순서가 보장되지 않기 때문에, Queue를 사용하여 작업을 순차적으로 처리합니다. 작업이 Queue에 추가되면, 이벤트 루프(event loop)가 이를 처리하기 위해 대기하다가, 이전 작업이 완료되면 Queue에서 다음 작업을 가져와 실행합니다.

출처 - 자바스크립트 MDN

이러한 Heap, Stack, Queue는 자바스크립트의 동작 방식과 메모리 관리를 이해하는 데 매우 중요합니다.

특히 Heap과 Stack은 자바스크립트 엔진의 메모리 관리 방식을 이해하는 데 중요하며, Queue는 비동기 처리와 이벤트 처리를 이해하는 데 중요합니다.

[알고리즘] 재귀함수란? 재귀함수로 팩토리얼과 피보나치 수열 구현 / For문과의 차이

Juun — Wed, 3 May 2023 13:59:11 +0900

재귀함수란??

재귀함수(Recursive Function)는 자신이 수행하는 함수 내에서 자기 자신을 다시 호출하여 작업을 수행하는 함수를 말합니다.
이러한 재귀적 호출을 통해 복잡한 문제를 간단하게 해결할 수 있습니다.

재귀함수로 팩토리얼 구현

재귀 함수의 대표적 예시인, 팩토리얼 함수를 구현해보겠습니다.
팩토리얼 함수는 양의 정수 n에 대해 n!을 구하는 함수이며, n!은 1부터 n까지의 정수를 모두 곱한 값입니다.

function factorial(n) {
  if (n === 0) {  // n이 0일 때, 1을 반환합니다.
    return 1;
  } else {  // n이 0이 아닐 때, 자신을 다시 호출합니다.
    return n * factorial(n-1);
  }
}

console.log(factorial(5));  // 5! = 5 * 4 * 3 * 2 * 1 = 120을 출력합니다.

위 코드에서 factorial 함수는 자신이 받은 인자 n이 0일 때, 1을 반환합니다.
그 외의 경우에는 n과 factorial(n-1)의 곱을 반환합니다.
이 때 factorial(n-1)은 factorial 함수를 자신보다 작은 인자에 대해 다시 호출한 결과를 의미합니다.

피보나치 수열 구현

피보나치 수열의 재귀적 정의는 다음과 같습니다.

피보나치 수열의 0번째 항은 0입니다.
피보나치 수열의 1번째 항은 1입니다.
n (n>=2)번째 항은 (n-1)번째 항과 (n-2)번째 항의 합입니다.

function fibonacci(n) {
  if (n === 0 || n === 1) {
    // n이 0이나 1인 경우, 그냥 n을 반환한다.
    return n;
  } else {
    // n이 2 이상인 경우, n-1번째 피보나치 수와 n-2번째 피보나치 수의 합을 반환한다.
    return fibonacci(n-1) + fibonacci(n-2);
  }
}

위 코드에서 fibonacci 함수는 인자 n번째 피보나치 수열의 값을 반환합니다.
n이 0이거나 1인 경우에는 그대로 반환하고, 그 외의 경우에는 (n-1)번째 항과 (n-2)번째 항을 더한 값을 반환합니다.
이렇게 재귀적으로 정의된 피보나치 수열을 재귀함수를 이용하여 구현할 수 있습니다.

이렇게 재귀적으로 함수를 호출하여 작업을 수행하는 것이 재귀함수의 핵심적인 개념입니다.
재귀함수는 복잡한 알고리즘을 간단하게 구현할 수 있지만, 재귀적 호출이 너무 깊어지면 스택 오버플로우( Stack Overflow ) 에러가 발생할 수 있으므로 주의가 필요합니다.

For문과의 차이

재귀함수와 for문은 모두 반복적인 작업을 수행할 때 사용되는 제어문입니다. 그러나 두 제어문은 다른 방식으로 동작합니다.
for문은 초기값, 조건식, 증감식을 이용하여 반복 횟수를 제어합니다.
예를 들어, 0부터 4까지의 숫자를 출력하는 for문은 다음과 같이 작성할 수 있습니다.

for (let i = 0; i < 5; i++) {
  console.log(i);
}

반면에, 재귀함수는 자기 자신을 다시 호출하여 작업을 수행합니다.
예를 들어, 1부터 n까지의 합을 구하는 재귀함수는 다음과 같이 작성할 수 있습니다.

function sum(n) {
  if (n === 1) {
    return 1;
  } else {
    return n + sum(n-1);
  }
}

console.log(sum(5));  // 1 + 2 + 3 + 4 + 5 = 15를 출력합니다.

위 코드에서 sum 함수는 자신이 받은 인자 n이 1일 때, 1을 반환합니다. 그 외의 경우에는 n과 sum(n-1)의 합을 반환합니다.
이 때 sum(n-1)은 sum 함수를 자신보다 작은 인자에 대해 다시 호출한 결과를 의미합니다.
이렇게 재귀적으로 함수를 호출하여 작업을 수행하는 것이 재귀함수의 핵심적인 개념입니다.
그래서 재귀함수는 함수를 반복적으로 호출하기 때문에 스택 메모리를 사용하는데 (스택 오버플로우가 발생할 수 있습니다. )

반면 반복문은 메모리 힙을 사용합니다

따라서 for문과 재귀함수는 반복적인 작업을 수행할 때 사용되지만,
for문은 반복횟수를 제어하는 것에 초점을 두고,
재귀함수는 자기 자신을 호출하여 작업을 수행하는 것에 초점을 두고 동작합니다.

[React] useState란? 여러 개의 state 변수 사용하기

Juun — Mon, 24 Apr 2023 12:54:06 +0900

useState란?

리액트의 useState는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook 중 하나입니다.

Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. 또한 Hook은 함수형 컴포넌트에서 상태를 지속적으로 추적하고 업데이트할 수 있도록 도와줍니다.

useState를 사용하면, 컴포넌트에서 변경 가능한 상태를 정의하고, 해당 상태가 변경될 때마다 리액트가 컴포넌트를 다시 렌더링하도록 설정할 수 있습니다.

useState는 다음과 같이 사용합니다

import React, { useState } from 'react';

function Example() {
  // useState를 사용해 "count" 상태를 초기값 "0"으로 설정합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

위 코드에서, useState를 사용하여 count라는 상태를 초기값 0으로 설정합니다. 이 상태를 변경하려면, setCount 함수를 사용합니다. setCount 함수는 새로운 값을 받아 해당 상태를 업데이트하고, 리액트에게 컴포넌트를 다시 렌더링하도록 알립니다.

위 예제에서는 "Click me" 버튼을 클릭할 때마다 count 상태가 증가하고, 이를 화면에 출력합니다.

useState를 사용하면 여러 개의 상태를 관리할 수도 있으며, 객체나 배열과 같은 복잡한 데이터 구조를 다룰 수도 있습니다.

또한, 이 Hook을 사용하여 상태 값이 변경될 때 추가적인 동작을 수행하도록 설정할 수도 있습니다.

예를 들어, useEffect Hook을 사용하여 특정 상태가 변경될 때마다 API 호출을 수행하도록 설정할 수 있습니다.

여러 개의 state 변수

[something, setSomething]의 쌍처럼 state 변수를 선언하는 것은 유용합니다.

왜냐하면 여러 개의 변수를 선언할 때 각각 다른 이름을 줄 수 있기 때문입니다.

function ExampleWithManyStates() {
  // 여러 개의 state를 선언할 수 있습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

위의 코드는 age, fruit, todos라는 지역 변수를 가지며 개별적으로 갱신할 수 있습니다.

function handleOrangeClick() {
    // this.setState({ fruit: 'orange' })와 같은 효과를 냅니다.
    setFruit('orange');
  }

여러 개의 state 변수를 사용하지 않아도 됩니다.

state 변수는 객체와 배열을 잘 가지고 있을 수 있으므로 서로 연관있는 데이터를 묶을 수 있습니다.

하지만 클래스 컴포넌트의 this.setState와 달리 state를 갱신하는 것은 병합하는 것이 아니라 대체하는 것입니다.

[React] State와 Props란???

Juun — Wed, 19 Apr 2023 14:11:35 +0900

리액트를 하다보면 State와 Props에 대해 많이 나오는데 오늘은 이것에 대해 간단하게 정리해볼까 합니다.

State란?

부모 컴포넌트에서 자녀 컴포넌트로 데이터를 보내는게 아닌 해당 컴포넌트 내부에서 데이터를 전달하는 방법!
예를 들어, 검색 창에 입력할때 글이 변하는 것은 state로 바꾸게 됩니다.
State는 변경 가능한 mutable 값입니다.
State가 변하면 re-render가 됩니다.

State는 해당 컴포넌트에서 useState라는 React hooks를 통해 사용가능합니다.

간단한 코드로 설명을 하면 아래와 같습니다.

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

위의 코드에서는 useState라는 Hook을 사용하여 상태를 정의하고 있습니다.

useState는 상태 값과 상태를 변경하는 함수를 반환합니다. 첫 번째 인자는 초기값이며, 여기서는 0으로 설정되어 있습니다.

상태 값을 count 변수에 할당하고, 상태를 변경하는 함수를 setCount 변수에 할당하고 있습니다.

handleClick 함수는 setCount를 호출하여 count 값을 증가시키고 있습니다.

그리고, 버튼을 클릭할 때 handleClick 함수가 실행되도록 onClick 이벤트를 등록하고 있습니다.

React hook의 useState 부분은 나중에 포스팅으로 더 자세히 적어보도록 하겠습니다.

props란?

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소!
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.
Props는 읽기 전용인 immutable 값으로 자녀 컴포넌트 입장에서는 변하지 않습니다.
변하게 하려면 부모 컴포넌트의 state를 변경시켜야 합니다.

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

<MyComponent name="John" />

위의 코드에서는 name이라는 Props를 MyComponent에 전달하고 있습니다.

MyComponent에서는 props를 인자로 받아와서 name을 읽어와 "Hello, John!"이라는 문구를 출력하고 있습니다.

Props는 다양한 자료형을 가질 수 있습니다.

예를 들어, 문자열(String), 숫자(Number), 객체(Object), 배열(Array) 등을 Props로 전달할 수 있습니다.

또한, 컴포넌트 자체도 Props로 전달할 수 있습니다.

이를 통해 컴포넌트에서 다른 컴포넌트를 렌더링하거나 조건부 렌더링을 할 수 있습니다.

[JavaScript] 비구조화 할당이란 (분해 구조화) / 배열, 객체에서의 비구조화 할당

Juun — Thu, 13 Apr 2023 23:13:25 +0900

비구조화 할당이란?

리액트를 공부하다 보면 비구조화 할당이란 단어가 많이 보입니다.

비구조화 할당(Destructuring assignment)은 객체나 배열에서 데이터를 추출하여 변수나 상수로 개별적으로 할당하는 문법으로, 배열에서도 동일하게 사용할 수 있습니다. 이때 배열에서 비구조화 할당을 사용하는 것을 배열 분해 구조(Array destructuring)라고 부릅니다.

객체에서의 비구조화 할당

객체에서 비구조화 할당을 사용하면 객체의 프로퍼티를 추출하여 변수나 상수로 할당할 수 있습니다.

const { 프로퍼티1, 프로퍼티2, ... } = 객체;

예를 들어 다음과 같이 객체를 생성하고, 해당 객체의 프로퍼티를 변수로 할당하는 코드를 작성할 수 있습니다.

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const { name, age } = person;

console.log(name); // 'John'
console.log(age); // 30

이 예제에서는 person 객체의 name 프로퍼티와 age 프로퍼티를 추출하여 name과 age 변수로 할당합니다.

프로퍼티 이름 변경

비구조화 할당을 사용할 때 프로퍼티 이름을 변경하여 할당할 수 있습니다.

이때는 다음과 같이 콜론(:)과 함께 새로운 이름을 지정합니다.

const { 프로퍼티1: 새이름1, 프로퍼티2: 새이름2, ... } = 객체;

const person = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const { name: personName, age: personAge } = person;

console.log(personName); // 'John'
console.log(personAge); // 30

이 예제에서는 person 객체의 name 프로퍼티를 personName 변수로, age 프로퍼티를 personAge 변수로 할당합니다.

기본값 설정

비구조화 할당을 사용할 때 해당 프로퍼티가 존재하지 않을 경우 기본값을 설정할 수 있습니다. 이때는 다음과 같이 등호(=)와 함께 기본값을 지정합니다.

const { 프로퍼티1 = 기본값1, 프로퍼티2 = 기본값2, ... } = 객체;

예를 들어 다음과 같이 객체를 생성하고, 해당 객체의 프로퍼티를 변수로 할당하는 코드를 작성할 수 있습니다

배열에서의 비구조화 할당

const [ 요소1, 요소2, ... ] = 배열;

const fruits = ['apple', 'banana', 'orange'];

const [ first, second ] = fruits;

console.log(first); // 'apple'
console.log(second); // 'banana'

이 예제에서는 fruits 배열의 첫 번째 요소('apple')와 두 번째 요소('banana')를 추출하여 first와 second 변수로 할당합니다.

요소 건너뛰기

배열에서 비구조화 할당을 사용할 때 특정 요소를 건너뛸 수도 있습니다. 이때는 건너뛸 요소 수만큼 쉼표(,)를 사용합니다.

const [ 요소1, , 요소3, ... ] = 배열;

const fruits = ['apple', 'banana', 'orange', 'grape'];

const [ first, , third ] = fruits;

console.log(first); // 'apple'
console.log(third); // 'orange'

이 예제에서는 fruits 배열의 첫 번째 요소('apple')와 세 번째 요소('orange')를 추출하여 first와 third 변수로 할당합니다.

기본값 설정

배열에서 비구조화 할당을 사용할 때 해당 요소가 존재하지 않을 경우 기본값을 설정할 수 있습니다.

이때는 다음과 같이 등호(=)와 함께 기본값을 지정합니다.

const [ 요소1 = 기본값1, 요소2 = 기본값2, ... ] = 배열;

const fruits = ['apple', 'banana'];

const [ first, second, third = 'orange' ] = fruits;

console.log(first); // 'apple'
console.log(second); // 'banana'
console.log(third); // 'orange'

이 예제에서는 fruits 배열의 첫 번째 요소('apple')와 두 번째 요소('banana')를 추출하여 first와 second 변수로 할당하고, 세 번째 요소('orange')는 존재하지 않기 때문에 기본값('orange')이 할당됩니다.

나머지 요소 추출하기

배열에서 비구조화 할당을 사용할 때 나머지 요소를 추출하여 새로운 배열로 할당할 수도 있습니다. 이때는 ... 연산자를 사용합니다.

const [ 요소1, 요소2, ..., 요소N ] = 배열;

const fruits = ['apple', 'banana', 'orange', 'grape'];

const [ first, ...rest ] = fruits;

console.log(first); // 'apple'
console.log(rest); // [ 'banana', 'orange', 'grape' ]

이 예제에서는 fruits 배열의 첫 번째 요소('apple')를 추출하여 first 변수로 할당하고, 나머지 요소('banana', 'orange', 'grape')를 새로운 배열로 할당하여 rest 변수에 저장합니다.

[React] component 란?? 함수형 컴포넌트, 클래스형 컴포넌트

Juun — Wed, 5 Apr 2023 18:02:24 +0900

component 란??

component

리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 구성합니다. 컴포넌트는 UI의 작은 조각을 나타내며, 다른 컴포넌트와 조합하여 복잡한 UI를 만들 수 있습니다. 이러한 컴포넌트 기반 아키텍처는 코드의 재사용성과 유지 보수성을 높여주는 장점을 가지고 있습니다.

리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다.

함수형 컴포넌트

function App() {
	const name = "리액트";
    return <div className="react"> {name} </div>
}

export default App;

함수형 컴포넌트는 코드가 간결하고 읽기 쉽다는 장점이 있습니다.

또한, 클래스형 컴포넌트에 비해 메모리 사용량이 적고 성능이 더 우수합니다.

함수형 컴포넌트는 상태(state)를 가질 수 없으며, 라이프사이클 API를 사용할 수 없습니다.

이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다.

함수형 컴포넌트는 React Hooks를 사용하여 상태를 유지할 수 있습니다.

React Hooks는 함수형 컴포넌트에서 상태를 유지하고, 이벤트 핸들러를 추가하고, 라이프사이클 메서드를 호출하는 등의 작업을 수행할 수 있도록 해줍니다.

※ 라이프사이클 메서드는 컴포넌트가 생성, 갱신, 제거되는 과정에서 호출되는 메서드입니다.

클래스형 컴포넌트

importReact,{Component}from'react';

class App extends Component {
	render() {
    	constname = 'react';
        return <div className="react"> {name} </div>;  
		}
	}
exportdefaultApp;

클래스형 컴포넌트는 state(상태)와 lifecycle methods(라이프사이클 메서드)를 사용하여 UI를 렌더링하고 상호작용합니다.

state는 컴포넌트 내에서 유지되는 데이터를 의미하며, 이를 변경하면 컴포넌트가 다시 렌더링됩니다.

클래스형 컴포넌트는 render() 메서드를 사용하여 UI를 반환합니다.

이 메서드는 JSX(JavaScript XML)를 사용하여 UI를 정의할 수 있습니다.

또한, 클래스형 컴포넌트는 props(속성)를 전달받을 수 있습니다.

props는 부모 컴포넌트에서 전달되는 데이터를 의미합니다.

클래스형 컴포넌트는 state와 라이프사이클 메서드를 사용하여 복잡한 로직을 구현할 수 있습니다.

그러나 클래스형 컴포넌트는 코드가 길고 복잡해지기 쉽고, 작성하기 어렵다는 단점이 있습니다.

또한, 클래스형 컴포넌트는 함수형 컴포넌트보다 메모리 사용량이 많아 성능이 떨어지기도 합니다.

함수형 컴포넌트를 사용할지 클래스형 컴포넌트를 사용할지는 선택사항입니다.

그러나 최근 리액트에서는 함수형 컴포넌트를 권장하고, 함수형 컴포넌트를 사용하면 코드를 더욱 간결하고 읽기 쉽게 작성할 수 있습니다.

[JavaScript] 화살표 함수(Arrow function)란 ?? 화살표 함수에서 this 바인딩

Juun — Fri, 31 Mar 2023 16:14:50 +0900

화살표 함수(Arrow function)란 ??

자바스크립트의 화살표 함수(arrow function)는 함수를 선언하는 다른 방법 중 하나입니다.

ES6(2015)에서 소개되었으며, 일반 함수보다 간결하고 가독성이 높으며, this 바인딩에 대한 동작 방식이 다릅니다.

화살표 함수는 다음과 같은 구문으로 선언됩니다.

(parameter1, parameter2, ..., parameterN) => { 
   // function body 
};

여기서 parameter1, parameter2, ..., parameterN는 함수에 전달할 매개변수이고, {} 안에 있는 function body는 함수가 실행될 때 수행할 코드입니다.

화살표 함수는 다음과 같은 특징을 가집니다.

함수의 매개변수가 하나뿐이면 괄호를 생략할 수 있습니다.
함수의 코드 블록이 한 줄이면 중괄호와 return을 생략할 수 있습니다.
함수 내부에서 this는 상위 스코프의 this를 가리킵니다.
생성자 함수로 사용할 수 없습니다.

아래는 예시 코드입니다.

// 기존 함수 선언 방식
function double(x) {
  return x * 2;
}

// 화살표 함수 선언 방식
const double = (x) => x * 2;

// 함수 내부 코드 블록이 한 줄일 경우
const double = (x) => x * 2;

// 매개변수가 하나인 경우 괄호 생략 가능
const double = x => x * 2;

// 상위 스코프의 this를 가리키는 예시
const obj = {
  value: 1,
  printValue: function() {
    setTimeout(() => {
      console.log(this.value);
    }, 1000);
  }
};

화살표 함수에서 this 바인딩에 대한 동작 방식

코드를 통해 화살표 함수는 어떻게 this바인딩이 되는지 확인을 해보겠습니다.

functionBlackDog() {  
	this.name ='흰둥이';  
    return {
    	name:'검둥이',
        bark: function() {
        	console.log(this.name +':멍멍!');
            }  
        }
    } 
    
 const blackDog = newBlackDog();
 blackDog.bark(); //검둥이:멍멍! 
 
 
 functionWhiteDog() {  
 	this.name ='흰둥이';  
    return {
    	name:'검둥이',
        bark:() => {
        	console.log(this.name +':멍멍!');    
        }  
     }
 } 
 
 const whiteDog = newWhiteDog();
 whiteDog.bark(); //흰둥이:멍멍!

function()을 사용했을 때는 검둥이가 나타나고, ()=>를 사용했을 때는 흰둥이가 나타납니다.

일반 함수는 자신이 종속된 객체를 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다.

화살표 함수는 값을 연산하여 바로 반환해야 할 때 사용하면 가독성을 높일 수 있습니다.

또한 화살표 함수는 일반 함수보다 간단하고 가독성이 좋아서, 콜백 함수나 배열의 map, filter, reduce와 같은 고차 함수 등에서 자주 사용됩니다.

[JavaScript] blocking / non-blocking, 동기 / 비동기

Juun — Thu, 30 Mar 2023 02:43:36 +0900

자바스크립트에서 blocking과 non-blocking, 동기와 비동기는 프로그램의 실행과 관련된 중요한 개념입니다.

1. Blocking vs Non-blocking

Blocking은 특정 코드의 실행이 완료될 때까지 다음 코드의 실행을 중지시키는 것을 의미합니다.

이러한 코드 실행 방식은 호출된 함수가 작업을 수행할 때까지 스크립트의 실행을 차단(block)시키기 때문에, 다른 작업이나 이벤트를 처리하는 것을 방해할 수 있습니다.

Blocking이 발생하는 경우에는 대개 시스템 리소스를 많이 사용하거나 시간이 오래 걸리는 작업을 수행하는 경우입니다.

반면, Non-blocking은 호출된 함수가 작업을 수행하는 동안에도 다음 코드의 실행을 계속할 수 있습니다.

이렇게 하면 스크립트의 실행이 차단되지 않기 때문에, 더 빠르고 효율적인 코드를 작성할 수 있습니다.

Non-blocking은 대개 비동기적인 작업을 수행하는 경우에 발생합니다.

2. Synchronous vs Asynchronous

Synchronous(동기)는 코드가 실행되는 순서대로 실행되는 것을 의미합니다.

예를 들어, 함수가 호출되면 그 함수의 작업이 완료될 때까지 스크립트의 실행이 차단되며, 이후에 다음 코드가 실행됩니다. 이러한 코드 실행 방식은 대개 Blocking과 함께 발생합니다.

Asynchronous(비동기)는 코드가 실행되는 순서와는 상관없이 실행되는 것을 의미합니다.
예를 들어, 비동기 함수가 호출되면 그 함수의 작업이 완료될 때까지 스크립트의 실행이 차단되지 않습니다.

대신, 비동기 함수가 완료되면 이벤트 루프(event loop)를 통해 콜백 함수가 실행됩니다.

따라서, Blocking/Non-blocking과 Synchronous/Asynchronous는 각각 다른 의미를 가지며, 자바스크립트에서 이들을 효율적으로 사용할 수 있어야 합니다.

아래 코드는 Blocking과 Non-blocking, 그리고 Synchronous와 Asynchronous의 차이를 보여주는 간단한 예시입니다.

// Blocking and Synchronous
function blockingSync() {
  console.log("Start blockingSync function");
  const result = 1 + 2;
  console.log("Result: " + result);
  console.log("End blockingSync function");
}
blockingSync();

// Non-blocking and Asynchronous
function nonBlockingAsync() {
  console.log("Start nonBlockingAsync function");
  setTimeout(() => {
    const result = 3 + 4;
    console.log("Result: " + result);
  }, 2000);
  console.log("End nonBlockingAsync function");
}
nonBlockingAsync();

// Non-blocking and Asynchronous with Callback
function nonBlockingAsyncWithCallback(callback) {
  console.log("Start nonBlockingAsyncWithCallback function");
  setTimeout(() => {
    const result = 5 + 6;
    console.log("Result: " + result);
    callback(result);
  }, 2000);
  console.log("End nonBlockingAsyncWithCallback function");
}
nonBlockingAsyncWithCallback((result) => {
  console.log("Callback Result: " + result);
});

위 코드에서 blockingSync() 함수는 Blocking과 Synchronous한 작업을 수행합니다.

함수가 실행되면 1+2의 결과를 계산하고, 그 결과를 출력한 후, 함수의 끝을 알리는 메시지를 출력합니다.

이때 함수의 실행이 완료될 때까지 다음 코드의 실행이 중지되기 때문에, "Start nonBlockingAsync function" 메시지가 출력되기 전까지는 다른 작업을 수행할 수 없습니다.

반면, nonBlockingAsync() 함수는 Non-blocking과 Asynchronous한 작업을 수행합니다.

함수가 실행되면, setTimeout() 함수를 호출하여 2초 후에 3+4의 결과를 계산하고 출력하는 작업을 수행합니다.

이때 함수의 실행이 차단되지 않기 때문에, "End nonBlockingAsync function" 메시지가 출력되는 동안에도 다른 작업을 수행할 수 있습니다.

마지막으로, nonBlockingAsyncWithCallback() 함수는 Non-blocking과 Asynchronous하면서도 Callback 함수를 사용하여 결과를 처리합니다. 함수가 실행되면, setTimeout() 함수를 호출하여 2초 후에 5+6의 결과를 계산하고, 콜백 함수를 호출하여 결과를 전달합니다.

이때 콜백 함수가 실행되기 전에 "End nonBlockingAsyncWithCallback function" 메시지가 출력되기 때문에, 다른 작업을 수행할 수 있습니다.

[JavaScript] async / await 와 promise란??

Juun — Tue, 28 Mar 2023 14:16:47 +0900

async / await 와 promise란??

자바스크립트는 대표적인 싱글 스레드 언어입니다. 그래서 비동기 프로그래밍이 굉장히 중요합니다!

이러한 비동기 프로그래밍을 사용하게 되면 더 나은 성능과 사용자 경험을 제공할 수 있습니다.

※ 비동기 프로그래밍 : 특정 작업이 완료될 때까지 코드 실행을 멈추지 않고, 다른 작업을 동시에 수행할 수 있는 방식을 의미

자바스크립트에서 비동기 프로그래밍을 구현하는 대표적인 방법으로 콜백(callback), 프로미스(promise), 비동기 함수(async/await)가 있습니다.

이전 포스팅에 콜백에 대한 설명이 있으므로 짧게 설명하자면 이렇습니다.

콜백은 함수의 인자로 다른 함수를 전달하여, 작업이 완료될 때 해당 함수를 호출하는 방식입니다.

예를 들어, setTimeout 함수를 사용하여 일정 시간이 지난 후에 함수를 호출할 수 있습니다.

더 자세한 내용이 궁금하다면 아래의 링크를 눌러주세요!

https://puenti.tistory.com/71

프로미스는 비동기 작업이 완료될 때 결과값을 반환하는 객체입니다.

프로미스는 비동기 작업을 수행하는 함수에서 반환되며, 이후에 .then() 메서드를 사용하여 작업이 완료될 때 실행할 함수를 등록할 수 있습니다.

비동기 함수(async/await)는 ES2017에서 도입된 기능으로, async 키워드로 함수를 선언하고, 내부에서 await 키워드를 사용하여 비동기 작업이 완료될 때까지 기다릴 수 있습니다. 이를 통해, 프로미스를 사용하는 것보다 더 간편하고 가독성 좋은 코드를 작성할 수 있습니다.

하나씩 알아보도록 하겠습니다.

먼저 promise입니다.

promise(프로미스)란?

프로미스(Promise)는 비동기 작업을 다루기 위한 자바스크립트 객체입니다.

프로미스는 비동기 작업의 성공 또는 실패와 같은 결과를 나타내는 객체입니다. 일반적으로 프로미스는 다음과 같은 세 가지 상태를 가집니다.

대기(pending): 작업이 완료되지 않은 초기 상태
이행(fulfilled): 작업이 성공적으로 완료된 상태
거부(rejected): 작업이 실패한 상태

프로미스 객체를 생성할 때는 콜백 함수를 인자로 받습니다. 이 콜백 함수는 두 개의 인자를 가지는데, 하나는 이행(resolve)이 되었을 때 실행되는 함수이고, 다른 하나는 거부(reject)되었을 때 실행되는 함수입니다.

프로미스 객체를 사용하는 방법은 다음과 같습니다.

const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  // 작업이 완료되면 resolve 또는 reject를 호출하여 결과 전달
});

myPromise
  .then(result => {
    // 작업이 성공적으로 완료된 경우 실행되는 코드
  })
  .catch(error => {
    // 작업이 실패한 경우 실행되는 코드
  });

위 코드에서 myPromise는 비동기 작업을 수행하는 프로미스 객체입니다. 이 객체를 사용할 때는 then 메서드와 catch 메서드를 사용합니다. then 메서드는 작업이 성공적으로 완료된 경우 실행되는 콜백 함수를 등록합니다. catch 메서드는 작업이 실패한 경우 실행되는 콜백 함수를 등록합니다.

프로미스는 비동기 작업을 다룰 때 유용하게 사용됩니다. 예를 들어, 서버에서 데이터를 가져오는 작업을 비동기적으로 수행하고 결과를 프로미스 객체로 반환하여 클라이언트 측에서 이를 처리할 수 있습니다.

async / await란?

async는 함수의 앞에 붙이며 해당 함수가 비동기적으로 실행될 것임을 명시합니다. 이 함수는 반드시 Promise 객체를 반환해야합니다. Promise는 비동기적으로 실행되는 작업이 완료되면 값을 반환하는 객체입니다.

await는 Promise가 처리될 때까지 함수의 실행을 일시 중지합니다. 이는 일반적으로 Promise가 처리되기를 기다린 다음, 결과 값을 반환하고 다음 작업을 계속 진행하게 합니다.

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

이 코드는 fetch() 함수를 사용하여 비동기적으로 데이터를 가져오고, **await**를 사용하여 데이터가 성공적으로 반환될 때까지 기다립니다. 그런 다음 json() 메서드를 사용하여 응답을 JSON 형식으로 파싱하고, 파싱된 데이터를 반환합니다. 이렇게 작성된 코드는 가독성이 높아지며, 콜백함수를 사용하는 경우보다 훨씬 간결하고 유지보수하기 쉬워집니다.

그러나, await는 async 함수 내에서만 사용될 수 있으며, 기본적으로 동기적인 코드에서는 사용할 수 없습니다. 따라서 비동기적인 작업을 처리해야 하는 함수 내에서만 async와 await를 사용할 수 있습니다.

[JavaScript] 클로저(Closure)와 콜백함수(callback)

Juun — Thu, 16 Mar 2023 17:36:34 +0900

클로저(Closure)란???

함수 내부에서 외부 스코프에 선언된 변수를 참조하는 것을 클로저(Closure)라고 합니다.

클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Environment)의 조합입니다.

클로저는 함수가 선언될 당시의 환경을 기억하고, 함수가 호출될 때 그 환경을 다시 만들어내는 기능을 합니다.

이를 통해 함수 안에서 선언한 변수를 함수 외부에서도 사용할 수 있게 됩니다.

클로저는 자바스크립트에서 매우 중요한 개념으로, 다른 함수에 인자로 함수를 전달하거나, 객체의 메서드로 함수를 정의할 때 클로저를 사용하여 특정한 상태를 유지할 수 있습니다. 클로저를 사용하면 상태를 보존하고, 함수를 더 유연하고 재사용 가능하게 만들 수 있습니다.

또한, 클로저는 자바스크립트에서 비동기 처리를 할 때 매우 유용하게 사용됩니다.

클로저를 이용하여 비동기 함수에서 비동기 처리가 완료되었을 때 실행해야 하는 콜백 함수에 필요한 상태 정보를 전달할 수 있습니다.

이를 통해 비동기 함수 내부의 변수를 외부에서도 참조하고, 상태를 보존할 수 있습니다.

그러나, 클로저를 사용할 때는 메모리 누수(Memory Leak)에 유의해야 합니다. 클로저는 함수가 반환될 때 함수를 선언한 Lexical Environment를 계속 유지하기 때문에, 메모리 사용량이 늘어날 수 있습니다. 따라서, 필요하지 않은 클로저는 적극적으로 해제해야 합니다.

콜백(callback)이란?

콜백(callback) 함수는 다른 함수의 인자로 전달되어, 특정 이벤트나 비동기적인 작업이 끝나면 호출되는 함수입니다.

즉, 콜백 함수는 특정 함수의 작업 결과를 처리하는 작업을 수행합니다. 자바스크립트에서는 비동기적인 작업이 많기 때문에 콜백 함수가 매우 중요한 역할을 합니다. 예를 들어, setTimeout 함수는 콜백 함수를 사용합니다.

클로저와 콜백은 자바스크립트에서 비동기 처리를 위한 매우 중요한 개념이라 볼 수 있습니다.

클로저를 사용하면 함수 내에서 선언된 변수를 함수 외부에서 액세스할 수 있으므로, 이를 이용하여 콜백 함수를 생성할 수 있습니다. 이러한 콜백 함수는 비동기 작업이 완료되면 호출되어 결과를 처리하는 데 사용됩니다.

이러한 특징 때문에 클로저와 콜백은 항상 같이 실행될거라는 착각을 할 수 있습니다.

클로저와 콜백은 항상 같이 실행이 될까???

클로저는 함수가 정의될 때 함수 내부에서 선언된 변수를 포함하여 외부 스코프의 변수에 접근할 수 있도록 하는 기술입니다.

클로저를 이용하면 함수를 리턴하거나 다른 함수의 인자로 전달할 때, 내부 변수를 계속 유지하면서 사용할 수 있습니다.

반면에 콜백은 비동기적인 처리를 위해 사용되는 함수를 말합니다. 콜백은 함수를 인자로 전달하고, 처리가 완료된 후에 이 함수를 호출하여 결과를 전달합니다. 이를 이용하여 비동기적인 작업을 수행하거나 이벤트를 처리하는 등의 작업을 처리할 수 있습니다.

물론, 클로저와 콜백은 함께 사용되는 경우가 많기 때문에 서로 연관되어 있는 것처럼 느껴질 수 있습니다.

예를 들어, 비동기적으로 처리된 결과를 콜백 함수에서 사용해야 하는 경우에 클로저를 이용하여 결과를 유지할 수 있습니다. 그러나 이는 클로저와 콜백이 서로 다른 개념임을 보여주는 예시일 뿐입니다.

따라서, 클로저와 콜백은 함께 움직이는 경우가 많을뿐 항상 같이 실행되지는 않습니다!

개념적 설명은 이까지하고 이해를 돕기 위한 코드를 통해 확인해보겠습니다.

다음은 클로저와 콜백을 함께 사용하여 비동기적으로 데이터를 처리하는 예시 코드입니다.

function counter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  }
}

const increment = counter();

function delayedIncrement(callback) {
  setTimeout(function() {
    increment();
    callback();
  }, 1000);
}

delayedIncrement(function() {
  console.log("increment completed");
});

이 예제 코드에서는 counter 함수가 정의됩니다. 이 함수는 클로저를 사용하여 count 변수를 내부에 가지고 있습니다.

이후 counter 함수가 반환하는 함수가 increment 변수에 할당됩니다.

delayedIncrement 함수는 콜백 함수를 인자로 받으며, 1초 후에 increment 함수를 호출한 후, 전달된 콜백 함수를 실행합니다.

따라서, increment 함수가 클로저를 이용하여 count 변수에 접근하여 값이 증가하고 콘솔에 출력됩니다.

그리고 delayedIncrement 함수가 실행되면서 1초 후에 increment 함수가 호출되고, 다시 delayedIncrement 함수의 콜백 함수가 실행되어 "increment completed" 메시지가 콘솔에 출력됩니다.

이렇게 클로저와 콜백 함수를 함께 사용하면 비동기적으로 데이터를 처리하거나 이벤트를 처리하는 등 다양한 상황에서 유용하게 사용할 수 있습니다.

클로저 없이 콜백만 사용하는 예시로는 Node.js에서 자주 사용되는 콜백 패턴이 있습니다. 이를 통해 비동기적으로 작업을 수행할 수 있습니다. 예를 들어, 다음은 Node.js의 파일 시스템 모듈을 사용하여 파일을 읽는 코드입니다.

const fs = require('fs');

fs.readFile('example.txt', 'utf8', function(err, data) {
  if (err) throw err;
  console.log(data);
});

위의 코드에서는 fs.readFile() 함수를 호출하고, 파일 이름과 인코딩 방식을 전달합니다. 그리고 마지막 인자로 콜백 함수를 전달합니다. 이 함수는 파일 읽기 작업이 완료되면 호출되며, 첫 번째 인자로는 오류가 발생한 경우 해당 오류를 전달하고, 두 번째 인자로는 파일 내용을 전달합니다.

이 콜백 함수를 사용하여 파일을 읽은 후, 파일 내용을 출력하고 있습니다. 이 코드에서는 클로저를 사용하지 않았고, 대신에 비동기적으로 작업을 수행하기 위해 콜백 패턴을 사용하고 있습니다.

[JavaScript] this란? /this 바인딩이란

Juun — Sun, 5 Mar 2023 17:07:35 +0900

this란??

JavaScript에서 this는 현재 실행 중인 함수 내에서 참조하는 객체를 나타냅니다.

this는 호출되는 방법에 따라 달라지며, 함수가 호출되는 방법에 따라 다른 객체가 this를 가리킵니다.

this는 자바스크립트의 중요한 개념 중 하나이며, 오해하거나 이해하지 못하면 코드에서 버그를 일으킬 수 있습니다.

this 바인딩

함수를 호출하는 방법에는 네 가지가 있습니다.

일반 함수로 호출하는 경우
메소드로 호출하는 경우
apply() 또는 call() 메소드를 사용하여 호출하는 경우
생성자 함수로 객체를 생성하는 경우

이제 각각의 경우를 자세히 살펴보겠습니다.

1. 일반 함수로 호출하는 경우

함수를 일반적인 방법으로 호출하는 경우, this는 전역 객체를 가리킵니다.

브라우저에서는 window 객체, Node.js에서는 global 객체가 전역 객체입니다.

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

greet(); // window (브라우저) 또는 global (Node.js)

2. 메소드로 호출하는 경우

메소드는 객체 내부에서 정의된 함수입니다. 메소드 내부에서 this를 사용하면 해당 메소드를 호출한 객체를 가리킵니다.

const person = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.greet(); // "Hello, my name is Alice"를 출력합니다.

위 예제에서 greet 메소드 내부에서 this는 person 객체를 가리킵니다.

3. apply() 또는 call() 메소드를 사용하여 호출하는 경우

apply() 또는 call() 메소드를 사용하여 함수를 호출하는 경우, this는 해당 메소드의 첫 번째 인수로 전달된 객체를 가리킵니다.

apply()와 call()의 차이점은 인수를 전달하는 방식입니다.

apply()는 배열로 인수를 전달하고, call()은 쉼표로 구분된 인수를 전달합니다.

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

const person = {
  name: 'Alice'
};

greet.apply(person); // "Hello, my name is Alice"를 출력합니다.
greet.call(person); // "Hello, my name is Alice"를 출력합니다.

위 예제에서 apply()와 call() 메소드를 사용하여 greet 함수를 호출하고 있습니다. 이 경우 this는 person 객체를 가리킵니다.

4. 생성자 함수로 객체를 생성하는 경우

생성자 함수는 객체를 생성하기 위해 사용되는 함수로, new 연산자를 사용하여 호출됩니다.

생성자 함수 내에서 this 키워드를 사용하여 새로 생성된 객체에 접근할 수 있습니다.

function Car(make, model, year) {
  this.make = make;
  this.model = model;
  this.year = year;

  this.getMake = function() {
    return this.make;
  };

  this.getModel = function() {
    return this.model;
  };

  this.getYear = function() {
    return this.year;
  };
}

var car1 = new Car("Toyota", "Corolla", 2019);
var car2 = new Car("Honda", "Accord", 2020);

console.log(car1.getMake()); // 출력 결과: Toyota
console.log(car2.getModel()); // 출력 결과: Accord

위의 코드에서 Car 생성자 함수는 자동차의 제조사, 모델, 연식을 인자로 받아서 객체를 생성합니다.

this 키워드를 사용하여 생성된 객체의 속성을 설정하고, getMake(), getModel(), getYear() 메서드를 정의합니다.

이후 new 연산자를 사용하여 Car 생성자 함수를 호출하면, 새로운 객체가 생성되고 this는 해당 객체를 참조하게 됩니다.

이렇게 생성된 객체는 car1, car2 변수에 저장되고, getMake(), getModel(), getYear() 메서드를 호출할 수 있습니다.

this 키워드를 올바르게 이해하면, 객체 지향 프로그래밍에서 메서드를 작성하고 객체 간 상호작용을 구현하는 등의 작업에서 매우 유용합니다. 따라서 JavaScript를 사용하여 프로그래밍할 때는 this의 개념과 동작 방식에 대해 이해하고 활용할 수 있도록 해야 합니다.

[JavaScript] call by value(값에 의한 호출) vs call by reference(참조에 의한 호출) 차이는?

Juun — Fri, 3 Mar 2023 00:43:00 +0900

call by value(값에 의한 호출) vs call by reference(참조에 의한 호출) 차이

자바스크립트에서는 원시 타입(primitive type)의 값은 call by value(값에 의한 호출)로 전달되고, 객체 타입(object type)은 call by reference(참조에 의한 호출)로 전달됩니다.

call by value(값에 의한 호출)은 변수에 저장된 값을 복사해서 전달하는 방식입니다. 예를 들어, 다음과 같이 숫자를 전달하는 경우를 생각해봅시다.

※ 원시타입 : 숫자(number), 문자열(string), 불리언(boolean), null, undefined, 심볼(symbol) - 각각의 원시 타입은 값(value)을 갖고 있으며, 이 값은 변경될 수 없습니다(immutable)

let x = 10;

function changeValue(val) {
  val = 20;
}

changeValue(x);
console.log(x); // 10

위의 예제에서는 함수 changeValue 에 x 값을 전달했는데, 이때 x 값의 복사본이 val 매개변수에 전달됩니다. changeValue 함수 안에서 val 값이 변경되어도, x 변수의 값은 그대로 10으로 유지됩니다.

반면에 call by reference(참조에 의한 호출)는 객체의 메모리 주소를 전달하는 방식입니다. 예를 들어, 다음과 같이 객체를 전달하는 경우를 생각해봅시다.

let obj = { value: 10 };

function changeValue(obj) {
  obj.value = 20;
}

changeValue(obj);
console.log(obj.value); // 20

위의 예제에서는 함수 changeValue 에 obj 객체를 전달했는데, 이때 obj 객체의 메모리 주소가 obj 매개변수에 전달됩니다. changeValue 함수 안에서 obj 객체의 value 프로퍼티를 변경하면, 원본 obj 객체의 value 프로퍼티도 함께 변경됩니다.

따라서 자바스크립트에서는 객체 타입을 다룰 때 주의해야 합니다. 객체를 전달하는 경우, 객체의 복사본이 아닌 객체의 참조가 전달되기 때문에 함수 안에서 객체를 수정하면 전역에서도 객체가 변경될 수 있습니다.

[JavaScript] var, let, const의 차이점 / 스코프 / 변수 호이스팅

Juun — Tue, 28 Feb 2023 21:01:26 +0900

var, let, const의 차이를 알기 전에..

먼저 var, let, const 차이를 알기 전에 스코프에 대해서 알아야 합니다.

스코프란 간단하게 변수를 사용할 수 있는 위치를 의미합니다.

스코프란??

JavaScript에서는 전역 스코프(Global Scope)와 지역 스코프(Local Scope) 두 가지 유형의 스코프가 있습니다.

전역 스코프는 코드의 어느 곳에서나 접근할 수 있는 변수를 말합니다.

전역 스코프에서 선언된 변수는 어디서든 참조할 수 있습니다.

지역 스코프는 함수 내에서 선언된 변수를 말합니다.

함수 내에서 선언된 변수는 함수 외부에서는 접근할 수 없습니다.

또한, 함수 내부에서는 외부 스코프에서 선언된 변수를 참조할 수 있습니다.

var, let, const의 차이

자바스크립트는 ES5 이전까진 var라는 변수를 사용했습니다.

var 키워드로 선언한 변수는 중복선언이 가능하고 전역 스코프로 인정되어 동일한 이름의 변수가 이미 선언되어 있는걸 모르고 변수를 중복 선언하면 먼저 선언된 변수 값이 변경되는 부작용(변수 호이스팅)이 발생합니다.

이러한 단점을 보완하고자 ES6에서 let, const의 새로운 변수 선언 키워드가 나왔습니다.

let과 const는 모든 코드 블럭(함수, if문, for문, try/catch문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let은 중복 선언 불가, 재할당이 가능하며, const는 중복 선언 불가, 재할당 불가하다.

	스코프	변수 선언	변수 할당
var	전역 스코프	중복 선언 가능	재할당 가능
let	블록 스코프	중복 선언 불가	재할당 가능
const	블록 스코프	중복 선언 불가	재할당 불가

변수 호이스팅이란??

변수를 선언하기 전에 해당 변수를 참조할 수 있다는 것을 의미합니다.

즉, 변수의 선언 부분이 해당 스코프의 최상단으로 끌어올려지는 것을 말합니다.

console.log(x); // undefined가 출력됩니다.
x = 10; // 변수에 값을 할당합니다.

변수 x가 선언되기 전에 변수를 참조하면, 해당 변수는 undefined로 초기화됩니다.

이런 동작 방식 때문에, 변수 호이스팅은 코드의 실행 결과를 예측하기 어렵게 만들 수 있습니다.

ES6 이후에는 let과 const 키워드를 사용하여 변수를 선언하면, 변수 호이스팅이 발생하지 않습니다.

따라서, 가능하면 var 키워드를 사용하지 않고 let과 const 키워드를 사용하여 변수를 선언하는 것이 좋습니다.

결론, var는 쓰지말자!!

이 글을 읽고 관련된 아래의 내용도 찾아보면 좋습니다!

스코프 체인
동적 스코프 / 정적(렉시컬) 스코프
TDZ (Temporal DeadZone)

[Spring] Lombok이란? / Lombok의 사용 이유 / Lombok의 단점 / Lombok 사용법

Juun — Fri, 14 Oct 2022 13:00:36 +0900

Lombok이란??

반복되는 메서드를 Annotation을 사용하여 자동으로 작성해주는 라이브러리입니다

일반적으로 DTO, VO, Model, Entity 등의 데이터 클래스에서 많이 사용됩니다.

대표적으로 많이 사용되는 Annotation

@Getter
@Setter
@NoArgConstructor
@AllArgConstructor
@Data
@ToString
@Builder

Lombok의 사용이유

Annotation 기반의 코드 자동생성으로 인한 생산성이 증가합니다.
반복코드를 줄일 수 있어 유지보수와 가독성을 향상시킬 수 있습니다.
Getter / Setter 외 Builder 패턴이나 Log 생성 등의 다양한 방면으로 활용이 가능합니다.

Lombok의 단점

Lombok을 지원하는 IDE는 IntelliJ와 Eclipse 2개입니다.
자바의 컴파일러에 강하게 결합되어 있는 한계가 있습니다. 컴파일어의 수정은 공개 API를 많이 사용하는데 컴파일러를 업그레이드 하게 되면 깨질 수도 있습니다.
Lombok 사용시, 모든 계층이 Lombok에 의존하게 됩니다.
모든 사람이 Lombok plugin이 필요합니다.

Lombok 사용법

pom.xml에 의존성 주입해줍니다

<dependencies> 태그 안에 <dependency>를 넣어주면 됩니다

<dependencies>
...
	<dependency>
		<groupId>org.projectlombok</groupId>
		<artifactId>lombok</artifactId>
		<optional>true</optional>
	</dependency>
...
</dependencies>

@Getter / @Setter

해당 클래스에 선언되어 있는 필드를 기반으로 ‘getField’ , ‘setField’ 와 같은 식으로 자동으로 메소드 생성

xxx라는 필드에 선언하면 자동으로 getXxx()으로 만들어주고 만약(boolean 타입인 경우 isXxx()와 setXxx() 메소드를 생성해줍니다.

@NoArgsConstructor / @AllArgsConstructor / @RequiredArgsConstructor

@NoArgsConstructor : 파라미터가 없는 생성자를 생성

@AllArgsConstructor : 모든 필드값을 파라미터로 갖는 생성자를 생성

@RequiredArgsConstructor : 필드값 중 final이나 @NotNull인 값을 갖는 생성자를 생성

@ToString

toString 메소드를 작성해주는 Annotation

@ToString 어노테이션에 exclude 속성을 사용하여 특정 필드를 toString에서 제외시킬 수 있습니다.

@EqualsAndHashCode

자바 빈을 만들 때 equals와 hashCode 메소드를 자주 오버라이딩 하는데요.

@EqualsAndHashCode 어노테이션을 사용하면 자동으로 이 메소드를 생성할 수 있습니다.

callSuper 속성을 통해 equals와 hashCode 메소드 자동 생성 시

부모 클래스의 필드까지 감안할지 안 할지에 대해서 설정할 수 있습니다.

equals : 두 객체의 내용이 같은지 동등성(equality)를 비교하는 연산자
hashCode : 두 객체가 같은 객체인지 동일성(identity)를 비교하는 연산자

즉, callSuper = true로 설정하면 부모 클래스 필드 값들도 동일한지 체크하며,

callSuper = false로 설정(기본값)하면 자신 클래스의 필드 값들만 고려합니다.

@Data

@Data는 위에서 설명한 @Getter, @Setter, @RequiredArgsConstructor, @ToString, @EqualsAndHashCode를 한꺼번에 설정해주는 매우 유용한 어노테이션입니다

@Builder

@Builder를 사용하면 객체 생성이 명확해집니다. 가급적 클래스 보다는 직접 만든 생성자 혹은 static 객체 생성 메소드에 붙이는 것을 권장합니다. @Builder를 붙이면 파라미터 순서가 아닌 이름으로 값을 설정하기 때문에 리팩토링에 유연하게 대응할 수 있고, 필드 순서를 변경해도 문제가 없습니다.

여기까지가 자주 쓰이는 Lombok Annotation 입니다

아래 Annotation도 있으니 참고 부탁드립니다

@NonNull

자동으로 null 체크를 진행하여 null 인 경우 NullPointerException 을 발생 시킵니다

@Cleanup

자동으로 자원을 관리합니다. close() 메소드를 호출하여 자원을 종료시킵니다

@Value

불변 클래스를 쉽게 생성해 줍니다

@SneakyThrows

Exception 발생시 체크된 Throable로 감싸서 전달해줍니다

@Synchronized

메소드에서 동기화 Lock을 설정을 해줍니다

@Log

종류별 로그를 사용할 수 있도록 해줍니다. (@Log, @Slf4j, @CommonLog 등)등등.

@Accessors

기본 생성된 setter 들은 return type 이 void 이므로 method chaining 을 사용할 수 없습니다

**@Accessors에 chain=true 파라미터를 사용하면 생성되는 setter 의 리턴 타입이 this 로 변경됩니다

[Spring] AOP란?? / AOP를 사용하는 이유

Juun — Thu, 13 Oct 2022 13:00:42 +0900

AOP(Aspect Oriented Programming)

→ 여러 오브젝트에 나타나는 공통적인 부가 기능을 모듈화하여 재사용하는 기법

또한 관심사의 분리(기능의 분리), 핵심적인 기능에서 부가적인 기능을 분리하므로

핵심기능을 설계하고 구현할 때 객체지향적인 가치를 지킬수 있도록 도와주는 개념입니다

→ OOP를 보완한다

AOP를 사용하는 이유

공통 관심 사항을 핵심 관심사항으로부터 분리
그에 따라 코드의 가독성, 유지보수성 및 생산성 증가
각 모듈에 수정이 필요하면 다른 모듈의 수정 없이 해당 로직만 변경
공통 로직을 적용할 대상을 선택 가능

부가기능(인프라 로직)

부가기능을 Aspect 또는 advice로 정의함
중복코드를 만들어낼 가능성 때문에 유지보수가 힘들어짐
비즈니스 로직과 함께 있으면 비즈니스 로직을 이해하기 어려워짐

→ 그래서 분리가 필요

AOP 용어

용어설명

target	advice가 추가될 객체
advice	targer에 동적으로 추가될 부가 기능(코드)
join point	advice가 추가(join)될 대상(메서드)
pointcut	join point들을 정의한 패턴
proxy	target에 advice가 동적으로 추가되어 생성된 객체
weaving	target에 advice를 추가해서 proxy를 생성하는 것

Advice 종류

kind	Annotation	desc
around advice	@Around	메서드의 시작과 끝 부분에 추가되는 부가 기능
before advice	@Before	메서드의 시작 부분에 추가되는 부가 기능
after advice	@After	메서드의 끝 부분에 추가되는 부가기능
after returing	@AfterReturing	예외가 발생하지 않았을 때, 실행되는 부가 기능
after throwing	@AfterThrowing	예외가 발생했을 때, 실행되는 부가 기능

[Spring boot] 스프링 부트란???

Juun — Wed, 12 Oct 2022 13:00:20 +0900

Spring boot

1. Spring boot란?

Spring을 더 쉽게 이용하기 위한 도구입니다.

Spring은 다양한 기능을 제공하고 있지만, 그 기능을 사용하기 위한 설정에 많은 시간이 걸립니다.

ex) Transaction Manager, Hibernate Datasource, Entity Manager, Session Factory 등

→ Spring boot는 기존의 Spring의 오래 걸렸던 설정을 편리하게 도와주기 위해 나온 도구입니다.

2. Spring boot의 특징

Spring Boot는 자동설정(AutoConfiguration)을 이용합니다.
- 어플리케이션 개발에 필요한 모든 Dependency를 Framework에서 관리
- jar 파일이 클래스 패스에 있는 경우 스프링 부트는 Dispatcher Servlet으로 자동 구성
- Spring boot는 미리 설정되어 있는 Starter 프로젝트를 제공
- xml 설정없이 자바 코드를 통해 설정
어플리케이션을 개발하면서 사용되는 Dependency들은 호환되는 버전으로 관리해줘야 합니다
- 이런 복잡도를 줄이기 위해 Spring boot는 SpringBoot-Starter를 제공하여 자동으로 호환되는 버전을 관리
모니터링 관리를 위한 Spring Actuator 제공
- 서비스가 정상적으로 동작하는지 상태 모니터링 기능 제공
- Spring Actuator는 Spring boot에서 제공하는 상태 정보를 보다 쉽게 모니터링 할 수 있게 기능을 제공
Spring boot 프로젝트의 의존성 관리
- Spring voot starter dependency를 통해 다양한 패키지를 수용하고 있음 → Spring boot의 가장 큰 장점
이를 통해 개발자는 dependency 관리(호환성 체크 등)에 대해 고려할 필요가 없어짐
Spring boot 프로젝트의 starter dependency
- spring-boot-starter-web-service : SOAP 웹 서비스
- spring-boot-starter-web : RESTful 응용 프로그램
- spring-boot-starter-test : 단위테스트, 통합 테스트
- spring-boot-starter-jdbc : 기본적인 jdbc
- spring-boot-starter-security : 스프링 시큐리티(인증, 권한)
- spring-boot-starter-data-jpa : Spring Data JPA(Hibernate)
- spring-boot-starter-cache : 캐시

3. Spring boot와 Spring Legacy의 차이

Spring boot와 특징에 대해선 먼저 설명했으니 Spring Legacy에 대해서

살펴보고 Spring boot와 어떤 차이가 있는지 알아보겠습니다.

Spring Legacy는 일반적으로 Spring Framework를 지칭합니다.

우리가 흔히 Spring이라 부르는 스프링의 정확한 표현은 Spring Framework입니다.

Spring Framework는 자바에서 가장 많이 사용되는 Framework인 의존성 주입(DI, Dependency Injection)과 제어역전(IOC, Inversion of Control), 관점지향 프로그래밍(AOP)이 가장 중요한 요소입니다. 이 요소들은 하나의 공통된 목적을 가지고 있습니다.

바로 느슨한 결합(Loose)입니다.

이러한 느슨한 결합으로 개발한 어플리케이션은 단위 테스트를 수행하기 용이하다는 장점이 있습니다.

Spring Framework는 다양한 기능이 있는데 그 기능들은 약 20개의 모듈로 구성되어 있습니다.

대표적인 모듈 몇가지를 보면 Spring JDBC, Spring MVC, Spring AOP, Spring ORM, Spring Test, Spring Epression Language(SpEL) 등이 있습니다.

그럼 이제 Spring Framework가 이렇게 다양한 기능을 가지고 있는데

왜 Spring boot가 나오게 되었는지에 대해 살펴보겠습니다.

공식 사이트에 나와있는 글을 인용해 보면

Spring Boot makes it easy to create stand-alone, production-grade Spring based Applications that you can “Just run”.

Spring boot는 단지 실행만 하면 되는 Spring 기반의 어플리케이션을 쉽게 만들 수 있다.

위 글을 보면 Spring boot의 개념을 직접 관통하는 문장이라 볼 수 있습니다.

Spring boot는 Spring 기반이라는 것에는 차이가 없습니다.

[Spring] DI / IOC란? / 의존성을 주입하는 방법

Juun — Tue, 11 Oct 2022 13:00:52 +0900

DI / IOC

컨테이너란?

IoC와 DI를 이해하기 전에 먼저 이해해야 할 개념이 있습니다. 그것은 바로 '컨테이너'입니다.

컨테이너란, 우리 대신 객체의 생성과 소멸 같은 부분을 전담해주는 역할을 합니다.

IoC란(Inversion of Control)?

그대로 해석을 돌리면 제어의 역전이라고 합니다.

제어는 무언가를 조종하고 다루는 것, 역전은 바뀌는 것 입니다.

즉, 무언가를 조종하고 다루는 존재가 바뀌는 것을 IoC라고 합니다.

우리는 프로그램을 다룰 때, 우리가 직접 제어를 합니다. (예를 들어 객체의 생성을 직접 한다거나)

그러나 스프링에서는 우리가 아닌 다른 존재(컨테이너)가 제어를 합니다.

결과적으로, 스프링의 객체들을 생성하고, 제어하고, 소멸하는 존재는 컨테이너라고 볼 수 있습니다.

그래서 이것을 제어의 역전이라고 합니다.

DI(의존성 주입)란?

DI는 의존성을 주입시켜준다는 의미입니다.

객체를 직접 생성하는게 아니라 외부에서 생성한 후 주입을 시켜주는 방식입니다.

즉, 객체를 직접 생성하지 않고, 외부에서 생성된 객체를 getter() 혹은 생성자를 이용해서 사용하며 이걸 '주입' 한다고 합니다.

DI를 사용하는 이유

DI를 하지 않으면 객체와 객체 간의 결합력이 강하기 때문에 객체가 바뀌게 되면 많은 수정을 해야하는 번거로움이 있기 때문입니다.

public class A {
	private B b;

	public A() {
			this.b = new B();
		}
	
	public void printHello() {
		this.b.hello();
	}
	
}

위 코드를 보면 A 클래스에서 printHello 메서드가 호출하려면 B 클래스가 필요합니다.

그래서 ‘A클래스는 B 클래스에 의존한다.’ , ‘A클래스는 B클래스의 의존성을 가진다’ 라고 할 수 있습니다.

위 코드는 결합도가 높다고 할 수 있습니다.

왜냐하면 B 클래스가 수정되면 A클래스도 B 클래스의 수정부분을 똑같이 바꿔줘야하기 때문입니다.

의존성을 주입하는 방법

1. 스프링 어노테이션

의존성을 주입하는 방법은 크게 두가지가 있습니다.

과거부터 사용해오던 XML 설정방식과 스프링에서 제공해주는 어노테이션 @AutoWired를 활용한 방식입니다.

먼저 스프링 어노테이션인 @AutoWired 방식을 살펴보겠습니다

생성자 주입

public class A{
	private B b;

	@AutoWired
	public A(B b){
		this.b = b;
	}
	public void printHello() {
		this.b.hello();
	}
}

Setter 주입

public class A {
	private B b;
	
	@AutoWired
	public void setB(B b){
		this.b = b;
	}

	public void printHello(){
		this.b.hello();
	}
}

Field 주입

public class A {

	@AutoWired
	private B b;
	
	public void printHello() {
		this.b.hello();
	}
}

@AutoWired를 붙인다면 어떠한 클래스를 갖다 쓸 수 있지 않습니다!

스프링 IoC 컨테이너에 들어있는 Bean 객체에서만 사용할 수 있습니다.

[Spring] POJO란? / POJO vs Java Beans

Juun — Mon, 10 Oct 2022 12:32:47 +0900

POJO란?

Plain Old Java Object, 오래된 방식의 단순한 자바 오브젝트

즉, 객체 지향적인 원리에 충실하면서 환경과 기술에 종속되지 않고 필요에 따라 재활용될 수 있는 방식으로 설계된 오브젝트를 지칭합니다.

토비의 스프링에서는 특정 기술규약과 환경에 종속되지 않는다고 해서 모두 POJO라고 지칭할 순 없다고 합니다. 진정한 POJO란 객체지향적인 원리에 충실하면서, 환경과 기술에 종속되지 않고 필요에 따라 재활용될 수 있는 방식으로 설계된 오브젝트를 POJO 라고 설명하기도 했습니다.

POJO가 주목 받은 배경

EJB(Enterprise JavaBeans)

기업의 IT 시스템의 요구사항이 늘어나고 기초적인 JDK로는 한계가 있어서 EJB 기술이 등장하였습니다. EJB의 경우에 아래의 문제를을 해결하기 위해 등장했습니다.

기업의 업무 복잡도가 증가함에 따라 비지니스 로직이 복잡해졌습니다.
사용자의 처리의 요구를 빠르고 안정이고 확장 가능한 형태로 유지하기 위해 필요한 로우레벨의 기술적인 처리요구가 필요합니다. (트랜잭션 처리, 상태 관리, 멀티스레딩, 리소스 풀링, 보안 등)

다만 EJB의 경우에는 현실적이지 않고 과도한 엔지니어링으로 실패했습니다. EJB는 필요한 것이 많고, 복잡하며 컨테이너 밖에서는 정상적으로 동작하지 않았습니다.

특히, EJB 스펙을 따르는 비지니스 오브젝트들은 객체지향적인 특징과 장점을 포기해야합니다. EJB는 상속과 다형성 등을 사용할 수 없고, 간단한 기능 하나를 위해서 많은 인터페이스와 EJB 의존적인 상속을 해야했습니다.

EJB는 형편없는 생산성과 느린 성능, 불필요한 기술적인 복잡도, 과도한 스펙 등의 문제 로 인해 POJO 방식으로 돌아가게 됩니다.

POJO를 지향해야하는 이유

POJO의 목적은 자바의 객체지향적인 특징을 살려 비즈니스 로직에 충실한 개발이 가능하도록 하는 것입니다.

POJO의 장점

깔끔한 코드
특정 프레임워크에 종속되지 않아 간편한 테스트
객체지향적인 설계를 자유롭게 적용

POJO 프레임워크

POJO 프레임워크란 POJO 프로그래밍이 가능하도록 기술적인 기반을 제공하는 프레임워크입니다.

스프링 프레임워크를 대표적인 POJO 프레임워크로 꼽을 수 있습니다.

스프링을 이용하면 POJO 프로그래밍의 장점을 그대로 살려서 엔터프라이즈 애플리케이션(EA)의 핵심로직을 객체지향적인 POJO를 기반으로 깔끔하게 구현하고, 동시에 엔터프라이즈 환경의 각종 서비스와 기술적인 필요를 POJO방식으로 만들어진 코드에 적용할 수 있습니다.

EA (Enterprise Application)는 비즈니스 또는 정부와 같은 회사 환경에서 작동하도록 설계된 대규모 소프트웨어 시스템 플랫폼

POJO 예제

public class MyPojo {    
	private String name;    
	private int age;     
   
	public String getName() {    	
		return name;    
	}    
	
	public String getAge() {    	
		return age;    
	}    

	public void setName(String name) {    	
		this.name = name;    
	}    

	public void setAge(int age) {    	
		this.age = age;    
	}
}

위와 같이 가장 기본적인 형태의 JAVA 객체를 POJO라고 합니다.

JAVA Bean이 아닌 Getter와 Setter로 구성된 가장 순수한 형태의 기본 클래스를 POJO라 지칭합니다.

POJO는 가독성과 재사용성을 높이기 위해 객체를 정의하는데 사용되는 Bean과 유사한 점이 있습니다.

POJO vs Java Beans

Java bean은 POJO이다. 그러나 POJO는 Java bena이 아닙니다.

POJO는 java bean 보다 범주가 더 넓은 개념입니다.

POJO

POJO는 자바 객체 표준이며 어떤 특정하고 엄격한 규칙이 존재하지 않습니다.
POJO는 가독성과 재사용성을 중요시하게 여깁니다.
POJO는 엄격하지 않은 만큼 쓰기도 쉽고 읽기도 쉬워 많이 사용되어 왔습니다.

public class Animal {
        String dog;
        public String cat;
        private int legs;

        public Animal(String dog, String cat, int legs) {
            this.dog = dog;
            this.cat = cat;
            this.legs = legs;
        }

        public getDog() {
            return this.dog;
        }
    }

Java Beans

POJO와 달리 엄격한 규칙을 가지고 있습니다.
Fields 는 접근제어자가 private 이어야만 합니다.
Fields 는 getter 와 setter 를 가져야 합니다.
constructor 는 argument 를 가져서는 안됩니다.
Fileds 는 getter 와 setter 로만 접근되어야만 합니다.

public class Animal {
        private int legs;

        Animal() {

        }

        public setLegs(int legs) {
            this.legs = legs;
        }

        public getLegs() {
            return legs;
        }
    }

[디자인 패턴] Builder 패턴

Juun — Thu, 29 Sep 2022 23:37:47 +0900

Builder 패턴이란?

빌더 패턴은 생성자에 들어갈 매개 변수가 많든 적든 차례차례 매개 변수를 받아들이고

모든 매개 변수를 받은 뒤에 이 변수들을 통합해서 한 번에 사용을 합니다.

Builder 패턴의 장점

필요한 데이터만 설정
유연성 확보
가독성을 높임
불변성 확보

Builder 패턴을 쓰는 이유

/**
 * 제약사항 : 이 객체는 한번 생성되면 읽기(Read)만 가능해야 합니다.
 */
public class PersonInfo {
    private String name;
    private Integer age;
    private String favoriteColor;
    private String favoriteAnimal;
    private Integer favoriteNumber;

    public PersonInfo(String name, Integer age, String favoriteColor, String favoriteAnimal, Integer favoriteNumber){
        this.name = name;
        this.age = age;
        this.favoriteColor = favoriteColor;
        this.favoriteAnimal = favoriteAnimal;
        this.favoriteNumber = favoriteNumber;
    }

    public String getName() {
        return name;
    }

    public Integer getAge() {
        return age;
    }

    public String getFavoriteColor() {
        return favoriteColor;
    }

    public String getFavoriteAnimal() {
        return favoriteAnimal;
    }

    public Integer getFavoriteNumber() {
        return favoriteNumber;
    }

    public String getPersonInfo(){
        String personInfo = String.format("name:%s, age:%d, favoriteColor:%s, favoriteAnimal:%s, favoriteNumber:%d"
                , name, age, favoriteColor, favoriteAnimal, favoriteNumber);
        return personInfo;
    }
}

이 클래스는 한 사람의 정보를 담기 위한 것입니다. 하지만 제약 사항이 걸려 있습니다. 따라서 setter 메소드는 존재할 수 없고 오로지 생성자를 통해서만 데이터를 입력 받는다는 가정으로 만든 클래스입니다. 생성자를 보면 모든 매개변수를 받도록 하고 있습니다. 하지만 어떤 사람들은 모든 데이터가 없을 수도 있습니다. 예를 들어 "이름"과 "나이"만 알고 있는 사람의 경우는 다음처럼 객체를 만들어 내야 할 것입니다.

new PersonInfo("JDM", 20, null, null, null);

하지만 이경우는 가독성이 안좋겠죠. 그래서 추가 생성자를 만들어서 처리하도록 해봅시다. 다음과 같은 생성자가 추가될 겁니다.

public PersonInfo(String name, Integer age){
    this(name, age, null, null, null);
}

이렇게 해서 하나의 케이스에 대해서는 처리를 했습니다. 하지만 여기에 새로운 유형의 정보가 들어온다면 어떻게 될까요?

예를 들자면, 이름만 있다거나, 이름과 좋아하는 동물만 있다거나 하면서요. 그럼 그때마다 새로운 생성자를 만들어 줘야 할까요?

문제는 하나 더 있습니다. 만약 데이터를 입력하는 순서가 달라진다면 그것도 큰 문제가 될겁니다.

// 이름이 들어가야할 곳에 좋아하는 동물이 들어갔습니다.
// 반대로 좋아하는 동물이 들어가야 할 곳에 사람 이름이 들어갔네요.
new PersonInfo("cat", 20, "JDM", null, null);

이런 경우 찾아내기도 힘들뿐더러 매번 사용자가 체크를 해야하는 상황이 옵니다.

그래서 불편함을 해소하고자 쓰는 패턴이 Builder 패턴입니다.

Builder 패턴 예제

Builder 패턴을 사용하기전에 아래의 3가지를 고려해야합니다.

불필요한 생성자를 만들지 않고 객체를 만든다.
데이터의 순서에 상관 없이 객체를 만들어 낸다.
사용자가 봤을때 명시적이고 이해할 수 있어야 한다.

그래서 다음과 같은 빌더 패턴을 적용한 Builder 클래스가 필요합니다.

@Getter
public class PersonInfoBuilder {
    private String name;
    private Integer age;
    private String favoriteColor;
    private String favoriteAnimal;
    private Integer favoriteNumber;

    public PersonInfoBuilder setName(String name) {
        this.name = name;
        return this;
    }

    public PersonInfoBuilder setAge(Integer age) {
        this.age = age;
        return this;
    }

    public PersonInfoBuilder setFavoriteColor(String favoriteColor) {
        this.favoriteColor = favoriteColor;
        return this;
    }

    public PersonInfoBuilder setFavoriteAnimal(String favoriteAnimal) {
        this.favoriteAnimal = favoriteAnimal;
        return this;
    }

    public PersonInfoBuilder setFavoriteNumber(Integer favoriteNumber) {
        this.favoriteNumber = favoriteNumber;
        return this;
    }

    public PersonInfo build(){
        PersonInfo personInfo = new PersonInfo(name, age, favoriteColor, favoriteAnimal, favoriteNumber);
        return personInfo;
    }
}

public class BuilderPattern {
    public static void main(String[] args) {
        // 빌더 객체를 하나 만듭니다.
        PersonInfoBuilder personInfoBuilder = new PersonInfoBuilder();
        // 빌더 객체에 원하는 데이터를 입력합니다. 순서는 상관 없습니다.
        PersonInfo result = personInfoBuilder
                .setName("MISTAKE")
                .setAge(20)
                .setFavoriteAnimal("cat")
                .setFavoriteColor("black")
                .setName("JDM") // 다시 같은 메소드를 호출한다면 나중에 호출한 값이 들어갑니다.
                .setFavoriteNumber(7)
                // 마지막에 .build() 메소드를 호출해서 최종적인 결과물을 만들어 반환합니다.
                .build();
        // print is "name:JDM, age:20, favoriteColor:black, favoriteAnimal:cat, favoriteNumber:7"
        System.out.println(result.getPersonInfo());
    }
}

사용자 입장에서 PersonInfo 객체를 만들어 낼 때 PersonInfoBuilder 클래스를 이용한다면 조금 더 명확하게 이해하고 만들어 낼 수 있을겁니다.

[디자인 패턴] 싱글톤 패턴이란?

Juun — Wed, 28 Sep 2022 20:48:14 +0900

싱글톤 패턴이란?

객체의 인스턴스가 오직 1개만 생성되는 패턴을 의미합니다.

아래의 코드는 싱글톤패턴의 간단한 코드입니다.

public class Singleton {

	private static Singleton instance = new Singleton();        
		private Singleton() {        
		// 생성자는 외부에서 호출못하게 private 으로 지정해야 한다.    
		}
	
	public static Singleton getInstance() {        
		return instance;    
	}
	
	public void say() {        
		System.out.println("hi, there");    
		}
}

싱글톤 패턴의 장점

메모리 낭비를 방지할 수 있습니다.

최초의 new 연산자를 통해서 고정된 메모리 영역을 사용하기 때문에 추후 해당 객체에 접근할 때 메모리 낭비를 방지할 수 있고 이미 생성된 인스턴스를 활용해서 속도 측면에서도 이점이 있습니다.

다른 클래스 간에 데이터 공유가 쉽습니다.

싱글톤 인스턴스는 전역으로 사용되는 인스턴스이기 때문에 다른 클래스의 인스턴스들이 접근하여 사용할 수 있습니다.

싱글톤 패턴의 단점

싱글톤 패턴을 구현하는 코드 자체가 많이 필요합니다.
테스트하기 어렵습니다.

싱글톤 인스턴스가 너무 많은 일을 하거나 많은 데이터를 공유시킬 경우 다른 클래스의 인스턴스들 간에 결합도가 높아져 "개방-폐쇄 원칙" 을 위배하게 됩니다. (=객체 지향 설계 5 원칙 DIP에 어긋남)

따라서 수정이 어려워지고 테스트하기 어려워집니다.

또한 자식 클래스를 만들 수 없고 내부 상태를 변경하기 어려워 유연성이 많이 떨어지는 패턴이라 볼 수 있습니다. 싱글톤 패턴은 안티패턴을 불릴만큼 단독으로 사용한다면 객체 지향에 위반되는 사례가 많습니다.

스프링 컨테이너와 같은 프레임워크의 도움을 받으면싱글톤 패턴의 문제점을 보완하면서 장점을 가지며 사용할 수 있을 것 입니다.

[Database] DBMS에서 쿼리를 처리하는 단계(쿼리 파싱 순서)

Juun — Mon, 26 Sep 2022 09:36:37 +0900

DBMS에서 쿼리를 처리하는 5단계

구문 분석 (Parsing)
- 요청하는 쿼리가 잘못됐는지 확인하는 과정
- 구문 오류 및 맞춤법 오류는 이 단계에서 검색할 수 있습니다
유효성 검사
- 테이블이 데이터베이스에 있는지, 모든 열이 존재하고 열 이름이 모호하지 않은지, 사용자에게 쿼리문을 실행하는데 필요한 권한이 있는지 등 이 단계에서 특정 의미 체계 오류를 검색할 수 있습니다.
액세스 계획 생성
최적화
- 액세스 계획을 수행하는 다양한 방법을 살펴봅니다.
- 여러 대안을 탐색한 후 DBMS는 그 중 하나를 선택합니다.
실행

DBMS는 액세스 계획을 실행하여 쿼리문을 실행합니다.

SQL 파싱 순서

Syntax 에러(문법, 구문 오류) 체크
Semantic(권한, 존재 여부) 체크
Library Cache 영역으로 가서 저장되어 있는 정보가 있는지 체크
1. 예전에 같은 SQL을 실행한적이 있고 최적화 된 실행계획이 Library Cache에 저장되어 있다면
2. Cache 영역에서 바로 꺼내서 실행하고 끝이 납니다.
3. Library Cache에 저장되어 있는 정보가 없다면 옵티마이저가 수 많은 실행계획들을 도출해낸 다음에 최적화를 거치게 된 다음 SQL 엔진이 해석할 수 있는 언어로 변환을 하는 Row-source generation이라는 과정을 거쳐서 실행이 됩니다.

소프트 파싱과 하드 파싱

Soft Parsing(소프트 파싱)

위 SQL 파싱 순서에서 3.a에 해당하는 Librarry Cache에서 바로 꺼내서 쓰는게 소프트 파싱입니다.

Hard Parsing(하드 파싱)

3.b에 해당하는 옵티마이저에 의해서 최적화를 하고 Row-source generation까지 하고 그 다음 실행되는게 하드 파싱입니다.

[JAVA]람다식이란? / 람다식의 특징 / Lambda Expression

Juun — Sun, 25 Sep 2022 22:34:49 +0900

1. Lambda 식이란?

Java 8부터 지원되는 함수지향형 코드입니다.
람다식이란 함수명을 선언하고 사용하는 것이 아닌 식별자 없이 실행가능한 함수입니다.
절차형 프로그래밍, 객체지향 프로그래밍과는 다르게 함수의 구현과 호출만으로 프로그램을 만드는 방식인 함수형 프로그래밍에서 자주 사용됩니다.
Lambda식은 함수형 프로그래밍 언어에서 사용되는 개념으로 익명 함수(Anonymous functions)를 지칭하는 용어입니다
함수(Method)를 간단한 ‘식(Expression)’으로 표현하는 방법위 메서드를 아래의 Lambda식으로 바꿀 수 있습니다
(a,b) -> a > b ? a : b
int max(int a, int b){ return a > b ? a : b; }
익명 함수(이름이 없는 함수, anonymous function)
```
(a,b) -> a > b ? a : b

// 반환타입 x, 이름 x, 화살표 추가
```
→ Lambda 식으로 표현할 때 이름이 없어지기 때문에 익명 함수라고 합니다
int max(int a, int b){ return a > b ? a : b; }

람다식 작성법

메서드의 이름과 반환타입을 제거하고 ‘ - >’를 블록 { } 앞에 추가합니다.

int max(int a, int b) {
	return a > b ? a : b;
}

위 식이 아래의 식으로

(int a, int b) -> {
	return a > b ? a : b;
}

반환값이 있는 경우, 식이나 값만 적고 return 문 생략 가능합니다 (끝에 ‘ ; ’ 안붙임)

(int a, int b) -> {
	return a > b ? a : b;
}

위 식이 아래 식으로

(int a, int b) -> a > b ? a : b

매개변수의 타입이 추론 가능하면 생략가능합니다(대부분의 경우 생략 가능합니다)

(int a, int b) -> a > b ? a : b

위 식이 아래 식으로!

(a, b) -> a > b ? a : b

단, 매개변수가 하나인 경우, 괄호() 생략 가능합니다 (타입이 없을 때만)

(a) -> a * a
(int a) -> a * a

위 식이 아래 식으로

a -> a * a // ok
int a -> a * a // error, 괄호 있어야 함!

2. Lambda 식의 특징

익명 : 보통의 메서드와 달리 이름이 없으므로 익명입니다.
함수 : 람다는 메서드처럼 특정 클래스에 종속되지 않으므로 함수 입니다.
전달 : Lambda 표현식을 메서드 인수로 전달하거나 변수로 저장할 수 있습니다.
간결성 : 익명 클래스처럼 코드를 구현할 필요는 없습니다.
람다식 내에서 사용되는 지역변수는 final이 붙지 않아도 상수로 간주됩니다
람다식으로 선언된 변수명은 다른 변수명과 중복될 수 없습니다.

3. 기존 로직과 Lambda 식의 차이점

→ 객체 지향은 명령형 프로그래밍이고, 함수형 프로그래밍은 선언형 프로그래밍입니다.

: 우선 명령형 프로그래밍과 함수형프로그래밍의 차이의 핵심은 문제해결의 관점입니다.

기존의 우리가 객체지향 프로그래밍을 할 때는 데이터를 어떻게 처리할 지에 대해 명령을 통해 풀어 나아갔다면,

함수형 프로그래밍은 선언적 함수를 통해 무엇을 풀어나아갈지 결정하는 것 입니다.

명령형 언어 : a 라는 변수에 1을 담으세요 (대입)

함수형 언어 : a 를 1로 정의한다.

기존 로직 : 익명 내부클래스

익명 내부 클래스는 이름이 없는 클래스입니다
특정 작업을 위해 메서드를 오버로드하거나 기능을 확장해야 하는 경우 상속 없이 인스턴스화 할 수 있습니다
익명 내부 클래스는 일반적으로 추상 / 구현 클래스 또는 인터페이스를 구현합니다.

익명 내부클래스 vs Lambda 식

익명 내부클래스	람다식
이름이 없는 클래스입니다	이름이 없는 메서드입니다
추상 및 구체 클래스를 확장할 수 있습니다.	추상 및 구체 클래스를 확장할 수 없습니다
여러 추상 메서드를 포함하는 인터페이스를 구현할 수 있습니다.	단일 추상 메서드를 퐇마하는 인터페이스를 구현할 수 있습니다.
익명 내부 클래스 내부에서 인스턴스 변수를 선언할 수 있습니다.	인스턴스 변수를 선언할 수 없습니다
익명 내부 클래스를 인스턴스화 할 수 있습니다.	람다 표현식을 인스턴스화 할 수 없습니다
익명 내부 클래스 내부의 this 키워드는 현재 익명 내부 클래스를 참조합니다	람다 표현식 내부의 this 키워드는 현재 외부 클래스 객체를 나타냅니다

[라이브러리] Swagger & REST API

Juun — Sat, 24 Sep 2022 20:49:03 +0900

Swagger가 나온 배경

협업을 위해 필요한 라이브러리

서버 개발자B가 클라이언트 개발자A에게 API 스펙이 담긴 문서를 전달해줍니다.

일반적으로는 엑셀이나 워드 등으로 API 스펙을 작성해서 보내줬습니다.

그럼 그 스펙 문서를 다시 수정해서 보내줘야되는 그런 귀찮은 부분들이 존재했습니다.

이런 문제와 더불어 수작업으로 진행되다 보니 오류 사항도 있었습니다.

그래서 이런 문제들을 해결하고자 해서 나온 라이브러리가 Swagger입니다.

Swagger란??

서버로 요청되는 API 리스트를 HTML 화면으로 문서화하여 테스트 할 수 있는 라이브러리를 의미합니다.

이 라이브러리는 서버가 가동되면서 @RestController를 읽어 API를 분석하여 HTML 문서를 작성합니다.

위에서 말한 서버로 요청되는 API 리스트는 스프링 부트와 연관되어 있습니다.

Swagger는 스프링 부트뿐만 아니라 여러가지 언어들 클라이언트, 서버 각 곳곳에서 사용되는 언어들 거의 다 사용할 수 있습니다.

Swagger는 서버가 가동되면서 RestController 어노테이션에 붙어있는 클래스들을 읽어서 API를 자동으로 분석하고 HTML 문서로 작성을 해줍니다.

Swagger가 필요한 이유

Rest API의 스펙을 문서화 하는 것은 매우 중요합니다.

API를 변경할 때마다 Reference 문서를 계속 바꿔줘야하는 불편함이 있는데

Swagger를 사용하면 자동으로 내가 어떤 코드를 수정하든 말든 가동할때마다

이 문서를 자동으로 갱신해서 업데이트 해주기 때문에 협업에 있어서 효율적으로 사용할 수 있습니다.

Rest API

Swagger는 Rest API를 관리하기 쉽게 나온 라이브러리입니다.

그렇기 때문에 Swagger를 알려면 Rest API가 뭔지 알아보도록 하겠습니다.

REST API는 정보들이 주고 받아지는데 있어서 개발자들 사이에 널리 쓰이는 일종의 형식입니다.

어떤 기술이나 제품이 아니라, 형식이기 때문에 어떤 프로그램을 쓰든 무슨 프레임워크를 쓰든,

소프트웨어를 만들든 이 형식에 맞춰서 기능들을 구현하면 됩니다.

먼저 API를 살펴보면 어떤 기계를 만들면, 사용자가 그 기능들을

전부 제어할 수 있도록 제어장치를 만들어야 합니다.

예를 들어 TV는 켜거나 끄고, 채널을 선택하고, 음량을 조절할 수 있게 해줘야 합니다.

그래서 리모컨이 있는거고 같은 이유로 자판기에는 버튼들이 있고 컴퓨터에는 키보드와 마우스가 있습니다.

이런 것들을 ‘인터페이스’ 라고 부릅니다. 즉, 기계와 인간 간의 소통창구입니다.

사용자가 명령을 넣는거 뿐만 아니라 그 결과와 정보들을 받아오기 위한

TV의 스크린, 컴퓨터의 모니터 또한 인터페이스에 속한다고 할 수 있습니다.

이제 소프트웨어 영역에서 살펴보면 사용자들이 프로그램이나 사이트, 앱을 원하는데로 제어하고 정보를 볼 수 있도록 버튼, 스크롤바, 슬라이더, 브라우저 창 등의 소프트웨어적인 장치들이 있습니다.

이런 것을 소프트웨어와 인간 간의 소통을 위한 ‘User Interface’라 볼 수 있습니다.

하지만 인간과 소프트웨어 뿐만 아니라

기계와 기계, 소프트웨어와 소프트웨어 사이에도 수 많은 요청과 정보 교환이 이루어지고 있습니다.

이들 사이에도 소통할 수 있는 창구가 필요합니다.

소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단을

‘Application Programming Interface’ API 라고 부릅니다.

이 API는 네트워크 뿐만 아니라 웹, OS 등에서도 존재하는 개념입니다.

이제 API를 알았으니 REST API에 대해서 알아보도록 하겠습니다.

프론트엔드 웹에서 서버에 데이터를 요청하거나 배달앱에서 서버에 주문을 넣는 등

이런 서비스에서 널리 활용되는 형식이 바로 REST API 입니다.

REST API의 가장 중요한 특성은 각 요청이 어떤 동작이나 정보를 위한 것인지를

그 요청의 모습 자체로 추론이 가능하다는 겁니다.

이런 서비스는 개발자 혼자 만드는게 아니라 나중에 인계받을 개발자나 이 API를

활용해 다른 제품을 만들 개발자들은 개발하기 힘들어질 겁니다.

그래서 RESTful 하게 만든 API는 요청을 보내는 주소만으로도 대략 이게 뭘하는

요청이지 파악이 가능합니다.

서버에 REST API로 요청을 보낼때는 HTTP 규약에 따라 신호를 전송합니다.

이 HTTP로 요청을 보낼 때도 여러 메소드가 있는데 REST API 에서는

get, post, delete, put, patch 5가지를 사용합니다.

각 요청의 의도를 쉽게 파악할 수 있도록 RESTful 하게 API를 만들기 위해서는

메소드의 목적에 따라 구분해서 사용해야 합니다.

get은 데이터를 Read, 조회하는데 사용합니다.

post는 Create, 새로운 정보를 추가하는데 사용됩니다.

put, patch는 Update, 변경하는데 사용됩니다.

put은 정보를 통째로 갈아끼울 때
patch는 정보 중 일부를 특정 방식으로 변경할 때 사용
delete는 삭제히는데 사용됩니다.

결국 REST API란 HTTP 요청을 보낼때 어떤 URI에 어떤 메소드를 사용할지

개발자들 사이에 널리 지켜지는 약속과 같습니다.

[Spring] 스웨거 어노테이션 / Swagger 2.0 vs Swagger 3.0 차이

Juun — Thu, 22 Sep 2022 22:03:21 +0900

Swagger Annotation

Swagger란, 서버로 요청되는 API 리스트를 HTML 화면으로 문서화하여 테스트 할 수 있는 라이브러리를 의미합니다.

Open API 2.0 (Swagger 2.0) vs Swagger 3.0

Swagger 3.0 Annotation	Swagger 2.0	Description
@Tag	@API	클래스를 Swagger 리소스로 표시
@Parameter (hidden = true) or @Operation (hidden = true) or @Hidden	@ApiIgnore	API 작업에서 단일 매개 변수를 나타냄
@Parameter	@ApiImplicitParam	API 작업에서 단일 매개 변수를 나타냄
@Parameters	@ApiImplicitParams	API 작업에서 복수 매개 변수를 나타냄
@Schema	@ApiModel	Swagger 모델에 대한 추가 정보를 제공
@Schema(accessMode = READ_ONLY)	@ApiModelProperty (hidden = true)	모델 속성의 데이터를 추가하고 조작
@Schema	@ApiModelProperty	Swagger 모델에 대한 추가 정보를 제공
@Operation (summary ="foo", description = "bar")	@ApiOperation (value = "foo", notes = "bar")	특정 경로에 대한 작업 또는 일반적으로 HTTP 메서드를 설명
@Parameter	@ApiParam	작업 매개 변수에 대한 추가 메타 데이터를 추가
@ApiResponse (responseCode = "404", description = "foo")	@ApiResponse (code = 404, message = "foo")	작업의 가능한 응답을 설명

Swagger Annotation 3.0

1. api 그룹 설정: @Tag

대상: ANNOTATION_TYPE, METHOD, TYPE

Tag에 설정된 name이 같은 것끼리 하나의 api그룹으로 묶는다. 주로 Controller나 Controller의 메서드 영역에 설정합니다.

2. api Schema 설정: @Schema

대상: ANNOTATION_TYPE, METHOD, PARAMETER, TYPE

Schema(=Model)에 대한 정보를 작성하는 곳입니다. Schema를 설정할 시, 더욱 완성도 높은 Swagger UI를 만들 수 있습니다. 아래 이미지는 @Schema 설정을 하지 않은 dto클래스들의 모델 정보입니다.

각 필드 값들에 대한 설명이나 기본값, 허용가능한 값 등에 대한 정보 없이 string 요소가 들어간다는 정보 뿐이라 모호합니다.

api 문서의 완성도를 높이기 위해서는 @Schema 설정을 통해 어떤 값들이 들어가는지 설정을 추가해주는 것이 좋습니다.

@Schema 적용을 마친 후의 PostsListResponseDto 모델의 정보는 좀 더 자세하게 스키마에 대한 정보를 확인할 수 있게 됩니다.

3. api 상세 정보 설정: @Operation

대상: ANNOTATION_TYPE, METHOD

summary: api에 대한 간략한 설명
description: api에 대한 상세 설명
response: api Response 리스트
parameters: api 파라미터 리스트

@Operation어노테이션은 api동작에 대한 명세를 작성하기 위해 Controller 메소드에 설정합니다.

간략히 확인할 수 있는 간략정보는 summary에 작성하고, 필요에 따라 상세 정보를 표기하고자 한다면 description에 설명을 추가하면 됩니다.

responses는 아래에서 설명할 @ApiResponse 리스트들 설정하는 요소입니다.

parameters는 path, query, header, cookie 등의 형태로 들어오는 파라미터에 대한 정보를 설정하는 요소입니다.

4. api response 설정: @ApiResponse

대상: ANNOTATION_TYPE, METHOD, TYPE

responseCode: http 상태코드
description: response에 대한 설명
content: Response payload 구조

@ApiResponse는 응답 결과에 따른 response 구조를 미리 확인할 수 있게 해줍니다.

무늬 뿐인 response 구조가 아닌, api 조회 성공 및 실패 시 발생될 상태코드 및 Response 구조를 설정하고자 한다면 @ApiResponse를 설정하면 됩니다.

게시글 조회 API에 @ApiResponse Annotation을 추가하면 테스트 애플리케이션의 게시글 조회 API에서는 200, 404 상태코드가 설정되어 있습니다.

조회가 성공되었을 시, 200 상태코드와 PostsResponseDto클래스가 reseponseBody에 반환되고 조회 실패시엔, 404 상태코드와 ErrorResponse클래스가 responseBody가 반환됩니다.

5. api parameter 설정: @Parameter

대상: ANNOTATION_TYPE, FIELD, METHOD, PARAMETER

name: 파라미터 이름

description: 파라미터 설명

in: 파라미터 위치

query, header, path, cookie

@ApiResponse와 마찬가지로 @parameters Annotation에 @Parameter 리스트를 담아 api메서드에 설정할 수 있고, @Operation 어노테이션에 parameters 요소에 설정할 수도 있습니다. 그리고 파라미터의 경우 api method의 인자 값에 붙여 명시적으로 설정할 수도 있습니다.

@Parameters나 @Operation에 설정하는 방법은 @ApiResponse에서와 유사합니다.

만일 @Parameters 나 @Operations에 파라미터를 설정할 경우에는 어떤 파라미터에 대한 설정인지 알 수 없기 때문에 반드시 name을 설정해 줘야 합니다.

[JAVA] Generic이란??

Juun — Sat, 16 Jul 2022 15:47:38 +0900

Generic이란??

클래스 내부에서 사용할 데이터 타입을 외부에서 지정하는 기법

class Person<T> {
	public T info;
}

public class GenericDemo {
	
	public static void main(String[] args) {
		Person<String> p1 = new Person<String>();
		Person<StringBuilder> p2 = new Person<StringBuilder>();
	}
}

T 는 info 필드의 데이터 타입입니다.

Person 클래스를 정의하는 시점에서는 info의 데이터 타입을 명시적으로 지정하지 않고 있다가

Person을 인스턴스화 할때 <> 안에 구체적인 데이터 타입인 <String>을 언급하면 <T>는 String이 되고

info의 데이터 타입은 String을 갖게 된다는 뜻입니다.

그럼 자연스럽게 인스턴스를 담아낼 수 있는 p1의 데이터 타입 역시 String이 됩니다.

Generic을 이용해서 두 개의 데이터 타입을 만들어봤습니다.

하나는 Info의 데이터 타입이 String인 것이고

또 다른 하나의 Info의 데이터 타입이 StringBuilder인 것 입니다.

Generic을 사용하면 얻는 이점

컴파일시 강한 타입 체크를 할 수 있습니다.
→ 컴파일시에 미리 타입을 강하게 체크해서 사전에 에러를 방지합니다.
타입변환을 제거할 수 있습니다.

List list = new ArrayList();
list.add("Hello"); //실제 저장하는건 String이지만 내부적으로 저장은 object로 저장
String str = (String) list.get(0); 
// 그래서 호출시 object 타입으로 반환이 된다. 
// 그래서 이런 점을 방지하고자 앞에 (String)을 붙혀줌으로 강제 타입변환이 필요하다

위 처럼 사용하면 두번의 타입변환이 생깁니다.

처음 list.add(”hello”); 을 String으로 저장이 될 때 그리고

(String) list.get(0); 으로 찾아올 때 Object 타입이 String으로 타입 변환이 됩니다.

그런데 Generic을 사용하게 되면 아래 처럼 코드가 바뀝니다.

List<String> list = new ArrayList<String>();
list.add("hello");
String str = list.get(0);

List<String> list 는 객체를 저장할 수 있는 컬렉션인 List에 String만 저장한다는 의미입니다.

구현 객체 new ArrayList<String>(); 에도 String 만 받겠다는 의미입니다.

list.add(”hello”);에 String을 주게 되면 내부에 저장될 때도 String으로 저장됩니다.

만약 String이 아니라 다른 타입이 들어오게 되면 컴파일 에러가 발생합니다.

그렇기 때문에 매개값을 줄때도 String으로 주고 내부 저장값도 String으로 저장되기 때문에

자동 타입변환이 발생하지 않습니다.

그리고 저장된 객체를 찾아오는 get이라는 메서드를 사용할때도 String 타입으로 바로 나옵니다.

위 두 코드를 비교하면 타입체크와 형변환을 생략할 수 있으므로 코드가 간결해 집니다.

Generic의 사용

// 클래스
public class ClassName <T> { ... }

// 인터페이스
public Interface InterfaceName <T> { ... }

// 제네릭 타입을 두 개 이상 사용하는 경우
public class MultiGeneric <K, V> { ... }

클래스나 인터페이스에 선언한 경우와 제네릭 타입을 두 개 이상 사용하는 경우입니다. 이때 T, K, V 타입은 해당 블록 {...} 안에서까지 유효합니다.

타입 변수(Type Variable)

기호의 종류만 다를 뿐 '임의의 참조형 타입'을 의미한다는 것은 모두 같으며, 상황에 맞게 의미 있는 문자를 선택해서 사용합니다.

T : Object       <T>
E : Element      <E>
K : Key          <K>
V : Value        <V>
N : Number       <N>

Generic 용어

class Box<T> { } 
//지네릭 클래스 선언

Box<String> b = new Box<String>();
Box<TV> c = new Box<TV>();

// 객체를 만들때마다 타입을 바꿀 수 있습니다.

Box<T> : Generic 클래스. ‘T의 Box’ 또는 ‘T Box’ 라고 읽습니다.

T : 타입 변수 또는 타입 매개변수.

Box : 원시타입(raw type)

<String>, <TV> : parameterized type, 매개변수화된 타입

Generic 타입과 다형성

다형성 : 하나의 참조변수로 여러 타입의 객체를 참조하는 것

참조 변수와 생성자의 parameterized type은 일치해야 합니다.

ArrayList<TV> list = new ArrayList<TV>();     // ok, 일치
ArrayLisy<Product> list = new ArrayList<TV>();// 에러, parameterized type 불일치

Generic 클래스간의 다형성은 성립합니다 (parameterized type은 일치!!)

List<TV> list = new ArrayList<TV>();  // ok, 다형성, ArrayList가 List를 구현
List<TV> list = new LinkedList<TV>(); // ok, 다형성, LinkedList가 List를 구현

제한된 Generic 클래스

extends로 대입할 수 있는 타입을 제한합니다

class FruitBox<T extneds Fruit> { // Fruit의 자손만 타입으로 지정 가능
	ArrayList<T> list = new ArrayList<T>();
}

FruitBox<Apple> appleBox = new FruitBox<Apple>();  // ok
FruitBox<Toy> toyBox = new FruitBox<Toy>();       // 에러, toy는 Fruit의 자손x

타입 T만 있으면 모든 타입이 가능했는데 extends Fruit이라는 제한 조건을 줌으로서

Fruit의 자손만 대입가능합니다.

인터페이스인 경우에도 extends를 사용합니다.

interface Eatable { }
class FruitBox<T extends Eatable> {  }

Generic의 제약

타입 변수에 대입은 인스턴스 별로 다르게 가능합니다.

Box<Apple> appleBox = new Box<Apple>(); // ok, Apple 객체만 저장 가능
Box<Grape> grapeBox = new Box<Grape>(); // ok, Grape 객체만 저장 가능

static 멤버에 타입 변수 사용 불가능합니다

class Box<T> {
	static T item; // 에러
	static int compare(T t1, T t2) { /*생략*/ } // 에러
}

→ Box 클래스가 인스턴스가 되기 전에 static은 메모리에 올라가는데 이 때 item의 타입인 T가 결정되지 않기 때문에 위와 같이 사용할 수 없는 것이다.

객체, 배열 생성할 때 타입 변수 사용이 불가능합니다. (타입 변수로 배열 선언은 가능!)

class Box<T> {
	T[] itemArr; // ok, T타입의 배열을 위한 참조변수
		....
	T[] toArray() {
		T[] tmpArr = new T[itemArr.length] // 에러, 지네릭 배열 생성불가
		....
}

new 다음에 T가 오면 안된다!

new 연산자 뒤에 타입은 확정되어 있어야 하는데 T는 어떤 타입이 올지 모르기 때문에 사용 불가능합니다.

와일드 카드 <?>

하나의 참조변수로 대입된 타입이 다른 객체를 참조 가능!

ArrayList<? extemds Product> list = new ArrayList<TV>(); // ok
ArrayList<? extemds Product> list = new ArrayList<Audio>(); // ok
ArrayList<Product> list = new ArrayList<TV>(); //에러, parameterized type불일치

<? extends T> : 와일드 카드와 상한 제한. T와 그 자손들만 가능

<? super T> : 와일드 카드와 하한 제한. T와 그 조상들만 가능

<?> : 제한 없음, 모든 타입이 가능 <? extends Object>와 동일

[네트워크] 3-way-handShake와 TCP 와 UDP

Juun — Wed, 22 Jun 2022 18:42:58 +0900

3 - way - handShake란???

TCP와 UDP의 차이를 알려면 먼저 3 - Way - Handshake를 먼저 알아야 한다!!

3 - Way-Handshake란, 전송제어 프로토콜(TCP)에서 통신을 하는 장치간 서로 연결이 잘 되어있는지 확인하는 과정/방식이다.

더 쉽게 말해서 송수신자 (데이터를 주고 받는 2사람이라고 생각하면 쉬울 것 같다)사이에 연결을 확인하는 과정이다.

아래는 참고 그림이다

* TCP의 3-way Handshaking 과정

[STEP 1]

클라이언트는 서버에 접속을 요청하는 SYN 패킷을 보낸다.

이때 클라이언트는 SYN 을 보내고 SYN/ACK 응답을 기다리는SYN_SENT 상태가 된다.

[STEP 2]

서버는 SYN요청을 받고 클라이언트에게 요청을 수락한다는 ACK 와 SYN flag 가 설정된 패킷을 발송하고

클라이언가 다시 ACK으로 응답하기를 기다린다. 이때 B서버는 SYN_RECEIVED 상태가 된다.

[STEP 3]

클라이언트는 서버에게 ACK을 보내고 이후로부터는 연결이 이루어지고 데이터가 오가게 되는것이다.

이때의 서버 상태가 ESTABLISHED 이다.

위와 같은 방식으로 통신하는것이 신뢰성 있는 연결을 맺어 준다는 TCP의 3 Way handshake 방식이다.

위 방식을 좀 더 쉽게 표현한 비유가 있다

[1] 클라이언트 : 야 잘들려?

[2] 서버 : ㅇㅇ 잘들려, 너도 잘들려??

[3] 클라이언트 : ㅇㅇ 나도 잘들려

TCP와 UDP의 비교

TCP(Transfer Control Protocol)는 연결형 서비스로 3-way handshaking 과정을 통해 연결을 설정한다.

그렇기 때문에 높은 신뢰성을 보장하지만 속도가 비교적 느리다는 단점이 있음.

UDP(User Datagram Protocol) 는 비연결성 서비스로 3-way handshaking을 사용하지 않기 때문이 빠르지만 신뢰성이 떨어지는 단점이 있다.

→ TCP와 UDP의 차이는 3-way handshake을 쓰냐 안쓰냐, 속도의 차이, 신뢰성의 차이!!

참고 : webstylez.egloos.com, blazebyte.blogspot.kr

[Programming] 자바와 자바스크립트 공통점과 차이점

Juun — Sun, 19 Jun 2022 16:02:28 +0900

자바와 자바스크립트, 개발 공부를 처음 시작하면 자바와 자바스크립트라는 이름의 '자바' 때문에

두개가 비슷하거나 같다고 생각할 수도 있다. 한 번씩 커뮤니티나 질문이 올라오는걸 보면

자바 게시판에 자바스크립트 질문 글이, 자바스크립트 게시판에 자바 질문이 올라오는 걸 종종 볼 수 있다.

자바와 자바스크립트 역사를 간단하게 살펴보면 이렇다.

자바는 Sun에서 개발한 언어로 자바스크립트보다 먼저 나왔다.

자바스크립트는 NetScape 사에서 개발하였고 초기엔 Mocha, LiveScript라는 이름으로 변경되었지만

자바가 인기가 많아짐에 따라 자바스크립트라는 이름을 쓰게 되었다고 한다.

그래서 자바와 자바스크립트는 엄연히 태생부터 다른 언어라고 볼 수 있다.

다만 공통점 몇 개를 살펴보자면 이렇다.

자바 vs 자바스크립트 공통점

두 언어 다 객체지향기반 언어라는 점
프론트엔드 / 백엔드 개발을 할 수 있다는 점
자바스크립트는 프론트엔드 개발에 주로 사용되어 왔지만 Node.js가 등장한 후로는 백엔드 개발이 가능해졌다.
자바는 백엔드 개발에 주로 사용되어 왔지만 jsp를 통해 프론트엔드도 구현 할 수 있다.

자바 vs 자바스크립트 차이

Java는 OOP 프로그래밍 언어인 반면, JavaScript는 OOP 스크립팅 언어입니다.
Java는 가상 시스템 또는 브라우저에서 실행되는 응용 프로그램을 작성하는 반면, JavaScript 코드는 브라우저에서만 실행됩니다.
Java 코드는 컴파일이 필요하지만, JavaScript 코드는 모두 텍스트입니다.
Java 코드와 JavaScript 코드 서로 다른 플러그인을 필요로 합니다.

※ 스크립팅 언어 : 컴파일(compile)을 하지 않고, 작성해서 바로 실행시킬 수 있는 언어

※ 컴파일(compile) : 인간이 구분하기 쉬운 언어로 작성된 프로그램을 기계어(컴퓨터 등의 기계가 이해할 수 있는 언어)로 번역하는 것

※ 플러그인 : 특정한 프로그램의 기능을 보강하기 위해 추가된 프로그램.

Java	JavaScript
OOP 프로그래밍 언어	OOP 스크립팅 언어
시스템 또는 브라우저에서 실행되는 응용 프로그램에서 실행 (ex. JVM)	브라우저에서만 실행
컴파일 O	컴파일 X

출처 java.com

[Spring] JSP & Servlet / JSP와 Servlet의 역할

Juun — Fri, 17 Jun 2022 22:52:23 +0900

자바를 배우면 JSP, Servlet, Spring 에 대해서 많이 배우고 듣게 되는데

오늘은 하나씩 알아보도록 하자!

JSP, Servlet, 스프링을 각각의 특징을 간단하게 알아보는 포스팅이라

자세한 지식은 다음에 포스팅하도록 하겠다!

서블릿(Servlet)

서블릿은 서버에서 웹페이지 등을 동적으로 생성하거나 데이터 처리를 위해

자바로 작성된 어플리케이션이다! (HTML in JAVA)

쉽게 풀어보자면 '클라이언트 요청을 처리하고 그 결과를 다시 클라이언트에

전송하는 서블릿 클래스의 구현한 자바 프로그램' 이라고 이해하면 된다!

서블릿에서 좀 더 확장시킨 개념이 스프링이라 생각하면 된다!!

스프링도 서블릿을 통해 동작을 하기 때문에!

JSP (Java Server Page)

간단하게 HTML 안에 자바코드를 삽입한 것이라 생각하자! (Java in HTML)

서블릿은 HTML 안에 자바 코드가 있는거라 했다.

JSP는 HTML을 코딩하기 어렵고 불편해서

HTML 내부에 자바 코드를 삽입하는 형식이라 생각하면 된다!

한마디로 서블릿의 단점을 보완한 서블릿 기반의 스크립트 기술이다!!

HTML 코드 속에 들어가는 자바 코드는 아래와 같다

<% 메서드 영역 %>

<%! 클래스 영역 %>

나중에는 <% %> 이렇게 쓰는것 마저 쓰는게 불편하다고

EL, JSTL 이라는 개념도 나왔는데 그건 추후에 따로 설명 할 수 있도록 하겠다!!

JSP와 Servlet 의 역할

위 내용만 보면 서블릿이나 JSP나 방법의 차이만 있을뿐 같은 역할을 한다는 것을 알 수 있다ㅣ

초기 자바를 통한 웹개발은 서블릿을 이용한 개발이었다고 한다. 추후에 서블릿의 단점을 보완하고자

JSP가 나오고 JSP만을 이용한 개발(Model1 방식)이 유행하게 되고 지금에 와서 JSP와 서블릿의 역할을 나누어

서블릿 + JSP 형태의 개발(Model2 방식)을 이루고 있는데 그게 바로 스프링의 핵심이라 할 수 있는 MVC 패턴이다!

위 설명에서 처럼

JSP는 HTML 사용이 용이하고 자바코드 사용이 불편하기 때문에 View(Client) 담당을,

서블릿은 자바코드 작성이 편리하기 때문에 자료를 받아 모델에 저장하고 그 모델을 다시 화면에 전달하는 Controller를 담당하고 있다.

이렇게 하면 좋은 점이 분리가 되어 유지보수에 용이하여 좋은 설계를 할 수 있다는 이점이 있다!

출처 - 에이콘아카데미 공식블로그

이렇게 서블릿과 JSP에서 알아보았고 더 나아가 이 둘을 활용한 스프링까지도 알아봤다.

스프링을 알려면 서블릿, JSP를 알아야 한다!!

3줄 요약

1. 서블릿 (HTML in JAVA) - Controller 역할

2. JSP (Java in HTML) - View 역할

3. 스프링 : 서블릿 + JSP

스프링 MVC 패턴은 이전 포스팅 한 글이 있어 참고하면 좋을 것 같다!

2022.06.15 - [Frameworks/Spring] - [Spring] MVC (Model, View, Controller) 패턴이란??

[Spring] MVC (Model, View, Controller) 패턴이란??

MVC 패턴이란??? 모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스

puenti.tistory.com

[Spring] MVC (Model, View, Controller) 패턴이란??

Juun — Wed, 15 Jun 2022 15:36:32 +0900

MVC 패턴이란???

모델-뷰-컨트롤러(model–view–controller, MVC)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다. MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.

출처 - 위키피디아, mvc 패턴

사전적 의미는 위키피디아에서 가져왔지만 감이 아직 안잡힌다... 핵심만 간단히 풀어서 적어보려 한다.먼저 MVC패턴을 설명하기에 앞서 옛날 개발자들의 말을 들어 보면 FrameWork 라는 개념이 없어 사람마다 코드가 뒤죽박죽이었다고 한다. 또한 옛날 개발자들이 많은 고민 중 하나인 '어떻게 하면 좋은 설계를 할 수 있을까?' 하는 고민과 앞서 말했던 FrameWork의 필요성 때문에 나온 것이 바로 MVC 패턴이라고 한다.

개발공부를 하는 사람이라면 어떻게 하면 더 나은 코드를 설계할지 끊임없이 고민하고 생각해야한다.

좋은 설계의 핵심은 두 가지라고 생각한다! 바로 코드의 재사용성과 중복코드 제거!

위 두가지를 충족시켜주려면 바로 분리를 잘해줘야한다!!!

MVC 패턴은 바로 이 분리에서부터 시작이 된다!

자! 그러면 우리는 어떤 것을 어떻게 분리를 해줘야 할까?

OOP 5대 설계 원칙인 SOLID 개념의 S(SRP)에 따르면 이렇다

S(SRP) : 단일책임의 원칙 : 하나의 메서드는 하나의 책임(=관심사)만 진다.

그래서 좋은 설계를 위해서는 '분리'를 잘해야한다!

※ 관심사(concern) : 해야할 작업

분리는 아래 세 가지로 나눌 수 있다.

관심사
변하는 것과 (자주) 변하지 않는 것(common, uncommon)
공통(중복) 코드

그러면 위 세가지의 분리에 대해서 하나씩 알아보도록 하자

1. 관심사의 분리

@Controller
public class YoilTeller {
    @RequestMapping("/getYoil") // http://localhost:8080/ch2/getYoil?year=2021&month=10&day=1
    //    public static void main(String[] args) {
    public void main(HttpServletRequest request, HttpServletResponse response) throws IOException {
        // 1. 입력
//        String year = args[0];
//        String month = args[1];
//        String day = args[2];
        String year = request.getParameter("year");
        String month = request.getParameter("month");
        String day = request.getParameter("day");

        int yyyy = Integer.parseInt(year);
        int mm = Integer.parseInt(month);
        int dd = Integer.parseInt(day);

        // 2. 처리
        Calendar cal = Calendar.getInstance();
        cal.set(yyyy, mm - 1, dd);

        int dayOfWeek = cal.get(Calendar.DAY_OF_WEEK);
        char yoil = " 일월화수목금토".charAt(dayOfWeek);

        // 3. 출력
//        System.out.println(year + "년 " + month + "월 " + day + "일은 ");
//        System.out.println(yoil + "요일입니다.");
        response.setContentType("text/html");    // 응답의 형식을 html로 지정
        response.setCharacterEncoding("utf-8");  // 응답의 인코딩을 utf-8로 지정
        PrintWriter out = response.getWriter();  // 브라우저로의 출력 스트림(out)을 얻는다.
        out.println("<html>");
        out.println("<head>");
        out.println("</head>");
        out.println("<body>");
        out.println(year + "년 " + month + "월 " + day + "일은 ");
        out.println(yoil + "요일입니다.");
        out.println("</body>");
        out.println("</html>");
        out.close();
    }
}

위 YoilTeller 클래스는 1. 입력, 2. 처리, 3. 출력 3가지의 관심사로 나눌 수 있다.

2. 공통 코드의 분리 - 입력의 분리

관심사를 분리했으면 관심사에 공통으로 들어가는 부분인 '입력'을 분리할 수 있다.

입력은 보통 @Controller를 사용한다!

이렇게 할 수 있는게 입력 부분은 모든 코드가 비슷하기 때문이다.

위처럼 공통코드 하나를 분리하므로써 하나의 관심사가 사라짐으로 인해

중복코드가 제거 되고 코드가 간결해지므로 유지보수가 쉬워진다!

3. 변하는 것과 변하지 않는 것의 분리 - 출력(view)의 분리

처리와 출력은 같은 메서드 안에 있어서 서로 참조할 수 있지만

서로 별도의 메서드로 분리가 된다면 어떻게 될까??

→ 서로 다른 영역으로 분리되서 참조할 수 없다.

그래서 중간 객체가 필요한데 그 객체가 바로 MODEL이다!!

저 데이터 둘을 주고 받을 수 있는 부분의 객체 Model

→ MODEL을 만들어놓고 그 객체를 출력하는 값을 저장한다!!

그리고 MODEL을 출력하는 부분에 전달한다!!

VIEW에서는 MODEL에서 전달받은 값을 출력한다!

분리된 두 코드간의 데이터를 전달하기 위한 객체 MODEL

출력, 보여주는 부분이 VIEW 이다!!

그래서 MVC 패턴의 Model, View, Controller 의 기능을 간단히 정리하자면

MVC 패턴

전달 MODEL : 데이터 전달

출력 View : 보여주는 부분

처리 Controller : 작업을 처리함

출처 - 위키피디아 MVC패턴

이렇게 MVC 패턴을 이용함으로서 view를 controller와 분리하고 나서

상황에 따른 view를 보여주는게 편리해졌고 코드 관리가 쉬워져 유지보수 또한 수월해졌다.

ex. 은행 거래내역 조회 1년치를 보고 싶다면 pdf, csv, excel 버튼을 누르면 해당 view를 다운받아서 볼 수 있다.

[네트워크] HTTP(Hyper Text Transfer Protocol) 란? HTTP의 요청과 응답

Juun — Tue, 14 Jun 2022 14:41:50 +0900

HTTP란?

HTTP(HyperText Transfer Protocol)는 W3 상에서 정보를 주고받을 수 있는 프로토콜이다.

HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜이다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 주로 HTML 문서를 주고받는 데에 쓰인다.

HTTP는 상태를 가지고 있지 않는 Stateless 프로토콜이며 Method, Path, Version, Header, Body 등으로 구성된다!

그래서 HTTP는 클라이언트 정보를 저장하지 않아서 클라이언트를 구분하기 어렵다!

※ W3란 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 간단히 웹(the Web)이라 부르는 경우가 많다.

※ Hyper Text는 기존의 책과 같은 선형적인 텍스트가 아니라, 월드 와이드 웹에서 사용되는 하이퍼링크와 하이퍼텍스트를 통해서 이어지는 비선형적인 텍스트가 신개념이라는 의미에서 만들어진 용어이다. HTML의 HT가 Hypertext의 줄임말이다.

※ 프로토콜(Protocol)은 서로 간의 통신을 위한 약속, 규칙이다. 서로 주고 받을 데이터에 대한 형식을 정의한 것이다!

HTTP 요청과 응답

HTTP 응답 메세지는 텍스트, 헤더, 바디로 이루어져 있는 편지와 같다!

그래서 HTTP 프로토콜은 요청편지를 보내고 응답편지를 받는 것과 같다고 생각하면 된다!

우리가 브라우저 주소창에 URL을 입력하면 브라우저는 요청 메세지를 만들어주고 그 요청 메세지를 만들어 서버에 보내주면

서버는 받은 요청을 응답해준다!

HTTP 응답 메세지는 서버가 클라이언트한테 응답해주는 메세지 형식이라고 생각하면 된다!

HTTP 요청 메세지는 메서드를 통해 요청을 보낸다!

여러 가지 메서드가 있지만 대표적인 GET과 POST를 알아보면

GET은 서버의 리소스를 가져오기 위한 설계라면 POST는 서버에 정보를 제공하기 위한 설계이다

※ 클라이언트 : 서비스를 요청하는 애플리케이션 or 컴퓨터

※ 서버 : 서비스를 제공하는 어플리케이션 or 컴퓨터

[IntelliJ Error]war exploded: error during artifact deployment. see server log for details.

Juun — Thu, 9 Jun 2022 09:21:42 +0900

인텔리제이로 메이븐을 통해서 스프링 프로젝트를 생성중 생긴 오류이다.

pom.xml에 properties, dependency, plugin을 추가하고 톰캣과 연결후 연결이 잘되었는지 확인하는 과정에서 생긴 에러이다!

Project Structure -> Artifact에 Available Elements를 모두 삭제하고 다시 설정을 해줬는데도 안됐다!

이 에러 찾고 잡는다고 2시간정도 쌩 고생한거 같다...

해결방법

ideaProject / 만든 프로젝트 폴더에 들어가보면

src와 out 폴더가 있다.

out 폴더에 WEB-INF 페이지가 없어 src에 있는 WEB-INF 폴더를 복사해서 붙여넣어주니 해결...

잘 모르시는 분들을 위해 경로를 적어보자면

ideaProject / 만든 프로젝트 폴더 / out / artifacts / 내가 만든 프로젝트 폴더 / WEB-INF

를 복붙해서 넣어주면 해결되었다!!

[JavaScript] JS로 그림판 만들기, save 기능 구현하기 [8/8]

Juun — Wed, 8 Jun 2022 00:03:38 +0900

2022.06.07 - [Practice] - [JavaScript] JS로 그림판 만들기, Fill 기능 구현하기! [7/8]

[JavaScript] JS로 그림판 만들기, Fill 기능 구현하기! [7/8]

2022.06.07 - [Practice] - [JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/8] [JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/9] 2022.06.06 - [Practice] - [JavaScr..

puenti.tistory.com

저번 포스팅은 Fill 기능까지 넣어줬다!

이번 포스팅은 마지막 save 기능을 넣어주도록 해보자!

canvas는 pixel을 다루는거라 기본적으로 image를 만들면 download와 save는 이미 내장되어 있다!

app.js 에 아래 코드 추가

  canvas.addEventListener("contextmenu", handleCM); // 이벤트 추가

function handleCM(event) {
  event.preventDefault();
}

function handleSaveClick() {
  const image = canvas.toDataURL();
  const link = document.createElement("a");
  link.href = image;
  link.download = "PaintJS";
  link.click();
}

if (saveBtn) {
  saveBtn.addEventListener("click", handleSaveClick);
}

위 코드를 추가해주면 된다!

save 버튼을 누르면 저장까지 잘되고 실행되는걸 볼 수 있다!!

app.js 의 전체 코드이다!

const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
const colors = document.getElementsByClassName("jsColor");
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");
const saveBtn = document.getElementById("jsSave");

const INITIAL_COLOR = "#2c2c2c";
const CANVAS_SIZE = 700;


//컨버스 크기
canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;


ctx.fillStyle = "white";
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
ctx.strokeStyle = INITIAL_COLOR; // 우리가 그릴 선들은 모두 이 색을 갖는다
ctx.fillStyle = INITIAL_COLOR;
ctx.lineWidth = 2.5; // 라인의 너비가 2.5

let painting = false; 
let filling = false; // 기본값은 안채워져있음

function stopPainting() {
    painting = false;
  }

function startPainting() {
    painting = true;
}

function onMouseMove(event){
    const x = event.offsetX;
    const y = event.offsetY;
    if (!painting) {
        ctx.beginPath(); // path는 선이다, path를 만들면 마우스의 x,y, 좌표로 path를 옮긴다
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y); // lineTo는 path의 이전 위치에서 지금 위치까지 선을 만드는 것
        ctx.stroke();
      } // lineTo()와 stroke()는 마우스를 움직이는 내내 발생한다! 마우스를 움직이는 동안 계속 발생한다!
}

function handleModeClick() {
    if (filling === true) {
        filling = false;
        mode.innerText = "Fill";
      } else {
        filling = true;
        mode.innerText = "Paint";
      }
  }


function onMouseUp(event){
    painting = false;
}

function onMouseLeave(event){
    painting = false;
}

function handleRangeChange(event) {
    const size = event.target.value;
    ctx.lineWidth = size;
  }

function handleColorClick(event) {
    const color = event.target.style.backgroundColor;
    ctx.strokeStyle = color; // strokeStyle이 target에 있는 색상이 된다!
    ctx.fillStyle = color;
  }

  function handleCanvasClick() {
    if (filling) {
      ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
    }
  }

  function handleCM(event) {
    event.preventDefault();
  }

  function handleSaveClick() {
    const image = canvas.toDataURL();
    const link = document.createElement("a");
    link.href = image;
    link.download = "PaintJS";
    link.click();
  }
  

if(canvas){
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mousedown", startPainting);
    canvas.addEventListener("mouseup", stopPainting);
    canvas.addEventListener("mouseleave", stopPainting);
    canvas.addEventListener("click", handleCanvasClick);
    canvas.addEventListener("contextmenu", handleCM);
}

Array.from(colors).forEach(color =>
    color.addEventListener("click", handleColorClick)
  );
  
if (range) {
    range.addEventListener("input", handleRangeChange);
}

if (mode) {
    mode.addEventListener("click", handleModeClick);
  }

if (saveBtn) {
    saveBtn.addEventListener("click", handleSaveClick);
}

위 그림판을 통해 캐치마인드와 같은 게임을 만들 떄 활용할 수 있을 수 있을거라는 생각을 했다!

되게 재밌게 했던 그림판 만들기 끝!!

더 자세하게 알고 싶으면 아래 사이트를 참고하면 문서로 잘 설명되어 있다!!

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial

캔버스 튜토리얼 - Web API | MDN

<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는)

developer.mozilla.org

[JavaScript] JS로 그림판 만들기, Fill 기능 구현하기! [7/8]

Juun — Tue, 7 Jun 2022 03:32:36 +0900

2022.06.07 - [Practice] - [JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/8]

[JavaScript] JS로 그림판 만들기, paint 색상, 붓 사이즈 바꾸기! [6/9]

2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/9] [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/9] 2022.06.06 - [Programming/JavaScript] - [JavaScript] JS로 그림판 만..

puenti.tistory.com

이제 fill 버튼 기능을 만들어보자

fill 버튼을 누르고 원하는 색상을 클릭하면 컨버스 색상이 클릭한 색상으로 변하게 되는 기능이다!!

app.js

const mode = document.getElementById("jsMode");

let filling = false;

if (mode) {
  mode.addEventListener("click", handleModeClick);
}

function handleModeClick() {
  if (filling === true) {
    filling = false;
    mode.innerText = "Fill";
  } else {
    filling = true;
    mode.innerText = "Paint";
  }
}

만약 내가 filling mode에서 canvas를 클릭하면 canvas 전체에 색이 채워지게 한다!

그래서 filling mode인지 아닌지 알 수 있는게 필요하다

그 기능을 해줄게 handleModeClick() 이다

버튼 Fill을 누르면 paint가 보이고 다시 한 번더 누르면 Fill이 나온다!

몇몇 변수와 기능을 추가해준다!!

const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
const colors = document.getElementsByClassName("jsColor");
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");

const INITIAL_COLOR = "#2c2c2c";
const CANVAS_SIZE = 700;


//컨버스 크기
canvas.width = CANVAS_SIZE;
canvas.height = CANVAS_SIZE;


ctx.fillStyle = "white";
ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
ctx.strokeStyle = INITIAL_COLOR; // 우리가 그릴 선들은 모두 이 색을 갖는다
ctx.fillStyle = INITIAL_COLOR;
ctx.lineWidth = 2.5; // 라인의 너비가 2.5

let painting = false; 
let filling = false; // 기본값은 안채워져있음

function stopPainting() {
    painting = false;
  }

function startPainting() {
    painting = true;
}

function onMouseMove(event){
    const x = event.offsetX;
    const y = event.offsetY;
    if (!painting) {
        ctx.beginPath(); // path는 선이다, path를 만들면 마우스의 x,y, 좌표로 path를 옮긴다
        ctx.moveTo(x, y);
      } else {
        ctx.lineTo(x, y); // lineTo는 path의 이전 위치에서 지금 위치까지 선을 만드는 것
        ctx.stroke();
      } // lineTo()와 stroke()는 마우스를 움직이는 내내 발생한다! 마우스를 움직이는 동안 계속 발생한다!
}

function handleModeClick() {
    if (filling === true) {
        filling = false;
        mode.innerText = "Fill";
      } else {
        filling = true;
        mode.innerText = "Paint";
      }
  }


function onMouseUp(event){
    painting = false;
}

function onMouseLeave(event){
    painting = false;
}

function handleRangeChange(event) {
    const size = event.target.value;
    ctx.lineWidth = size;
  }

function handleColorClick(event) {
    const color = event.target.style.backgroundColor;
    ctx.strokeStyle = color; // strokeStyle이 target에 있는 색상이 된다!
    ctx.fillStyle = color;
  }

  function handleCanvasClick() {
    if (filling) {
      ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
    }
  }

if(canvas){
    canvas.addEventListener("mousemove", onMouseMove);
    canvas.addEventListener("mousedown", startPainting);
    canvas.addEventListener("mouseup", stopPainting);
    canvas.addEventListener("mouseleave", stopPainting);
    canvas.addEventListener("click", handleCanvasClick);
}

Array.from(colors).forEach(color =>
    color.addEventListener("click", handleColorClick)
  );
  
if (range) {
    range.addEventListener("input", handleRangeChange);
}

if (mode) {
    mode.addEventListener("click", handleModeClick);
  }

app.js가 이렇게 된다!

더 자세하게 알고 싶으면 아래 사이트를 참고하면 문서로 잘 설명되어 있다!!

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial

캔버스 튜토리얼 - Web API | MDN

developer.mozilla.org