보망고의 WEB 파헤치기

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

• 디버깅노트 [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 ..

• 

  디버깅노트 Mac m2 소스트리(github) 연결 + 소스트리에 클론할때 비밀번호 확인창 계속 뜨는 오류 해결 맥북 에어 M2를 구입했다! m2에 기존 쓰던 것들을 셋팅하고 있는데, 쉽게 되던 것들이 요상하게 막혔다. 본인은 github에 소스코드들을 저장하고 있고, 이를 GIT GUI인 sourcetree를 통해 관리하고 있다. 이전 맥에서 https로 소스를 관리하다보니 어느순간 토큰 에러 같은게 뜨면서 더이상 지원되지 않았다. https가 막히면서 작업 도중에 ssh로 변경했는데 그러다보니 약간의 우여곡절이 있었음.. 그래서 이번엔 애초부터 ssh로 연결하기로 했다. 우선 계정...으로 들어가 새 계정을 추가했다. 위처럼 github로 로그인해 계정을 연결하면 SSH 키에 .pub 파일이 생성되는데 바로 아래에 클립보드에 복사 버튼을 누르면 ssh키가 복사가 됩니다! (아무것도 안떠서 처음엔 당황했지만 확인..

• React React에서 (api 데이터) json형식 데이터 가져오기 및 원하는 데이터 추출 등 데이터 관리 방법! 프로젝트를 하다보면 작고 큰 데이터들을 가져다가 출력하고 수정하고 삭제하고 등등의 작업들을 처리한다. (보통은 이런 작업들이 전체 작업의 주를 차지하는 것 같다..) 규모가 큰 데이터 혹은 등록, 수정, 삭제 등이 필요한 데이터는 당연히 api 통신을 통해 작업하는게 맞는데, 규모가 크지 않은 소소한 제품 데이터의 경우(별도의 추가나 수정이 필요없는)는 별도의 js 파일에 오브젝트 혹은 배열을 담은 변수로 관리 하곤 했다. // Item.js const Items = { data: [{ name: '아메리카노', taste: '쓴 맛', type: ['아이스', '핫'] }, { name: '라떼', taste: '고소한 맛', type: ['아이스', '핫'] }, { name: '말차라떼', tast..