- React 들어가기에 앞서 check 해보기
☑️ HTML / CSS 기초
☑️ 자바스크립트 기초
☑️ 함수형 프로그래밍과 고차 함수 개념에 대한 이해
☑️ 배열 내장 메서드 기초
☑️ ES6 문법에 대한 이해
-
React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.
o
React 특징에는 대표적으로 선언형, 컴포넌트 기반, 범용성이 있다.선언형은 하나의 파일에 명시적으로 작성하여, 코드를 보고도 어떤 구조를 렌더링할 건지 파악이 가능함을 의미한다.
따라서 JSX 문법을 활용한 선언형 프로그램을 지향한다.컴포넌트 기반은 하나의 기능 구현을 위해 여러 종류의 코드들을 묶어둔 것을 의미하며, 이렇게 기능별로 컴포넌트를 묶어두면 코드들이 서로 기능에 따라 독립성을 가지므로 수정할 때, 수정이 필요한 부분만 수정할 수 있어 재사용성과 수정이 용이하다. 이는 기능 자체에 집중하여 개발할 수 있도록 해준다.
범용성은 JS 프로젝트 어디서든 유연하게 적용될 수 있으며, React 라이브러리를 사용해도 다른 라이브러리를 사용할 수 있다.
리액트 네이티브를 사용하면, 모바일 개발도 가능하다. -
JSX가 왜 명시적인지 이해하고, 바르게 작성할 수 있다.
o
JSX(JavaScriptXML)는 React에서 UI를 구성할 때 사용하는 문법으로 JavaScript+HTML 기능을 가진 자바스크립트를 확장한 문법이다.
JSX 없이 React로 엘리먼트를 생성할 수 있지만, 복잡하고 가독성이 낮아지므로 JSX를 사용하는 것이 권장된다.
이를 통해 React에서 보다 복잡하지 않고 가독성이 좋은 코드를 작성할 수 있다. -
map을 활용하여 다양한 데이터를 나타내는 실습 해보기
o
배열(=posts)의 각 요소들(=post)을 하나씩 돌아가며 새로운 로직으로 매핑(=mapping)하여 반환한다.
ex) {posts.map((post) => postToJSX(post))} -
React 컴포넌트(React Component)의 필요성에 대해서 이해하고, 설명할 수 있다.
o (위에서 설명함)
-
Create React App 소개를 보고, Create React App 이 무엇인지 대략적으로 이해할 수 있다.
o
Creat React App은 SPA(Single Page Application)를 쉽고 빠르게
개발할 수 있도록 필요한 라이브러리를 모아둔 툴 체인으로 터미널에 한 번
입력함으로써 바로 React 개발을 할 수 있다.
npx create-react-app 폴더이름 -
npx create-react-app으로 새로운 리액트 프로젝트를 시작할 수 있다.
o
-
create-react-app으로 간단한 개발용 React 앱을 만들어 실행할 수 있다.
o
create-react-app으로 간단한 리액트 랜덤 명언 앱을 만들어 봤다. -
리액트 랜덤 명언 앱 튜토리얼을 따라 간단한 리액트 랜덤 명언 앱을 만들 수 있다.
o
-
Create React App으로 만들어진 리액트 프로젝트 구성을 대략적으로 이해할 수 있다.
o
과제 React Twittler Intro
-
리액트, JSX 기본 문법을 익힌다.
o
-
리액트, JSX로 트위틀러를 하드 코딩할 수 있다.
o
5개의 dummyData를 이용하여 하드 코딩할 수 있다. -
컴포넌트를 먼저 개발하는 Bottom-up 개발 방식에 익숙해진다.
o
리액트 어플리케이션은 최소 1개의 컴포넌트를 가지며, 이 컴포넌트는
어플리케이션 내부적으로는 root(근원)이 되며 최상위 컴포넌트다.
보통 Create-react-app으로 만든 React앱에서 root는<App>이 대표적이다.
이러한 최상위 컴포넌트는 자식 컴포넌트를 가질 수 있으며,
트리 구조로 형상화하여 컴포넌트 간의 관계를 형상화할 수 있다.
(트리 구조 : 위 --> 아래)그러나 컴포넌트 기반의 특성으로 개발할 때는 컴포넌트를 먼저 완성시키고,
레이아웃에 따라 유동적으로 컴포넌트의 위치를 변경할 수 있도록 상향식 개발(Bottom-up : 아래 --> 위)에 적합하다. -
npm script로 리액트 개발에 필요한 기본적인 툴을 사용할 수 있다.
o
-
React Twittler Intro의 CSS를 개선해 보기
o
소감
🔡➡️💻➡️🤓👍
오늘은 확실히 몰입도 잘되고 재미있었다.
다들 리액트는 앞에서 배운
HTML, CSS, JavaScript 보다 재밌을 거라고 했는데 동의한다.
HTML과 CSS는 배우면서 너무 정적인 것 같고,
손도 많이 간다고 생각했기에
JavaScript 배울 때에는 스트레스를 받기는 했지만서도
재밌다고 느꼈는데 React는 더 동적이고 눈으로 바로 확인할 수 있어서
재밌었다.
이 리액트를 배우기 위한 선지식으로
HTML, CSS, JavaScript를 배운 거 같다는 생각이 들었다.
역시나 컴퓨터 언어가 아무리 업데이트 되어 새로운 언어가 생겨난다 해도
결국은 컴퓨터 언어도 언어이기에 그 근원을 바탕으로 만들어질 수 밖에
없다는 생각을 했다. 그래서 기초를 더욱 단단하게 복습하고 학습해야겠다.
언제든 무너지지 않도록!
아참! 오늘은 페어분께 설명도 할 수 있었고,
과제 제출 전에 다른 방식으로 코드를 작성하다 실패한 거를
다시 해보면서 성공했고, 이 방식에 대해 페어분도 고민하고 있어서
페어분이 작성한 코드를 살펴보면서 에러를 해결할 수 있어서 매우 뿌듯했다.
어제도 내가 작성하지 않은 다른 방식으로 강사님이 하셔서
시도해보다 실패한 거를 수업이 끝나고 해결하고
오전에 실시간 세션에서 수업 이후에 남아 코드 첨삭을 받았는데 매우 뿌듯했다.
처음 부트캠프를 시작했을 때의 나와 조금 달라지는 것을 느낀다.
오늘 랜덤 명언 앱 만들기 과제를 하기 위해 학습 명언을 검색해보다가
눈에 들어온 명언이 있었다.
<오쇼 라즈니쉬>
삶은 새로운 것을 받아들일 때만 발전한다.
삶은 신선해야 하고, 결코 아는 자가 되지 말고, 언제까지나 배우는 자가 되어라.
마음의 문을 닫지 말고 항상 열어 두도록 하여라.
<탈무드>
하루 공부하지 않으면, 그것을 되찾기 위해서는 이틀이 걸린다.
이틀 공부하지 않으면, 그것을 되찾기 위해서는 나흘이 걸린다.
1년 공부하지 않으면, 그것을 되찾기 위해서는 2년이 걸린다.
요즘 내가 가장 많이 되새기는 마음의 말이 하나 있다.
'지금 당장 이거 하기 싫어도, 이거 하고 자면,
내일은 좀 더 수월해질 것이다. 이거 해야 내일의 내가 편하다.'
그러니 오늘도 자기 전에 인프런 자바스크립트 강의 보고 하루를 마무리 해야겠다.
오늘도 너무 수고한 나! 너무 칭찬해! 👏👏👏
