React?
페이스북에서 개발한 라이브러리.
오로지 보이는 것 (view)만 담당.
생태계가 활성화 되어있다? 사용자가 많다. -> 즉 내가 겪은 문제들을 이미 겪은 사용자들이 많고 좀 더 빠르게 문제 해결이 가능 + 효율적으로 대처 가능.
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다.
불필요한 UI 업데이트는 줄고, 성능은 좋아진다!
node.js?
자바스크립트가 브라우저 밖에서도 동작하게 하는 환경
자바스크립트의 탈 웹
프로젝트를 개발하는 데 필요한 주요 도구들(ex. 바벨, 웹팩)이 Node.js 기반이기 때문에 반드시 설치해야함.
npm?
노드 패키지 매니저의 약자.
node.js 설치 시 자동으로 설치됨
다양한 패키지를 설치하고 버전을 관리할 수 있음
CRA?
Create React App 의 약자
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구.
CRA - Settings
CRA 설치
vs 에서 터미널 키고// 1. Desktop - wecode 폴더 진입 cd Desktop/wecode // 2. westagram-react 프로젝트 설치 npx create-react-app westagram-react // 3. westagram-react 프로젝트 진입 cd westagram-react // 4. 로컬 서버 띄우기 npm start
node_modules?
node_modules is where npm modules are saved. If you open node_modules , you should see a folder named react , which contains the code that makes React run.
노드패키지매니저가 저장되어있는 곳, 리액트를 실행시킬 수 있는 코드들이 포함되어있다고 한다.
package.json?
사용하고 있는 npm 패키지들을 관리하는 파일이다.
개발할 때 엄청 크고 무거운 node-modules를 공유할 필요 없이 package.json만 공유하면 동일한 환경에서 작업할 수 있다.
이런 식으로 구성되어있다.
- 하나 더 package-lock.json파일을 수정하면 자동으로 package-lock.json이라는 파일이 생성된다. 이 파일은 내가 사용하고 있는 패키지들의 의존성 트리에 대한 정보가 기록되어 있는 곳이다.
동일한 코드여도 버전에 따라 예상치 못한 다른 결과가 나올 수 있기 때문에 이 파일도 함께 공유되어야 한다.
gitignore?
프로젝트에 항상 필요하다. git에 올려도 되지 않는 것들을 .gitignore 파일에 목록화한다. node_modules 에는 CRA를 구성하는 모든 패키지 소스 코드가 존재하는데, 이것들을 github에 올릴 필요는 없기때문에 무시하라는 것
Component?
1. 재활용하여 사용할 수 있다.
2. 코드 유지보수에 좋다.
3. 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다. = 가독성
4. 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)
즉 독립적으로, 재사용 가능한 코드이며 관리가 가능.
- Class형 컴포넌트(Class Component)
- 함수형 컴포넌트(Functional Component)
1) Class Component
import React from 'react' class Component extends React.Component { render() { return ( <div> <h1>This is Class Component!</h1> </div> ) } } export default Component
React.Component를extends해줘야 한다.
render()메서드는 무조건 정의. 필수임 필수.
return안에 보여주어야 할 jsx를 반환.2) Functional Component
import React from 'react' const Component = () => { return ( <div> <h1>This is Functional Component!</h1> </div> ) }; export default Component
jsx?
자바스크립트 확장 버전이다.
html 문법을 자바스크립트 코드 내부에 써주는 것.const hi = <p>Hi</p> const myFavorite = { food: <li>샐러드</li> animal : <li>dog</li> hobby: <li>programming</li> };태그에 속성을 주고 싶을 때는 쌍따옴표로 감싸주기.
class를 주고 싶을 때는 className 을 사용해야한다.
예시)const hi = <input readOnly={true} />; const myFavorite = { food: <li>샐러드</li> animal: <li>dog</li> hobby: <li className="list-item">programming</li> };셀프 클로징 태그 가능.
<div /> == <div></div>소괄호로 감싸기
예시)const good = ( <div> <p>hi</p> </div> );항상 하나의 태그로 시작하여야 함
const right = ( <div> <p>list1</p> <p>list2</p> </div> );무조건 최상위 태그로 감싸줘야한다.
- 모든 요소를 감싸는 최상위 요소 (cf. React Fragments :
<> ... </>)
: JSX의 큰 특징 중 하나는 내부 요소들을 감싸는 최상위 요소가 있어야 한다고 배웠습니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 요소(자식)들을 간단하게 그룹화 할 수 있는 기능입니다. 요소들을 감싸는div태그의 불필요한 생성을 막을 수 있어 유용하게 사용됩니다.
리액트 폴더 안에 위스타그램 로그인 과 메인 페이지 폴더를 만들어줬다. 여기 안에서 작업하여 컴포넌트를 만들고 리액트 화면에 내가 만든 위스타그램 페이지가 뜨도록 하는 것이 과제.
CSS 파일들은 그대로 복사하여 폴더 안에 넣어주었다.
이제 Main.js 안에 html 코드를 넣어주면 된다.
React 를 import 해주고 필요한 css파일들도 import 해준다. 같은 폴더 안에 있기 때문에./바로 뒤에 파일이름을 써주었다. class 컴포넌트 형식을 사용. 리턴 값 안에 최상위 태그<></>로 감싸주었고,<body>태그를 제외한<body>안에 있는 코드들을 그대로 옮겨주었다.class도className으로 변경._사실 옮기고 나서 그대로~ 아무 문제도 생기지 않으면 좋겠지만.. 분명 여러 문제가 생길 것이다. 나같은 경우에는, 왜인지는 모르겠으나, 옮기자 마자 감싸고 있는 div 태그들의 연결이 잘안되어 있다고 한다던지 (예를 들어
<div></div>오픈, 클로징 태그가 있음에도 클로징 태그가 없다고 한다던지) img alt를 넣으라는 문제라던지.그래서 리액트로 옮기기 전에 미리 html 코드들을 정리해주는게 좋다. 나는 일단, 감싸고 있는 태그들의 들여쓰기를 다시 한번 검토했고 css 스타일을 클래스 네임이나 아이디 네임에 지정해주지 않고 태그에 지정해줬다면, 클래스 네임 또는 아이디 네임에 지정해주는 것으로 수정하였다._
다행이도 미리 검토한 후 옮겼을 때 css가 깨지는 문제는 발생하지 않았다..! 내일 scss를 만나면 어떤 일이 날 기다릴지 그건 참 기대가 된다,,
중간 코드들은 생략하고, 맨 아래로 내려가 보면,export를 해줬음을 확인할 수 있다.
index.js를 보면, 상단에Main.js를 import 해준 것을 확인할 수 있다. 그리고 '화면에 보여지기 위한 렌더' 함수 안에Main.js에서 만든 컴퍼넌트를 정의해주었음을 확인할 수 있다.<Main />이 컴퍼넌트이다. 그리고 html 문서의 id 'root'에 접근했음을 알 수 있다.
리액트의 index.html 이다. 우린 리액트 화면에 우리의 페이지를 띄우는 것이 목적이므로, 우리의 html 헤드 부분에 있던 것을 이 쪽에 옮기면 된다. 잘 보면 폰트어썸 링크와 폰트링크가 들어가 있는 것을 확인할 수 있다. 그리고 위에서 접근한 id 이름이 'root'인 div 태그 또한 확인할 수 있다.
리액트 앱 화면에 메인 페이지가 나오는 것을 확인할 수 있다.
염탐하러 왔습니다~😸