전체 글 (312) 썸네일형 리스트형 React-native default background color, 업무중, 앱 사진을 캡쳐해서 보냈는데 배경이 투명이 되어버렸다. 이전 작업하시던분의 흔적 같은데, default색상을 변경하기 위해 default color를 찾게되었다. node_modules\@react-navigation\native\src\NavigationContainer.tsxfunction NavigationContainerInner( { theme = DefaultTheme, linking, fallback = null, documentTitle, onReady, ...rest }: Props, ref?: React.Ref | null>) ///.... return ( );아무래도 defaultThem.. next admin .prettierrcnextjs는 세미콜론 사용을 권장하지 않고, 작은 따옴표를 사용하기 때문에 아래와 같이 설정해주었다.{ "semi": false, "trailingComma": "all", "singleQuote": true }app / uicomponents와 ui 중 폴더 이름을 뭐로 할지 고민했지만 nextjs의 공식문서에 ui로 되어있기 때문에 ui로 하기로 했다.마찬가지로 globals.css도 ui 폴더에 넣게 되었다. CSS 파일 이름따로 스타일링 라이브러리를 사용하지 않기 떄문에, class 중복을 막고 로컬에서만 사용하기 위해 module을 붙였다.컴포넌트 : card.jsxcss : card.module.css chart 연습을 위해 시작한 프로젝트. .. Blend, Next에서의 svg, tailwind line-clamp, Next Route Groups 프로필 이미지를 보여주기 위해 svg를 사용하게 되었다. react에서 처럼 사용하려 했더니 오류가 발생했다. 위 에러는 객체를 직접 렌더링 하려고 할 때 나오는 에러로, react(next)는 텍스트, 숫자, JSX는 렌더링 가능하지만 객체를 직접 렌더링 할 수는 없다.위 문제를 해결하기 위해 두 가지 방법을 찾아냈다. 1. svg를 컴포넌트로 변환 2. next/image 사용 두 방법의 차이로는 이미지 최적화:next/image는 이미지 최적화를 제공하여 다양한 크기로 이미지를 자동 생성하고, 필요한 크기의 이미지만 로드@svgr/webpack을 사용한 방법은 단순히 SVG를 컴포넌트로 가져와 렌더링하므로 최적화 기능 X로딩 성능:next/image는 Lazy Loading 및 이미지 최적화를 .. 무한 스크롤 구현하기(next, supabase) 메인 화면에 포스트 목록을 무한스크롤로 구현하기로 했다.기존 프로젝트의 경우, 백엔드에서 제공하는 데이터에 다음 페이지에 관한 정보가 있었기에 무난히 구현되었지만, 이번엔 supabase에서 그대로 받아오기 때문에 다음 페이지에 대한 정보가 없다. 그래서 페이지네이션에서 사용했던 형태로 시도해 보았더니.. 역시 마음처럼 작동하지 않았다. 1. 무한스크롤이 바로 작동말 그대로 스크롤을 내리지 않아도 무한스크롤이 자동으로 작동하는 현상 2. 무한스크롤이 작동하지 않음그냥 무한 스크롤이 작동하지 않는 현상 위와 같은 무한 스크롤 구현 시 가장 자주 보이는 문제가 있었고, 그냥 페이지 정보를 받아오는게 편할까 싶어 찾아보니 https://velog.io/@hw1635/TIL-%EB%AC%B4%ED%95%9C%.. 작성 시간 구하는 함수 수정 저번 작업때, 글 작성 시간을 구하는 함수를 만들었었다. https://frian.tistory.com/entry/%EC%9E%91%EC%84%B1-%EC%8B%9C%EA%B0%84-%EA%B5%AC%ED%95%98%EB%8A%94-%EC%A4%91-%EB%B0%9C%EC%83%9D%ED%95%9C-%EB%AC%B8%EC%A0%9C 작성 시간 구하는 중 발생한 문제supabase에 있는 데이터의 작성 일을 가지고, 작성 시간이 현재로부터 몇 분, 몇 시간, 몇 일, 몇 달, 몇 년 전인지를 구하려고 했다. Date 형식이기 때문에 getTime() 함수를 사용하여 현재 시간과의 차frian.tistory.com 그러나 아무리 생각해봐도 지저분한 코드이기도 하고, 효율도 좋아보이지 않아서 수정하기로 했다... 작성 시간 구하는 중 발생한 문제 supabase에 있는 데이터의 작성 일을 가지고, 작성 시간이 현재로부터 몇 분, 몇 시간, 몇 일, 몇 달, 몇 년 전인지를 구하려고 했다. Date 형식이기 때문에 getTime() 함수를 사용하여 현재 시간과의 차이를 구하기로 했고, 아래와 같은 함수를 만들었다. const formatTimeAgo = (dateString: string): string => { const givenDate = new Date(dateString) const now = new Date() // 주어진 날짜와 현재 날짜의 차이를 계산 (밀리초 단위) const timeDifference = now.getTime() - givenDate.getTime() // 시간 단위 변환 const minutesDi.. Next의 컴포넌트는 반드시 default export 되어야 한다. eslint와 prettier 설정을 한 뒤, 깃에 올리고 vscode를 껐다 키니 오류가 발생했다. Error: The default export is not a React Component in page: "/" 알고보니, Next의 컴포넌트는 반드시 default export가 되어야 한다는 것. 간단한 오류였다. 작업중. supabase OAuth2 trigger 사용하여 테이블에 자동으로 넣기 header의 authbutton에서 sever 컴포넌트 사용중 >> 로그인 화면에서 header 보여주기 싫음.usePathname은 클라이언트에서만 사용 가능 >> header에서 사용하려니 ./utils/supabase/server.tsError: × You're importing a component that needs next/headers. That only works in a Server Component which is not supported in the pages/ directory. Read more: https://nextjs.org/docs/getting-started/ │ react-essentials#server-components │ │ ╭─[E:\dev\TO.. 이전 1 2 3 4 ··· 39 다음
