보망고의 WEB 파헤치기

새로 올라온 게시글을 확인해보세요.

• 디버깅노트 높이값 일정하고 너비가 가변인 이미지 불러올 때 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 언어팩 설정시 사용시 오류 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 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 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에 파라미터 값을 받아와야할 이유가 없었음..

• 

  React [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 ..