Programming/ReactJs 썸네일형 리스트형 [React] react, next.js 사용시 쿼리스트링을 감춰야하는 경우 URL 에서 쿼리스트링을 감출 필요가 있을 경우, 아래와 같이 Next.js Router 의 push 함수의 두번째 파라미터 as (maskes url for the browser) 를 사용해서 쿼리스트링을 감출 수 있습니다. import { useRouter } from 'next/router' ... const router = useRouter() router.push( { pathname: '/sample', query: { testQuery: '12345' } }, '/sample' // 브라우저에 표시됨 ) 더보기 [react] typescript input 박스 의 텍스트가수정안되는경우 문제의 원인은 input 및 textarea 엘리먼트의 value 속성에 reviewModel?.title 및 reviewModel?.content를 사용하는데, reviewModel이 null 또는 undefined인 경우 이 값들이 초기값으로 설정되어 있기 때문입니다. 이로 인해 이러한 입력 필드를 수정하거나 지울 수 없습니다. 문제를 해결하려면 input 및 textarea 엘리먼트의 value 속성을 title 및 content 상태 변수에 연결해야 합니다. 즉, value 속성에 직접 title 및 content 변수를 할당해야 합니다. 아래는 수정된 코드입니다: jsxCopy code setTitle(e.target.value)} /> setContent(e.target.value)} rows.. 더보기 [react]번외 react router-pathname 대한 개념 이해 컴포넌트를 다른 페이지에 포함할 때, router.pathname이 어떻게 작동하는지에 대한 이해가 필요합니다. router.pathname은 현재 페이지의 경로를 나타내는 속성입니다. 컴포넌트 내에서 이 값을 확인할 때, 컴포넌트가 렌더링된 현재 페이지의 경로를 나타냅니다. 그러나 이 컴포넌트가 어떤 부모 컴포넌트에 의해 렌더링되었는지에는 영향을 주지 않습니다. 따라서 컴포넌트를 다른 페이지에 포함했을 때, 컴포넌트 내부의 router.pathname은 해당 컴포넌트가 렌더링된 현재 페이지의 경로를 나타냅니다. 즉, 부모 페이지의 경로가 아닌 현재 페이지의 경로입니다. 이는 React 컴포넌트의 특성으로, 컴포넌트는 그 자체로 독립적인 상태와 렌더링을 가지며, 부모 컴포넌트의 상태나 경로와는 무관하게 .. 더보기 [Nextjs, Typescript] 프로젝트에 Prettier + ESlint 설정하기 Prettier + ESlint 설정 팀 프로젝트는 Prettier 포맷터 설정과 ESlint 린터 설정이 필수인 것 같다. 따움표 스타일 정도는 맞출 수 있을지 모르지만, 띄어쓰기나 들여쓰기, 개행 등 불필요한 diff가 발생할 수 있어 생산성이 떨어질 수 있다. 또한 인터프리터 언어인 자바스크립트인 경우엔 컴파일 과정이 없으니, 사전에 에러를 잡아 줄 수 있는 린터의 역할이 크다. Prettier 다양한 포맷터를 사용해보지 않았는데, 그도 그럴 것이 개발을 시작할 때부터 formatter === Prettier 줄 알았다. 항상 vscode의 확장으로 쓰다가 팀 프로젝트를 위해 local 환경에서 설치하면서 Prettier 라이브러리에 대해 더 알아보았다. prettierrc는 json과 yaml, .. 더보기 TS1208: 'Login.tsx' cannot be compiled under '--isolatedModules' because it is considered a global script file 해결 방법 TypeScript에 빈페이지가 있으면 아래같은 에러가 뜬다 cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module. TS1208 빈페이지에 export {} 입력 하면 에러 해결 더보기 [scoop] 윈도우용 scoop 설치 방법 scoop 에 대하여.. Windows 용 명령줄 설치 프로그램 https://scoop.sh/ (참고) scoop 설치(Windows 10) Windows PowerShell 열기 Set-ExecutionPolicy RemoteSigned -scope CurrentUser 입력 실행 규칙 변경 -> Y 입력 scoop 다운로드 -> iex "& {$(irm get.scoop.sh)} -RunAsAdmin" 입력 설치 완료 화면 scoop 설치완료 화면 (참고용) scoop 설치 중 에러 Running the installer as administrator is disabled by default, see https://github.com/ScoopInstaller/Install#for-admin for.. 더보기 이전 1 다음
