https://supabase.com/ Supabase | The Open Source Firebase AlternativeBuild production-grade applications with a Postgres database, Authentication, instant APIs, Realtime, Functions, Storage and Vector embeddings. Start for free.supabase.comhttps://orm.drizzle.team/ Drizzle ORM - next gen TypeScript ORM.Drizzle ORM is a lightweight and performant TypeScript ORM with developer experience in mind.o..
이 글의 코드를 이해하려면 이전 글을 읽는 것을 추천드립니다. https://kangwonpark27.tistory.com/67 useImperativeHandle | createPortal | forwardRef | Serveraction | middleWare에 대해 공부해봅시다useImperativeHandleuseImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트kangwonpark27.tistory.com ReactQuery는 아래의 명령어로 설치가 가능하다yarn add @tanstack/react-queryyarn add @tan..
useImperativeHandleuseImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트의 특정 기능만 노출하도록 할 수 있다. 일반적으로 React에서 부모 컴포넌트가 자식 컴포넌트의 내부 동작을 직접 제어하는 것은 권장되지 않는다. 하지만 특정 상황에서는 필요할 수 있다. 예를 들어, input 요소의 focus 메서드를 부모에서 호출하거나, 특정 컴포넌트의 메서드를 외부에서 실행할 필요가 있을 때 useImperativeHandle을 사용할 수 있다. 이 Hook은 forwardRef와 함께 사용되며, useImperativeHandle(..
카카오맵 쓰려다가 이거 때문에 정말 애를 먹었다. 검색도 아래처럼 엄청 많이 하고 ㅎㅎ.. 해결하기 위해 여러가지를 시도해보았다 첫번째. 카카오 문서 그대로 따라하기 처음에 카카오맵 연결할때는 claude(생성형 AI)에게 짜달라고 했는데 너무 미사여구를 많이 붙인 코드를 줘서 공식문서를 보고 일단 기본적인 거만 따라했다.(처음에는 바로 따라하다가 const로 변수 만들고 이러길래 바로 공식문서로 이동함) https://apis.map.kakao.com/web/guide/#ready 두번째. index.html에 api키 넣어 코드 짜기 위에서 말했듯 claude는 변수로 하길래 이게 맞나? 했는데 아니었구요.. 아래 벨로그보면서 따라했더니 됐습니다 + 'kakao' is not undefi..
코드를 작성하다가The requested module '/src/components/header/index.jsx' does not provide an export named 'Header' 이와 같은 오류가 뜨길래 2가지 방법을 시도해봤다. 첫번째로는 이 블로그를 참고해서 하다가 안되길래 https://velog.io/@ddaa111/export-default-%EB%AA%A8%EB%93%88-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-%EC%97%90%EB%9F%AC export default 모듈 불러오기 에러1. 배경 1.1 개발 환경 Vite React JavaScript 1.2 문제 상황 components 폴더 하위에 3개의 컴포넌트 생성 후 index.js에 3개의 ..
GET리소스를 조회/읽기만 하는 작업데이터를 변경하지 않음 (읽기 전용)URL에 데이터가 노출됨캐시 가능 예) 게시글 목록 조회, 특정 사용자 정보 조회POST새로운 리소스 생성서버에 데이터를 제출요청 본문에 데이터를 담아 전송멱등성이 없음 (같은 요청을 여러번 하면 여러개가 생성됨) 예) 새 게시글 작성, 회원가입PUT리소스를 수정하거나 없으면 생성전체 리소스를 교체/업데이트멱등성이 있음 (같은 요청을 여러번 해도 결과가 동일) 예) 게시글 전체 내용 수정PATCH리소스의 일부분만 수정PUT과 달리 일부 필드만 업데이트 가능멱등성이 없을 수 있음 예) 게시글의 제목만 수정, 사용자의 이메일만 변경
UML 다이어그램이란?UML 다이어그램은 프로그램을 만들기 전에 설계도를 그리는 표준화된 방법입니다. 마치 건축가가 건물을 짓기 전에 설계도를 그리는 것처럼, 개발자도 프로그램의 설계도를 그립니다. 오늘 알아볼 다이어그램은 객체와 와이어프레임입니다. 객체- 프로그램의 구조를 보여주는 가장 기본적인 다이어그램- 각 요소들의 특징과 관계를 표현합니다 예시 사진&코드@startumlobject Londonobject Washingtonobject Berlinobject NewYorkmap CapitalCity { UK *-> London USA *--> Washington Germany *---> Berlin}NewYork --> CapitalCity::USA@enduml와이어프레임- 웹사이트나 앱의 화면 ..
포스팅 미리 보기metadata로 웹사이트 title 바꾸는 법dummyjson을 활용해보기신기술 suspense 사용해보기(feat. 동적라우팅)next에서 로딩 화면 간편하게 만들기 아래의 설명보다 좀 더 자세한 설명을 원한다면 공식문서를 참고하는 것이 좋다! metadata로 웹사이트 title 바꾸는 법 본격적인 내용에 들어가기에 앞서 아주 간단하게 몸풀기하고 들어가도록 하겠다. 몸풀기로 준비한 것은 metadata라는 것으로 웹사이트 title을 바꾸는 법이다. //layout.tsx//정적인 페이지 사용시 쓸 수 있는 코드export const metadata = { title: 'Thank you next!', description: '넥스트야 고마워',} 나는 layouy.tsx안..