본문 바로가기

분류 전체보기

 (95)
Next.js가 뭐예요? - Next.js 소개 | Next.js Next.js 에 대해 알아봅니다.  Next.js가 뭐예요? What is Next.js?풀스택 웹 애플리케이션을 만들기 위한 React 프레임워크입니다.UI 생성에 리액트 컴포넌트를 사용하며, 추가적인 기능들과 최적화를 위해 Next.js를 사용합니다.Next.js는 번들링, 컴파일링 등의 React를 위해 필요한 설정을 추상화하고 자동으로 만들어줌으로써 설정하는데 쓰는 시간을 줄여주어 애플리케이션을 구축하는데 집중할 수 있게 해줍니다. Next.js의 메인 기능 Main Features라우팅 Routing화면 랜더링 Rendering데이터 가져오기 Data Fetching스타일링 Styling최적화 Optimization타입스크립트 TypeScript Next.js 안에는 뭐가 있나요? What's..
버즈3/버즈3 프로 하겐다즈 미니컵 케이스 초콜릿 후기 | ACC 갤럭시 버즈3를 구매하였으니 옷을 입혀줘야겠죠 😆 갤럭시 버즈3와 버즈3 프로 모두 사용 가능한삼성전자 정품 케이스하겐다즈 미니컵 케이스 초콜릿 색상데려왔어요 :)왜 버즈는 고급진 가죽 케이스가나오지 않는 것인가......😢 👇👇 짧은 영상으로 보기 👇👇 구매사전구매자 대상으로구매할 수 있는 이벤트몰에서하겐다즈 케이스와 PD 충전기를구매하였답니다. 언박싱  구성박스, 설명서, 케이스, 나무스푼 키링이 들어있어요. 외관헉 하겐다즈랑 똑같이 생겼어요...!!🍫플라스틱에 무광 처리한 재질이에요. 왼쪽 측면에는 키링을 걸 수 있는 고리까지 있답니다.어떤 제품은 USB-C 포트 구멍이 작아서케이스 착용한 상태로케이블 연결이 안되는 제품도 있다던데 요 제품은 널널하게 가능합니다 😊(하지만 무선충전은 ..
랜덤 숫자 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 랜덤 숫자 n번 롤링 후 앞자리부터 맞추는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (3) 각 자릿수가 랜덤 숫자로 n번 롤링 후 첫 번째 자리부터 맞추는 롤링을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjQuery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능변수 정의사용할 변수를 정의합니다.const jqEl = $("#cnt"); // 숫자 표시할 요소const targetNum = 128374838; // 표시할 타겟 숫자const strNum = targetNum.toString(); // 타겟 숫자의 string 타입const targetNumLen = strNum.length; // 타겟 숫자 자릿수const LOOP_RANDOM_CNT..
각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 각 자릿수별로 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (2)0부터 1씩 증가하는 롤링에 이어 각 자릿수별로 1씩 증가하는 롤링을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjquery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능반복해서 사용할 데이터들을 변수 정의합니다.const jqEl = $("#cnt"); // 숫자 표시할 요소const targetNum = 10; // 표시할 최종 숫자const strNum = targetNum.toString(); // 숫자 데이터 타입 stringconst targetNumLen = strNum.length; // 숫자 자릿수 각 자리에 표시할 데이터각 자릿에 표시할 데이터를 배열로 관리합..
0부터 1씩 증가하는 숫자 롤링 카운터 만들기 | HTML, Javascript, jQuery 0부터 1씩 증가하는 숫자 롤링 카운터 만들기 - 숫자 롤링 카운터 (1)어떤 회원수나 구매 수량 등 강조하고 싶은 숫자를 표시할 때 사용자의 시선을 사로잡기 위해 애니메이션을 사용하죠.그 중 0부터 1씩 증가하다가 표시할 최종 숫자를 보여주는 애니메이션을 구현해 보겠습니다. EnvironmentHTMLJavascriptThirdpartyjquery구현▪️퍼블리싱숫자가 표시될 요소를 생성합니다. ▪️기능본격적으로 개발하기 전, 중복하여 사용하는 데이터들은 미리 변수로 정의하는 습관을 들이면 좋겠습니다.const targetNum = 10; // 표시할 최종 숫자const jqEl = $("#cnt"); // 숫자 표시할 요소 0부터 1씩 증가0부터 최종 숫자에 도달할 때까지 1씩 증가하는 반복문을 작성합..
Timer(타이머) 구현하기 | HTML, Javascript, jQuery Timer(타이머) 구현하기EnvironmentHTMLJavascriptSCSSThirdpartyjquery구현▪️ 퍼블리싱타이머가 그려질 요소를 생성합니다.  ▪️ 기능남은 시간현재 시간을 기준으로 목표 시간까지 남은 시간을 초 단위로 계산합니다.Date 객체의 valueOf() 메소드로 시간의 millisecond 값을 비교한 후 1000으로 나누어 second 단위로 변환합니다.const goal = "2024-12-25"; // 목표 시간// 목표 시간과 현재 시간의 차(초)let remain = Math.floor((new Date(goal).valueOf() - new Date().valueOf()) / 1000); 초 > 일 시 분 초(ddhhmmss) 변환구한 초 단위의 남은 시간을 일시분..
갤럭시버즈3 화이트 언박싱 + 후기 | ACC 갤럭시버즈3 화이트 언박싱 + 후기 👇👇 얼리버드 삼성강남 픽업 후기  👇👇  갤럭시버즈3 화이트 얼리버드 삼성 강남 픽업 | ACC갤럭시버즈3 화이트 얼리버드 삼성 강남 픽업 내돈내산 구매 후기👇👇 짧은 영상으로 보기 👇👇 오픈형 무선 이어폰갤럭시버즈3 드디어 갤럭시 버즈 라이브에 이어오픈형 버즈가 출시되었devzooo.tistory.com 언박싱저는 화이트 색상으로 구매했답니다.구성 디자인 이번 제품부터 디자인이 완전히 달라졌어요! 강낭콩 형태에서 줄기가 있는 콩나물 형태로변경되었답니다. 경쟁 제품과 비슷해서 짭 에O팟 아니냐!비판하더니 결국 개성없이 똑같이 가냐!라고 생각하시는 분들 계실 텐데,저도 사진으로는 그 제품 생각이 났는데실물로 보면 꽤 다른 매력이 있어요!통화 음질 개선과 ..
갤럭시버즈3 화이트 얼리버드 삼성 강남 픽업 | ACC 갤럭시버즈3 화이트 얼리버드 삼성 강남 픽업 내돈내산 구매 후기👇👇 짧은 영상으로 보기 👇👇 오픈형 무선 이어폰갤럭시버즈3 드디어 갤럭시 버즈 라이브에 이어오픈형 버즈가 출시되었습니다!얼마나 기다렸던지 ㅠㅠ 삼성 생태계에 진하게 빠진 저는스마트폰, 워치, 노트북까지모두 삼성 갤럭시를 사용하고 있습니다.딱 하나 이어폰만 빼고... 버즈 라이브가 출시되기 전의 버즈는모두 커널형이라에어팟2를 사용하고 있었습니다.커널형 이어폰을 착용하면이상하게 멀미나는 느낌?이 들어요😢 4년 전 버즈 라이브가 처음 나왔을 때드디어 오픈형 버즈가 나왔구나!너무 반가워서 다음 버전 구매하려고기다리고 있었는데....안 나오더라구요.ㅎ 아시겠지만 애플은 생태계가 폐쇄적이라아이폰을 사용하지 않는 유저가사용할 수 있는 기능이 제..
초 단위 시간을 일시분초(ddhhmmss) 단위로 변환하기 | Javascript 초 단위의 시간을 일시분초(ddhhmmss) 단위로 변환하기  초 단위 시간 time을 nn일 nn시 nn분 nn초로 변환해 봅니다.일1일을 초 단위로 표현한다면 이렇게 표현할 수 있겠죠.1 * 60 * 60 * 24time을 1일로 나눈 몫이 nn일이 됩니다.💡 Javascript의 나눗셈 연산은 실수 나눗셈이므로 Math.floor() 메소드로 소수점 아래를 버림합니다.day = Math.floor(time / (1 * 60 * 60 * 24)) 시1시간은1 * 60 * 60time에서 위에서 구한 nn일의 초 단위 시간을 제외한 시간을 1시간으로 나눈 몫이 hh이 됩니다.hour = Math.floor((time - (day * 1 * 60 * 60 * 24)) / (1 * 60 * 60)) 분마..
그루브스톤 GS85 라벤더 저소음 너울축 타건음 영상 후기 (2) | ACC 그루브스톤(엠스톤) GS85 라벤더 저소음 너울축 타건음 영상 내돈내산 후기 (2) 👇👇 1탄 보기 👇👇 그루브스톤 GS85 라벤더 저소음 너울축 후기 (1) + AS신청 | ACC그루브스톤(엠스톤) GS85 라벤더 저소음 너울축 내돈내산 후기 (1) + AS신청 두 번째 기계식 키보드를 사다오잉 독거미 산지 얼마나 됐다고 키보드를 또 사!? 그렇다. 결국 사버렸다.독거미는 회사devzooo.tistory.com  세팅❗LCD 패널의 시간은 유선연결 후 전용 소프트웨어를 실행하면 자동으로 현재 시간으로 맞춰집니다.저는 windows 유저라 mac용 키캡부터 바꿔줍니다.Option, Command > Win, Alt 연결유선 연결유선 연결은 USB A to C 케이블을 사용하여 연결하면 되고, 동봉..
그루브스톤 GS85 라벤더 저소음 너울축 후기 (1) + AS신청 | ACC 그루브스톤(엠스톤) GS85 라벤더 저소음 너울축 내돈내산 후기 (1) + AS신청 두 번째 기계식 키보드를 사다오잉 독거미 산지 얼마나 됐다고 키보드를 또 사!? 그렇다. 결국 사버렸다.독거미는 회사에서 쓰는거고 집에서 쓸게 필요하잖아!라는 핑계를 스스로에게 하고 그냥 샀습니다.ㅎ 그루브스톤은 크게 2가지 제품군이 있는데, GV/GS 시리즈입니다.GV : 유선 제품GS(Groove Standard) : 유무선 제품두 시리즈 모두 텐키리스배열, 풀배열 버전이 있답니다.  GV GS 종류GV8(텐키리스배열)GV10(풀배열)GS85(텐키리스배열)GS104(풀배열) 스위치(축) 종류 밀키축V2, 저소음 밀키축,코랄축V2, 저소음 코랄축,적축, 저소음 적축,갈축, 저소음 갈축,은축하늬축, 저소음 하늬축,너울축..
Custom Tab(탭) 컴포넌트 구현하기 | HTML, Javascript, jQuery 라이브러리 없이 tab(탭) 컴포넌트 구현하기UI 라이브러리를 사용하지 않고 나만의 custom 탭 컴포넌트를 구현해 보겠습니다.EnvironmentHTMLJavascriptSCSSThirdpartyjquery설계구현할 탭의 구조는 아래 그림을 참고해 주세요.tab 컴포넌트라고 정의하여 wrap 합니다. ▪️head영역사용자가 클릭할 수 있는 tab의 제목 영역입니다.제목 요소들은 성질이 같으므로 리스트라고 생각할 수 있습니다.현재 보이고 있는 panel에 따라 head에 선택되었다는 식별자 인디케이터를 통해 구분할 수 있도록 합니다.  ▪️ panel 영역tab의 내용이 구현되는 영역입니다.최초 진입 시 첫 번째 panel을 제외한 요소들은 숨김 처리합니다.사용자의 head click 동작을 통해 각 ..

티스토리툴바