3주차 React 입문
드디어 주특기주차가 시작되어 React를 처음으로 배우게 되었다.
자바스크립트를 기반으로 만들어진 라이브러리라 금방 배울수 있을것이라 생각 하였다.
하지만 역시나 현실은 그렇지않았다. 내가 처음으로 접한 React는 너무너무 어려웠다. 분명 같은 자바스크립트를 사용하는데 전혀 다른언어를 배우는것같이 느껴졌다.
React 입문주차가 시작되고, 각자 개별 과제가 주어졌다.
과제의 내용은 아래와 같다.
내 일주일 평점 남기기
✅ 메인 페이지✅ 평점 남기기 페이지
- 일주일 평점 보여주기
- 평점은 1~5까지 숫자 중 랜덤한 정수로 만들어주세요.
- 각 요일 옆 삼각형 버튼을 누르면 요일 평점 남기기 페이지로 이동하기
- 선택한 요일 보여주기
- 동그라미를 눌러서 평점 입력하기 (1번째 동그라미 누르면 1점, 3번째 동그라미 누르면 3점)
- 남기기 버튼을 누르면 이전 페이지로 이동하기
2022.03.18 ~ 2022.03.24 일주일동안 React를 공부하여 해당내용을 모두 구현 후 s3 또는 파이어베이스로 배포해야했다.
React강의를 듣기전 과제 완성본 예시를 봤을때 알고리즘 주차에 열심히 공부했으니 함수를 이용하여 충분히 만들어 낼 수 있지 않을까? 하는 생각을 했다.
하지만 강의를 듣고 '진짜 큰일났다' 라는생각을 했던것 같다.
첫째날과 둘째날 까지는 계속해서 강의를 들었다.
분명 강의를 봤는데 이해가 되지않았고, 이해가 되지않으니 과제를 시작할수가 없었다.
멘탈을 다시 부여잡고 React 에서 사용되는 몇몇 기능들의 개념이해부터 다시 시작해보자 마음먹었다.
구글링과 유투브에서 많이 검색해 찾아보았고 끝내 props와 state에 대해 이해할수있었다.
props와 state를 이해하고나니 과제를 시작해 볼 수 있엇다.
우선은 그나마 자신있는 html과 css작업부터 시작하였다.
React는 컴포넌트 단위로 이루어져있어 html작업을 완성한 후 컴포넌트로 나누는 작업을 하였고, css는 styled-component를 이용하여 작업하였다.
그리고 router를 이용해 컴포넌트별 링크연결을 해주었다.
router를 배우면서 SPA에 대해서도 공부할수있었다.
SPA(Single Page Application)
한 개의 페이지로 구성된 애플리케이션으로 최초 로딩 때 실행한 HTML 파일에서 변경되지 않는 부분은 그대로 두고 변경되는 부분만 다시 렌더링하여 효율적인 변경이 가능하다.
메인페이지 랜덤점수 구현하는것과, 평정남기기 페이지 기능구현만 남았었는데 여기서 막혀버렸다.
함수를 사용해야하는데 어디서 어떻게 사용해야할지 막막했다.
도저히 감을 못잡고있을때 과제진행점검 마일스톤이 진행되어 기술매니저님께 질문을 할수있는 시간을 가지게 되었다.
const App = () => {
//함수
const paint = () => (
return 3;
};
//값
const number = paint();
// 훅
const [randomNumber, setRandomNumber] = useState(getRandonNum(5));
return <div>{randomNumber}</div>; //렌더링
};
export default App; 이런방식으로 식을 만들어나가면된다는 힌트를 얻었고
평점남기기 페이지를 다시 작업해 보았다.
const Rating = (porps) => {
const weeek = useParams();
const [gauge] = useState([1,2,3,4,5]);
const [idx,setIdx] = useState();
return (
<div className="rating_wrap" style={{textAlign:"center"}}>
<DayRat><Tue>{weeek.getweek}요일</Tue> 평점 남기기</DayRat>
<CircleWrap>{ gauge.map((gauges,i)=>{
return ( <Circle1
key={i} onClick={() => { setIdx(i);}}
style={{backgroundColor: i <= idx ? "#9edeff" : "lightGray"}}
></Circle1>); })}</CircleWrap>
<Link to = "/" >
<Button>평점 남기기</Button>
</Link>
</div>
)
};state를 이용해 배열을 만들었고, Circle1 을 state 갯수만큼 map을 이용하여 반복해서 붙여주었다.
그리고 onClick이벤트로 스타일에 삼항연자를 사용해 Circle1의 색상이 변경되도록 식은 만들었다.
map함수 사용이 처음엔 많이 어려워 MDN 공식문서를보고 하나하나 차근히 시도해 보다보니 성공할수 있었다.
평점남기기 페이지기능구현을 완료하고 나니 메인페이지 랜덤점수구현은 어렵지않게 해결해 낼수있었다.
평점남기기 페이지와 동일하게 map함수를 이용해 반복문을 돌려주었고,
const [random,setRandom] = useState(Math.floor(Math.random() * 5) + 1);state에 랜덤함수 식을 짜서 넣어주었더니 랜덤함수 기능구현이 완성되었다.
마지막에 파라미터 값넘겨 useParams 값을 가져오는부분에서 막혀 헤맸는데, 같은 조원분의 도움을 받아 해결할수있었다.
내가 이부분에서 헤맸던 이유는 props로 받아온값을 사용하는 부분에있어 미숙하였기 때문이었다.
분명 이해를 했다고 생각했지만 이해하지 못하였다는것을 깨닫고 이후 과제를 제출한 후 추가적으로 더 깊게 공부하는 시간을 가졌다.
prop와 state 개념정리
props : https://velog.io/@guswls1419/Reactpractice-Props
state : https://velog.io/@guswls1419/Reactpractice-state
이렇게 많은 우여곡절끝에 2일이라는 시간을 남겨두고 과제를 제출할수 있었고, 아직 가야할길이 너무나도 멀어 남은시간동안 추가적으로 공부를 하기로 마음먹었다.
3주차 핵심키워드
DOM
DOM(은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.
문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는(메모리에 보관할 수 있는) 객체를 의미한다.
- React에서는 왜 가상돔을?
규모가 큰 웹 애플리케이션은 스크롤바를 내릴수록 수많은 데이터가 로딩된다. 이런 웹애플리케이션에서 몇백,몇천개 단위로 DOM에 직접 접근하여 변화를 주다보면 렌더링이 일어나는 과정에서 성능이슈가 발생하게된다.
이런 렌더링 과정은 상황에 따라 여러번 반복하여 발생할 수 있다. 예를들어 돔이 추가,삭제 혹은 태그 위치가 변하는 경우 렌더링이 일어난다.렌더링 : 브라우저 로딩 과정 중 스타일 이후의 과정(스타일-> 레이아웃 -> 페인트 -> 합성)을 렌더링이라고 한다.
속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자가상돔이 나왔다.
서버리스
서버리스는 운영상의 책임을 AWS로 전가하여 민첩성과 혁신을 높이는 클라우드의 네이티브 아키텍처이다. 서버리스를 사용하면 서버를 고려하지 않고 애플리케이션과 서비스를 구축하고 실행할 수 있다.
서버 또는 클러스터 프로비저닝, 패치 적용, OS 유지관리 및 용량 프로비저닝과 같은 인프라 관리 작업을 덜어낸다. AWS 개발문서에 따르면 거의 모든 유형의 애플리케이션 또는 백엔드 서비스를 서버리스로 구축할 수 있으며, 애플리케이션을 고강용성으로 실행하고 확장하는데 필요한 모든 사항이 자동으로 처리된다.
3주차 회고
첫날 과제를 받았을땐 정말 막막하고 낯설고 너무나도 어렵게 느껴졌었다.
과연 내가 이걸 해낼수있을까 하는 생각도 정말 많이했던것 같다.
하지만 알고리즘 주차때와 마찬가지로 첫날 React를 접했던 나와, 일주일이 지난 시점의 나는 React를 접하는 마음이 많이 달라져 있었다.
처음엔 그저 막막하고 답답했던 것이 지금은 재미있고 더 많이 알아가고 싶은마음으로 바뀌어있었다.
확실히 언어를 사용함에있어 개념을 이해하고 안하고의 차이는 정말 큰것 같다.
정말 내가 아는만큼 다양한 코드를 짤수있음을 많이 느꼈고, 앞으로 내가 구현하고자하는 기능을 막힘없이 구현할수 있을정도로 공부를 더더 열심히 해야겠다는 다짐을 할수있었던 한 주였다.
