[TIL] 4월 26일 기록

오늘의 할 일

• ✅ 📌 어제자 TIL - [내일 할 일] 확인
• ✅ 📌 ~20:00 팀 데일리 미션 출제
• ✅ 📌 ~다음날 06:00 팀 데일리 미션 답변
• ✅ 📌 TIL 작성
• 리액트 기본 강의에서 실습 부분의 코드를 한 번 더 정독하기 → 내일 오전에 하자.. ㅎ

 

오늘의 나는 무엇을 잘했을까?

• 면접 스터디에서 다형성에 대해 막힘 없이 잘 대답했다. (말투는 좀 더 신경써서 다듬어야겠다)
• 데일리 스크럼에서 useState & setter에 대해 더 깊게 알게 됐다. 리마인드 차원에서 짤막하게 정리해보자면..
  1. setState 메소드를 호출하면서 함수가 재호출되어 const state가 재생성되는 것이다.
  2. 그런데 현재 함수 입장에서 보면 state 값은 바뀌지 않고 현재 초기값 그대로 유지된다고 해석된다. 즉 현재 함수 입장에서 state 값은 초기화 이후 값이 변하지 않는다.
  3. 이전 state값은 클로저에 의해 참조할 수 있고, state 뿐만 아니라 일반 변수 또한 클로저에 의해 참조할 수 있는 듯하다. (아마)

 

오늘의 나는 무엇을 배웠을까? ⭐(중요체크)

React 웹 개발 시작하기

빌드

브라우저가 해석할 수 있고(리액트의 JSX 문법은 웹 브라우저가 그대로 해석할 수 없으므로 이걸 순수한 자바스크립트 코드로 변환한 다음에 웹 서버를 통해 제공되어야 함) , 웹 서버가 사용하기 좋도록 만드는 과정

npm run build

build를 시작하는 커맨드. build 폴더가 새로 생기게 되는데, 이 안에 index.html, css, js, media(이미지 등)가 들어 있음.

이 build 폴더를 웹 서버로 제공하면 프로젝트가 배포된다.

 

npx serve build - npx 저장소에서 serve라는 프로그램을 다운받고, 앞서 생성한 build 폴더에서 서버를 실행하게 된다.

• 로컬 환경에서 웹 서버를 실행하게 함
• local 주소에 우리가 만든 리액트 페이지가 나타나게 됨
• 인터넷에 공개된 것이 아니라서 내 컴퓨터에만 볼 수 있다. (같은 공유기로 무선 네트워크를 같이 사용하는 유저는 가능)

배포

우리의 프로젝트를 다른 사람들이 사용할 수 있도록 하는 걸 “서버에 배포한다”고 표현

웹 사이트 배포하기(feat. AWS S3)

• 구글 드라이브 같은 저장소

버킷 생성

• 버킷 이름을 설정해야 하는데, AWS에 존재하는 모든 버킷 이름 중 고유해야 함
• 인터넷을 통해 사람들에게 공개해야하므로 퍼블릭 액세스 차단을 해제한다(체크박스 해제)

속성 설정

• [속성 탭] - [정적 웹 사이트 호스팅]: S3에 올린 파일을 웹사이트로 만듦
• [활성화]로 체크하고 인덱스 문서: index.html, 오류 문서: index.html (파일이 없는 경로로 접속하는 경우에 보여줄 HTML 파일)로 설정

권한 설정

• [권한 탭] - 버킷 정책: 웹 브라우저가 버킷에서 할 수 있는 권한을 설정
• [정책 생성기]로 정책을 간단하게 생성할 수 있음.
  • 모든 사용자들이 인터넷으로 우리 파일을 볼 수 있게 하려면step 2.Actions에 [GetObject] 선택
  • ARN - 이전 버킷 정책 탭에 있는 버킷 ARN을 복사해서 붙여넣기 + /* : 버킷에 있는 모든 파일에 이 정책을 적용한다는 뜻
  • principal에 [*] 입력 → 모든 사용자에게 적용할 거라는 의미
  • step 1. [S3 Bucket Policy] 선택
  ⇒ 최종적으로 JSON 형태의 정책이 만들어지고, [정책] 부분에 붙여넣으면 된다!

빌드 파일 업로드하기

• 앞서 npm run build로 만든 build 폴더에 있는 모든 파일들을 업로드하기

하단의 링크가 우리 프로젝트의 주소

 

커스텀 도메인으로 설정하기

(옵션) 커스텀 도메인 달기 (AWS Route53) - React 웹 개발 시작하기 | 코드잇

(옵션) 커스텀 도메인 달기 (AWS Route53) - React 웹 개발 시작하기 | 코드잇

⭐ 웹 브라우저는 JSX 문법을 사용할 수 없다. (feat. Transfiling)

따라서 JSX는 순수한 자바스크립트로 번역해서 실행되어야 한다. = Transfiling → babel이라는 프로그램을 통해 JSX를 JS로 번역(JSX→JS 번역 프로그램 중 babel이 가장 대표적)

⭐ 번들링

build 파일은 static 폴더 내에 js, css 등의 폴더를 두는데, 기존의 우리가 작성한 js와 다른 파일의 이름들임. → 소스 코드의 파일들을 압축해서 묶어놓은 파일임. 용량을 줄일 수 있고, 웹 브라우저에서 더 빨리 다운받게 됨.

이러한 묶음 파일들을 번들(bundle)이라고 함.

 

정리) JSX 문법으로 된 js 파일 → Transfiling을 통해 순수 자바스크립트 코드로 번역 → 번역된 코드들은 번들링을 통해 웹브라우저가 다운받기 좋도록 묶음으로 만들어짐

⇒ 리액트 코드는 Transfiling과 번들링을 통해 웹 브라우저가 알아들을 수 있는 js 파일로 변환되어야 실행됨

⇒ 실제로 웹 사이트에 접속하는 사람들은 번들 파일이 실행된 모습을 접하는 것.

React로 데이터 다루기

mock 데이터

서버에서 받아올 데이터를 흉내내는 데이터.

💡 코드잇 강의 컨텐츠에선 src 폴더에 저장

💡 src 폴더 내부에 components 폴더를 따로 만들어서 그 안에서 component들을 관리

map으로 배열 렌더링하기

배열의 map 메소드에서 JSX 문법을 return하면 마치 JSX를 여러 개 추가한 것처럼 동작함

function ReviewList({ items }) {
  return (
    <ul>
      {items.map((item) => {  // 👈 배열 개수에 따라 <li> 태그가 <ul> 태그 안에 추가됨
        return (
          <li>
            <ReviewListItem item={item} />
          </li>
        );
      })}
    </ul>
  );
}

💡 array.method 부분이 자바스크립트 표현식이기 때문에 JSX 문법 안에서 { }로 감싸줘야 함!

배열 랜더링에 왜 map 메소드를 써야할까?

비슷한 메소드로 forEach가 있는데, 둘의 차이는 return 값 유무다. forEach 메소드는 리턴 값으로 아무것도 넘겨주지 않기 때문에 렌더링되지 않음. map 메소드는 return 값으로 JSX 구문을 리턴할 수 있기 때문에 따라서 배열 렌더링엔 map 메소드를 쓰자.

배열 sort 메소드로 정렬 바꾸기

💡 자바스크립트 배열 sort하기

// 오름차순
items.sort((a, b) => a-b};

// 내림차순
itmes.sort((a, b) => b-a};

ex) 인기순, 최신순 등의 정렬 기능에 사용될 수 있다.

import { useState } from "react";
import items from "../mock.json";
import ReviewList from "./ReviewList.js";

function App() {
  const [order, setOrder] = useState("createAt");
  const sortedItems = items.sort((a, b) => b[order] - a[order]); // 👈
	// items.sort((a, b) => b[order] - a[order]); // sortedItems 변수 선언하지 않아도 가능

  return (
    <div>
      <ReviewList items={sortedItems} />
    </div>
  );
}

export default App;

💡 sort 메소드를 사용하면 items(원래 배열)도 해당 sort 결과가 반영된다!

배열 filter 메소드로 요소 삭제하기

// 1. 부모 컴포넌트에서 자식 요소의 삭제에 대한 이벤트 핸들러 설정
const handleDelete = (id) => {
    const nextItems = items.filter((item) => item.id !== id);
    setItems(nextItems);
  };

// 2. 자식 컴포넌트에서 위의 이벤트 핸들러를 props로 받아 자신의 이벤트 핸들러로 등록
function ReviewListItem({ item, onDelete }) {
  const handleDeleteClick = () => {
    onDelete(item.id); // 👈 부모의 이벤트 핸들러를 자식의 이벤트 핸들러 안에서 호출하는 식으로 구현
  };

  return (
    <div className="ReviewListItem">
      ...
      <button onClick={handleDeleteClick}>삭제</button>
			... 
  );
}

💡 배열의 filter 메소드: 콜백 함수에서 정한 조건이 true인 원소들만 새로 배열로 만들어서 리턴

배열을 렌더링할 때 key가 필요하다

key를 설정하지 않은 경우 콘솔에 뜨는 경고창

1. key를 쓰지 않으면 렌더링 과정이 비효율적이다.

const array = ['a', 'b', 'c', 'd']; 

array.map(item => <div>{item}</div>);

위와 같은 배열 array에 ‘b’와 ‘c’ 사이에 ‘z’를 삽입하게 된다면, 리렌더링 과정에서 ‘b’와 ‘c’ 사이에 새로운 div 태그를 삽입하는 것이 아니라

1. • 기존의 c → z
   • 기존의 d → c
   • 맨 마지막에 ‘d’ div 태그가 새롭게 삽입
   총 3번의 작업이 소요된다.
   배열 원소의 삭제도 이와 같은 방식으로, 변경되는 부분 뒤에 있는 요소들이 모두 영향을 미친다.

2. 의도치 않은 렌더링 결과

 

⇒ 각 배열 원소에 key를 부여함으로써 배열의 변화를 리액트에게 정확히 알려야 할 필요성이 있다.

array.map(item => <div key={item.id}>{item}</div>);

💡 배열의 인덱스를 key로 설정 X. 배열이 변경되면 인덱스도 변경되므로 고유한 key값으로 적합하지 않음.

 

오늘의 나는 무엇이 궁금했나?

npx serve build vs. npm run start로 프로젝트를 실행한 것과 차이가 궁금..

1. npm start(npm run start)

• 개발 모드로 프로그램을 실행하는 명령어
• HMR(hot-module-replacement)가 동작해 수정과 동시에 화면이 변경됨
• 개발 모드에서 코드에 에러가 있으면 브라우저에 에러 메시지를 출력
• https 실행 옵션을 통해 https 인증서 없이 임시로 https 형태로 url을 만들 수 있음

// macOS
HTTPS=true npm start

// Window
set HTTPS=true && npm start

 

2. npm run build

• 배포 환경에서 사용할 파일(=build 폴더)을 만들어줌

3. npx serve build

• serve 패키지는 node.js 환경에서 동작하는 웹 서버 어플리케이션. npx로 실행하며 build된 정적 파일을 서비스 할 때 간단하게 사용하기 편리

결론) npm run은 개발 모드, npx serve build는 배포 모드 서버가 동작

Node.js에서의 Development Mode, Production Mode 분기

Node.js에서의 Development Mode, Production Mode 분기

 

오늘 하루 회고

리액트 너무 어렵다ㅏㅏㅏ 어쩌지..?

팀원들과 위클리 미션에 대해 잠깐 얘기했는데 컴포넌트 만들어서 props를 어떻게 지정할지부터 다들 막막해하는 것 같았다.

그래도 하면 어떻게든 되겠지 ㅋㅋㅋㅋㅋ

리액트를 거의 처음 접하다보니 지식들이 낯설어서 진도가 더디고 있다. 강의 한두개라도 오고가면서 들어야겠다. 특히 내일은 멘토링 + 특강세션이 있어서 좀 더 시간관리를 빡세게 해야겠다.