일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 햇소
- hatso
- next.js
- AI
- JavaScript
- CSS
- API
- 변수
- 최적화
- developerlife
- git
- ES5+
- 우아한테코톡
- ES6+
- es6
- DOM
- Python
- github
- hooks
- learn next.js
- dev
- JS
- object
- This
- array
- react
- gitCLI
- 함수
- 선택자
- html5
- Today
- Total
목록전체 글 (113)
codinghatso

-ai를 사용해 개념정리 했음을 공지합니다.- invoices page를 완성하는 챕터입니다. invocies page에는 검색기능과 6개의 고객 정보를 담는 테이블 6개를 넘어서면 다음 page의 데이터를 가져오는 Pagination 기능 총 3가지를 구현합니다.검색 원리 분석/dashboard/invoices?page=1&query=pending URL쿼리를 객체로 묶어 보면 이렇게 표시할 수 있다.{page: '1', query: 'pending'}.'use client';import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';import { useSearchParams, usePathname, useRouter } from 'next/..

-ai를 사용해 개념정리 했음을 공지합니다.- 📌 Next.js의 부분 프리렌더링 (Partial Prerendering, PPR)**부분 프리렌더링(Partial Prerendering, PPR)**은 Next.js 14에서 도입된 실험적 기능으로,정적(Static) 콘텐츠와 동적(Dynamic) 콘텐츠를 한 페이지에서 동시에 활용할 수 있도록 해주는 새로운 렌더링 방식이에요.✅ 기존 렌더링 방식의 문제점Next.js에서는 기존에 페이지를 렌더링 할 때 두 가지 방식을 사용했어요.정적 생성(Static Generation, SSG)빌드 시 HTML을 생성하여 빠르게 제공.데이터가 거의 변경되지 않는 페이지에 적합.하지만, 실시간 데이터가 필요할 경우 사용하기 어려움.서버 사이드 렌더링(Server-S..

-ai를 사용해 개념정리 했음을 공지합니다.- 스트리밍 (Streaming)스트리밍이란 컴포넌트들을 각각의 덩어리(Chunks)로 묶어 분류하여 병렬처리하는 방식이다. 일반적으로 서스펜스와 데이터 가져오기 작업 시 좋은 관행으로 "데이터 가져오기를 필요한 구성 요소로 이동"을 말할 수 있다.데이터를 필요한 구성 요소로 이동시키면 더 세분화된 서스펜스 경계를 만들 수 있습니다. 이를 통해 특정 구성 요소를 스트리밍 하고 UI가 차단되는 것을 방지할 수 있다. Next.js 에서는 loading.tsx라는 특별한 파일을 생성할 수 있습니다. 이 예약된 파일은 페이지를 로딩하는 동안 사용자에게 보여줄 화면을 정의할 수 있습니다.참고로 정적인 UI 이 과정에서는 SideNav 같은 요소는 즉시 표시됩니다.📌 ..
gitignore 파일에 제외하라고 했던 파일들이 state에 감지되고 있나요?감지되고 있다면 ignore 되지 않고 있다는 뜻입니다.여러 가지 이유 중에 가장 유력한 건 해당 파일이 이미 git repo에 등록되어 감지되는 것입니다.이를 해결하기 위해서는 캐시 삭제 후 다시 추가하기입니다.git rm --cached -r .git add .git commit -m "Apply .gitignore"위 커맨드를 입력하고 push 하면 gitignore 파일이 다시 정상 작동하는 모습을 볼 수 있을 것입니다. 이 방법으로 해결이 안 되었다면. gitignore 파일이 요구하는 문법 기준을 잘 지켰는지 확인해 보시길 바랍니다.
제목 : 언어 모델 완성한 카카오, 멀티모달 모델도 상반기 성능 공개…“비용 효율화 초점”저자 : [전자신문 변상근 기자 ] sgbyun@etnews.com출처 : https://www.etnews.com/20250304000370?mc=ns_003_00003 언어 모델 완성한 카카오, 멀티모달 모델도 상반기 성능 공개…“비용 효율화 초점”카카오가 올해 상반기 텍스트 외에도 이미지·음성을 인식할 수 있는 멀티모달 생성형 인공지능(AI) 모델을 공개한다. 또 연내 카나나 모델에 추론 성능도 업데이트 할 계획이다. 카카오는 최근www.etnews.com용어정리 멀티모달 : Multimodal Model은 텍스트, 이미지, 오디오, 비디오 등 다양한 유형의 데이터(모달리티)를 함께 고력하여 서로의 관계성을 학..
제목 : ‘AI 만난 XR’ 원격협업 부상…韓 中企 산업현장 바꾼다저자 : [디지털데일리 김문기 기자] - moon@ddaily.co.kr출처 : https://www.ddaily.co.kr/page/view/2025021913301496024 ‘AI 만난 XR’ 원격협업 부상…韓 中企 산업현장 바꾼다스마트 글라스에 적용된 딥파인 ‘DAO’ 솔루션 사용 예시...www.ddaily.co.kr용어정리XR : XR(확장현실)은 가상현실(VR), 증강현실(AR), 혼합현실(MR) 등을 아우르는 기술을 말합니다. 몰입형 경험을 제공하는 기술로, 다양한 산업 분야에서 활용기사 본문"산업현장에서 신입 직원이 조직에 적응하도록 돕는 ‘온보딩(Onboarding)’을 원격으로 진행하는 사례가 늘고 있다. 초보 작업자도..

GoogleMap API, OpenWeatherMap API날씨 정보를 가져와 UI로 표시하는 프로젝트를 시작하려 합니다.프로젝트의 주제는 K리그 경기장들의 날씨를 한눈에 볼 수 있는 웹 서비스입니다.우선 날씨 정보를 가져와서 지도 위에 표시하는 것을 완료했습니다.추가 기능을 넣어서 UX 개선을 하고 싶은 상황에서도시를 클릭하면 별개의 창을 띄워 상세설명을 할 것인지. / 도시를 클릭하면 클릭된 박스를 확장시켜 상세설명을 표시할 것인지 선택해야 했습니다.결과적으로 아이콘을 클릭하면 전체 아이콘 변경과 클릭된 도시의 자세한 정보를 오른쪽 상단에 따로 표시해 주는 방향으로 선택했습니다. Tip 버튼 (이용방법 안내)는 왼쪽에서 오른쪽으로 글을 읽는 한국인의 특성을 고려해서 왼쪽에 배치했습니다.아이콘 같은 경..
https://kciter.so/posts/principles-of-debugging/ 디버깅 원칙디버깅, 개발자라면 누구라도 한 번쯤 겪었고 앞으로도 꾸준히 겪어야 할 피할 수 없는 숙명이다. 우리는 간단한 논리적 실수부터, 도저히 원인을 알 수 없어 며칠 동안 머리를 싸매는 버그를 해kciter.sokciter님의 포스팅을 보면서 이해한 내용을 나만의 방식으로 정리한 리뷰글입니다. 디버깅을 할 때 한 부분에 집착하는 사고방식을 모든 것을 의심하는 사고방식으로 바꾸는 것을 권하고 있다.나 또한 프로젝트를 하면서 디버깅을 할 때 꼬리에 꼬리를 무는 형식의 문제해결 방식으로 힘들게 학습을 했던 개발자였다. 해당 포스팅을 읽고 공감하는 부분이 많았기 때문에 집착하는 사고방식을 개선하려고 한다. 직관과 탐정이..