분류 전체보기 (86) 썸네일형 리스트형 높이값 일정하고 너비가 가변인 이미지 불러올 때 IOS 간격 이슈 - 이슈: 크기가 제각각 다른 이미지들을 일렬로 정렬했을 때, IOS에서만 너비값이 제멋대로로 나타남 - 구체적인 조건: 이미지들은 flex로 정렬했으며, 높이값은 40px로 통일하되 너비값은 가변적이므로 따로 값을 주지 않은 상황. > ul { display: flex; align-items: center; flex: 0 0 auto; gap: 30px; > li { height: 40px; img { display: block; height: 40px; object-fit: contain; .. [solved] swiper를 map 함수로 감쌀 때 navigation lock disable 되는 현상 슬라이드 UI가 필요할때 swiper 라이브러리를 종종 쓰고 있는데,요번에 작업하면서 생각지도 못했던 에러가 발생해 기록해보고자 한다. {items.map((item, index) => ( {item.title} )} 위와 같은 형식으로 배열을 map으로 리턴하는 값들을 Swiper 안에 담았다.슬라이드는 문제없이 불러와지는데, 문제는 navigation 버튼들이 활성화가 안 되는 것이다. 제공되는 네비게이션 버튼의 기본 클래스명은 swiper-button-next, swiper-button-prev인 것을 확인할 수 있었는데,map으로 불러와진 리턴값을 슬라이드에 넣으면 초기 로딩 때 이 클래스에 lock과 disabled 클래스명도 함께 적용되는 걸 알 수 .. [solved] nextjs 13버전 404 에러 페이지에서 다른 페이지 이동시 오류 nextjs 13버전으로 페이지를 제작하면서 다양한 오류들을 만나는데 제일 황당했던 오류 중 하나.. 404에러 발생시 라우팅되는 페이지인 not-found.tsx가 화면에 뿌려진 상태에서, next/link 로 다른 페이지 이동시 계속 not-found 에서 화면이 바뀌지 않는다. csr과 ssr을 혼용한 탓에 난 오류인가 싶어서 layout까지 대거 드러내고 수정해봤지만 먹히지 않음,, link를 앵커태그로 고치고 이동할때마다 리렌더링되게 하는 게 나을까 싶었으나 구글링해보니 it has actually been fixed, just update your project to the latest nextjs version, npm install next@latest react@latest react-d.. [solved] react-i18next:: You will need to pass in an i18next instance by using i18nextReactModule 언어팩 설정시 <Trans> 사용시 오류 nextjs 이전 단계에서는 잘만 썼던 i18next를 13버전으로 올렸더니 여러가지 이슈들이 터지기 시작한다.. 현재 프로젝트 환경에 맞춰서 i18next를 잘 쓰고 있었는데언어팩 json 에서 html 태그를 사용해야해서 컴포넌트를 이용해야했다. react-i18next 문서를 참고하면서 잘 작성..https://react.i18next.com/latest/trans-component import React from 'react';import { Trans, useTranslation } from 'react-i18next'function MyComponent() { const { t } = useTranslation('myNamespace'); return Hello World;} 대충 위에 .. [solved] nextjs 13 useRef 추가하면 에러 발생 Warning: Invalid hook call, TypeError 까지 슬라이더 라이브러리 Swiper를 조작하려고 useRef()를 쓰려는데, 예상치 못한 에러가 미친듯이 발생한다;; Unhandled Runtime Error Error: Invalid hook call. 이라면서 Hooks가 잘못 호출되고 있다는 거다.. 터미널에선 error TypeError: Cannot read properties of null (reading 'useRef') 라며 타입에러라고도 내뱉고 있었다. 원인을 계속 못 찾던 중.. hooks 호출이 잘못됐다니까 순서를 바꿔볼까..? 하는 마음에 랜더 순서 가장 상위로 올렸다 useRef 호출하는 코드를 위로 올렸더니 잘 돌아간다. 혹시나해서 테스트겸 다른 코드도 위에 추가해봤는데 다른건 괜찮다. 저 언어팩 호출하는 놈이 문제였던 듯 하다... nextjs에서 eslint 세팅중 갑자기 Error: 'React' is not defined 등 각종 에러가 쏟아짐 nextjs 13 버전에 익숙해지고자 토이 플젝을 진행하고 있다. 초기 셋팅하는데부터 자꾸 문제가 터져서 매우 곤혹스러움.. 근데 error ESLint: Failed to load config "prettier" to extend from. 이런 에러가 뜨길래 서칭해봤더니 eslint-config-prettier 라이브러리가 필요하대서 설치. 그랬더니만 이번에는 Error: 'React' is not defined, Error: 'Image' is defined but never used. 등등 아주 다양한 에러를 뱉기 시작했다.. webpack에 runtime: automatic을 설정해줘야 한다는 글들을 보고, SWCplugin에서 설정도 추가해봤지만 달라지는 게 없음.. 그래서 이것저것 eslin.. CNA(create next app)없이 수동으로 nextjs + typescript 환경 구축하기 새로운 스터디를 참여 하면서 todo 앱을 만들어보기로 했다. 앱 환경은 nextjs, 언어는 typescript로 간다. 가장 먼저 앱 기본 세팅을 해야하는데 나는 항상 cna의 도움으로 세팅을 했다. CNA(Create Next App)는 터미널에 아래와 같은 명령어를 입력하면 npx create-next-app@latest 기본적인 환경이 다 구축된 완성형(?) Nextjs 앱을 설치해주는 마법의 주문 같은 거다. 이렇게 앱을 만들어 놓으면 불필요한 파일들도 같이 따라와 설치돼 좀 불편한 면이 있다. 또 더욱이 추후에 바벨이나 웹팩 설정을 달리 해야할 때 어려움이 있다고 한다. 물론 나는 여지껏 웹팩이나 바벨을 달리 만져줘야하는 경우가 크게 없었고.. 필요한 경우에만 해당 코드를 긁긁 해서 복붙하는.. next.js <Image /> attribute 타입 지정시 TS2322: Type 'StaticImageData' is not assignable to type 'string'. 에러 next.js에서 이미지를 마크업할 때 next/Image 컴포넌트를 주로 이용한다. lazy loading과 이미지 사이즈 최적화, placeholder 기능 등 유용한 쓰임이 있기 때문이다. 이번에 컴포넌트로 분리하는 작업을 하다가, 컴포넌트의 src값을 props로 받아오도록 했는데 언어가 typescript다 보니 props 값의 타입을 지정해줘야 했다. {title} {subTitle} export interface contentProps { title: string; subTitle?: string; background: string; } 위와 같이 background(즉, src의 타입)에 string으로 설정하면 될 줄 알았다...! 하지만 background에 들어갈 값은 import된 .. react-router-dom v5에서 link로 이동시 화면이 redirecting 되지 않음.. 앞서 redux 예제를 만들어 보면서 ownProps 값에서 파라미터 값 등의 정보가 받아와지지 않아 react-router-dom을 v5로 다운그레이딩하는 과정을 경험했다.. [Redux] 컴포넌트에서 connect로 ownProps 받을 때 컴포넌트 props 값 모두 받아오기 react에서는 상태관리를 주로 mobx로 했기 때문에 생소했던 Redux. 요즘 틈틈히 redux로 이것저것 만들어보고 있다. 처음은 역시 베이직 오브 베이직인 todolist. 블로그와 유튜브에서 본 대로 만들어 봤 bomango.tistory.com 그런데 생각해보니 react-router-dom에는 useParams 등과 같은 기능이 있는데 굳이 다운그레이딩하면서 ownProps에 파라미터 값을 받아와야할 이유가 없었음.. [Redux] 컴포넌트에서 connect로 ownProps 받을 때 컴포넌트 props 값 모두 받아오기 react에서는 상태관리를 주로 mobx로 했기 때문에 생소했던 Redux. 요즘 틈틈히 redux로 이것저것 만들어보고 있다. 처음은 역시 베이직 오브 베이직인 todolist. 블로그와 유튜브에서 본 대로 만들어 봤는데, 내가 작성한 코드에서 뜻밖에 문제점?을 발견했다. 의도는 Home.js 라는 컴포넌트에서 connect로 state값과 props값을 불러오고자 했다. import { connect } from 'react-redux'; const Home = (props) => { console.log('props:', props); return ( ); }; const mapState = (state, ownProps) => { console.log(state, ownProps); return .. 이전 1 2 3 4 ··· 9 다음 목록 더보기
