본문 바로가기

분류 전체보기84

수제맥주 만들어 먹기!! 홈브루잉 안녕하세요! aloveu입니다. 소소한 취미가 하나 있는데 그건 바로 맥주 만들어 먹기입니다. 만들어 먹은 지는 한 4년?! 쯤 된 것 같아요. 우연히 와디즈에서 펀딩으로 올라온 걸 봤는데 가정용 수제 맥주 제조기가 올라왔더라고요. 예전에 LG에서 나온 제품은 너무 비싸서 못 사고 있다가 20만 원이 안 되는 가격으로 올라와서 그냥 질렀었습니다. 야 이거 협찬 아니냐?! 아닙니다. 4년쯤 산걸 지금 하진 않겠죠? 오늘은 그래서 맥주를 만드는 걸 보여드리고자 이렇게 컴퓨터에 또 앉았네요. 저 기기 샀던 테라브루라는 곳에서는 브루팩도 같이 파는데 4만 원 돈 합니다. 사서 만들면 900ml짜리 맥주가 9병이 나옵니다. 그냥 편의점 4만 원어치 맥주사면 500ml짜리 12병이나 살 수 있는데 시간 들여서 뭐 .. 2024. 4. 8.
토스 증권 조건주문: 원하는 가격에 자동으로 주문! 안녕하세요! aloveu입니다. 토스에서 주식을 시작한 지 어언 3개월!! 하루에 거의 만원씩 주식모으기를 했더니 어느새 돈이 꽤 모였어요. 알파벳C는 벌써 70회 차입니다. 그래봤자 20만원도 안되지만요 ㅋㅋㅋ 토스 주식모으기를 하시려면? https://aloveu.tistory.com/7 토스 주식모으기 안녕하세요! aloveu입니다. 다들 재테크에 관심이 많으시죠?! 그중에 하나가 주식투자인데요. 오늘은 설정해둔 금액으로 자동으로 주식을 모아주는 토스 주식 모으기에 대해서 써볼까 합니다. 저 aloveu.tistory.com 주식 모으기와 별개로 자투리 돈으로 간간히 다른 주식으로 수익을 보기도 하는데요. 오늘 그렇게 주식을 샀더니 알림이 뜨더라고요. 그래서 들어가 봤죠. | 조건 주문 설정하기 티.. 2024. 4. 7.
[Vue] Router 이동할 때 페이지 스와이프 효과 주기 안녕하세요! aloveu입니다. 웹을 돌아다니다 보면 메뉴를 클릭할 때 다음 페이지가 옆에서 나오는 걸 보신 적 있나요?! 어떻게 만들어 졌는지 궁금하시지 않으세요?? Vue에서는 애니메이션처리에 대한 컴포넌트를 제공합니다. 인데요. Vue에서 router로 이동할때 swipe 효과 주려면 transition과 router를 적절히 사용해주면 됩니다. | 슬라이드 메뉴이동 router-view 컴포넌트를 transition으로 감쌉니다. transition에 name를 바탕으로 css를 작성합니다. transition 컴포넌트에서 name 속성은 트랜지션 클래스에 접두사를 지정하는 역할을 합니다. 이를 통해 다양한 트랜지션 효과를 CSS로 스타일링할 수 있습니다. name="slide"로 지정하면 다음과.. 2024. 4. 6.
[CSS] 버튼에 animation 적용하기 HTML 삽입 미리보기할 수 없는 소스 요즘 나오는 UI 프레임워크들이 너무 잘 되어있어서 간단히 button만 가져다 쓰면 애니메이션도 들어가져 있고 이쁘게 해 줘서 그거 쓰면 됩니다. 그래도 어떻게 구현되어 있는지 안 까보셨죠?? 제가 정리해 봤습니다. | button에 물결 animation 적용하기 물결 버튼 html에 버튼 놓는거야 기본이니깐 저렇게 두고요. css만 좀 잡아줍니다. .btn-wave { position: relative; padding: 10px 20px; background-color: #c00402; color: white; border: none; cursor: pointer; overflow: hidden; } .btn-wave::before { content: ""; .. 2024. 4. 5.
[Vue] DefineModel 부모로부터 받은 props를 바로 input에 v-model로 바인딩해서 수정도 되게 하고 싶다!! 모달을 부모에서 띄웠는데 자식 컴포넌트에서 바로 제어하고 싶다!! 네 이제 됩니다. 기존에는 부모로부터 props로 받은 값을 자식컴포넌트에서 다이렉트로 v-model에 바인딩하는 게 안 됐었습니다. 이건 단방향 데이터 흐름(One-way data flow) 원칙 때문입니다. 단방향 데이터 흐름은 데이터의 변경이 한 방향으로만 이루어지도록 하는 원칙입니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 전달되고, 자식 컴포넌트에서는 이 데이터를 변경할 수 없습니다. 만약 자식 컴포넌트에서 props 데이터를 변경할 수 있다면, 데이터의 출처가 불분명해지고 예기치 못한 부작용이 발생할 수 있습니다. 그런데.. 2024. 4. 5.
[NPM] Bundlephbia 모듈을 선택할 때 꼭 확인해야 할 사이트가 있습니다. 번들 포비아(https://bundlephobia.com/)라는 사이트인데요. 내가 설치 하고 싶은 패키지를 검색해 보면 검색한 패키지와 유사한 패키지를 화면 제일 하단에 추천을 해줍니다. 그리고 용량을 함께 보여주니 각 패키지의 번들링 사이즈를 확인하면서 설치할 수 있습니다. 물론 용량뿐만이 아니고 얼마나 업데이트가 자주 일어나는지, 다운로드 수는 어떤지도 체크해야하겠지만 성능 튜닝하다 보면 패키지의 사이즈가 신경 쓰이게 됩니다. 예를 들어 몇년전에 날짜 계산 라이브러리로 Moment를 사용했었는데 바꾼 기억이 있어서 비교해 보겠습니다. | Moment 홈페이지 : https://momentjs.com/ | Dayjs 홈페이지 : https://da.. 2024. 4. 4.
[CSS] Text를 더 다양하게 꾸며보자 HTML 삽입 미리보기할 수 없는 소스 안녕하세요! aloveu입니다. 이번 포스트에는 텍스트를 기존보다 더 다양한 방법으로 꾸미는 방법을 정리해봅니다. 기본적인 font-size, weight, color... 같은 기본은 기술하지 않을 거예요. | 텍스트에 배경이미지, 그라디언트 넣기 // HTML 이미지 텍스트 클립 이미지 그라디언트 텍스트 클립 // css .text-clip{ font-size:50px; background-clip: text; -webkit-text-fill-color: transparent; } .clip-img{ background-image:url('imgURL'); } .clip-gradient{ background-image:linear-gradient(to right.. 2024. 4. 4.
[HTML] Video Auto Play (자동재생) 조건 프로젝트를 진행하다 보면 썸네일에 비디오가 있다거나 홈페이지 전체에 비디오가 bg처럼 깔리는 작업을 하게 되는데 이때 자동재생이 안 되는 경우가 생깁니다. 비디오를 자동 재생을 하고 싶을 때 브라우저에서 여러가지 제약이 있는 걸 볼 수 있는데 어떤 속성을 추가해야 자동 재생이 되는지 정리해 봤습니다. 자동 재생은 크게 영상에 소리가 있을 때와 없을 때 두가지로 나뉩니다. 해당 포스팅은 좀 더 자동재생 정책이 유연한 데스크탑일때는 고려하지 않고 모바일 기준으로 작성했습니다. 디바이스나 환경에 따라 정책들이 달라질 수 있으므로 안될 수도?! 있으니 유의하시면 좋겠습니다. | 영상 자동재생 조건 1. 영상에 소리가 있을때 🔊 유저의 인터렉션이 있을때만 재생이 됩니다. 이 때는 사실상 자동 재생이라고 보기는 어.. 2024. 4. 3.
[Vue] ⛔ cli 설치 후 에러 'vue'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. @vue/cli 설치 이후 프로젝트를 생성(vue create 'projectName')했을 때 위와 같은 오류가 발생 했을 경우에는 보통 환경 변수가 오류인 경우가 많아서 환경변수 세팅을 해줘야 합니다. 아니면 터미널을 관리자모드로해서 @vue/cli를 다시 설치하면 됩니다. > npm install -g @vue/cli | 환경변수 설정 키보드의 윈도우버튼을 누르고 '시스템 환경 변수 편집' 을 검색해서 아래와 같이 수정합니다. 시스템 속성 > 고급 > 환경변수 > 사용자변수에서 Path를 '편집' 하고 Path의 환경 변수에 npm 위치를 추가하면 됩니다. @vue/cli를 글로벌로 설치했다면 설치된 위.. 2024. 4. 3.
반응형

티스토리툴바