1. 오늘의 한 줄 요약
React 시작!
2. 배운 내용
script 태그 위치
<link href="../css/skeleton.css" rel="stylesheet"> ← head
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> ← bodyCSS는 head, script는 body 쪽에 쓰는 게 좋다는 걸 배웠다.
CSS를 head에 두는 이유는 화면이 그려지기 전에 스타일부터 적용돼야 안 꾸며진 화면이 잠깐 보이는 것을 막을 수 있어서고, script를 body 끝에 두는 이유는 HTML이 먼저 다 파싱된 다음 스크립트가 실행돼야 DOM 요소를 제대로 찾을 수 있고, 렌더링도 안 막히기 때문이다.
component / module
| 개념 | 내용 |
|---|---|
| component | UI를 독립적이고 재사용 가능한 조각으로 나눈 것. .js/.jsx 파일로 작성 |
| module | 다른 파일에 있는 스크립트 기능을 특정 파일에서 가져다 쓸 수 있게 하는 것. import/export로 모듈끼리 관계를 만든다 |
스크립트 파일 하나하나가 곧 모듈이 될 수 있다 — export로 내보내는 순간 그 파일은 모듈이라고 할 수 있다.
React
- 유저 인터페이스를 만들기 위한 라이브러리
- 빠른 업데이트와 렌더링 속도가 장점
Virtual DOM vs Browser DOM
| 구분 | 설명 |
|---|---|
| Browser DOM | 실제 화면에 그려지는 DOM. 직접 건드리면(direct access) 매번 다시 그려야 해서 무거움 |
| Virtual DOM | 변경 사항을 메모리 위의 JS 객체로 먼저 반영하고, 이전 상태랑 비교해서 달라진 부분만 실제 DOM에 반영 |
정리하면 direct access는 Virtual DOM이 아니라 일반 JS(document.querySelector 등) 방식이고, React는 그걸 피하려고 Virtual DOM을 쓴다.
재사용성
- 컴포넌트는 특정 페이지·데이터에 의존하지 않고 독립적으로 재사용 가능해야 한다.
CRA / npm
npx create-react-app <project-name>
npm install -g 패키지명@버전
npm uninstall -g 패키지명프론트 프레임워크/라이브러리로는 Angular, React, Vue.js, Next.js 등이 있다고 배웠다. Angular는 여전히 기업용 대규모 프로젝트에서는 많이 쓰이지만, 요즘 신규 프로젝트에서는 React와 Vue 비중이 더 높아지는 추세라고 한다.
props / Optional Chaining / Enhanced Object Literal
| 문법 | 설명 |
|---|---|
| props | 부모 컴포넌트가 자식 컴포넌트에게 값을 넘길 때 쓰는 객체 |
Optional Chaining (?.) | 속성이 없으면 에러 대신 undefined 반환 |
| Enhanced Object Literal | {lang: lang}을 {lang}처럼 줄여 쓰는 축약 문법 |
JSX
const element = <h1>Hello, World!</h1>- JSX = JavaScript + XML/HTML.
JS 코드 안에 HTML처럼 생긴 마크업을 바로 쓸 수 있는 문법이다.
포트
- front: 3000 (CRA 개발 서버 기본 포트)
- back: 8080 (Spring Boot/Tomcat 기본 포트 — 나중에 백엔드 배울 때 이어질 예정)
CMD vs PowerShell
둘 다 명령어를 입력하는 셸이라는 점은 같지만, PowerShell이 좀 더 최신이고 객체 기반으로 명령어를 처리한다는 차이가 있다.
3. 실습 / 적용
① es6.html — Spread, 구조분해, Optional Chaining, 축약 객체 리터럴
let objOriginal = { a: 10, b: 20 };
objNew = { ...objOriginal };
objNew.a = 20;
console.log(`debug objNew`, objNew);
console.log(`debug objOriginal`, objOriginal);
let { a, b } = objOriginal;
const user = {
name: { first: 'lim', last: 'js' },
address: { city: 'seoul', postcode: '123456' }
};
const postcode = user.address?.postcode;
const city = user.address?.city ?? 'busan';
let lang = 'react.js';
let subject = {
lang,
coding: function() {}
};② react-app — LibraryPage / Book 컴포넌트
// LibraryPage.jsx
import Book from "../../components/sample/Book";
const LibraryPage = () => {
const books = [
{ category: 'it', bookName: 'java', price: '10,000원' },
{ category: 'lang', bookName: 'kor', price: '10,000원' },
{ category: 'lang', bookName: 'eng', price: '10,000원' },
// ...
];
return (
<div>
{books
.filter(book => book.category === 'lang')
.map((book, idx) => <Book bookName={book.bookName} />)}
</div>
);
}
export default LibraryPage;// Book.jsx
const Book = (props) => {
return (
<div>
<span>책 이름 : {props.bookName}</span>
</div>
);
}
export default Book;filter로 category가 'lang'인 책만 골라내고, map으로 그 책들 하나하나마다 <Book> 컴포넌트를 만들어서 뿌리는 구조다.
같은 Book 틀에 bookName만 다르게 넣어서 재사용하는 방식이다.
결과:
npx create-react-app으로 프로젝트 만들고 npm start까지 실행해서 localhost:3000에서 렌더링 되는 것을 확인하였다.
4. 오늘의 회고
- 느낀 점: 매일매일 새로운 내용을 배워서 좋기도 하지만, 하루하루 배우는 양이 만만치 않다는 걸 다시 느꼈다. 어제보다 더 나은 오늘을 살라는 강사님의 말씀을 새겨들어야겠다.
- 다음에 할 것: React 복습과 강의 코드에 이것저것 추가해보면서 비교해보기
#LGCNS #LGCNS6기 #개발자 #LGCNSINSPIRECAMP
