[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..
[TIL/JavaScript] 갤러리 만들기
2024. 7. 3. 17:40
TIL/JavaScript
[TIL/JavaScript] 후위 연산자와 리팩토링
2024. 7. 3. 13:57
TIL/JavaScript
강사님의 코드 1 리팩토링 전 내 코드 이미지 가져오기 1 문제점 이미지 가져오기 1 이미지 가져오기 1 1. 오타 수정 완료2. `$('p.box01 > img) ~ $('p.test')` 부분과 같은 코드를 if문 바깥쪽으로 ..
[TIL/JavaScript] 파라미터 이름과 클래스 필드의 이름 일치, this 키워드, constructor()
2024. 7. 2. 23:07
TIL/JavaScript
파라미터 이름과 클래스 필드 이름 일치생성자서 받는 파라미터 이름과 클래스 필드 이름이 일치해야 한다.자바스크립트가 변수와 속성 이름을 정확히 구분하기 때문에 이름이 일치하지 않으면 원하는 값이 제대로 할당되지 않기 때문이다.class Picture 부분과 document.write 부분을 보면 파라미터와 클래스 필드가 매칭된다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 class Picture { constructor(aTitle, aImgAddr, aAuthor, aYear) { this.aTitle = aTitle; this.aImgAddr = aImgAddr; this.aAuthor = aAuthor; thi..