Java Server Pages = 자바 웹 프로그램 = 자바 기반의 서버 측 웹 프로그래밍 언어 = 자바 백/프엔 다 가능

  "use client"

  import * as React from "react"
  import * as DialogPrimitive from "@radix-ui/react-dialog"
  import { XIcon } from "lucide-react"

  import { cn } from "@/lib/utils"

  function Dialog({
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Root>) {
    return <DialogPrimitive.Root data-slot="dialog" {...props} />
  }

  function DialogTrigger({
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
  }

  function DialogPortal({
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
  }

  function DialogClose({
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Close>) {
    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
  }

  function DialogOverlay({
    className,
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
    return (
      <DialogPrimitive.Overlay
        data-slot="dialog-overlay"
        className={cn(
          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
          className
        )}
        {...props}
      />
    )
  }

  function DialogContent({
    className,
    children,
    showCloseButton = true,
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Content> & {
    showCloseButton?: boolean
  }) {
    return (
      <DialogPortal data-slot="dialog-portal">
        <DialogOverlay />
        <DialogPrimitive.Content
          data-slot="dialog-content"
          className={cn(
            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
            className
          )}
          {...props}
        >
          {children}
          {showCloseButton && (
            <DialogPrimitive.Close
              data-slot="dialog-close"
              className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
            >
              <XIcon />
              <span className="sr-only">Close</span>
            </DialogPrimitive.Close>
          )}
        </DialogPrimitive.Content>
      </DialogPortal>
    )
  }

  function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
    return (
      <div
        data-slot="dialog-header"
        className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
        {...props}
      />
    )
  }

  function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
    return (
      <div
        data-slot="dialog-footer"
        className={cn(
          "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
          className
        )}
        {...props}
      />
    )
  }

  function DialogTitle({
    className,
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Title>) {
    return (
      <DialogPrimitive.Title
        data-slot="dialog-title"
        className={cn("text-lg leading-none font-semibold", className)}
        {...props}
      />
    )
  }

  function DialogDescription({
    className,
    ...props
  }: React.ComponentProps<typeof DialogPrimitive.Description>) {
    return (
      <DialogPrimitive.Description
        data-slot="dialog-description"
        className={cn("text-muted-foreground text-sm", className)}
        {...props}
      />
    )
  }

  export {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogOverlay,
    DialogPortal,
    DialogTitle,
    DialogTrigger,
  }

function DialogContent({
  className,
  children,
  showCloseButton = true,
  ...props
}: React.ComponentProps<typeof DialogPrimitive.Content> & {
  showCloseButton?: boolean
}) {
  return (
    <DialogPortal data-slot="dialog-portal">
      <DialogOverlay />
      <DialogPrimitive.Content
        .....

• DialogContent 안에서 DialogPortal을 자동으로 사용하고 있음

  ⇒ shadcn/ui의 디자인 패턴

Portal의 장점들

1. DOM 계층 구조 탈출: 다이얼로그가 현재 컴포넌트의 DOM 위치와 관계없이 document.body에 렌더링됨
2. z-index 문제 해결: 부모 요소의 overflow: hidden이나 z-index 제약을 받지 않음
3. 접근성 향상: 스크린 리더가 다이얼로그를 올바르게 인식하고 포커스 관리가 개선됨
4. CSS 스타일링 독립성: 부모 컴포넌트의 CSS 스타일에 영향받지 않음

모노레포(Monorepo)는 단일(Mono) 저장소(Repository)의 줄임말

소프트웨어 개발에서 관련된 여러 프로젝트의 소스 코드를 하나의 버전 관리 저장소에 모두 모아 관리하는 전략을 의미

이는 각 프로젝트마다 별도의 저장소를 사용하는 '폴리레포(Polyrepo)' 방식과 대조됨

과거에는 거대한 단일 애플리케이션을 의미하는 '모놀리식(Monolithic)'과 혼동되기도 했지만, 모노레포는 여러 개의 개별 프로젝트가 잘 정의된 관계를 가지고 한곳에 모여 있는 형태라는 점에서 차이가 있음

모노레포의 주요 특징 및 장점

모노레포는 여러 프로젝트를 한곳에서 관리함으로써 다양한 이점을 제공함

• 코드 공유 및 재사용 용이: 모든 코드가 한곳에 있어 공통 라이브러리나 컴포넌트를 쉽게 공유하고 재사용할 수 있습니다. 이는 코드 중복을 줄이고 일관성을 유지하는 데 도움이 됩니다.
• 원자적 커밋(Atomic Commits): 여러 프로젝트에 걸친 변경 사항을 단일 커밋으로 묶을 수 있습니다. 예를 들어, API와 클라이언트의 변경이 동시에 필요한 경우, 하나의 커밋으로 처리하여 두 프로젝트 간의 동기화를 보장하고 잠재적인 오류를 방지할 수 있습니다.
• 간소화된 의존성 관리: 모든 프로젝트가 동일한 저장소에 있으므로 외부 라이브러리의 버전을 통일하기 쉽습니다. 이로 인해 '의존성 지옥(Dependency Hell)'과 같은 복잡한 버전 충돌 문제를 피할 수 있습니다.
• 향상된 협업 및 투명성: 모든 개발자가 전체 코드베이스에 접근할 수 있어 팀 간의 협업이 원활해지고, 다른 팀의 작업을 쉽게 확인하며 지식을 공유할 수 있습니다.
• 통합된 개발 환경 및 도구: 모든 프로젝트에 동일한 빌드, 테스트, 배포 도구를 적용하기 용이하여 개발 환경을 표준화하고 유지보수 비용을 절감할 수 있습니다.

단점 및 고려사항

도입 시 신중한 고려가 필요

• 저장소 크기 및 성능 저하: 프로젝트 수가 늘어날수록 저장소의 전체 크기가 커져 처음 저장소를 복제(clone)하는 데 시간이 오래 걸릴 수 있으며, Git과 같은 버전 관리 시스템의 성능에 영향을 줄 수 있습니다.
• 빌드 및 테스트 시간 증가: 코드베이스가 커짐에 따라 모든 프로젝트를 빌드하고 테스트하는 데 걸리는 시간이 길어질 수 있습니다. 이를 해결하기 위해 영향을 받은 프로젝트만 선택적으로 빌드하는 등의 최적화된 도구(예: Bazel, Nx)가 필요합니다.
• 복잡성 증가: 저장소 내의 프로젝트가 많아질수록 전체 구조를 파악하고 관리하는 것이 복잡해질 수 있습니다. 명확한 디렉토리 구조와 규칙 설정이 중요합니다.
• 접근 제어의 어려움: 기본적으로 모든 코드에 대한 접근이 가능하므로, 특정 프로젝트에 대한 접근 권한을 세밀하게 제어하기 어려울 수 있습니다.

모노레포 vs 폴리레포

모노레포를 사용하는 대표적인 기업

거대 테크 기업들을 중심으로 많은 곳에서 모노레포의 장점을 활용하고 있습니다.

• 구글 (Google): 거의 모든 소프트웨어의 소스 코드를 거대한 단일 모노레포에서 관리하는 것으로 유명합니다. 이를 위해 자체 버전 관리 시스템인 '파이퍼(Piper)'와 빌드 시스템 '바젤(Bazel)'을 개발했습니다.
• 메타 (Meta / 구 Facebook): 페이스북, 인스타그램 등 주요 서비스의 코드를 모노레포에서 관리하며 빠른 개발 속도와 팀 간 협업을 도모하고 있습니다.
• 마이크로소프트 (Microsoft): 윈도우(Windows), 오피스(Office)와 같은 대규모 프로젝트에서 모노레포를 사용하여 코드베이스의 일관성과 협업 효율성을 높이고 있습니다.
• 트위터 (Twitter): 여러 핵심 서비스를 모노레포 환경에서 개발하고 있습니다.

결론적으로 모노레포는 여러 프로젝트가 긴밀하게 연관되어 있고, 코드 공유와 일관성 있는 개발 문화가 중요한 대규모 조직 및 프로젝트에 강력한 이점을 제공하는 개발 전략입니다. 하지만 성공적인 도입을 위해서는 그에 따른 기술적, 문화적 과제를 해결하기 위한 노력이 동반되어야 합니다.

asChild={true}일 때:

• Radix UI 컴포넌트가 자체 DOM 요소를 렌더링하지 않음
• 대신 자식 요소의 props를 받아서 그 자식 요소에 Radix UI의 기능을 전달
• 자식 요소가 실제 DOM 요소가 됨

asChild={false} 또는 생략할 때:

• Radix UI 컴포넌트가 자체 DOM 요소를 렌더링
• 추가적인 wrapper div가 생성됨

예시

// asChild={true} - Button이 실제 DOM 요소가 됨
<DialogTrigger asChild>
  <Button>열기</Button>
</DialogTrigger>

// asChild 없음 - 추가 div가 생성됨
<DialogTrigger>
  <Button>열기</Button>
</DialogTrigger>

차이점

• asChild 있음: <button>열기</button> (깔끔함)
• asChild 없음: <div><button>열기</button></div> (불필요한 wrapper)

따라서 asChild를 사용하면 불필요한 DOM 요소 없이 깔끔한 HTML 구조를 만들 수 있음

• 오류 코드

  
    dialog.tsx:38 <button> cannot contain a nested <button>.
  
    See this log for the ancestor stack trace.
  
    react-dom-client.development.js:4507 Uncaught Error: Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used:
  
    - A server/client branch `if (typeof window !== 'undefined')`.
    - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called.
    - Date formatting in a user's locale which doesn't match the server.
    - External changing data without sending a snapshot of it along with the HTML.
    - Invalid HTML tag nesting.
  
    It can also happen if the client has a browser extension installed which messes with the HTML before React loaded.
  
    https://react.dev/link/hydration-mismatch
  
    at throwOnHydrationMismatch (react-dom-client.development.js:4507:11)
  
    at beginWork (react-dom-client.development.js:10928:17)
  
    at runWithFiberInDEV (react-dom-client.development.js:872:30)
  
    at performUnitOfWork (react-dom-client.development.js:15677:22)
  
    at workLoopConcurrentByScheduler (react-dom-client.development.js:15671:9)
  
    at renderRootConcurrent (react-dom-client.development.js:15646:15)
  
    at performWorkOnRoot (react-dom-client.development.js:14940:13)
  
    at performWorkOnRootViaSchedulerTask (react-dom-client.development.js:16766:7)
  
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:45:48)

• 원인 ⇒ DialogTrigger 안에 Button 컴포넌트를 사용할 때 발생하는 HTML 중첩 문제

  = DialogTrigger는 이미 button 요소를 렌더링하는데, 그 안에 또 다른 button 요소인 Button 컴포넌트가 들어가서 발생하는 문제

• 해결 방법 ⇒ DialogTrigger에 asChild prop을 사용

  • 코드

      <Dialog>
          <DialogTrigger asChild>
              <Button>다이얼로그 열기</Button>
          </DialogTrigger>
          <DialogContent>
              <DialogHeader>
                  <DialogTitle>테스트 다이얼로그</DialogTitle>
                  <DialogDescription>이것은 Dialog 컴포넌트의 동작을 테스트하는 예시입니다.</DialogDescription>
              </DialogHeader>
              <div className="mt-4">
                  <p>여기에 원하는 내용을 넣을 수 있습니다.</p>
              </div>
              <DialogFooter>
                  <DialogClose asChild>
                      <div className="flex gap-2">
                          <Button variant="primary" outline={true}>
                              취소
                          </Button>
                          <Button variant="primary">확인</Button>
                      </div>
                  </DialogClose>
              </DialogFooter>
          </DialogContent>
      </Dialog>

주요 변경사항:

1. DialogTrigger에 asChild 추가: 이렇게 하면 DialogTrigger가 자체 button을 렌더링하지 않고, 자식 요소(Button)를 그대로 사용함

   2. DialogClose에도 asChild 추가: 마찬가지로 닫기 버튼도 중첩을 방지함
   3. Button 컴포넌트 사용: 커스텀 button 대신 프로젝트의 Button 컴포넌트를 사용

   이렇게 하면 HTML 중첩 문제가 해결되고 hydration 오류가 발생하지 않음

싸피에서 3번의 프로젝트를 끝냈습니다. 근데 아쉬움이 남아서 사이드 프로젝트를 시작했습니다. 기간은 2025.06.02 - 2025.06.11 (10일) 로 잡았구요. 사실 어제 시작했지만 회고는 오늘부터 쓸 예정입니다.

기획

AI 프롬프팅을 통한 답변 자동화 1:1 채팅 서비스

기술스택

• 프론트엔드 : React, TypeScript, Tailwind CSS, TenStack-Query(React-Query)
• 백엔드 : Spring Boot, Spring Security, OAuth2, JWT, JPA
• 데이터베이스 : MySQL, MongoDB
• 배포 및 운영 : AWS(EC2), AWS(S3), Docker, nginx, Jenkins
• 기타 : WebSocket, Kafka, STOMP.js, LangChain

회고

1. 오늘 작업한 거

노션 링크

• 기능 명세서
• API 명세서

2. 문제 발생했던 거 3. 해결 방법 + 배운 점

1) 왜 URL에 /api/를 붙이는가? "해당 URL이 웹사이트의 사용자 인터페이스(UI)가 아니라 API용 endpoint임을 명시하기 위해"

예시:

• /home → 일반 웹페이지 (HTML 렌더링)
• /api/home → 데이터만 주고받는 API

2) 왜 회원 관련 api 작성시, /user가 아니라 /users를 쓰는가? "RESTful API에서는 리소스를 명사형 복수로 표현하는 것이 표준 관례" 컬렉션(집합) 단위로 리소스를 표현하기 때문에

예시:

• /api/users → 사용자 목록 (GET), 사용자 생성 (POST) /users는 "사용자 목록"이라는 컬렉션
• /api/users/123 → 특정 사용자 (GET, PUT, DELETE) /users/123은 "사용자 중 ID가 123인 사람"이라는 단일 리소스

결론은... 둘다 관례적인 거다~

3) /pub 은 앞에 /app이 붙는데, /sub은 왜 안 붙지?

"Spring WebSocket/STOMP의 구조상 차이"

/app은 애플리케이션 목적지(application destination)의 접두사이고, /sub은 브로커 목적지(broker destination)의 접두사라서

STOMP 표준 패턴 /app/pub/chat-room/{chatroomId} /sub/chat-room-list/{userId}

4. 내일 할 거

• ERD
• ProtoType 겸 Mockup 겸 WireFrame
• 초기 세팅

타입 변수명 = "내용물";
=> null 불가
타입? 변수명 = "내용물";
=> null 가능

ex.
String name = "어찌고";
name = null;
print(name); => 에러 발생

String name2 = "저찌고";
name2 = null;
print(name2); => null 출력

print(name2!);
=> !의 의미 : 현재 변수의 값은 null이 아니다

final/const 타입 변수명
=> 변수 값 변경 불가

final/const (타입) 변수명
=> 타입 생략 가능

DateTime now = DateTime.now();

print(now);
=> 코드가 실행되는 순간의 시간

final => 가능
const => 불가능

무슨 차이?
BuildTime 값 = 실행되는 순간의 값
final => 알지 못해도 사용 가능
const => 모르면 사용 불가

아오 잠와.. 나중에 마저 쓸게요

이번 프로젝트에서 Flutter를 써보게 되었습니다.. 그래서 Dart 배워야 됨 팀원이 800페이지짜리 책 빌려줘서 눈물이 남.. 고마운데 두꺼워서..

여튼 그래서

다트가 뭐냐?

구글이 자바스크립트를 이겨먹기 위해 만든 프로그래밍 언어

그래서 이겼나?

다트 언어를 자바스크립트로 완전 컴파일 할 수 있는 정도에 그침

근데?

웹은 그랬지만, 모바일 영역에서 인기 쩐다 ㄷㄷ

특징

• UI 제작에 최적화
• 완전한 비동기 언어 & 이벤트 기반
• 아이솔레이트를 이용한 동시성 기능 제공
• Null 안전성, 스프레드 기능, 컬렉션 if문 등 효율적인 UI 코딩 기능 제공
• 핫 리로드를 통해 코드 변경 사항 -> 즉시 화면 반영
• 멀티 플랫폼에서 로깅 및 디버깅 가능
• AOT 컴파일 가능 -> 어떤 플랫폼이든 빠른 속도
• 백엔드 프로그래밍 지원

Redux가 state로 상태를 관리할 때 계속 props로 넘겨줘야되는데 그 과정에서 데이터가 훼손될 수도 있고, 일관성 유지가 어려울 수도 있음 => 컴포넌트가 여러 중첩 상태일 때 : 전역 상태를 사용하면 (= Redux씨를 사용하면) 필요한 컴포넌트에서 바로 데이터 가져오기 가능

어떻게 하냐?

store 라는 곳에 slice로 state를 관리함 = 전역에서 사용 가능!

대충 정리해보면..

slice : 계속 바뀌지만 모아두면 써먹을 데가 있는 데이터들 (북마크한 영화의 id) store : 영화 id, 좋아하는 과일 id... 이것저것 slice들의 모음 계속 바뀌는데 쓸모 있는 데이터만 모아서 그때 그때 갖다주는게 Redux씨 ㅇㅋ

덕스씨 피곤한 사람이네.. 회원 가입/로그인/수정 다 덕스씨께 드리자 슬라이스 안에 메서드(createUser/updateUser) 등등 써서 관리하면 될듯