오아리 최고 https://velog.io/ 오아리 최고 Wed, 18 Dec 2024 07:57:03 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed 오아리 최고 https://velog.velcdn.com/images/ju-nong/profile/6ef83664-6009-46e7-9e60-b2016d60d168/image.jpg https://velog.io/ Copyright (C) 2019. 오아리 최고. All rights reserved. <![CDATA[와 시계! 2]]> https://velog.io/@ju-nong/%EC%99%80-%EC%8B%9C%EA%B3%84-2 https://velog.io/@ju-nong/%EC%99%80-%EC%8B%9C%EA%B3%84-2 Wed, 18 Dec 2024 07:57:03 GMT Diglog Clock

🕒 와 시계 만들기! 2 🕒

1년만에 벨로그 글을 써보는데요, 또 시계 관련된 글이라서 뭔가 웃기네요. 이번에도 회사에서 심심해서 뭐 만들어 볼 거 없나 하다가, 예전에 만들었던 디지털 시계와 아날로그 시계를 합쳐봤어요. 자랑하려고 글 써봐요

사용한 것들

  • HTML
  • CSS
  • Javascript
  • Vercel

기능

  • 현재 시간을 알 수 있어요
  • 매우 유용하다!

이슈

  • 처음에는 시간을 24시 형식으로 하려고 했는데(일부러 보기 불편하게), 분침이랑 너무 헷갈리다는 의견이 있어서 12시 형식으로 변경
  • 최적화 및 코드 가독성

이전에 사용했던 시계 프로젝트의 디자인을 거의 가져왔습니다. 가운데 시계 핀(16x16) 크기만큼 띄워서 배치하는 것에 애먹었었어요. 생각한 대로 동작해서 만족스럽습니다.

]]> <![CDATA[와 시계!]]> https://velog.io/@ju-nong/%EC%99%80-%EC%8B%9C%EA%B3%84 https://velog.io/@ju-nong/%EC%99%80-%EC%8B%9C%EA%B3%84 Wed, 21 Jun 2023 05:22:06 GMT CLock

🕒 와 시계 만들기! 🕒

할 거 없어서, 주변에 보이는 사물을 만들어보고 있는데요. 비교적 만들기 쉬울 거 같은 시계 만들기에 도전해봤어요 ^___^ b

사용한 것들

  • Nuxt3
  • TailwindCSS
  • Vueuse
  • Vercel

기능

  • 보고 싶은 시계를 선택 할 수 있어요 🕒, 📟
  • 현재 시간을 알 수 있어요 매우 유용한 기능

이슈

  • 배포해보니 시계를 처음 렌더링할 때, 시간을 GMT 기준으로 가져옴
  • Nuxt는 빌드 기본값이 SSG다 보니까 처음에는 시간을 서버 기준(GMT)으로 가져오는 거였음
  • nuxt.config에서 ssr 옵션을 false로 변경해서 SPA로 적용하니 해결

두 시계 모두 깔끔하게 디자인 나와서 만족 페이지 색깔이 주황색인 이유는 딱히 없음 아날로그 시계에서 숫자랑 눈금 배치하는 건 사인, 코사인 사용 디지털 시계에서는 7-세그먼트 패턴을 사용했다 (고딩 때 배운거 여기서 써먹죠 ^___^ b)

]]> <![CDATA[와 Datepicker!]]> https://velog.io/@ju-nong/%EC%99%80-Datepicker https://velog.io/@ju-nong/%EC%99%80-Datepicker Mon, 15 May 2023 08:10:35 GMT Datepicker

🌞 와 Datepicker 만들기! 🌎

아 input 태그의 date type 말하는거지?

사실 만든지 좀 된건데, Notion 정리하다가 이것도 Velog에 작성하면 좋을 거 같아서 가져와봤어요 ^___^ b

사용한 것들

  • Vite
  • React
  • Typescript
  • Emotion
  • Day.js
  • Vercel

기능

  • 🌎 지구를 공전시켜서 태어난 날짜를 선택할 수 있음
  • 반짝반짝 작은 별들~ ✨

와 사실 4월달에 한 번 포스팅하려고 했는데, 살짝 바빠서 늦게 포스팅 했어요 ^__^ b 진짜 한달에 한 번 포스팅한다 ㄹㅇㅋㅋ

자세한 구현 방법은 Notion에 적을 예정 ^___^ b 대충 cos, sin 함수 사용해서 슈슈슉 한 프로젝트

]]> <![CDATA[와 다크모드!]]> https://velog.io/@ju-nong/%EC%99%80-%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C https://velog.io/@ju-nong/%EC%99%80-%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C Wed, 22 Mar 2023 06:48:45 GMT 다크모드

🌞 와 다크모드 만들기! 🌚

_아 그 식상한 다크모드_

역시 회사에서 할 게 없어서 무지성 개발 중인 본인. 월급루팡 아니에요 일을 다 끝낸 거뿐이에요 ^___^ b

사용한 것들

  • Nuxt
  • TailwindCSS
  • Vercel(역시 배포 짱 편함)
  • animation 노가다

기능

  • 귀여운 🌞과 🌚
  • 아무생각 없이 적은 개발자의 문구
  • 오아리 홍보

와 벌써 블로그 개설 하루만에 두 개의 포스트 ^___^ b 어 이제 얼마나 자주 포스팅을 하려나?

피드백은 언제나 환영입니다! 잘 가르쳐주는 스승이 좋아요! 오아리 사진이 보고 싶으시면 말씀해주세요! 그러면 다음에 아리 사진 이용해서 하나 만들어볼게요 ^___^ b

]]> <![CDATA[크리스마스 트리를 만들어보자!]]> https://velog.io/@ju-nong/%ED%81%AC%EB%A6%AC%EC%8A%A4%EB%A7%88%EC%8A%A4-%ED%8A%B8%EB%A6%AC%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90 https://velog.io/@ju-nong/%ED%81%AC%EB%A6%AC%EC%8A%A4%EB%A7%88%EC%8A%A4-%ED%8A%B8%EB%A6%AC%EB%A5%BC-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EC%9E%90 Wed, 22 Mar 2023 03:00:17 GMT 크리스마스트리

🎄 크리스마스 트리를 만들어볼거에요

당시 크리스마스 트리를 만들던 본인은 배포 때문에, 강제로 10시까지 야근하게 생긴 상황이였음. 무의미한 시간이 매우 많았다는 말 ^___^ b

출근길에 인스타 릴스에서 외국인이 2진수로 이루어진 크리스마스 트리를 만드는 것을 봄. 오 재밌어 보이는데? 나중에 만들어봐야지~ 했는데 그게 바로 배포일 하하하

사용한 것들

  • Vite
  • Vue
  • Tailwindcss
  • Vercel(배포 짱 편함)

기능

  • 2진수로 이루어진 아름다운 🎄
  • 하단 문구 클릭시 🎄가 반짝임
  • 낭만

대충 커스텀 가능한 것들

  • 보여지는 2진수 단위
  • 크리스마스 트리 몸통 길이
  • 반짝이는 주기
  • 그 외에는 색깔...?

Velog 맨날 눈팅만하다가 처음 써봐요 하하하 오아리 최고 ^___^ b

]]>