개발 노트

Windows에서는 NUL, CON, PRN, AUX, COM1~9, LPT1~9 같은 이름이 장치 파일로 예약되어 있어서, 일반 파일처럼 삭제하려고 하면 잘못된 MS-DOS 함수입니다 오류가 발생한다.

해결 방법

1. 명령 프롬프트에서 강제 삭제

관리자 권한 CMD 실행 후:

2. PowerShell 이용

PowerShell(관리자)에서:

3. 파일 탐색기에서 우회

• ren 명령으로 이름을 바꾸고 삭제 시도:
•  
  ren \\?\C:\path\to\folder\nul normal.txt del \\?\C:\path\to\folder\normal.txt

4. Linux/WSL이나 도구 활용

• WSL(Ubuntu)에서 해당 폴더로 접근 후 rm nul 실행.
•  git bash를 설치한 후 관리자 권한으로 실행  rm nul 실행.

정리

• NUL은 원래 윈도우의 가상 장치라 삭제가 막히는 것.
• \\?\ 접두사를 붙여서 Win32 예약 이름 무효화를 하면 삭제 가능.

● Hydration 오류는 Next.js와 React에서 발생하는 일반적인 문제입니다.       

  Hydration이란?

  Hydration은 서버에서 렌더링된 정적 HTML을 클라이언트에서 React 컴포넌트로
   "활성화"하는 과정입니다.

  1. 서버: HTML 생성 → 브라우저로 전송
  2. 브라우저: HTML 표시 (정적 상태)
  3. React: JavaScript 로드 후 HTML에 이벤트 연결 (Hydration)

  Hydration 오류가 발생하는 경우

  1. 시간/날짜 표시

  // ❌ 문제: 서버와 클라이언트 시간이 다름
  <div>{new Date().toLocaleString()}</div>
  // 서버: "2025-07-26 12:26:14"
  // 클라이언트: "2025-07-26 12:26:17" (3초 후)

  // ✅ 해결: useEffect 사용
  const [time, setTime] = useState('');
  useEffect(() => {
    setTime(new Date().toLocaleString());
  }, []);

  2. Math.random() 사용

  // ❌ 문제: 서버와 클라이언트의 랜덤값이 다름
  <div>{Math.random()}</div>

  // ✅ 해결: useEffect 사용
  const [random, setRandom] = useState(0);
  useEffect(() => {
    setRandom(Math.random());
  }, []);

  3. 브라우저 전용 API 사용

  // ❌ 문제: window는 서버에 없음
  <div>{window.innerWidth}px</div>

  // ✅ 해결: useEffect 사용
  const [width, setWidth] = useState(0);
  useEffect(() => {
    setWidth(window.innerWidth);
  }, []);

  4. 조건부 렌더링

  // ❌ 문제: localStorage는 서버에 없음
  {localStorage.getItem('user') && <UserMenu />}

  // ✅ 해결: useEffect 사용
  const [user, setUser] = useState(null);
  useEffect(() => {
    setUser(localStorage.getItem('user'));
  }, []);

  오류가 문제가 되는 이유

  1. 사용자 경험 저하: 깜빡임, 레이아웃 변경
  2. 성능 문제: React가 전체 DOM을 다시 렌더링
  3. SEO 영향: 검색 엔진이 잘못된 콘텐츠 인덱싱

  디버깅 방법

  // suppressHydrationWarning 사용 (임시 해결책)
  <div suppressHydrationWarning>
    {new Date().toLocaleString()}
  </div>

  // 또는 동적 import 사용
  const DynamicComponent = dynamic(
    () => import('./TimeComponent'),
    { ssr: false }
  );

npm i tailwindcss

vite.config.js

tailwind.config.js

index.css

레지스트리 설정 확인

npm config get registry

공식레지스트리가 아닐시 변경

npm config set registry https://registry.npmjs.org/

캐시제거

npm cache clean --force

노드모듈 설치

npm i

1. 설치 가능한 패키지 검색

$ apt list 패키지명

$ apt list zip*

2. 설치된 패키지 검색

$ apt --installed list

$ apt --installed list *jdk*

3. 설치된 패키지 삭제

$ apt remove openjdk*

# 완전삭제
$ sudo apt --purge remove [패키지이름]
# or
$ sudo purge remove [패키지이름]

4. 관련 패키지 삭제

# 패키지검색
$ dpkg --list | grep [패키지 이름]
# 패키지 삭제
$ sudo dpkg --purge [패키지 이름]

https://velog.io/@coral2cola/Ubuntu-%ED%8C%A8%ED%82%A4%EC%A7%80-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0

unzip과 zip사용시 분할압축된 파일을 zip으로 다시 합치고 unzip해야하므로 번거로움

7z 설치

# ubuntu
sudo apt install p7zip-full

7z로 압축 해제

7za x test.zip

특정 디렉토리에 압축해제할때

7za x test.zip o.test

https://iambeginnerdeveloper.tistory.com/175