📝 리액트 복습 문제 풀기
1번 문제
- 바탕화면에 작업용 폴더 만들고 shift + 우클릭 > Powershell로 열기
- 터미널에
npx create-react-app 프로젝트명 - vsCode 열고 좌측상단에 폴더 열기
- 터미널에서
npm start
이미 열려있는 서버를 끄려면 터미널에 ctrl + c
2번 문제
import { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
return <div>현재 수량: {count}</div>;
};3번 문제
const HelloBtn = () => {
const sayHello = () => {
alert("Hello!");
};
return (
<button onClick={sayHello}>인사하기</button>
);
};
export default HelloBtn;export default : 해당 파일을 내보내 다른 파일에서 사용 가능하게 함
4번 문제
const App = () => {
return (
// MenuBox에 price라는 이름으로 숫자 15000을 넘기기
<MenuBox price={15000} />
);
};const MenuBox = ({ price }) => {
return <div>가격: {price}원</div>;
};5번 문제
const App = () => {
const stock = 0; // 재고 수량
return (
<div>
{stock === 0 ? "품절" : "주문 가능"}
</div>
);
};🪪자기소개 페이지 수정사항
1. 헤더 요소 추가
기존 헤더가 너무 허전하다고 느껴서 어떤걸 추가하면 좋을까 생각하다
내가 관심있는 것들을 헤더에 추가하는 걸로 방향을 잡았다
헤더 부분에 추가된 것들
+) 헤더부분을 전부 container안에 넣어놨는데, justify-content: space-between때문에 로고 두 개의 간격도 벌어졌다
=> 사진 두 개를 묶는 컨테이너를 만들어 두 사진을 집어넣으면
두 사진 사이의 간격 벌어짐 해결
사진을 클릭했을 때 관련 페이지를 띄워주면 좋겠다고 생각해서
2차시 수업 때 배운 <a href="~~~">를 사용했다
2. 파비콘 추가하기
오래된 브라우저는 png나 svg형식을 인식하지 못할 수 있어
사진을 ico로 변환해서 사용했다
index.html에서 <head>부분에
<link rel="shortcut icon" href="favicon.ico" />
사진과 같이 파비콘이 생김
3. 👍느낀점
기존에 했던 것들을 문제를 풀며 다시 한번 복습하게 되었는데
기초부터 탄탄히 다지지 않으면 후에 이도저도 아니게 될 것 같다는 생각이 들었다.
헤더 요소 어떤 걸 넣을지 많은 생각을 해봤는데 뭘 넣을지 모르겠어서 고민을 많이했다.
지금까지는 코드를 어떻게 짤지 고민했는데 직접 헤더를 만들려고 디자인이나 배치를 고민하는게 새로운 경험이라 협업을 할 때 다른 파트들을 이해하는데 조금이나마 도움이 된 것 같다.
디자인이나 배치를 고민하는 게 왜 협업 중 다른 파트를 이해할 때 도움이 될 것 같나요? 헤더에 요소도 더 넣으시고 파비콘도 넣으셨네요 벌쏘강 귀여워요 ㅎㅎ 수고하셨습니다!