<pre spellcheck="false"><code class="language-javascript">async function picToBase64(src) {
 return new Promise(async (resolve) =&gt; {
 const response = await fetch(src);
 const blob = await response.blob();

 const reader = new FileReader();
 reader.onloadend = () =&gt; resolve(reader.result);
 reader.readAsDataURL(blob);
 });
}</code></pre>src를 받아서, fetch를 통해 리스폰스를 blob으로 받아온다.그 후 FileReader를 이용해서 blob을 dataUrl로 읽어와주면 된다.<pre spellcheck="false"><code class="language-javascript">const base64Result = await picToBase64(url)</code></pre>그러면 다음과 같이 사용할 수 있다.

자바스크립트로 이미지를 String으로 변환해보기!

이미지 url로 base64 string으로 변환하기

State of CSS 2024 설문이 시작되었습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://survey.devographics.com/en-US/survey/state-of-css/2024">https://survey.devographics.com/en-US/survey/state-of-css/2024</a>설문은 11개 페이지에 총 소요 시간 약 20분~25분 정도 되는 것 같습니다.최신 기술항목들과 들어보지 못했던 기술들에 대한 정보와 사용사례 등을 엿볼 수 있는 좋은 기회가 되겠죠.설문을 진행하다보면,<img src="https://image.until.blog/ganymedian/article/1724427177172" alt="until-1266">설문항목 박스 우상단에 “+” 아이콘이 있습니다.자세히 알아보고 싶거나 흥미로운 항목일 때, 우상단 아이콘을 클릭하면 해당 기술항목이 차곡차곡 보관되고, 설문 종료시에 이를 모두 모아서 이메일로 받아볼 수 있습니다.이메일에는 모질라 재단의 공식문서 링크가 각각 포함되어 있습니다. 공부해야 할 기술 항목들을 이메일에서 하나씩 클릭해서 학습할 수 있겠죠...설문 결과 발표는 매우 늦습니다. 아예 궁금해 하지 않는 쪽이 정신건강에 이롭습니다.State of […] 설문조사에서는, 매년 일본인 개발자들은 눈에 뜨이지만 한국인 개발자의 참여는 목록에 보여지지도 않고 있는데, 이 점이 기분 안좋아요. 우리도 활발하게 참여해서 내년 부터는 Korean 이 리스트에 보여지면 좋겠다는 생각을 해봅니다...그리고, 설문 종료시에 무슨 의미인지는 잘 모르겠습니다만, 스코어가 뜹니다. 똬~악!!<img src="https://image.until.blog/ganymedian/article/1724427218896" alt="until-1267">상위 74% 라면.. 하위 27% 라는 거죠?? ㅋㅋㅋㅋ 기분 꿀꿀해지는군요.

State of CSS 2024 설문이 시작되었습니다.https://survey.devographics.com/en-US/survey/state-of-css/2024설문은 11개 페이지에 총 소요 시간 약 20분25분 정도 되는 것 같습니다.최신 기술항목들과 들어보지 못했던 기술들에 대한 정보와 사용사례 등을 엿볼 수 있는 좋은 기회가 되겠죠.설문을 진행하

State of CSS 2024 Survey

🍎 Mac

맥북에서 터미널에서 code 커맨드라인을 지정해두고 해당 명령어를 통해 vscode를 실행하는데 실행할 때마다 dock에 vscode가 중복으로 생성되는 문제가 있었다.<img src="https://image.until.blog/morethanmin/article/1715356082565" alt="until-3">한동안 습관적으로 지워주면서 사용하고 있다가 매번 귀찮다는 생각이 들어서 원인을 찾아보았다.vscode 레포에서 동일한 증상을 겪고 있다는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/microsoft/vscode/issues/60579">이슈</a>를 발견해서 찾아보니, vscode와 관계없이 실행중인 상태의 애플리케이션을 터미널을 통해 실행하는 경우 발생하는 이슈라는 것을 알게 되었다.해결책은 크게 두가지가 있었다.<h2>Disable "Show suggested and recent apps in Dock"</h2>최근 사용한 앱을 독에 띄워주는 기능 자체를 끄는 것이다.해당 기능 자체를 끄는 것이기에 해당 영역자체가 사라진다.<h2>Edit <code spellcheck="false">code</code> function</h2>기존 code 명령어를 수정함으로써 해결이 가능하다.<code spellcheck="false">vim ~/.zshrc</code> 를 입력해 기존 <code spellcheck="false">code</code> 명령어를 아래와 같이 수정해보자.<pre spellcheck="false"><code class="language-auto">code() {
 if [ -t 1 ] &amp;&amp; [ -t 0 ]; then
 open -a Visual\\ Studio\\ Code.app "$@"
 else
 open -a Visual\\ Studio\\ Code.app -f
 fi
}</code></pre>위 코드를 해석하면 아래와 같다. (채찍피티 인용)<blockquote>ChatGPT 왈: 이 코드는 <code spellcheck="false">~/.zshrc</code> 파일에 작성되어 있는데, 이 파일은 Zsh 셸의 설정 파일입니다. 여기서 정의된 <code spellcheck="false">code()</code> 함수는 주로 Visual Studio Code를 실행하는 데 사용됩니다.이 함수는 두 부분으로 나뉘어 있습니다. 첫 번째는 <code spellcheck="false">if</code> 문으로 시작하여 터미널에서 실행 중인지(<code spellcheck="false">-t 1</code>과 <code spellcheck="false">-t 0</code>를 통해 확인) 확인하고, 그렇다면 주어진 파일이나 디렉토리를 Visual Studio Code로 엽니다. 두 번째 부분은 이와 반대로 터미널이 아닌 상황에서 Visual Studio Code를 엽니다.여기서 <code spellcheck="false">open</code>은 macOS에서 파일을 열거나 애플리케이션을 실행하는 명령입니다. <code spellcheck="false">-a</code> 플래그는 특정 애플리케이션을 지정하여 파일을 열도록 합니다. <code spellcheck="false">Visual\\ Studio\\ Code.app</code>은 Visual Studio Code 애플리케이션의 경로를 나타냅니다. 공백을 포함하는 이름을 사용할 때는 이스케이프 문자(<code spellcheck="false">\\</code>)를 사용하여 공백을 인식하게 합니다.따라서 이 코드는 Zsh 셸에서 <code spellcheck="false">code</code> 명령어를 입력하면, Visual Studio Code가 실행되며, 터미널에서 실행 중인 경우에는 주어진 파일이나 디렉토리를 열도록 하며, 터미널이 아닌 경우에는 그냥 Visual Studio Code를 엽니다.</blockquote><hr>나는 애초에 최근앱 기능을 잘 사용하지 않다보니 첫번째 방법을 사용해서 해결했다.

맥북에서 터미널에서 code 커맨드라인을 지정해두고 해당 명령어를 통해 vscode를 실행하는데 실행할 때마다 dock에 vscode가 중복으로 생성되는 문제가 있었다.한동안 습관적으로 지워주면서 사용하고 있다가 매번 귀찮다는 생각이 들어서 원인을 찾아보았다.vscode 레포에서 동일한 증상을 겪고 있다는 이슈를 발견해서 찾아보니, vscode와 관계없이 

mac dock에 vscode가 중복 생성되는 이슈

<h1>Entity Mapping</h1><h2>@Entity</h2><ul><li>도메인 객체를 관계형 데이터베이스 테이블로 매핑할 때 사용되는 어노테이션이다</li><li>해당 어노테이션만 사용하는 경우 어노테이션이 적용된 클래스의 이름이 테이블 이름이 된다<ul><li>@Table 어노테이션을 사용해 테이블 이름을 명시할 수 있다</li></ul></li><li>기본 생성자 필수</li></ul><h2>@Table</h2><ul><li>스키마를 지정하거나 테이블 이름을 명시할 수 있다</li><li>옵션<ul><li>name : 매핑 테이블 이름 지정(기본값 : 클래스명)</li><li>catalog : DB catalog 매핑 (기능 있는 경우)</li><li>schema : DB schema 매핑 (기능 있는 경우)</li><li>uniqueContraints : DDL 생성 시 unique 제약 조건 생성</li></ul></li></ul><hr><h1>기본키(PK) 매핑 </h1><h2>@Id</h2><ul><li>기본키(PK) 지정한다</li></ul><h2>@GeneratedValue</h2><ul><li>기본키(PK) 값을 자동 생성하기 위한 어노테이션</li><li>여러 옵션을 통해 기본키 생성 전략 적용할 수 있다<ul><li>identity : 기본키 생성 처리를 데이터베이스에 위임</li><li>sequence : 시퀀스를 이용한 기본키 생성</li><li>table : 별도의 기본키 테이블을 이용해 기본키 생성</li><li>auto : 데이터베이스에 따라 기본키 전략 선택</li></ul></li></ul><blockquote><h3>identity</h3><ul><li>새로운 데이터가 생성될 때 PK 값이 부여된다 <ul><li>-&gt; 영속 객체로 올리는 시점 (persist())에 insert가 진행되고 생성된 Id를 반환 받아 1차 캐시에서 관리되는 영속 객체의 Id값으로 저장된다</li></ul></li></ul><h3>sequence</h3><ul><li>데이터베이스의 Sequence 객체를 이용해 기본키를 생성하는 방식이다</li><li>시퀀스를 생성할 경우 @SequenceGenerator 옵션 필요하며 이미 데이터베이스에 존재하는 시퀀스를 이용할 경우 id 필드 위에 선언</li><li>새로운 데이터가 생성될 때 시퀀스 값을 조회한 뒤 해당 값을 Id로 지정하여 데이터가 저장된다<ul><li>-&gt; 영속 객체로 올리는 시점 (persist())에는 시퀀스 조회 쿼리가 발생하고 insert는 commit 시점에 발생한다</li></ul></li><li>allocationSize 옵션을 통해 시퀀스 값을 가져와 캐싱할 수 있다</li></ul></blockquote>

Entity Mapping@Entity도메인 객체를 관계형 데이터베이스 테이블로 매핑할 때 사용되는 어노테이션이다해당 어노테이션만 사용하는 경우 어노테이션이 적용된 클래스의 이름이 테이블 이름이 된다@Table 어노테이션을 사용해 테이블 이름을 명시할 수 있다기본 생성자 필수@Table스키마를 지정하거나 테이블 이름을 명시할 수 있다옵션name : 매핑 테

Entity Mapping

SPARTA

<h1>Docker에 데이터베이스 이미지 띄우기</h1><ul><li>이번 팀 프로젝트에서 PostgreSQL을 사용하게 됐는데 이전에는 mysql을 활용했었기 때문에 해당 데이터베이스를 설치해야 되는 상황이 됐다</li><li>데이터베이스를 설치하기 귀찮기도 하고 도커를 한번도 사용해 본 적이 없어서 이번 기회에 데이터베이스를 도커에 올려보기로 결정</li><li>유튜브 강의를 보면서 도커란 무엇인지 간단하게 학습하고 (일단 미니 컴퓨터라고 생각하기로 했다..) 여러 명령어를 통해 조작해봤다 (명령어는 따로 정리)</li></ul><h3>Docker volume</h3><ul><li>Docker 컨테이너의 문제점<ul><li>도커는 특정 이미지를 통해 하나의 가상 환경을(컨테이너) 구축할 수 있는 툴인데 해당 컨테이너에서 작업한 데이터 또한 컨테이너에 저장이 된다<ul><li>이미지에서 변경된 파일 시스템이 <code spellcheck="false">Container Layer</code> 에 저장→ 이로 인해 컨테이너를 삭제하게 되면 해당 컨테이너 내부의 데이터도 모두 삭제되는 경우가 발생한다 (DB라고 가정하면 DB의 데이터 같이 삭제됨)→ 즉 Docker Container는 휘발성</li></ul></li></ul></li><li>해당 문제점을 해결하기 위해서는 volume 옵션을 활용한다<ul><li>docker volume이란 ?<ul><li>도커 컨테이너에서 데이터를 영속적으로 저장하기 위한 방법</li><li>volume은 컨테이너 내부 저장 공간을 사용하지 않고 호스트 자체의 저장 공간을 공유해서 사용하는 형태<ul><li>컨테이너 내부의 데이터를 호스트가 지정한 공간과 링크를 걸어주는 기능이라고 한다</li></ul>▪ docker run -v [호스트의 디렉토리 절대경로]:[컨테이너의 디렉토리 절대경로] [이미지명]</li></ul></li></ul></li></ul><hr><h1>프로젝트 기록</h1><h3>value() 어노테이션</h3><ul><li>cannot find symbol method value()<ul><li>ai api 호출에 필요한 api key값을 yml 파일에 작성해뒀는데 읽어오지 못하는 이슈 발생<ul><li>annotation.Value를 임포트 했어야 했는데 lombok.Value를 임포트해서 생긴 이슈였음ㅎ</li></ul></li></ul></li></ul><hr><h1>생각이 필요한 것들</h1><h2>Ai를 하나의 도메인으로 봐야 하는가?</h2><ul><li>Ai가 하나의 서비스처럼 느껴지긴 하지만 메뉴 내에서만 사용이 되고 있다.. 확장성을 고려하더라도 배달 플랫폼에서 Ai가 얼마나 확장이 되려나</li><li>현재는 메뉴 도메인에 포함시키되 로직만 분리하는 방향으로 갈 것 같다</li></ul><h2>Ai api 호출 방식</h2><ul><li>동기 / 비동기에 대해 오늘 제대로 이해하게 된 것 같은데 우선 내일 더 알아보고 이점을 따져서 선택하기 (비동기가 좋을 것 같다는 생각인데 동기를 사용해서 얻을 수 있는 이점이 무엇인지 찾아보기)</li></ul>

Docker에 데이터베이스 이미지 띄우기이번 팀 프로젝트에서 PostgreSQL을 사용하게 됐는데 이전에는 mysql을 활용했었기 때문에 해당 데이터베이스를 설치해야 되는 상황이 됐다데이터베이스를 설치하기 귀찮기도 하고 도커를 한번도 사용해 본 적이 없어서 이번 기회에 데이터베이스를 도커에 올려보기로 결정유튜브 강의를 보면서 도커란 무엇인지 간단하게 학습하