<h1>영속성 컨텍스트 - 동작방식</h1><ul><li><p>EntityManager.persist() 를 통해 영속 객체를 컨텍스트에 등록하면 우선적으로 해당 영속 객체는 1차 캐시에 저장되고 트랜잭션이 commit 되는 시점에 insert 쿼리가 데이터베이스에 반영된다</p></li><li><p>EntityManager.find() 를 통해 데이터를 조회하면 우선적으로 1차 캐시 내에서 해당 영속 객체를 찾고 없다면 select 쿼리를 통해 데이터베이스에서 조회한다</p></li></ul><hr><h1>영속성 컨텍스트 - 변화 감지</h1><ul><li><p>영속성 컨텍스트를 통해 관리되는 영속 객체는 객체의 상태 변경에 따라 update 쿼리가 생성되고 (sql 저장소) commit 시점에 데이터베이스에 반영된다</p></li><li><p>영속 객체의 변경 사항은 1차 캐시의 스냅샷을 통해 판별한다</p><ul><li><p>영속 객체의 상태가 변경되면 1차 캐시의 스냅샷과 비고 -&gt; 다르다면 update 쿼리를 생성해 sql 저장소에 저장 -&gt; 반영</p></li></ul></li></ul><hr><h1>영속성 컨텍스트 - flush</h1><ul><li><p>flush는 영속성 컨텍스트의 내용을 데이터베이스와 동기화 하는 것을 의미한다</p></li><li><p>3가지 방식</p><ul><li><p>EntityManager.flush() 를 직접 호출</p></li><li><p>트랜잭션의 commit을 통해 자동으로</p></li><li><p>JPQL 쿼리 실행을 통해 자동으로</p></li></ul></li><li><p>flush를 실행한 후에도 영속성 컨텍스트의 내용은 그대로 유지된다</p></li></ul><blockquote><p>flush에 대해서는 조금 더 이해가 필요한 것 같음</p></blockquote><hr><h1>flush와 commit의 차이 (+ 11/19)</h1><ul><li><p>flush가 데이터베이스와 동기화 하는 것을 의미하는데 flush를 통해 동기화를 하지만 commit을 하지 않으면 실제 DB에는 반영이 되지 않는 것을 확인했다</p><ul><li><p>실행한 자바 프로그램에서는 반영이 되었지만 H2 콘솔프로그램이 바라보는 DB에서는 반영이 되지 않았다</p></li><li><p>의아했던 부분은 왜 실제 DB에는 반영이 안 되었는지와 commit을 해야만 실제 DB에 반영이 되는데 commit을 하게 되면 flush도 실행된다고 해서 그럼 flush는 굳이 왜 사용하는지가 이해되지 않았다</p></li></ul></li></ul><h3>flush</h3><ul><li><p>영속성 컨텍스트의 변경 내용을 데이터베이스에 반영하는 작업 (동기화)</p></li><li><p>SQL 쿼리는 DB로 전송되지만 해당 트랜잭션이 commit 되지 않으면 최종 반영은 되지 않는다</p><ul><li><p>즉 변경된 사항은 DB 트랜잭션에 머물러있는 상태이지만 영구적인 저장 (영속화)은 되지 않는 상태</p></li></ul></li><li><p>flush가 필요한 이유는 영속성 컨텍스트의 쓰기 지연 메커니즘 때문에 필요</p><ul><li><p>JPA는 변경사항에 대해 실시간으로 즉시 DB에 반영하지 않고 최적화된 SQL을 한번에 전송하기 위해서 쓰기 지연을 사용한다</p><ul><li><p>트랜잭션 안에서 발생되는 SQL 쿼리를 쓰기 지연 SQL 저장소에 저장하고 한번에 전송한다고 이해했음</p></li></ul></li><li><p>변경 감지(Dirty Checking)를 수행</p></li></ul></li><li><p>flush가 실행될 때 SQL 저장소에 있는 쿼리를 데이터베이스로 전송된다</p><ul><li><p>전송된 SQL은 데이터베이스 트랜잭션 버퍼라는 곳에 기록은 되지만 commit 전까지는 확정이 아니다</p></li></ul></li></ul><h3>commit</h3><ul><li><p>해당 트랜잭션을 종료하고 변경 사항을 DB에 영구 반영한다</p><ul><li><p>데이터베이스 트랜잭션을 확정한다</p></li></ul></li></ul><blockquote><p>즉, flush는 SQL을 데이터베이스로 보내는 작업이고, commit은 데이터베이스에 변경 내용을 최종 반영하는 작업</p></blockquote><blockquote><p>변경 감지(Dirty Checking)</p><ul><li><p>flush 시점에 자동으로 수행</p></li><li><p>영속성 컨텍스트 1차 캐시에 있는 영속 상태의 객체와 데이터베이스 내 초기 상태를 비교하여 변경 사항이 있다면 적절한 SQL을 생성하여 SQL 저장소에 저장</p></li></ul><p>변경 감지의 원리</p><ol><li><p>영속 상태로 관리되는 객체의 초기 상태를 스냅샷으로 저장한다</p><ul><li><p>persist() 호출 시 비영속 객체를 영속성 컨텍스트에 등록하며 이때 초기 상태를 내부적으로 저장한다 (스냅샷)</p></li></ul></li><li><p>트랜잭션 내에서 객체가 변경되었는지 확인한다</p><ul><li><p>트랜잭션 종료 전 flush() 시점에 스냅샷과 현재 영속 객체의 상태를 비교한다</p></li></ul></li><li><p>변경 사항이 있다면 적절한 SQL을 생성한다</p><ul><li><p>변경된 필드에 대해 수정 또는 삭제 쿼리를 생성해서 SQL 저장소에 추가한다</p></li></ul></li></ol></blockquote><h3>의문점에 대한 정리</h3><ul><li><p>Q. 실행한 자바 프로그램에서는 반영이 되었지만 H2 콘솔프로그램이 바라보는 DB에서는 반영이 되지 않았다, 왜 실제 DB에는 반영이 안 되었는지</p><ul><li><p>A. 둘은 서로 다른 트랜잭션을 가지고 있기 때문.</p><ul><li><p>트랜잭션의 원칙 중 격리성에 해당되는 것으로 이해했는데 서로 다른 트랜잭션이기 때문에 자바 프로그램의 트랜잭션이 commit (확정)되지 않았기 때문에 DB 트랜잭션에서는 볼 수 없음</p></li></ul></li></ul></li><li><p>Q. commit을 해야만 실제 DB에 반영이 되는데 commit을 하게 되면 flush도 실행된다고 해서 그럼 flush는 굳이 왜 사용하는지가 이해되지 않았다</p><ul><li><p>A. 둘의 역할이 분명하게 다르다</p><ul><li><p>flush는 변경 사항을 데이터베이스로 전송하므로써 데이터베이스의 트랜잭션 버퍼에 저장만 해두고 (기록)</p><ul><li><p>flush를 명시적으로 호출해도 무방하다고 하지만 권장하지는 않는다는다는 것 같다</p></li><li><p>JPQL 같은 경우 해당 트랜잭션 내에서는 DB와 일관성을 가져야 수행이 되는 작업이라 자동으로 flush가 선행되는 것 같다 -&gt; 이것은 아직 추측..</p></li></ul></li><li><p>commit은 이를 확정할지 rollback 처리하여 취소시킬지를 결정한다</p><p></p></li></ul></li></ul></li></ul>

영속성 컨텍스트 - 동작방식EntityManager.persist() 를 통해 영속 객체를 컨텍스트에 등록하면 우선적으로 해당 영속 객체는 1차 캐시에 저장되고 트랜잭션이 commit 되는 시점에 insert 쿼리가 데이터베이스에 반영된다EntityManager.find() 를 통해 데이터를 조회하면 우선적으로 1차 캐시 내에서 해당 영속 객체를 찾고 없다

JPA - 영속성 컨텍스트 (flush와 commit의 차이)

<img src="https://image.until.blog/until/article/1725700507876.png" data-width="100%" data-align="center" alt="until-1322"><p>안녕하세요. 몰댄민입니다. 언틸 업데이트 사항을 알려드릴게요.</p><h1>아티클 모달 UI가 개선되었어요</h1><p>피드에서 아티클을 볼 때 아티클 상세로 바로 이동할 수 있었으면 좋겠다는 요청이 많았어요.</p><p>사실.. 이전에도 아티클 제목을 누르면 아티클 상세 페이지로 이동이 가능했었는데요. 이 기능이 유저에게 직관적이지 않다고 판단했어요.</p><img src="https://image.until.blog/until/article/1725701544361.gif" data-width="100%" data-align="center" alt="until-1324"><p>때문에 아티클 모달에 간단한 헤더를 추가해 직관적으로 상세페이지로 이동할 수 있도록 개선했어요.</p><p>앞으로도 많은 피드백 부탁드립니다!</p><h1>누가 리액션을 남겼는지 볼 수 있어요</h1><p>이전에는 리액션을 남겨도 누가 남긴 것인지 알림이 아니면 알 수가 없었는데요.🥲</p><p>이제 리액션 영역에 마우스를 올려놓으면 누가 리액션을 남겼는지 확인할 수 있도록 툴팁을 추가했어요.</p><img src="https://image.until.blog/until/article/1725700873621.gif" data-width="100%" data-align="center" alt="until-1323"><h1>아티클에 컬렉션 정보가 추가되었어요</h1><p>그동안 컬렉션으로 아티클을 분류해도 해당 아티클이 어떤 컬렉션인지 인지하기가 어려웠어요.</p><p>이를 개선하기 위해 아티클 리스트와 아티클 상세페이지에 컬렉션 정보를 추가했어요.</p><img src="https://image.until.blog/until/article/1725701773006.gif" data-width="100%" data-align="center" alt="until-1325"><h1>Latex 문법을 지원해요</h1><p>이제 Latex을 사용할 수 있어요! 사용하는 방법은 Markdown에서 Latex를 사용하는 것과 동일해요.</p><img src="https://image.until.blog/until/article/1725702175192.gif" data-width="100%" data-align="center" alt="until-1326"><h1>그 외 수정사항</h1><ul><li><p>팔로워 랭킹이 추가되었어요.</p></li><li><p>코드블록 스타일이 개선되었어요.</p></li><li><p>그 외 여러 버그를 고쳤어요.</p></li></ul><h1>기타</h1><ul><li><p>서비스에 대한 건의사항은 커뮤니티 또는 댓글 등 편한 곳으로 알려주세요. 감사합니다!</p></li></ul><p></p>

피드 UI 개선, 리액션 기능, 컬렉션 추가 등이 추가되었어요.

24.09.07 업데이트 내역

📱 Webview

<p>웹뷰 페이지를 만들다보면 종종 비디오를 배경으로 사용하는 경우들이 존재했었다.</p><p>그런 경우 보통 비디오를 absolute로 뒤에 깔아주고, 그 위에 컨텐츠를 표시하는 방식으로 구현하곤 했었다. (아래는 예시코드입니다.)</p><pre spellcheck="false"><code class="language-typescript">const Header: FC = () =&gt; {
  return (
    &lt;section css={wrapperStyle}&gt;
      &lt;video
        css={backgroundStyle}
        autoPlay
        src={headerBg}
        poster={headerBgPoster}
        playsInline
        muted
      /&gt;
      &lt;div css={contentStyle}&gt;
        {/* 컨텐츠 영역 */}
      &lt;/div&gt;
    &lt;/section&gt;
  );
};

export default Header;

const backgroundStyle = css`
  position: absolute;
  inset: 0;
  z-index: -1;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
`;</code></pre><p>실제 크롬에서도 정상동작하고 모바일기기에서 테스트했을 때에도 잘 동작해서 아무런 문제가 없을 줄 알았다.</p><h2>문제 상황</h2><p>...하지만 iOS기기에서 저전력모드가 활성화 되어있는 경우 배터리 소모에 영향을 줄수 있는 이유로 비디오 자동재생을 막아두었다.</p><p>때문에 비디오는 자동재생되지 않고 재생버튼을 표시하게 되는데, 이때 뒷배경에 비디오를 깔아두게 되면 재생버튼을 누를 수도 없는 상황이 발생하게 되었다.</p><img src="https://image.until.blog/morethanmin/article/1732950179431.png" data-width="50%" data-align="center" alt="2377"><h2>해결방안</h2><p>위 이슈를 대응하면서 고민했던 여러 해결방안을 정리해보려고한다. 이 글을 보고 계신분들도 상황에 맞는 적절한 방법으로 해결하길 바란다.</p><h3>강제로 자동재생 시키기</h3><p>우선 iOS 정책을 우회할 수 있는 방법이 있는지 찾아보았다.</p><p>여러 방법을 찾아본 결과, 컨텐츠가 렌더링 되자마자 아무런 인터렉션도 없이 <strong>자동재생하도록 우회하는것은 불가능하다</strong>는 결론이였다.</p><p>또한 이러한 방법이 가능하더라도 <strong>저전력 모드 유저에게 비디오를 강제로 재생하는 방법이 좋은 경험일지도</strong> 충분히 고려해봐야 할 것이다.</p><h3>비디오 대신 GIF, lottie 등으로 변경하기</h3><p>위 케이스에서는 많은 용량을 차지하고있는 에셋이여서 패스했다. 하지만 이런 방법도 상황에 따라 나쁘지 않은 방법이니 한번 고려해보는것도 나쁘지 않을 것이다.</p><h3>유저가 클릭하면 재생할 수 있도록 대응하기</h3><p>위 케이스에서도 css를 수정하여 비디오를 클릭해 재생할 수 있도록 수정할 수 있지만, 배경 이미지 처럼 동작하기를 기대했던 영역을 클릭해서 재생하는 것은 기획자의 의도에 맞지도 않고, 유저 경험도 어색할 것이라고 생각했다.</p><p>배경으로서 역할을 하는 비디오 컨텐츠가 아니라면 가장 저전력모드의 의도에 맞는 방법일 것이다.</p><h3>저전력 모드인 경우, 비디오 대신 이미지로 대체하기</h3><p>배경의 역할을 하는것이니, 재생할 수 없는 환경인 경우에는 이미지로 대체할 수 있도록 대응하는 방법이다.</p><p>실제로 재생이 가능한지를 확인하는 방법은 다양하겠지만, 우선 비디오 뒤에 동일한 이미지를 깔아두고 비디오가 재생을 트리거 했을 때, 재생이 불가능한 환경인 경우 에러를 뱉는걸을 활용해 이미지를 표시할 수 있도록 <code spellcheck="false">display: none</code> 으로 변경해주었다.</p><pre spellcheck="false"><code class="language-typescript">const Header: FC = () =&gt; {

  return (
    &lt;section css={wrapperStyle}&gt;
      &lt;img css={backgroundStyle} src={headerBgPoster} /&gt;
      &lt;video
        ref={(el) =&gt; {
          void el?.play().catch(() =&gt; {
            el.style.display = "none";
          });
        }}
        css={backgroundStyle}
        autoPlay
        src={headerBg}
        poster={headerBgPoster}
        playsInline
        muted
      /&gt;
      &lt;div css={contentStyle}&gt;
        {/* 컨텐츠 영역 */}
      &lt;/div&gt;
    &lt;/section&gt;
  );
};

export default Header;

const backgroundStyle = css`
  position: absolute;
  inset: 0;
  z-index: -1;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
`;</code></pre><p>이제 아래사진처럼 이미지로 대체할 수 있게 되었다.</p><img src="https://image.until.blog/morethanmin/article/1732951648286.png" data-width="50%" data-align="center" alt="2378"><p>이런 이슈를 대응하는 것에 정답은 없지만, 유저의 경험을 해치지 않으면서 기획의 의도를 잘 지킬 수 있는 방법을 항상 고민하고 생각해봐야겠다고 느꼈다.</p><p>이글을 보고 계신 분들에게도 도움이 되었으면 좋겠습니다. 감사합니다!</p><p></p>

iOS 저전력모드에서 비디오가 자동재생 되지 않는 경우에 대한 생각과 여러 해결방안을 공유합니다.

iOS 저전력 모드에서 safari 비디오 자동재생 되지 않는 이슈 대응하기

<img src="https://image.until.blog/until/article/1730044390230.png" data-width="100%" data-align="center" alt="1922"><p>안녕하세요! 몰댄민입니다. 이번에는 에디터에 많은 기능들이 개선되었는데요.</p><p>어떤 기능이 추가되었는지 빠르게 알려드릴게요.</p><p></p><h2>🔗 링크 북마크 기능</h2><p>이제 북마크의 형태로 링크를 달아둘 수 있게 되었어요. 본인이 원하는 링크를 붙여넣고 북마크를 선택하면 돼요. 결과물은 아래와 같아요!</p><a data-type="bookmark" href="https://until.blog/" target="_blank"><div class="content"><div><div class="title">until - 성장에 진심인 메이커를 위한 블로그</div><div class="description">성장에 진심인 메이커를 위한 블로그. 다른 사람들과 함께 성장해요.</div></div><div class="href">https://until.blog/</div></div><img src="https://until.blog/og.png"></a><a data-type="bookmark" href="https://www.youtube.com/" target="_blank"><div class="content"><div><div class="title">YouTube</div><div class="description">YouTube에서 마음에 드는 동영상과 음악을 감상하고, 직접 만든 콘텐츠를 업로드하여 친구, 가족뿐 아니라 전 세계 사람들과 콘텐츠를 공유할 수 있습니다.</div></div><div class="href">https://www.youtube.com/</div></div><img src="https://www.youtube.com/img/desktop/yt_1200.png"></a><a data-type="bookmark" href="https://www.naver.com/" target="_blank"><div class="content"><div><div class="title">네이버</div><div class="description">네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요</div></div><div class="href">https://www.naver.com/</div></div><img src="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png"></a><p></p><h2>📄 작성 페이지 이탈 방지 기능</h2><p>간혹 아티클을 작성하다 실수로 페이지를 나가게 되어서 작성하던 정보가 모두 날라갔다는 피드백이 있었는데요. 이런 불상사를 방지하기 위해 이탈시 확인 모달을 표시하는 기능을 추가했어요.</p><img src="https://image.until.blog/until/article/1730046652999.gif" data-width="100%" data-align="center" alt="1924"><p></p><h2>🖼️ 썸네일 설정 기능</h2><p>아티클을 작성하다가 썸네일에 적용하고싶은 이미지가 있다면 이미지 우측 하단에 <code spellcheck="false">썸네일로 설정</code> 버튼을 통해 간편하게 썸네일을 설정할 수 있게 되었어요.</p><img src="https://image.until.blog/until/article/1730046713458.gif" data-width="100%" data-align="center" alt="1925"><p></p><h2>🎨 에디터 UI 개선</h2><p>에디터의 전체적인 UI를 개선했어요. 이제 각 버튼에 마우스를 올리면 어떤 기능인지, 단축키는 무엇인지 표시해요.</p><img src="https://image.until.blog/until/article/1730046861215.png" data-width="75%" data-align="center" alt="1926"><p></p><h2>🖼️ 이미지 사이즈 조정 기능</h2><p>그동안은 이미지 사이즈 조절이 불가능해서 작은 이미지도 크게 적용되었는데요.. 이제 이미지 사이즈도 조절할 수 있도록 개선했어요.</p><img src="https://image.until.blog/until/article/1730046982581.png" data-width="100%" data-align="center" alt="1927"><p></p><h2>🔔 알림 기능 고도화</h2><p>새로운 알림이 몇개 있는지 쉽게 볼수 있는 Indicator를 추가했어요. 그리고 <code spellcheck="false">모두 읽음</code>, <code spellcheck="false">모두 삭제</code> 버튼도 추가해서 쉽게 알림을 확인하고 지울 수 있게 되었어요.</p><img src="https://image.until.blog/until/article/1730047134580.png" data-width="75%" data-align="center" alt="1928"><p></p><h2>그 외 수정사항</h2><ul><li><p>아티클 모달 UI 개선</p></li><li><p>모바일에서 접속했을 때 모달이 깨지는 현상 수정</p></li><li><p>검색 엔진 최적화 작업</p></li><li><p>마이너한 오류 수정</p></li></ul><p>필요한 기능이나 오류가 있다면 댓글 또는 커뮤니티로 제보해주세요. 그 외에 궁금한 부분들도 편하게 여쭤봐주세요. 감사합니다!</p><p></p>

에디터 기능이 고도화 되었어요. 😎

🪟 Window

🧑‍💻 Develop

<blockquote><p>배포한 결과물은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://keeeep.web.app/">https://keeeep.web.app</a> 에 접속하면 확인해볼 수 있어요.</p></blockquote><p>react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)</p><p>언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 무료로 사용할 수 있어서 간단하게 소개해보겠습니다.</p><p>위에 소개한 앱은 database또한 firebase로 만들어진 todo 앱인데요, database를 연동하는것은 추후에 소개해볼게요.</p><h1>배포하기</h1><h2>프로젝트 생성</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://console.firebase.google.com/">https://console.firebase.google.com/</a> 에 접속해 프로젝트를 생성해주세요. </p><p>애널리틱스 연동은 필요에 따라 선택해주시면 돼요.</p><p>생성해주셨다면 <strong>빌드 &gt; 호스팅</strong> 메뉴를 선택해 시작하기를 눌러주세요.</p><img src="https://image.until.blog/morethanmin/article/1722157087360" alt="until-959"><h2>firebaes cli 설치</h2><p>가이드에 따라 firebase-cli를 설치해주세요.</p><pre spellcheck="false"><code class="language-bash">npm install -g firebase-tools</code></pre><p><code spellcheck="false">웹 앱에 Firebase 자바스크립트 SDK를 추가하는 단계도 표시합니다.</code> 는 호스팅만 하는 경우에는 필요하지 않으니 꼭 체크하지 않으셔도 괜찮아요.</p><h2>firebase init</h2><p>배포하고자 하는 app의 root directory에서 아래 커맨드를 순차적으로 입력해주세요.</p><pre spellcheck="false"><code class="language-bash">firebase login

firebase init</code></pre><p>init 입력시 아래와 같이 나오는데, Hosting이 목적이므로 <code spellcheck="false">Hosting</code> 선택. </p><img src="https://image.until.blog/morethanmin/article/1722157605095" alt="until-960"><p>프로젝트를 만들었으므로 <code spellcheck="false">Use an existing project</code> 선택.</p><img src="https://image.until.blog/morethanmin/article/1722157665078" alt="until-962"><p><code spellcheck="false">npm run build</code> 입력시 생성되는 react app의 빌드 디렉터리를 입력 해주시면 됩니다. 기본적으로 <code spellcheck="false">build</code> 폴더에 빌드되기 때문에 <code spellcheck="false">build</code> 를 입력해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722157807152" alt="until-963"><p>리액트는 기본적으로 single-page-application이기에 <code spellcheck="false">y</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157882041" alt="until-964"><p>Github과 연동하지는 않을 것이므로 <code spellcheck="false">N</code> 입력.</p><img src="https://image.until.blog/morethanmin/article/1722157930986" alt="until-965"><p>기존 index.html을 덮어씌울것이냐고 물어보는데, <code spellcheck="false">N</code>입력.</p><img src="https://image.until.blog/morethanmin/article/1722158011014" alt="until-966"><p>그러면 아래와 같이 설정파일들이 생성돼요.</p><img src="https://image.until.blog/morethanmin/article/1722158178162" alt="until-967"><h2>빌드 스크립트 추가하기</h2><p>이제 <code spellcheck="false">firebase deploy</code> 만 입력하면 바로 배포가 되는데요, 조금더 편리하게 배포할 수 있도록 <code spellcheck="false">package.json</code>에 스크립트를 추가해보겠습니다.</p><p>우선, <code spellcheck="false">npm install -D firebase-tools</code> 을 입력해 cli를 프로젝트에 설치해줍시다.</p><p>이후 아래와 같이 deploy 스크립트를 추가해주었어요.</p><img src="https://image.until.blog/morethanmin/article/1722158413570" alt="until-968"><p>이제 <code spellcheck="false">npm run deploy</code>만 입력해주면 빌드 후 배포됩니다. 콘솔에 나와있는 url에 접속하면 배포된 것을 확인할 수 있어요. </p><h1>*.web.app 도메인 주소 변경하기</h1><p>만약 본인이 *.web.app 기반의 다른 도메인 주소로 변경하고 싶다면 <code spellcheck="false">호스팅 &gt; 사이트 추가</code> 에서 원하는 도메인을 입력해주시면 무료로 도메인도 변경할 수 있어요.</p><img src="https://image.until.blog/morethanmin/article/1722158725214" alt="until-969">

배포한 결과물은 https://keeeep.web.app 에 접속하면 확인해볼 수 있어요.react를 무료로 배포할 수 있는 다양한 호스팅 서비스들이 존재합니다. (github, netlify 등등)언급한 두 서비스 외에 firebase로도 배포할 수 있다는 사실 알고 계셨나요? 심지어 firebase로 배포하면 *.web.app 이라는 유니크한 도메인도 