본문 바로가기

분류 전체보기153

트렌디한 아이돌, 트렌디한 음악 XG(Xtraordinary Girls) - IYKYK 요새 헬스를 열심히 다니고 있습니다. 어지간해서는 주 5일 월,화,수,목,금 다나가려고 하고있고, 어느정도 선방하고 있습니다. 66키로까지는 빠졌습니다. 이번해 말까지 59kg~61kg 사이를 빼는 게 관건인데, 달성되었으면 합니다.각설하며, 요새 헬스장에서 운동하면서 듣는 음악입니다. 유튜브 알고리즘을 통해서 알게된 그룹, 알게된 노래인데 생각보다 트렌디하고, 시기마다 있는 트렌디한 곡이라 그냥 듣고있어요.XG(엑스지) 데뷔일 : 2022년 3월 18일 데뷔특이사항 : 모든 멤버 일본인 , XG는 Xtraordinary Girls의 약자. 비범하고, 특별한 ,기이한, 놀라운 소녀들을 뜻합니다.뮤비 퀄리티, 뮤비의 색감, 헤어 스타일링, 복장, 컨셉트 , 뮤비 내용을 다 통틀어서 봐도, 특이하긴 합니다... 2024. 10. 24.
[Tailwind]Tailwind %, vh, svh, lvh,dvh 뭐가 다른 것인가?. Tailwind를 쓰다보니 몇가지 비슷한 느낌인데, 그럼에도 헷갈릴 수 있는 단위가 몇 가지 있다. 정리를 해보고자 포스팅을 작성하게 되었다.1. dvh(Dynamic Viewport Height)주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되건 상관없이, 현재 보여지는 뷰 포트의 높이를 동적으로 가져온다. -> 100dvh는 주소표시줄의 유무에 따라 동적으로 값이 달라진다. 2. svh (Short Viewport Height)사용자 화면을 기준으로 가장 짧은 뷰 포트 값을 가져온다.주소 표시줄이 없어져도 기존 주소표시줄의 높이값을 뺀 나머지 값을 가져온다. 3. lvh(Large Viewport Height) svh의 반대개념으로 사용자 화면 기준으로 가장 긴 뷰 포트의 값을 가져온다. 주소 표시.. 2024. 10. 24.
[Next.js]supabase Realtime을 이용한 채팅 기능 supabase Realtime이 프로젝트 진행 중 필요해졌다. 아무도 아는 이가 없어, 한번 파보고 시도해보고자 포스팅을 작성하게 되었다. -- 포스팅 작성 진행 중 2024. 10. 24.
[Next.js]Supabase CLI로 각 테이블에 맞는 타입 생성 feat. More simple 저번 시간에는 Supabase에서 TypeScript에 적용할 수 있는 타입을 추출할 수 있도록 cli로 supabase cli를 설치 및 로그인 후 데이터베이스와 관련된 타입을 파일로 얻어오는 것을 확인했다.해당 사항 진행 중에 더 다른 쉬운 방법도 알게되어, 공유하고자 포스팅을 작성합니다. 1. Supabase Dashboard로 들어와서 위와 같은 경로를 따라, Generate and download types를 눌러준다.2. 해당 Action은 cli환경에서 굳이 설정하지 않아도, supabase web에서 데이터베이스의 type을 typescript에서 만들 수 있도록 도와준다. 3. 전 글과 같이 Import하여 사용하면 된다. 2024. 10. 23.
[Next.js]Supabase CLI로 각 테이블에 맞는 타입 생성 프로젝트를 진행하는 도중 supabase의 type을 쉽게 꺼내는 방법이 있다고 팀원분께서 말씀해주셔서 해당 사항을 토대로 포스팅을 작성해보도록 한다. 해당 사항은 Supabase Docs에서도 확인이 가능한 사항이다. [Generating TypeScript Types]https://supabase.com/docs/guides/api/rest/generating-types1. yarn add supabase --dev-supabase cli를 프로젝트에 설치2. yarn supabase login-supabase cli를 통해 supabase 계정에 로그인하는 과정 3. project의 아이디가 필요하다. project 아이디는 supabase 프로젝트를 생성했을 때 대쉬보드에 접근하면 url에서 얻을.. 2024. 10. 23.
Test Code에 관하여. 1. Frontend 관점에서의 Test의 목적과 이점1-1 안정성과 신뢰성 확보 : 정기적인 테스트를 통해 개발된 애플리케이션이 안정적으로 작동하며,예상치 못한 사용자의 액션에도 견딜 수 있고 정상적으로 동작하는지를 확인 1-2 코드 동작의 테스트 : 코드가 로직대로 정상적으로 제대로 동작하는지에 대한 검증1-3 상호 작용 테스트 : 사용자와의 상호작용, 클릭, 스크롤, 입력 등이 정상적으로 동작하는지를 검증 1-4 성능 평가 : 애플리케이션의 로딩시간, 반응속도 등 성능 지표를 평가, 더 좋은 사용자 경험을 위하여 개선점을 식별할 수 있는 것1-5 크로스 브라우징 호환성 : 다양한 웹 브라우저와 디바이스에서 애플리케이션이 일관된 방식으로 작동하는지를 테스트 1-6 인터페이스 검증 : 프론트엔드 테스트.. 2024. 10. 11.

티스토리툴바