본문 바로가기

Programming

[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, .. 더보기
refresh token도 결국 JWT인데 왜 "Bearer"을 안쓰는걸까? https://velog.io/@cada/%ED%86%A0%EA%B7%BC-%EA%B8%B0%EB%B0%98-%EC%9D%B8%EC%A6%9D%EC%97%90%EC%84%9C-bearer%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C 토근 기반 인증에서 bearer는 무엇일까? 본 글은 MDN - HTTP 인증, Veloport님의 게시글을 참고하여 작성되었습니다. 자세하게 알고싶으신 분은 해당 링크를 참고해주세요.토큰 기반 인증인증 타입마치며토큰 기반 인증은 쿠키나 세션을 이 velog.io 참고 ✅ 상황 로그인 요청을 날리고, AccessToken과 RefreshToken이 정상적으로 돌아오는 것을 확인했다. ✅ 의문 JWT 토큰 인증을 구별하기 위해 Bearer을.. 더보기
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.. 더보기
[WINDOW] 탐색기에서 폴더 구조만 복사하기(파일 제외) 1. 바탕화면에 임의의 새 폴더 생성(어디에 폴더를 만들던 상관없음. 폴더명 test로 하나 만듬.) 2. 해당 폴더를 열고 경로창에 cmd 입력후 엔터 3. 복사하고자 하는 폴더를 탐색기로 열고 경로를 복사한다 4. CMD 명령창에 밑의 명령어 타입 후 엔터 CD "복사될 폴더의 위치" XCOPY "복사를 실행할 폴더경로" . /T /E 5.결과 바로 하위의 폴더 뿐만이 아니라 그 내부의 폴더들까지 전부 복사된 것을 확인할 수 있다(파일은 제외) 더보기
[Intellij] 인텔리j 플러그인 설치 방법 (Presentation Assistant, key promoter) Presentation Assistant 간단히 소개를 하자면 특정 단축키를 누를때 MacOS에서는 어떤 단축키로 해당 기능을 수행할 수 있는지를 IDE 화면상에 toast 처럼 띄워주게 됩니다. Key Promoter 사용자가 마우스로 작업을 하면 똑같은 기능을 할 수 있는 단축키를 아래에 초록색 알림창을 통해 제안을 해주는 플러그인 입니다. 위의 그림은 제가 Window 노트북에서 [Ctrl + Shift + A]를 입력했을 때 맥에서는 [↑(윗방향키) + cmd + A] 키로 실행이 가능하다고 알려주는 기능입니다. 설치하기 위해서는 Shift 키를 두번 누르시고 plugins 라고 검색하신 후 엔터를 치시면 위의 플러그인을 설치하시면 됩니다.! 더보기
[AWS] 프리티어를 계속 사용 할 수 있는 방법 (gmail 필수) gmail에는 여러 용도로 사용할 수 있게 아이디 뒤에 +{something}을 붙여서도 사용할 수 있는 기능이 있다. 예를 들어 내 이메일주소가 gmialtest@gmail.com인데 여기에 gmialtest+2022@gmail.com을 붙여도 내 원래 계정으로 온다. 이렇게 말이다. 물론 숫자뿐만이 아니라 영어도 되므로 특정 메일을 리스팅하거나 라벨링할 때 쓰기 좋은 기능이지만 이 기능을 aws계정가입과 함께 활용하면 같은 gmail계정으로 여러개의 프리티어계정을 계속 생성할 수 있다. 프리티어계정은 1년 후에 종료되기 때문에 나 같은 경우에는 뒤에 해당년도를 붙여 새로운 계정을 만들어 사용하고 있다. {Gmail계정} + {임의의문자}@gmail.com 이렇게 가입시도를 하면 멀쩡히 잘 진행된다. .. 더보기
[AWS]EC2 - 윈도우에서 인스턴스 접속하기 SSH란? SSH(Secure Shell)는 원격지 호스트 컴퓨터에 접속하기 위해 사용되는 인터넷 프로토콜이다. 셸로 원격 접속을 하는 것이므로 기본적으로 CLI 상에서 작업을 하게 된다. 기본 포트는 22번이다. (SSH는 암호화 기법을 사용하기 때문에, 통신이 노출된다고 하더라도 이해할 수 없는 암호화된 문자로 보인다.) SSH 접속 프로그램 'PUTTY' 아래 링크에서 Putty를 다운로드하여보자 https://www.putty.org/ Download PuTTY - a free SSH and telnet client for Windows Is Bitvise affiliated with PuTTY? Bitvise is not affiliated with PuTTY. We develop our SSH.. 더보기

티스토리툴바