FACTS(사실, 객관) : 내가 한 일
리액트 프로젝트를 생성하는 방법
1. CRA
2. VITE (이거 사용 => 속도가 빠르고, 설정이 쉬움)
//1
yarn create vite 폴더명 --template react
//2 - 폴더명으로 이동
cd 폴더명
//3
yarn
//4
yarn dev이 순서로 터미널에 위 명령어를 입력해 설정하면 바로 다음 뜨는 문구
Local: http://localhost:5173/ 에서 미리볼 수 있음
컴포넌트를 만들때
파일: 첫글자는 대문자+파스칼케이스 (NewFile.jsx)
폴더: 소문자+카멜케이스 (newFolder)
그리고 App.jsx에서 파일을 수정
리액트에서는 <button onclick=""></button> 으로 적지 않고
<button onClick={}> </button>(자바스크립트 문법을 이용하기위해 중괄호를 사용)
JSX에 쓰는 <div>~</div>는 정확히 리액트요소임! => 가상 돔을 이용해서 화면을 바꾸기 때문
자바스크립트는 JSX문법을 직접 해석할 수 없음! => babel이라는 도구를 이용해 js로 변환
작스 문법
1. input태그를 닫을땐 반드시 /> 닫는다는 표시로 슬래시를 입력해 닫아야 함!
2. return문 이하에 한개의 엘리먼트만! => 여러개일 경우 하나로 감싸주던가 해야함
(굳이 div태그로 안감싸도 되고 <></> 이런식의 빈 태그로 감싸도 됨)
3. class를 줄 때는 className="" 이라고 입력해야함
4. 스타일 태그를 따로 넣을 수 없으므로 직접 스타일지정을 해줘야 하는데
<p style={{}}>example</p> 이런식으로 중괄호로 두번 감싸줘야함.
=> css와 다르게 여기서는 객체형태로 스타일 지정을 함 따라서
js요소가 들어가야 하니까 중괄호 1번, 그 안에 스타일이 객체 형식으로 들어가니까 1번 해서
총 두번 중괄호로 감싸줘야함!
개인과제 진척도
ui 까지 어느정도 마쳤음
처음에 컴포넌트를 입력값을 받는 부분과 리스트 부분을 나누어 따로 관리할 생각이었는데
resset.css와 main.css가 충돌? 하는건지 resset.css에 margin,padding등의 값이 0으로 설정되어있어서
main.css에서 아무리 설정값을 주어도 resset.css의 값이 우선하여 들어가는 문제가 생김..
import순서를 바꿔도 같은 문제가 계속되어 나누었던 컴포넌트를 일단 App.jsx에 합쳐버리니 문제가 해결됨
이 문제를 해결하느라 너무 많은 시간을 소비한 것 같다
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
리액트를 사용하자마자 갑자기 어디에 쓰는지도 모를 파일 갯수가 배가 되고 폴더가 여럿 생겨서 당황스럽기도 하고 어렵기도 하고, 자바스크립트만 배울 때도 익숙하지 못해 버벅댔는데 더 큰 시련이 얹어진 느낌
컴포넌트를 만들 때 이름 짓는 규칙이 익숙해지지 않음..
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
기초 작스문법과 VITE 를 이용한 리액트 환경 설정?
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지