TypeScript 공부일지: any, unknown  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️any특정 변수의 타입을 우리가 확실히 모를때 사용let anyVar: any = 10;anyVar = "hello";JS처럼 타입 상관없이 아무 값이나 담게 하려면 any type 사용anyVar = true;anyVar = {};anyVar = () => {};anyVar.toUpperCase();anyVar.toFixed();let num: number = 10;num = anyVar; ❗️unknownlet unknownVar: unknown;unknownVar = "";unknownVar = 1;unknownVar = () => {};num = unknownVa..

[eslint] EACCES: permission denied, mkdir 오류해결    ❗️상황공부 중 이미 만들어진 프로젝트를 다운받아 터미널에 npm install 하고 npm run start 했는데Error: EACCES: permission denied, mkdir "파일경로~~~"어찌고 저찌고~~~이런식으로 에러가 나왔다 ❗️원인에러 첫줄만 해석하면 된다.EACCESS: permission denied 접근 권한이 없다고 한다오잉? 이전에 포스팅한 내용이랑 비슷하다https://edongdong.tistory.com/54 [오류해결] 권한 부족으로 저장할 수 없는니다. 슈퍼 사용자... [5/31 study]권한 부족으로 저장할 수 없는니다. 슈퍼 사용자...    상황새로운 프로젝트 만들고..

One of your dependencies, babel-preset-react-app 오류해결   ❗️상황React 공부중 npm run start하면 성공적으로 실행되지만 아래와 같은 오류와 같이 나옴 ❗️원인보통 해당 오류는 CRA 환경을 지원하지 않는 별도의 라이브러리를 설치하게 될 경우 발생할 수 있음 ❗️해결방법npm install --save-dev @babel/plugin-proposal-private-property-in-object일단 이게 무슨 코드인지 나도 잘 모름 stackoverflow에서 찾음나는 MacBook을 사용하고 있어서 앞에 sudo랑 같이 사용함오류 어디갔지? ❗️참고https://stackoverflow.com/questions/76435306/babel-prese..

점 표기법(정적속성) vs 대괄호 표기법(동적속성)    ❗️상황 공부를 하면서 문득 이렇게 작성한 코드를 보고 점 표기법으로 작성을 안하는 이유가 뭐지 하고 의문이 들었다.export default function App() { const [order, setOrder] = useState("createdAt"); const sortedItems = items.sort((a, b) => b[order] - a[order]); /.../ } ❗️공부하고 깨달은 점 점 표기법으로 접근하려면 속성 이름이 고정된 경우에만 사용할 수 있습니다.예를 들어, b.order와 같이 접근하는 경우에는 order가 객체의 정적 속성이어야 합니다. 그런데 지금 코드는 order값이 상태 값으로 동적으로 설정되어..

e.target 속성들    ❗️e.target은 이벤트가 발생한 요소를 나타내는 객체다!이벤트의 종류에 따라 e.target 객체의 속성은 다를 수 있지만, 일반적으로 다음과 같은 속성들이 포함될 수 있습니다:nodeName: 요소의 태그 이름을 나타냅니다.nodeType: 요소의 노드 유형을 나타냅니다.tagName: 요소의 태그 이름을 나타냅니다.value: 입력 요소에서 사용자가 입력한 값(텍스트, 체크 상태, 선택된 옵션 등)을 나타냅니다.name: 입력 요소의 이름을 나타냅니다.type: 입력 요소의 타입을 나타냅니다.checked: 체크 박스나 라디오 버튼의 체크 상태를 나타냅니다.selected: 선택된 옵션 요소인지 여부를 나타냅니다(선택 상태인 경우 true).id: 요소의 고유 식별자..

객체 리터럴 중복 허용   ❗️상황export default function ReviewForm() { const [values, setValues] = useState({ title: "", rating: 0, content: "", imgFile: null, }); const handleChange = (name, value) => { setValues((prevValues) => ({ ...prevValues, [name]: value, })); }; /.../여기서 prevValues에는{ title: "", rating: 0, content: "", imgFile: null,}이 객체 리터럴이 들어갈 거고[nam..

권한 부족으로 저장할 수 없는니다. 슈퍼 사용자...    상황새로운 프로젝트 만들고 저장 눌렀는데사진에서 보이는 에러가 나왔고 sudo로 다시 시도를 누르고 다시 저장해도 반복적으로 사진에 보이는 메시지가 나오는 상황임 해결방법sudo chmod -R 777 ~/Desktop/프로젝트폴더경로여기서 한글 부분만 지우고 tap 누르면서 경로 쓰고 tap 누르고 하면서 현재 폴더를 찾아주면 해결 - 끝 -

SPA vs MPA 개념, 장단점    ❗️SPA (Single Page Application)란?SPA는 이름 그대로 단일 HTML 페이지로 구성된 웹 애플리케이션입니다. 사용자가 애플리케이션을 처음 로드할 때, 서버로부터 하나의 HTML 페이지를 받아오고 이후의 모든 상호작용은 JavaScript를 통해 이루어집니다.특징:동적 데이터 로딩: 사용자가 페이지 내에서 링크를 클릭하거나 동작을 수행할 때마다 전체 페이지를 다시 로드하지 않고, 필요한 데이터만 서버로부터 받아와서 화면의 일부만 업데이트합니다.빠른 사용자 경험: 전체 페이지를 새로고침하지 않기 때문에 애플리케이션이 빠르고 부드럽게 동작합니다.클라이언트 사이드 라우팅: URL 변경 시 전체 페이지를 다시 로드하지 않고 JavaScript를 통해..

React 모듈 불러오는 방법   ❗️상황지금까지 아래와 같은 코드를 이용해서 사용했었는데import { createContext } from 'react';const MyContext = createContext(null); 다른 강의를 보면서 공부중 아래와 같은 코드를 사용해서 이게 뭐지? 하면서 찾아보았다 import React from 'react';const MyContext = React.createContext(null); ❗️차이점이 두 방법은 기능적으로 동일합니다. React.createContext는 React 모듈의 메서드를 직접 호출하는 방식이고,import { createContext } from 'react'는 ES6 구조 분해 할당을 사용하여 createContext 메서드만을..