<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>

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

🔗 링크 북마크 기능

📄 작성 페이지 이탈 방지 기능

🖼️ 썸네일 설정 기능

🎨 에디터 UI 개선

🖼️ 이미지 사이즈 조정 기능

🔔 알림 기능 고도화

그 외 수정사항