개발 블로그🐶🐾

* 간단하게 적는 도입 이유: 가장 상단에서 페이지에 진입하게 되면, api를 여러 개 호출하는데한가지의 api 관련 에러 때문에 페이지 전체가 보이지 않는 에러가 생겼다.이 api는 하나의 작은 버튼만을 표출하는 역할을 하는데,이 오류 하나로 페이지가 표출되지 않는다면 너무 큰 문제기 때문에 에러 바운더리를 도입하게 되었다. 🗂️ 에러 바운더리 (Error Boundaries)UI의 일부분에 존재하는 자바스크립트 에러가 전체 애플리케이션을 중단시켜서는 안 된다.→ 그래서 등장한 것이 에러 바운더리 React 16부터는 에러 경계에서 포착되지 않은 에러로 인해 전체 React 컴포넌트 트리의 마운트가 해제 됨.→ 손상된 UI를 완전히 제거하는 것보다 그대로 남겨두는 것이 더 좋기 때문 전체 컴포넌트 트..

* JSX(JavaScript XML)JavaScript에 XML을 추가한 확장 문법  - jsx 특징HTML과 비슷한 문법으로 UI 구조를 명확하게 작성할 수 있음.재사용 가능한 UI 컴포넌트를 쉽게 만들고 조합할 수 있음.UI를 정의하고 JavaScript 코드를 함께 작성함 -> 개발의 효율성을 높임.브라우저가 JSX를 직접 이해하지 못하기 때문에 Babel 같은 도구를 사용하여 JavaScript로 변환해야함.  - js, jsx 사용파일 내부에 표준 Javascript 문법만 사용됐다면 파일 확장자로 .js가 적절하지만,표준 Javascript 이외의 다른 코드들이 있다면 .js가 아닌 다른 확장자가 적절

* useState const [count, setCount] = useState(초기값); UI와 관련있는 데이터는 state에 보관해주어야 함 Q. setCount(count+1); setCount(count+1); setCount(count+1); 이렇게 되어있어도 값은 1인 이유? onClick이 호출되었을때 전달되는 콜백함수는 현재상태를 스냅샷 함 함수 내부에서 사용하고 있는 외부 변수(count)값이 저장 -> 여기서는 0 캡쳐된 모든 환경(렉시컬 환경)이 콜백함수에 전달됨 그래서 결국 모든 setCount는 1로 저장되는 것 => 아무리 많이 호출해도 count 가 0으로 설정되어 있으므로! -> 만약 원하는만큼 모두 적용되길 바란다면, 콜백함수 사용해주기(이전 상태값을 인자로 전달해주어 값..

https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com * yarn? npm과 yarn은 자바스크립트 런타임 환경인 노드(Node.js)의 패키지 관리자 yarn은 npm과 같은 기능을 수행하나, npm 레지스트리와 호환하면서 속도나 안정성 측면에서 npm보다 향상됨 (이후, npm의 속도와 보안 부분이 향상됨) * 초기 세팅 1. Node.js가 설치되어 있어야 함 yarn의 설치는 corepack을 사용하라고 되어 있는데, corepack은 Node.js 16.10버전 부터 포함되어 있음 2-1. corepack ena..

https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org * Redux :JavaScript 상태관리 라이브러리 리덕스는 하나의 상태를 관리하기 위해서 actions, reducers, store를 작성해야 함 중앙 집중식 상태 관리를 제공, 모든 상태는 단일한 스토어 안에 저장 - Redux의 3대 원칙 1. 애플리케이션의 모든 상태는 하나의 store 내의 단일 객체 트리로 저장된다. 2. 상태는 읽기 전용이다. 3. 변경을 위해 순수 함수를 사용한다. 디버깅의 측면에서 유리하고, 상태값의 변경 사항을 Redux Devtools를 이용해 직관..

https://ko.vitejs.dev/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 ko.vitejs.dev * Vite ? : 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구로, 개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공하고 번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있음 * Create React App 대신 Vite를 사용하는 이유 Create React App은 JavaScript로 구성된 Webpack을 사용하는데, 이는 속도가 느린편 이런 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 Vite를 사용 (* Esbuild : Go 언어로 작성된 JavaScript 빌드툴로 속도가 빠름) * ..

* export와 export default의 차이 1. export - 내보낼 수 있는 요소가 많이 있을 때 - 특정 개체만 가져올 수 있음 - 원하는 이름으로 import가 불가능(객체의 이름을 유지) ex) //a.js function a1() { return a1; } function a2() { return a2; } export a2; //b.js import { a2 } from "./a.js" // 특정 개체만 가져올 수 있음 2. export default - 내보낼 요소가 하나만 있을때 - 해당 모듈의 전체 개체를 export - 원하는 이름으로 import 가능 ex) // all.js function All() { return abcdefg; } export default All; ..

* React - 컴포넌트 기반의 라이브러리 - 가상돔을 사용함 (렌더링 이전의 가상돔과 렌더링 이후의 가상돔을 가지고 있음) - npx create-react-app * 웹 페이지 빌드 과정 1. DOM과 CSSOM 생성 HTML 문서가 로드되면, 브라우저는 이 문서를 읽어서 DOM(Document Object Model) 트리를 만듦 DOM은 웹 페이지의 구조화된 표현으로, 메모리에 웹 페이지 문서 구조를 트리구조로 표현하여 웹 브라우저가 html 페이지를 인식하게 해줌. 프로그래밍 언어가 문서의 구조, 스타일, 내용 등을 조작할 수 있게 해줌 자바스크립트가 이용할 수 있게 브라우저가 트리구조로 만든 객체 모델 의미 동시에 브라우저는 외부 CSS 파일과 태그의 CSS를 파싱하여 웹 페이지의 스타일 정..

** useParams? : Parameter(파라미터) 값을 URL을 통해서 넘겨서 넘겨받은 페이지에서 사용할 수 있도록 도와줌 파라미터로 넘겨지는 id 값에 따라 원하는 데이터를 불러올 수 있다. 불러올 때 useParams를 이용해서 id 값을 가져오고 그 데이터 값을 이용해서 세부 페이지에서 활용하는 구조로 만들면 된다. ex) import { useParams } from "react-router-dom"; 후에, const {id} = useParams(); 선언하면 return ({context.data[id]}) 이런식으로 사용 가능