뭐라도 기억하기 위한 블로그

한달전에 리액트 포폴 만드는 과정을 이 티스토리에 기록해보자 하며 리액트 환경세팅 : 프로젝트 생성 후 뜨는 에러npx create-react-app test00 --template typescripttest00 이라는 프로젝트 폴더를 만든 명령어참고로 나는 자바스크립트가 아닌 타입스크립트로 프로젝트를 만들었다.만약 타입스크립트가 아니라 자바스크립s-notee.tistory.com 이런 포스팅을 작성했었는데...밥먹다 알게 된 사실...cra로 프로젝트를 생성할때, 에러가 많이 떴던 이유는 이제 리액트를 만든 페이스북에서 더이상 라이브러리 업데이트를 해주지 않는다고???22년부터 더이상 릴리즈가 되고 있지 않고...24년 말부터 cra로 리액트 프로젝트를 생성하면 무.조.건에러가 뜬다는 커뮤니티 게시글이..

💡 스니펫을 미리 설정해두면 빠르고 일관된 방식으로 코드를 작성할 수 있어 코드 작성 효율성을 증가시킬 수 있다. (나는 현재까지 실무에서 주석을 달때 사용해보았다. 협업에서는 코드의 통일성이 중요하니까...) 📌 스니펫 설정하는 방법ctrl(cmd) + shift + p 단축키를 사용하여 명령 팔레트를 연다.Configure User Snippets를 검색 후 클릭특정 언어에 대한 스니펫 파일 선택ex) html일 경우 html, css일 경우 css 선택  스니펫 만들기html을 선택하면 좌측에 html.json이란 json 파일이 생기는 것을 확인 할 수 있다.//html.json 주석 스니펫 만들기{  "comment": {    "prefix" : "comment",    "body": [ ..

정말이지 티스토리에 리액트 파일, 폴더 정리하는 것만 몇 번 썼을지 모르겠다.물론 지금 다 비공개 상태지만 ㅎㅎ이번 기회에 확실하게 공부하지 뭐,,,ㅎㅎ .├── README.md├── node_modules├── package-lock.json├── package.json├── public│   ├── index.html│   └── (기타 등등...)└── src    ├── App.tsx    ├── assets    ├── components    ├── index.tsx    ├── pages    └── styles리액트 프로젝트를 생성하면 자동으로 위와 같은 폴더 및 파일 구조가 생성된다.(임의로 생략한 파일 및 폴더도 있다.) 📍 폴더에 대한 간단 설명☑️ node_modules패키지 코..

npx create-react-app test00 --template typescripttest00 이라는 프로젝트 폴더를 만든 명령어참고로 나는 자바스크립트가 아닌 타입스크립트로 프로젝트를 만들었다.만약 타입스크립트가 아니라 자바스크립트 프로젝트를 만들거라면 뒤에 (--template typescript)는 생략하면 됨. 하지만 해당 명령어를 터미널에 실행하면, 위의 이미지와 같은 에러가 쭉 뜬다.해당 에러에 대해서 열심히 구글링해보니 12월에 리액트 19버전이 릴리즈 된 이후로 create-react-app이 제대로 실행되지 않는다는 글을 보았다. ➡️ 그래도 test00폴더로 진입(cd test00)해서 npm start를 하면 프로젝트가 실행이 되긴 한다. 😡하지만...이렇게 컴파..

보호되어 있는 글입니다.

📌 윈도우 호스트 파일 경로C:\Windows\System32\drivers\etc\hosts 📌 호스트 파일의 특징파일 확장자 없음.관리자 권한으로 실행.메모장과 같은 VSCode, 워드패드등 텍스트 편집기로 열기 가능 📌 호스트 파일 열기텍스트 편집기(메모장) 등 마우스 우클릭 ➡️ 관리자 권한으로 실행파일 > 열기 선택후 윈도우 호스트 파일 경로로 이동파일 형식을 ‘텍스트 문서(*.txt*)’에서 ‘모든 파일 (*.*)’로 수정수정 사항 수정수정 내역 저장 * 호스트 파일의 수정은 시스템 동작에 있어서 영향을 줄 수 있기 때문에 주의해서 수정 필요

명령어내용pwd현재 경로 확인ls현재 경로의 파일과 폴더 목록 확인ls -a. 이 붙은 파일 목록 확인cd 폴더명하위 해당 폴더로 이동cd ..상위 폴더로 이동 (이전 폴더로 돌아감)mkdir 폴더명폴더 생성touch 파일명.확장자파일 생성 (touch test.txt)rm 파일명.확장자파일 삭제cat 파일명.확장자파일 내용 확인rmdir 폴더명비어있는 폴더 삭제 (폴더가 비어있지 않으면 삭제가 안됨)rm -r 폴더명파일을 가지고 있는 폴더 삭제mv파일/폴더 이동, 이름 변경history사용한 명령어들 확인clear터미널 정리(삭제)man 명령어 이름명령어 매뉴얼 확인 ex. man clear (빠져나갈때는 q)

맥을 사니 윈도우와 OS가 너무 달라서 헷갈린다...  ✅ 맥에서 터미널 열기 1️⃣ 앱으로 열기맥 초기 모음에(?) 기타라는 앱 폴더를 열면  터미널앱이 있다.이게 윈도우에서는 cmd, 맥에서는 zsh(터미널)    2️⃣ 스포트라이트 검색으로 열기 CMD + 스페이스바 키를 누르면 spotlight 검색창이 뜬다.  검색 인풋에 terminal 또는 터미널 입력   이외의 여러가지 방법이 더 있지만,나는 이정도로만 사용할 것 같다.    ✅ 추가로 터미널 단축키  1️⃣ CMD + N터미널 새창이 열린다.  2️⃣ CMD + T터미널 새탭이 열린다

https://brew.sh/ko/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh 사실 뭔지는 아직 잘 모르겠고, 무언가 brew로 패키지 설치를 대비해서 기록해 두는 것,,ㅎ

✅ aria 속성이란?웹, 앱 콘텐츠의 접근성 향상을 위해 사용되는 속성.ARIA 속성은 접근성 트리를 수정 ➡️보조 기술이 사용자에게 콘텐츠를 제공하는 방식을 변경.요소의 실제 기능이나 동작은 바뀌지 않는다.✅ aria의 중요성스크린리더 사용자 지원키보드(tab) 사용자 지원코드 가독성 향상WCAG(Web Content Accessibility Guidelines) 준수 ✅ aria 속성 예시📍 role : 요소의 역할을 정의 X 안내 메세지 선택  📍 aria-label : 요소에 대한 설명 제공메뉴 버튼  📍 aria-hidden : 요소를 보조 기술에서 숨긴다화면 UI에는 그려지지만 스크린 리더에서는 읽지 않는다.포커스가 불필요한 영역에 주로 쓰인다.  📍 aria-expanded :..