KBW's cosmos

유튜브 등을 보면 영상이 올라온 경과 시간등이 표시된다. 커뮤니티 등을 개발하다보면 글 작성 경과 시간을 표시해줄 필요가 있는데 Dayjs를 사용하면 간단하게 구현할 수 있다. Dayjs는 기존의 구린 자바스크립트 기본 날짜 함수인 Date를 개선시켜준 라이브러리로 무척 가볍고 사용하기 편하다. Day.js · 2kB JavaScript date utility library 2kB JavaScript date utility library day.js.org 자바스크립트에서 날짜를 다룬다면 무조건 무조건 무조건 쓸 것을 추천한다. 우선 dayjs 라이브러리를 설치해준다. npm i dayjs 경과시간 함수를 만들기 위해선 duration 플러그인을 사용해야한다. Day.js · 2kB JavaScript ..

⭐ 온라인 코딩 스터디 - 코뮤니티 모각코 후기 ⭐ ✅ 별명 : koh1018 ✅ 참여한 과정 이름 : 한 입 웹개발 (JS) ✅ 기수 : 5월 과정 👉 모각코에 참여하게 된 계기 학기중에 할 만한 활동 및 프로그램을 알아보다가 어느날 인스타에서 하는 코뮤니티 홍보스토리를 봤어요! 이전에 앱을 만들면서 웹도 배워서 하나의 작은 플랫폼 서비스를 만들어보고 싶다는 생각을 했는데 웹을 배울 정말 좋은 기회가 될 것같아서 바로 지원하게 되었습니다! 👉 모각코로 인한 변화 가장 큰 변화라고 한다면 웹을 아예 모르던 제가 웹으로 초보 수준의 챗봇을 만들 수 있게 되었다는 것 같습니다! 아무래도 눈에 보이는 성장이라는게 가장 의미있는 변화가 아닐까 싶어요.. 처음에는 15일 동안 진행한다고 해서 배우기에 너무 짧은 ..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 새로 말을 배울 수 있도록 해봤습니다!! Day15.html 냐옹~ 시키기 불 켜줘 Day15.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0p..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 typewriter CDN을 가져와서 고양이가 못알아 듣는 말을 했을 때 위에 알림이 뜨도록 만들어봤습니다! Day14.html 냐옹~ 시키기 불 켜줘 Day14.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {backgro..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 따라하는 고양이 & 말안듣는 고양이를 만들어봤어요! Day13.html 냐옹~ 시키기 불 켜줘 Day13.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, ..

✅ 오늘의 미션 사진 업로드 애용을 넘어 애정하는 첫 구글플레이 출시 앱입니다 ㅠ 많이 부족하지만 첫 앱이라 많이 애정이 가요 ✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 지난 번에 불 끄는 걸 만들어서.. 이번에는 눈내리는 걸 만들어봤어요! 내일 비가 온다고 해서 비오는 걸 해볼까 했는데 눈이 더 이쁜 것 같아서 눈으로 해봤어요~! Day12.html 냐옹~ 시키기 불 켜줘 Day12.css /*Snow Keyframes*/ @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 10..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 불 좀 꺼줄래도 재미로 넣어봤습니다 Day11.html 냐옹~ 시키기 불 켜줘 Day11.css .layout { width: 100vw; height: 100vh; padding-top: 50px; } @font-face { font-family: "MaruBuri-Regular"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/MaruBuri-Regular.woff") format("woff"); font-weight: n..

✅ 오늘의 미션 사진 업로드 인터넷에 도는 유명인들의 어록의 단점은 진위를 알기 어렵다는 점이다. The trouble with quotes on the Internet is that you never know if they are genuine. - 에이브러햄 링컨 이게 생각나네요 유명인의 어록도 좋지만 자신의 경험과 깊은 고민으로부터 나오는 생각 한 줄이 정말 가치있다고 생각합니다. ✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 전화를 걸었을 때 배경이 바뀌고 통화시간이 표시되도록 했습니다! 통화가 끝난뒤에는 통화한 시간이 뜨고 7초 뒤에 다시 원래의 화..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 Day9.html MOVIE Inception Shutter Island Life Is Beautiful ★0.00 Day9.css .mainTitle{ text-align: center; margin-top: 20px; cursor: pointer; } .tab{ text-align: center; margin-top: 30px; } .tabBtn{ display: inline-block; width: 150px; height: 40px; border: 1px solid black; cursor: pointer..

✅ 오늘의 문제 풀이 인증 📣 과제에 대한 답안 코드는 를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가) 📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁 Day8.html &nbsp 입력 : 저장 전광판 버튼 Day8.js let count = 0; var prnStr = "" var board = document.getElementsByClassName('boardText'); function saveStr() { prnStr = document.getElementById('prnText').value; board[0].innerHTML = "&nbsp"; count = 0; } function showText() { if (count >= prnStr.leng..