
[TIL/React] 리액트 엘리먼트, DOM 엘리먼트
2024. 7. 20. 23:40
TIL/React
리액트 엘리먼트JS 객체로, 리액트 컴포넌트가 렌더링 할 내용을 설명한다.가상 DOM에서 관리 되고, 변경 사항을 효율적으로 반영하기 위해 사용한다.리액트의 Virtual DOM (Document Ojbect Model)에 존재하는 엘리먼트는 리액트 엘리먼트가 된다.리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이다.리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다.불변성, 따라서 엘리먼트 생성 후에는 children 이나 attributes를 바꿀 수 없다 -> 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 해야한다. DOM 엘리먼트실제 웹 페이지 구성 요소이다.브라우저가 HTML을 해석해서 만든 객체사용자에게 실제로 보이는 웹 페이지의 구성요소실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM ..

[PS][React] react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다
2024. 7. 20. 22:15
Problem Solving
해결 방법`react-scripts` 라는 라이브러리를 현재 경로에서 실행시킬 수 없는 상황에서 발생`yarn add global react-scripts` 를 이용하여 react-scripts 라는 라이브러리를 전역으로 설치하기또는 프로젝트 디렉토리에서 `npm install ` 또는 `yarn install ` 명령어 실행해서 패키지 다시 설치하기출처1. https://thespoiler.tistory.com/21https://codingdiary99.tistory.com/5

[TIL/React] 리액트 앱의 실행 순서와 컴포넌트
2024. 7. 16. 17:30
TIL/React
리액트 실행 순서`localhost:3000`으로 접속을 요청하면, 리액트 앱 서버는 public 폴더의 `index.html`을 반환함개발자 도구 `Element` 탭에서 태그에 작성된 `script` 태그를 확인한다. 그리고 `bundile.js`를 불러와 실행한다.`bundle.js`는 src 폴더에 있는 `index.js`와 이 파일이 불러온 모듈을 하나로 묶어놓은 파일이기 때문에, `index.js`에 어떤 내용이 있는지 파악해야 리액트 앱의 동작을 제대로 이해할 수 있음`index.js`는 `ReactDOM.createRoot` 메서드로 돔에서 리액트 앱의 루트가 될 요소를 지정함`render` 메서드를 사용해 돔의 루트 아래에 자식 컴포넌트를 추가하고, 결과적으로 App 컴포넌트가 렌더링 됨..

[TIL/JavaScript] 홀수 인덱스의 요소와 홀수번째 요소
2024. 7. 15. 17:24
TIL/JavaScript
정답 코드// 홀수번째만 출력하기const aniArr = ['강아지', '망아지', '야옹이', '어흥이', '거북이'];const resultArr = aniArr.map((name, index) => { // 배열은 0부터 시작하고, 홀수를 출력하라는 게 아닌 홀수'번째'를 출력하라고 했으므로 강아지가 첫 번째가 됨 if (index % 2 == 0) { console.log(name); }});console.log(resultArr); 출력 결과: 강아지, 야옹이, 거북이내가 이해한 코드// 홀수번째만 출력하기const aniArr = ['강아지', '망아지', '야옹이', '어흥이', '거북이'];const resultArr = aniArr.map((name, index) => { if (ind..

[백준][Python]16394 - 홍익대학교
2024. 7. 13. 23:17
백준/Python
https://www.acmicpc.net/problem/16394 print(int(input()) - 1946)print(int(input()) - 1946) 홍익대학교는 1946년에 개교하였다.특정 년도가 주어졌을 때, 그 해가 개교 몇 주년인지 출력하라. 사용자로부터 정수를 입력받고 -1946 을 하면 몆주년인지 구할 수 있습니다.