<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 이라는 유니크한 도메인도 

firebase로 react 배포하고 *.web.app 도메인 무료로 사용하기

포티

🖥 백엔드

Cotuber에 도입된 AI 자막 생성 기능이 어떤 과정을 거쳐 만들어졌는지 공유합니다.

우리 팀이 자동으로 자막을 생성하기까지

<img src="https://image.until.blog/grandff/article/1718942598885" alt="until-638"><p></p><h2>나처럼 육아에 바쁜 아빠들을 위한 앱.</h2><hr><p>주말에 아이랑 집에만 있으면 "정말" 시간이 안간다. 집밖에 아이와 갈만한 곳을 찾는 것도 생각보다 복잡하고 어려운 과제가 된다. 나같은 경우, 여러 포털사이트나 소셜미디어를 뒤져보곤 한다. 물론 유용한 정보를 자주 찾진 못했다. born to be 집돌이 태생이여서 어느 지역에 뭐가 유명한지도 모르고, 네비를 봐도 길을 헤매는 내가 여기가 어딘지 정확히 찾을리가... 이렇게 모르다 보니 장소를 찾는데도 시간이 많이 걸리고 후기까지 찾으면 주말이 다 지나가버렸다.</p><p>언제인지 기억은 안나지만, '어렸을 때부터 아이와 여행을 많이 다니고, 아빠의 육아참여가 자녀의 발달에 더 좋다'는 글을 봤다. 그래서인지 더더욱 아이와 어디 갈지를 고민하던 찰나에 나와 같은 생각을 가진 부모님들이 있지 않을까 싶었다. 아이와 함께 할 수 있는 활동에 관심이 많음에도 불구하고, 필요한 정보를 찾는 데 있어서 어려움을 겪는 경우가 많은 분들을 위한 서비스를 만들어볼까하고 시작한게 <strong>아랑아랑</strong> 프로젝트다. <strong>아이와 함께 갈 만한 여행지나 놀이 공간 정보를 모아 손쉽게 찾을 수 있는 앱</strong>을 목표로 시작하게 되었다.</p><p></p><h2>1인 팀 결성.</h2><hr><blockquote><p>나에겐 참 안타까운 일이지만 내 주변에 사이드 프로젝트를 하는 사람도 없고, 육아를 하는 사람도 없다. 강제로 1인 팀을 할 수 밖에 없었다.</p></blockquote><p>당시 회사에서 개발 사업이 WBS 기준 중후반 정도 왔을 때고, 개발 완료 시기까지 7개월 가량 남은 시점이었다. 아직 개발 사업이 진행 중이고, 육아와 집안일까지 해야해서 사이드 프로젝트에 사용할 시간을 그야말로 쥐어짜내야했었다. (출근 전 1시간, 점심시간 1시간, 애들 재우고 30분)</p><p></p><h2>시장분석.</h2><hr><blockquote><p>'<strong>오늘 하루</strong>' 갈 수 있는 여행지를 제공하되 공공데이터와 나만의 데이터를 결합하는 방향으로 잡았다.</p></blockquote><p>내가 생각하는 서비스는 시장에 이미 3~4개 정도 있었다. 장단점이 각각 있겠지만, 내가 주목한건 <strong>혼자서 만들고 운영할 수 있는 서비스인가</strong> 라는 것이다. 다른 서비스들처럼 주변 숙박업소의 할인정보를 제공하고, 예약 시 추가 할인 혜택을 주거나, SNS 홍보 자료도 작성하고.. 이런 작업을 본업을 하면서 하기엔 불가능인게 뻔했다. 그래서 아래처럼 방향을 잡고 시작했다.</p><h3>1. 무조건 당일 치기</h3><p>우리 가족은 일단 1박을 선호하지 않는다. 여름휴가나 겨울방학이나 특별한 시즌이 아니면 무조건 차로 갈 수 있는 당일치기 장소를 선호했다. 그래서 '오늘 하루'에 다녀올 수 있는 곳 위주로 정보 제공과 추천을 하려했고, 당연히 위치 정보 기반으로 서비스를 구성했다.</p><h3>2. AI 활용</h3><p>이번 사이드프로젝트를 하면서 유독 공공데이터를 많이 봤는데, 지자체마다 운영하는 공공데이터는 정확도가 너무 떨어졌다. 물론 관광공사에서 제공하는 데이터를 가지고 어느정도 활용이 가능했으나 실시간으로 변하는 정보(예를 들어 꽃구경이나 휴관일 정보 등)는 실시간 정보가 필요했다. 일일이 찾을 수는 없기에 자동화 프로세스가 필요했고, Langchain을 이용해 정보를 찾아 요약하는 프로세스를 구성했다.</p><h3>3. 디자인은 무리무리무리무리무리무리</h3><p>초등학생 때 미술학원을 다녔는데, 당시 선생님이 하셨던 말이 아직도 기억 난다.</p><p><em>" 색칠만 하면 그림이 이상해지네 ... ? "</em></p><p>색조합만 했다하면 카레가 똥이 되는 마법을 부렸고, 성인이 되어서도 나아지진 않았다. 그래서 디자인시스템을 참고하는 방향으로 했고, 스포카 디자인 가이드를 많이 참조했다. 화면은 와이어프레임만 그리고, dribble, mobbin, wwit 등 참고할만한 화면을 보면서 자체 디자인을 했다.</p><p></p><h2>시~작!</h2><hr><p>사이드 프로젝트가 처음은 아니지만 그렇다고 계속 유지해본 사이드 프로젝트가 있는 것도 아니였다. 지난번 부족한 점이 무엇인고하니 <strong><u>문서화</u></strong>를 전혀 하지 않았다. 그때만 하더라도 주니어(지금도 마음만은 주니어)여서 문서의 중요성을 얕잡아보고 코드만 바라보는 바보천치였다.</p><p>이번에는 동일한 실수를 하지 않겠다는 의미에서 기획부터 시작해서 사소한것 하나하나 문서로 시작해서 문서로 끝나는 작업을 많이 했다. 당시 회사 프로젝트가 진행 중이였고, 사이드 프로젝트 개발 기간이 길어지면 출시하기 어렵다고 판단해서 '<strong>8개월</strong>'로 개발 기간을 잡았다.</p><img src="https://image.until.blog/grandff/article/1718948390050" alt="until-641"><p>앱 이름은 '<strong>아빠와 아이가 함께 하는 여행</strong>' 이라는 의미로 '<strong>아랑아랑</strong>' 이라고 지었다.</p><img src="https://image.until.blog/grandff/article/1718948374179" alt="until-640"><p>지금 다시 보니 시스템 구성도가 참 저렴하게 그렸지만 아무튼 위와 같았다.</p><blockquote><h3>Front-end</h3><p>flutter를 사용하고 앱만 제공할거라 웹 버전은 고려하지 않았다.</p><h3>Back-end</h3><p>Spring Boot를 주로 사용하고 (MVC), LLM, 데이터 수집 등은 FastAPI를 사용했다.</p><h3>Cloud Infra</h3><p>최초 구축 시 NHN Cloud를 사용했고, CI/CD는 github action을 사용했다.</p></blockquote><p>개발하는 중간에 디자인을 바꿔 재개발하거나 테스트 중 발견한 수많은 오류 때문에 이거 진짜 가능? 이라는 생각까지 들었지만 정신 단디 차리고 최초 버전을 출시하는데 성공했다.</p><p></p><h2>아랑아랑 출시.</h2><hr><img src="https://image.until.blog/grandff/article/1718948746716" alt="until-642"><p>최초 출시 화면이다. 출시 후 노마드코더와 렛플에도 홍보글을 올렸다. 보통 내가 만든 서비스는 내 주변 지인한테 츄라이츄라이를 하는게 국룰이던데, 육아를 하는 사람이 나 혼자더라... 그래서 서비스 홍보를 직접 해야했었는데 이때부터 사이드 프로젝트를 벗어나 제2업무를 하게 된 것 같다. (그것도 수익이 거의 발생 안하는) 늘어나지 않는 사용자를 보며 추가 개발과 버그 수정을하며 앱을 계속 고쳐나갔다.</p><p></p><h2>출시 했다고 끝난게 아니란다.</h2><hr><h3>1. 비용 줄이기</h3><p>처음에 NHN Cloud로 백엔드 단을 배포해서 사용했는데, 유지비용이 너무 많이 들었다. 대안을 찾다보니 Serverless로 가능한 <strong>Google Cloud Run</strong>을 알게 되서 인프라를 이쪽으로 옮겼고, 현재까지도 만족하며 사용 중이다. Cloud Run에서 도커로 배포하는 옵션을 설정하면 레포지토리에 있는 도커파일을 읽어다가 자동으로 배포해줘서 특히 편했다.</p><h3>2. 직접 홍보하기</h3><p>홍보 채널을 찾으면서 인스타그램만한게 없었다. 인스타그램같은 SNS에서 여행지 정보 찾는걸 대체하기 위해 만들었지만 아이러니하게 홍보를 인스타그램에서 해야하는 상황이 왔다. 단순히 홍보 채널로만 이용하기엔 뭔가 심심한 면이 있어서 아이랑 다녀온 여행 후기도 같이 올리면서 아랑아랑의 창구로 사용하고 있다. 물론 인스타와 앱 서비스 운영을 병행하니 할일도 두배로 늘어났지만 이를 통해 유입되는 신규 사용자도 있어 홍보 효과를 톡톡히 봤다.</p><h3>3. UI/UX 개편</h3><p>최초 출시에는 여행지 카테고리가 20개였는데, 이게 사용자 입장에서 선택도 애매하고, 관리하는 입장에서도 확인 어려워 카테고리를 8개로 압축시켰다. 직접 사용을 계속 하다보니 사용자에게 계속 터치를 강요하는 UX로 구성되어 있었다. 그래서 사용자가 찾기 전에 서비스에서 위치나 취향에 맞게 데이터를 제공하는 방식으로 변경했다. 위치 기반은 유지하면서 날씨에 맞는 여행지를 추천하거나, 지역별로 특정 테마에 맞게 여행지를 취합해 정보를 제공하게 수정했다.</p><h3>4. AI 기능 강화</h3><p>처음에는 Chat-gpt를 사용해 해당 여행지 정보를 찾거나 검색 API를 사용해 정보를 요약하는 수준으로만 활용했는데, 할루시네이션 이슈가 심했고 답변을 생성하는데 너무 오래 걸렸다. 그래서 랭체인으로 사용자가 자주 접속하는 시간대 직전에 자주 찾는 여행지에 대한 최근 정보를 요약해서 제공하는 걸로 수정했다.</p><h3>5. 사용자 참여 유도</h3><p>사용자가 사용을 하지 않으면 아무리 질좋은 서비스라도 의미가 없기에 마일리지 서비스를 통해 활동에 대한 보상을 부여해서 참여를 유도했다.</p><p></p><h2>계속 개발하고 고치고 유지하며 느낀점.</h2><hr><img src="https://image.until.blog/grandff/article/1718950471330" alt="until-643"><img src="https://image.until.blog/grandff/article/1718950485876" alt="until-644"><p>마일리지 기능까지 추가하고나서야 최소한으로 구현이 필요한 것들은 모두 추가했다. 첫 출시 이후 7개월이나 더 시간을 썼으니 1년 넘게 운영하면서 개발을 해왔다. 아직까지 많은 유저수를 확보하진 못했지만 내가 끝까지 만들고 유지하는 서비스라 그런지 애착이 가서 끊임 없이 들여다보고 개선하고 있다.</p><p></p><p>이 사이드 프로젝트를 하면서 내 스스로 기회를 만들었다고 생각이 든다.</p><p>어떻게 하면 아이디어를 구체화할지, 어떻게 하면 더 효율적인 환경을 구축할지, 어떻게 하면 사용자들이 클릭하게 되는 서비스나 포스팅을 올릴지, 어떻게 하면 서비스 품질을 높일지.. 다양한 고민을 하면서 이것저것 찾아보게 되고, 보는 시야를 어제보다 더 넓어지는 기회를 얻었다고 생각한다.</p><p>나보다 훨씬 뛰어난 분들이 많아 감히 왈가왈부 하긴 그렇지만, 그래도 감히!! 말할 수 있다.</p><p><strong><u>사이드 프로젝트.. 당장해!!!</u></strong></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p><hr><p></p><p></p>

사이드프로젝트를 개발하고, 런칭하고, 운영하고, 개선하면서 느낀 점을 주저리주저리 적어봤습니다.

아랑아랑 개발 후기(+1년간 유지하면서)

<h2>도메인이 뭐냐면..</h2><blockquote><p>개발을 할때도 도메인, 데이터베이스 구조를 설계할 때도 도메인, 프로젝트 기획할때도 도메인, 여기저기서 다 도메인이라는 단어를 쓰는데 개념이 명확하지 않아 헷갈려서 정리해봤슴다</p></blockquote><h3>1. 프로젝트 구조(Architecture):</h3><ul class="tight" data-tight="true"><li><p>프로젝트 구조에서 도메인은 주요 <code spellcheck="false">비즈니스 개체</code>를 나타냅니다. 일반적으로 소프트웨어 시스템에서 도메인은 해당 시스템이 다루는 <code spellcheck="false">중요한 주제 영역</code>을 반영합니다. 도메인은 프로젝트의 핵심 부분이며, <code spellcheck="false">이를 기반으로 비즈니스 로직을 구현</code>하게 됩니다. 예를 들어, 전자상거래 웹 애플리케이션의 도메인은 상품, 주문, 사용자 등과 같은 주요 개체들로 구성될 수 있습니다.</p></li></ul><h3>2. 스프링(Spring):</h3><ul class="tight" data-tight="true"><li><p>스프링에서의 도메인은 주로 <code spellcheck="false">엔티티 클래스</code>로 표현됩니다. 엔티티 클래스는 데이터베이스의 테이블과 매핑되는 객체를 나타냅니다. 스프링 애플리케이션에서 도메인 클래스는 주로 비즈니스 로직을 구현하고, <code spellcheck="false">데이터베이스와의 상호 작용</code>을 담당합니다. 스프링의 ORM(Object-Relational Mapping) 기술인 Hibernate를 사용하면 도메인 객체와 데이터베이스 테이블 간의 매핑을 쉽게 구현할 수 있습니다.</p></li></ul><h3>3. 데이터베이스(Database):</h3><ul class="tight" data-tight="true"><li><p>데이터베이스에서의 도메인은 해당 <code spellcheck="false">데이터베이스가 다루는 데이터의 유형</code>을 정의합니다. 도메인은 데이터의 <code spellcheck="false">속성과 제약 조건을 정의</code>하는 데 사용됩니다. 예를 들어, 사용자 이름이나 이메일 주소와 같은 속성은 데이터베이스에서의 도메인에 해당할 수 있습니다. 또한 데이터의 유효성을 검사하기 위한 제약 조건(예: NOT NULL, UNIQUE)도 도메인에서 정의됩니다.</p></li></ul><h3>4. 기타 도메인 개념들:</h3><ol class="tight" data-tight="true"><li><p><strong>도메인 주도 설계(Domain-Driven Design, DDD)</strong>: 소프트웨어 개발 방법론 중 하나로, 비즈니스 도메인을 중심으로 설계하는 방법론입니다. 도메인 주도 설계는 비즈니스 요구 사항을 반영하고 복잡성을 줄이기 위해 도메인 모델을 사용합니다.</p></li><li><p><strong>도메인 객체</strong>: 소프트웨어에서 특정 도메인을 나타내는 객체를 의미합니다. 도메인 객체는 비즈니스 로직을 포함하고 해당 도메인에 특화된 행위를 수행합니다.</p></li><li><p><strong>도메인 서비스</strong>: 특정 도메인과 관련된 비즈니스 로직을 제공하는 서비스입니다. 도메인 서비스는 도메인 객체와는 달리 특정 개체에 속하지 않는 독립적인 로직을 수행합니다.</p></li><li><p><strong>도메인 이벤트</strong>: 도메인에서 발생하는 중요한 사건을 나타내는 이벤트입니다. 도메인 이벤트는 비즈니스 로직의 흐름을 추적하고 기록하는 데 사용될 수 있습니다.</p></li></ol><p></p><blockquote><p>혹시 틀린 부분이 있다면 댓글 부탁드립니다.</p></blockquote>

도메인이 뭐냐면..개발을 할때도 도메인, 데이터베이스 구조를 설계할 때도 도메인, 프로젝트 기획할때도 도메인, 여기저기서 다 도메인이라는 단어를 쓰는데 개념이 명확하지 않아 헷갈려서 정리해봤슴다1. 프로젝트 구조(Architecture):프로젝트 구조에서 도메인은 주요 비즈니스 개체를 나타냅니다. 일반적으로 소프트웨어 시스템에서 도메인은 해당 시스템이 다루

도메인이 뭔가요?

<p>WebSocket을 통해서 실시간 채팅을 넣기 위해 이 긴 이야기를 시작해야겠다.</p><p>먼저 HTTP와 WebSocket의 차이를 이해해야 한다. 이를 위해서는 두 가지를 비교해서 보여주는 요청&amp;응답 흐름을 보면 좋다. HTTP는 클라이언트가 요청을 보내면 서버가 응답을 반환한 뒤 연결을 끊는 구조로, Stateless한 방식이다. 반면 WebSocket은 클라이언트와 서버 간의 연결을 유지하면서 양방향으로 데이터를 주고받는 구조다. 실시간 채팅이나 알림 시스템에 웹소켓이 많이 쓰일 수밖에 없는 이유이다.</p><img src="https://image.until.blog/mushroombud/article/1731002142789.png" data-width="100%" data-align="center" alt="2005"><p>출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://apidog.com/blog/what-is-websocket-and-how-it-works/">APIDOG</a></p><p><strong>Django Channels</strong></p><p>장고에서 에서 웹소켓 연결을 구축할 수 있도록 해주는 라이브러리다. 좀더 정확히 찾아보니 "비동기 통신" 을 핵심적으로 지원하는 라이브러리라고 한다. 채널의 핵심 구성 요소는 'Consumer'와 Channels Layer인데, Consumer는 기존 템플릿 엔진에서의 View와 비슷하게 특정 이벤트를 처리하는 역할을 하고, Channels Layer는 Consumer 간에 메시지를 주고받게 한다.</p><p>챗지피티의 도움을 받아 웹소켓을 적용하는 간단한 예제 코드를 가져와봤다. 이 코드에서 connect와 disconnect 메서드는 각각 연결이 열릴 때와 닫힐 때 호출되고, receive는 메시지를 받을 때 호출된다. 이 구조 덕분에 장고에서도 실시간 채팅 같은 기능을 구현할 수 있다.</p><pre spellcheck="false"><code>from channels.generic.websocket import AsyncWebsocketConsumer
import json

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()

    async def disconnect(self, close_code):
        pass

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        await self.send(text_data=json.dumps({
            'message': message
        }))</code></pre><p></p><p><strong>React에서 웹소켓 쓰는 법?!</strong></p><p>React에서는 useWebSocket Hook을 사용해 WebSocket을 쉽게 다룰 수 있다. 이 Hook은 서버와의 연결 상태를 관리하고, 메시지를 주고받는 기능을 제공한다. 아래 코드는 useWebSocket을 사용해 버튼 클릭 시 서버에 메시지를 보내고, 서버에서 받은 메시지를 화면에 표시하는 예제다. readyState는 WebSocket 연결 상태를 나타내며, 연결이 잘 되어 있는지 확인할 때 유용하다.</p><pre spellcheck="false"><code>import React, { useState, useCallback, useEffect } from 'react';
import useWebSocket from 'react-use-websocket';

export const WebSocketDemo = () =&gt; {

  const [socketUrl, setSocketUrl] = useState('wss://echo.websocket.org');
	const options = {
	  onOpen: () =&gt; console.log('연결이 성공적으로 열렸습니다.'),
	  onClose: () =&gt; console.log('연결이 닫혔습니다.'),
	  onError: (error) =&gt; console.error('웹소켓 에러:', error),
	  onMessage: (message) =&gt; console.log('수신된 메시지:', message.data),
	};
  const { sendJsonMessage } = useWebSocket(socketUrl, options, reconnectInterval: 1000,share: true,);</code></pre><p>출처: <a target="_blank" rel="noopener noreferrer nofollow" href="https://enshrined-couch-1f4.notion.site/6-1d4a192e787b41bc8d0bbe79b07b0449#3f8ece29e3e34268a9ad6011d43e546b">멋쟁이사자처럼 세미나 자료 </a><s>아무리 찾아도 이만한게 없다</s></p><p>이렇게 하면 웹소켓 연결과 메시지 송수신을 단 몇 줄로 구현할 수 있다. sendMessage로 서버에 메시지를 보내고, lastMessage로 서버에서 받은 메시지를 즉시 확인할 수 있다.</p><p></p><p><s>useWebsocket 짱</s></p>

웹소켓 정복하기, 장고와 리액트에서 어떻게 구현되는지

[WebSocket] 실시간 Stateful 통신의 세계로

<h3>챕터1: What is programming?</h3><p>프로그래밍 언어 처리 과정</p><ol class="tight" data-tight="true"><li><p><strong>컴파일러</strong></p><ol class="tight" data-tight="true"><li><p>소스 코드 파일 전체를 한 번에 기계어로 번역하고 실행 가능한 파일 생성 (.exe)</p></li><li><p>대표적으로 C언어</p></li></ol></li><li><p><strong>인터프리터</strong></p><ol class="tight" data-tight="true"><li><p>소스 코드 1줄씩 기계어로 번역하여 바로 결과 출력</p></li><li><p>실행 가능한 파일을 생성하지 않음</p></li><li><p>자바스크립트, 파이썬이 이에 해당</p></li><li><p>위 언어들을 스크립팅 언어라고도 부름</p></li></ol></li></ol><h3>챕터 2: What is JavaScript?</h3><ol class="tight" data-tight="true"><li><p><strong><em>웹페이지를 통한 상호작용 구현</em></strong></p><ol class="tight" data-tight="true"><li><p>초기 웹 페이지는 웹페이지에 보여지는 텍스트, 이미지, 멀티미디어 등의 데이터를 일방적으로 보는 용도였음</p></li><li><p>초기 웹브라우저 회사인 넷스케이프는 이런 일방통행이 아닌 유저가 웹페이지에서 버튼 클릭등의 이벤트를 발생시키면 특정 프로그램이 실행되도록 하는 기능을 구현하기로 함</p></li><li><p>자바 언어 개발사인 선 마이크로 시스템즈와 함께 Applets 프로그램을 개발</p></li><li><p>유저가 웹페이지를 방문하면 웹서버는 HTML 파일과 Applets 프로그램을 전송</p></li><li><p>유저가 웹페이지에서 버튼을 클릭하면 다운로드된 Applets 프로그램이 실행되어 기능을 수행</p></li><li><p>Applets 프로그램은 유저의 컴퓨터에서 실행되었고 유저의 컴퓨터에 저장된 파일에 접근이 가능했었음</p></li><li><p>보안 위험을 줄이기 위해 이를 막는 작업은 어려웠음</p></li><li><p>결국 넷스케이프는 Applets 를 사용하지 않고 다른 해결책을 찾기로 강구함</p></li><li><p>넷스케이프에서 직접 브라우저에서 실행되는 스크립팅 언어를 구현하기로 결정</p></li><li><p>이 스크립팅 언어는 자바스크립트라는 이름이 붙었고 HTML 파일 내부에 코드가 존재</p></li><li><p>유저는 이제 HTML 파일 하나만 받으면 프로그램 코드도 같이 받는게 되었음</p></li></ol></li><li><p><strong><em>자바스크립트</em></strong></p><ol class="tight" data-tight="true"><li><p>1993년 넷스케이프 사에서 자사 웹브라우저인 네비게이터로 자바스크립트를 처음 통합</p></li><li><p>이후 유럽 컴퓨터 제조업체 협회 ECMA 에 표준으로 채택되기 위해 제출됨</p></li><li><p>표준으로 채택되기 위한 노력의 결과 ECMA-262 표준이 등록됨</p></li><li><p>ECMA-262 는 ECMAScript 라고도 함</p></li><li><p>자바스크립트 언어는 ECMA-262 표준의 구현임</p></li><li><p>표준은 버전업을 해왔으며 2009년에는 ES5 ECMAScript 5가 나왔는데 이 표준이 국제 표준화 기구 ISO에 의해 표준으로 승인됨</p></li><li><p>그 이후에는 연간 개정을 통한 버전업을 진행중 (예를 들어, ES-2016 -&gt; ES-2017)</p></li><li><p>모든 버전업중 대격변급 버전업은 ES6 (ECMAScript 2015)</p></li></ol></li><li><p><strong><em>클라이언트 사이드 프로그래밍 / 서버 사이드 프로그래밍</em></strong></p><ol class="tight" data-tight="true"><li><p>클라이언트 사이드 프로그래밍</p><ol class="tight" data-tight="true"><li><p>유저가 웹페이지에 접속하면 자바스크립트 코드를 내려받아 유저의 컴퓨터에서 자바스크립트 프로그램을 실행</p></li><li><p>이게 기존의 전통적인 방식이었음</p></li></ol></li><li><p>서버 사이드 프로그래밍</p><ol class="tight" data-tight="true"><li><p>유저가 웹페이지에 접속하면 JS 파일을 제외한 파일들을 다운 받고 JS 프로그램은 서버에서 실행</p></li><li><p>예를 들어, Node.JS 같은 경우에 서버에서 자바스크립트 프로그램을 돌리는게 가능</p></li></ol></li></ol></li><li><p><strong><em>완전 범용 프로그래밍 언어</em></strong></p><ol class="tight" data-tight="true"><li><p>Node.JS 같은 런타임 환경의 개발로 인해 자바스크립트 코드는 이제 웹브라우저 외부에서 실행될 수 있고 더이상 웹프로그래밍에만 국한된 언어가 아닌 완전 범용 프로그래밍 언어로 거듭나게 되었음</p></li></ol></li></ol>

챕터1: What is programming?프로그래밍 언어 처리 과정컴파일러소스 코드 파일 전체를 한 번에 기계어로 번역하고 실행 가능한 파일 생성 (.exe)대표적으로 C언어인터프리터소스 코드 1줄씩 기계어로 번역하여 바로 결과 출력실행 가능한 파일을 생성하지 않음자바스크립트, 파이썬이 이에 해당위 언어들을 스크립팅 언어라고도 부름챕터 2: What i

Learn JavaScript Quickly D1

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1718207600669" alt="until-463"><blockquote><p>이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.</p><p>최근에는 아래 방법보다 간편하게 <code spellcheck="false">@vercel/og</code> 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.</p><p>관심 있으신 분들은 <a target="_blank" rel="noopener noreferrer nofollow" href="https://vercel.com/docs/functions/og-image-generation">공식 문서</a>를 참고해보시면 좋을 것 같습니다.</p></blockquote><h1>오픈 그래프?</h1><p>오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기 위해 해당 문서의 제목, 설명, 타입 이미지 등등을 정의해두는 것을 말한다. 쉽게 말해서 내가 카카오톡에 특정 링크를 공유했을 때, 해당 html의 문서의 open graph 메타 태그를 통해 해당 문서에 대한 간략한 요약을 만들어 표시해준다.</p><p>일반적으로는 아래와 같은 정보를 포함시키고, 사이트마다 요구하는 별도의 태그가 존재하기도 한다. 해당 사이트에서 url에 대한 미리보기를 지원하고 싶으면 해당 og를 포함시켜야한다.</p><blockquote><ul><li><p><code spellcheck="false">og:title</code> - The title of your object as it should appear within the graph, e.g., "The Rock".</p></li><li><p><code spellcheck="false">og:type</code> - The <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#types">type</a> of your object, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="http://video.movie">video.movie</a>". Depending on the type you specify, other properties may also be required.</p></li><li><p><code spellcheck="false">og:image</code> - An image URL which should represent your object within the graph.</p></li><li><p><code spellcheck="false">og:url</code> - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "<a target="_blank" rel="noopener noreferrer nofollow" href="https://www.imdb.com/title/tt0117500/">https://www.imdb.com/title/tt0117500/</a>".</p></li></ul></blockquote><p>출처 : <a target="_blank" rel="noopener noreferrer nofollow" href="https://ogp.me/#metadata">https://ogp.me/#metadata</a></p><h1>Next.js에 적용하기</h1><p>이러한 오픈그래프를 <code spellcheck="false">Next.js</code> 에서 적용시키려면 어떻게 하면 좋을까…? 바로 Next.js에서 제공하는 <code spellcheck="false">Head</code> 컴포넌트안에 메타태그를 정의해주면 된다.</p><p>오픈그래프를 적용시킬때, 해당 페이지가 단순한 웹사이트에 대한 소개인 경우가 있고, 게시글과 같은 동적으로 바뀌는 페이지가 있을것이다. 두가지 케이스를 나누어서 살펴보자.</p><h2>정적인 페이지인 경우</h2><p>정적인 경우에는 static하게 적어주기만하면 된다.</p><pre spellcheck="false"><code class="language-typescript">// /pages/index.tsxfunction Feed() {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content="멋쟁이 상민처럼" /&gt;
&lt;meta property="og:description" content="개발자로 일하면서 배운 내용들을 기록합니다." /&gt;
&lt;meta property="og:url" content="&lt;https://morethanmin.com&gt;" /&gt;
&lt;meta
property="og:image"
content="정적인 이미지 경로"
/&gt;
&lt;/Head&gt;
&lt;FeedContainer/&gt;
&lt;/div&gt;
)
}</code></pre><p>요런식으로 정의해주면 오픈 그래프를 적용시킬 수 있겠다.</p><h2>동적인 페이지인 경우</h2><p>그럼 게시글과 같이 동적인 페이지인 경우에는? 동적으로 가져온 정보를 넣어주면 된다.</p><pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
&lt;meta property="og:type" content="website" /&gt;
&lt;meta property="og:title" content={post.title} /&gt;
&lt;meta property="og:description" content={post.summary} /&gt;
&lt;meta property="og:url" content={post.url} /&gt;
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt;
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>동적으로 OG 이미지 생성하기</h1><p>여러 많은 블로그를 보다보면 배경은 똑같고 텍스트만 바꾸어서 게시글마다 썸네일을 적용 해주곤한다. 티스토리건 벨로그건 네이버블로그건 다 썸네일을 사용자가 직접 업로드해야만 가능하다.</p><img src="https://image.until.blog/morethanmin/article/1718207770965" alt="until-464"><p>썸네일을 살펴보면 텍스트 바꿔치기를 통해 반복적으로 썸네일을 만드는 경우들이 상당히 많았다. 동적으로 가져온 게시글 정보에 썸네일 정보가 있는 경우에는 해당 썸네일 이미지를 보여주고, 그렇지 않은 경우에는 동적으로 썸네일을 생성할 수 있지 않을까?</p><p>그런 오픈소스가 있는지 찾아보았다.</p><p>다양한 서비스들이 있었지만 결국 이미지를 생성해서 해당이미지를 업로드 해주어야 가능한 경우가 많았다. 간단하게는 개인 프로젝트들도 많았고, 심지어는 유료인 서비스들도 있었다.</p><p>외부 블로그 서비스를 이용하는 경우에는 그런 서비스를 사용해도 좋겠지만, 나는 블로그를 직접 만들고 있으니, <strong>url에 원하는 썸네일 정보를 보내면 동적으로 이미지를 생성해줄 수 있는 api</strong>가 필요했다. 아래 처럼 말이다...</p><pre spellcheck="false"><code class="language-tsx">// /pages/[slug].tsxexport async function getStaticProps({ params: { slug } }) {
const post = await getPost({ slug })
return {
props: { post },
}
}function ArticlePage({post}) {
return (
&lt;div&gt;
&lt;Head&gt;
{post.thumbnail ?
&lt;meta
property="og:image"
content={post.thumbnail}
/&gt; :
&lt;meta
property="og:image"
content={https://썸네일-만들어주는-서비스/?title=${post.title}}
/&gt;
}
&lt;/Head&gt;
&lt;PostContainer data={post} /&gt;
&lt;/div&gt;
)
}</code></pre><h1>vercel/og-image</h1><p>여기저기 찾아보다 vercel/og-image를 발견했다. 해당 페이지에서 실제로 만들 수도 있고, url상으로 동적으로 생성해주는 기능도 지원하는 오픈소스이다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image.vercel.app/morethan-log.png?theme=light&amp;md=1&amp;fontSize=100px&amp;images=https%3A%2F%2Fassets.vercel.com%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fvercel-triangle-black.svg">예시</a></p><img src="https://image.until.blog/morethanmin/article/1718207953408" alt="until-465"><h1>한글 인코딩 이슈</h1><p>내용 그대로다. 한글을 지원하지 않는 폰트를 사용하고 있어서…. 영어만 입력이 가능했다.</p><img src="https://image.until.blog/morethanmin/article/1718207990429" alt="until-466"><p>그래서 해당 프로젝트의 이슈를 좀 찾아보니… 실제로 나와 같은 문제를 겪고 있는 사람들이 있었다.</p><h1>og-image-korean</h1><p>한글 지원하는 폰트와 기본 이미지를 바꿔서 배포했다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">여기</a>에 들어가보면 확인할 수 있다.</p><img src="https://image.until.blog/morethanmin/article/1718208022544" alt="until-467"><ul><li><p>site: <a target="_blank" rel="noopener noreferrer nofollow" href="https://og-image-korean.vercel.app/">https://og-image-korean.vercel.app</a></p></li><li><p>github: <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/morethanmin/og-image-korean">https://github.com/morethanmin/og-image-korean</a></p></li></ul><img src="https://image.until.blog/morethanmin/article/1718208085603" alt="until-468"><p>물론 리서치하고 만드는데 걸린 시간을 생각해본다면…<strong> </strong>진작 게시글 썸네일을 200장 이상 만들었을 것 같다.</p><p>언틸에도 추후 적용해보면 좋을 것 같다.</p><p></p><p></p><p></p><p></p>

이전에 개인 블로그를 운영하면서 동적으로 오픈그래프를 적용했던 경험을 공유합니다.최근에는 아래 방법보다 간편하게 @vercel/og 라이브러리로 좀 더 og이미지 생성 api를 만들 수 있습니다.관심 있으신 분들은 공식 문서를 참고해보시면 좋을 것 같습니다.오픈 그래프?오픈그래프는 페이스북에서 처음 만들어진 개념으로 HTML 문서의 메타정보를 쉽게 표시하기