본문 바로가기

IT개발84

[트러블 슈팅]vscode에서 npm install, npm dev run 명령어가 되지 않을시? 어쩌다 제목같은 상황에 놓이게 되었나?오랜만에 안쓰는 노트북의 vscode 명령어를 실행을 해보았습니다.그런데 다음과 같은 명령어가 출력되다 보니 무언가 손상을 입어서 node.js를 재설치하기로 마음먹었습니다.그리고 재설치를 할 경우에는 반드시 1. 제어판의 프로그램 및 기능추가에서 nodejs를 검색하여 제거2. nodejs 파일목록내에 package.json과 node_module파일을 제거Path 환경변수 추가는 기본(why? 그리하여야 PC시스템이 인식할 수 있기 때문) 그러면 vscode 터미널에서 npm 관련 명령어를 실행하다보면 밑에와 같이 메시지가 출력됨을 볼 수 있습니다.위와 같은 오류메시지가 출력될시 시도해볼 수 있는 경우가 있습니다.PowerShell의 보안 정책 때문에 npm명령어.. 2025. 3. 3.
[TypeScript]React 개발 프로젝트에서 BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우 + Vite(트러블 슈팅) 원인 : React로 프로젝트를 개발하다 보면, BrowserRouter를 사용했을 때 화면이 정상적으로 렌더링되지 않는 경우가 있습니다. 하지만 HashRouter로 변경하면 문제없이 동작하는데 그 이유를 알아보자. BrowserRouter 를 사용하면 화면이 안 나오는 이유  BrowserRouter는 history API를 활용하기 때문에, 사용자가 새로고침을 하면 문제가 발생할 수 있습니다.일반적으로 React 애플리케이션은 단일 HTML 파일(index.html)을 기반으로 동작합니다. 그런데 BrowserRouter를 사용할 경우, 새로고침을 하면 해당 경로(/about 등)에 대한 요청이 서버로 직접 전달됩니다.이는 개발 서버(Vite, Webpack Dev Server 등)가 해당 URL을.. 2025. 2. 28.
[TypeScript]나만 보는 TypeScript 기초 메모장(Styled-components 기본) 장점동적 스타일링 : props를 이용해 컴포넌트 스타일을 동적으로 바꿀 수 있음.컴포넌트 단위 스타일 : CSS가 컴포넌트 내에서 바로 정의되기 때문에, 스타일과 컴포넌트가 더 잘 결합, 유지보수하기 쉬움.자동으로 클래스 이름 해시화 : 클래스 이름이 자동으로 고유하게 변환되기 때문에, 전역 스타일 충돌을 걱정할 필요가 없음.예시:import styled from 'styled-components';const Button = styled.button` background-color: ${props => props.primary ? 'blue' : 'gray'}; color: white; padding: 10px 20px; border: none; border-radius: 5px;`;const.. 2025. 2. 19.
[트러블슈팅]안드로이드 WebView에서 HTTP 요청 시 "net::ERR_CLEARTEXT_NOT_PERMITTED" 오류 발생 안드로이드 앱에서 WebView를 사용하여 HTTP 사이트에 접근하려고 할 때 다음과 같은 오류가 발생함    Android 9(Pie, API 28) 이상에서는 보안 정책 강화로 기본적으로 HTTP(비암호화) 요청이 차단됨 해결 방법: 네트워크 보안 설정 적용AndroidManifest.xml android:usesCleartextTraffic="true" : 모든 HTTP 요청 허용 2025. 2. 17.