해결 과정

그리디 알고리즘의 특성을 고려하여, 우선 필요한 작업부터 수행해 나가는 것이 좋다.(=당장의 최적합을 찾기)

1. 최초값인 A를 기준으로, 알파벳의 중간 지점인 N을 기준으로

   1) 다음 알파벳으로 올라가는 것 2) Z부터 역순으로 내려가는 것 중 최솟값을 선택한다. 이때, 알파벳의 ASCII 코드를 찾아내는 함수인 charCodeAt()을 활용하기!

count += Math.min((name[i].charCodeAt(0) - 65), (91 - name[i].charCodeAt(0)));

2. 다음 문자에 연속된 A가 있는지 판단하기 위해, while 반복문을 사용하여 연속된 가장 마지막 A를 찾는다.

   let nextA = i + 1;
   while(nextA < name.length && name.charCodeAt(nextA) === 65) nextA++;

3. 다음 문자로 이동할 때, 앞으로 가는 것이 빠른지, 혹은 뒤로 가는 것이 빠른지를 판단한다. 이때, A가 연속으로 나올 경우, 굳이 그쪽 끝까지 갔다가 다시 돌아오는 것보다, 미리 돌아서 다른 방향으로 가는 것이 더 효율적일 수 있는데, 그 비용을 i * 2로 설정해 준다.

   min = Math.min(min, (i * 2) + name.length - nextA, i + (name.length - nextA) * 2);

최종 답안

function solution(name) {
    var count = 0;
    let min = name.length - 1; //좌우 이동 최초 최소값
    for(let i = 0; i < name.length; i++){
      //위아래 버튼 여부 결정
        count += Math.min((name[i].charCodeAt(0) - 65), (91 - name[i].charCodeAt(0)));
        let nextA = i + 1; //A의 연속 개수를 고려한 좌우 이동 여부 결정
          //연속된 A 개수 찾기
        while(nextA < name.length && name.charCodeAt(nextA) === 65) nextA++;
      // 그냥 좌로만 쭉 가는 거랑, 우로 한번 거쳐서 맨 뒤로 가는 거, 뒤로 간 후 앞으로 돌아오는 것 중에서 최소값 비교
        min = Math.min(min, (i * 2) + name.length - nextA, i + (name.length - nextA) * 2);
    }
    return count + min;
}

Greedy 알고리즘

그리디 알고리즘이란, 선택해야 하는 상황에서 순간순간 보이는 가장 최적화된 결과를 선택하여 최종 결과에 도달하는 것이다. 이러한 특징은 곧 빠른 실행 속도를 보장하는데, 맹점은 이러한 알고리즘이 무조건 최적의 결과를 보장하지는 않는다는 것이다.

• 그리디 알고리즘의 주요 특징

  1. 이전의 선택이 이후의 선택에 영향을 주지는 않는다.
  2. 하나의 큰 문제는 여러 개의 작은 문제들로 분리되며, 이 결과는 작은 문제들의 최적화된 해결 방법으로 결정된다.

Debounce란, 굉장히 짧은 시간에 발생되는 작업들이 아닌, 일정한 시간 간격을 두고 그동안 일어난 모든 결과들을 한 번의 호출로 처리하는 것을 의미한다.

Debounce의 사용 목적

일반적으로 많은 양의 데이터가 있고 이를 브라우저 상의 사용자가 탐색하는 과정이 있다면, 순간 순간의 탐색마다 많은 브라우저 리소스가 소모될 것이다. Debounce는 이러한 수많은 이벤트 호출을 방지하여 리소스 부하와 성능 저하를 개선할 수 있다. 따라서 Debounce는 사용자 입력에 관한 기능이나 이미지 리사이즈, 버튼 더블클릭 방지 등에서 활용된다.

간단한 예시

예를 들어, 내가 검색창에 단어를 입력할 때, 입력하는 문자마다 그에 대한 결과값을 받는 것이 아닌, 전체 단어를 입력했을 때의 자동완성 결과만 받고 싶다고 가정해 보자.

일반적으로는 setTimeout을 통해 사용자가 검색창에서 원하는 단어를 입력할 시간을 준 뒤 그 이후에 결과를 찾는 이벤트를 수행하도록 하는 구조이다.

import React, {useState, useEffect} from 'react';

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(()=>{ //timeout을 줌으로써 그 사이의 이벤트 호출은 무시
    const timer = setTimeout(()=>{
      setDebouncedValue(value);
    }, delay);
    return ()=>{clearTimeout(timer)};
  }, [value]);
  return debouncedValue;
}

export function App() {
  const [value, setValue] = useState<string>("");
  const debouncedValueTest = useDebounce(value, 1000); //1초의 디바운스 기간 부여
  return (
    <div>
      <p>test input</p>
      <input
        value={value}
        onChange={(e)=>setValue(e.target.value)}
      /> // 디바운스 기간동안 입력이 없다면, 결과로 인식하게 됨
      <p>now: {value}</p> //input에 넣는 즉시 나타나는 값
      <p>debounced: {debouncedValueTest}</p> //디바운스 후 나타나게 됨!
    </div>
  )
}

유사한 개념 - Throttling(쓰로틀링)

목적 자체는 두 기법 모두 성능 저하를 방지한다는 면에서 유사하다. 하지만 Debounce와 달리, Throttling은 일정한 주기마다 이벤트 핸들러를 처리함으로써 리소스 부하를 막는다는 차이점이 있다. 이벤트 처리 기준으로 비유하자면 Debounce가 바루스의 '꿰뚫는 화살'처럼 한 번에 충전했다가 발사하는 느낌이라면, Throttling은 진의 궁극기인 '커튼콜'처럼 쿨타임마다 꾸준히 발사되는 것과 같은 것이다(...) 이러한 특징 덕분에, Throttling은 페이지 스크롤이나 마우스 움직임과 같은 곳에서 활용된다.

참고자료

https://developer.mozilla.org/ko/docs/Glossary/Debounce

해결 과정

1. 주어지는 my_string을 배열로 바꾸기

   const arr = [...my_string];

2. splice()를 이용하여 배열화된 my_string의 s번째 문자부터, overwrite_string의 길이만큼 바꿔주기

   arr.splice(s, overwrite_string.length, overwrite_string);

3. 배열화되어 쪼개진 문자들을 .join을 통해 다시 이어주기

   return arr.join("");

최종 답안

function solution(my_string, overwrite_string, s){
  const arr = [...my_string];
  arr.splice(s, overwrite_string.length, overwrite_string);
  return arr.join("");
}

*splice()의 사용법

원래 배열의 특정 부분에 요소를 추가하거나 제거할 때 사용한다.

splice(기존 배열에서 제거가 시작될 인덱스, 제거될 인덱스 개수, 그 자리에 들어갈 아이템들);

의 순으로 작성된다.

• 제거될 인덱스 개수가 0인 경우, 아무것도 제거되지 않고 새롭게 첫 인덱스 뒤부터 아이템들이 추가된다.

  const arr = [1, 2, 3, 4];
  const result = arr.splice(1,0,100);
  console.log(arr); // 1, 100, 2, 3, 4 가 출력됨.

  
  

• 만약 대체될 아이템이 없는 경우, 단순히 인덱스 내의 값들이 제거되기만 한다.

  const arr = [1, 2, 3, 4];
  const result = arr.splice(1,2);
  console.log(arr); // 1, 4 가 출력됨.

  
  

• 제거할 인덱스 개수를 미지정하는 경우, 시작 인덱스부터 모든 값이 제거된다.

  const arr = [1, 2, 3, 4];
  const result = arr.splice(1);
  console.log(arr); // 1 이 출력됨.

데이터 용량이 너무 많다

이전부터 다른 프로젝트에서도 나왔던 QA 사항이었는데, 아이템의 목록을 보여줄 때 아이템의 양이 너무 많은 경우, 혹은 용량이 너무 많은 경우에는 데이터 렌더링에 있어서 너무 오랜 시간이 소모되었다. 당시에는 백엔드에게 Pagination을 통해 자체적으로 데이터를 분할하여 로드할 수 있도록 요청했지만, 당시에는 이미 프로젝트의 진척이 많이 나가버린 상황하다 보니, 백엔드의 수정이 생각보다 복잡해지는 문제가 있었다. 문제 해결을 위해 React에서 자체적으로 Pagination을 적용해 보았지만, 여전히 데이터 로딩 속도에서는 딱히 감소폭을 보여줄 수 없었다.

문제는 이번에도 똑같은 상황이 벌어졌다는 것이었다. 당시의 이슈를 해결하지 못한 채 같은 실수를 반복해버리고 만 것이다... 채팅과 커뮤니티 구현에 있어 무한스크롤을 적용하려다 보니, 계속해서 아이템이 쌓여가며 로딩 시간이 점점 길어져 버리는 이슈가 생겼다. 특히나 우리 서비스의 경우 모바일 웹을 기반으로 서비스할 예정이었기 때문에 이 이슈를 반드시 해결해야만 사용자 경험이 크게 개선될 수 있었다.

아이템의 양이 너무 많다 보니, 페이지 로딩부터가 장시간을 소모해버리는 이슈 발생.

해결책

인터넷을 뒤지다, 가상 스크롤에 대한 글을 읽게 되었다. 가상 스크롤이란, 사용자가 눈으로 보게 되는 데이터만 웹에서 렌더링하고, 나머지 데이터의 경우 화면에 보이기 전까지는 렌더링을 하지 않음으로써 데이터 로딩 효율을 크게 증가시키는 기법이며, 예시를 들자면 인스타그램이나 X같은 대형 커뮤니티 서비스의 게시글 피드 렌더링이 있다.

이 기법을 사용하기 위해서는 React Virtualized, @tanstack/react-virtual 등의 라이브러리를 사용하는 방법도 있지만, 현재 우리 팀의 개발 진척 상황을 고려했을 때, 이미 다른 주변 기능들이 많이 구현된 시점에서 새로운 라이브러리를 도입하는 것은 다소 무리가 있다고 판단했다.

따라서 나는 css에 존재하는 content-visibility 클래스를 사용하기로 결정했다.

Content-visibility 클래스의 사용법

https://developer.mozilla.org/ko/docs/Web/CSS/content-visibility 위 링크의 문서에서 알 수 있듯, content-vibility 클래스는 언제 컨텐트를 렌더링할지를 사용자에게 명시함으로써 불필요한 컨텐트 렌더링을 줄일 수 있다는 장점을 가진다. 구현을 위해서는 단 두 줄의 css 코드를 작성해주면 된다.

content-visibility: auto;
contain-intrinsic-size: auto 200px;

PlayUs의 적용에서는, 기존 단순 Pagination에서 무한 스크롤로의 구현 변경을 시도했고, 이 과정에서 가상 스크롤 기능을 추가하여 렌더링 시간을 줄이고자 했다.

수정 결과

Javascript 변경

<ul className={styles.postList}>
                {sortedPosts.length === 0 && !isLoading ? (
                    <li className={styles.listIsLoading}>게시글이 없습니다.</li>
                ) : (
                    sortedPosts.map((post) => (
                        <div
                            key={post.id || post.postId}
                            className={styles.autoScrollWrapper}
                        >
                            <PostListItem
                                title={post.title}
                                date={post.date}
                                writerNickname={post.writerNickname}
                                image={post.image ? `${process.env.REACT_APP_PRESIGNED_URI}/${post.image}` : null}
                                onClick={() => handlePostClick(post.team, post.id || post.postId)}
                            />
                        </div>
                    ))
                )}
                {isLoading && (
                    <>
                        {Array.from({ length: 1 }).map((_, index) => (
                            <li key={`skeleton-${index}`} className={styles.skeletonItem}>
                                <div className={styles.skeletonThumbnail}></div>
                                <div className={styles.skeletonContent}>
                                    <div className={`${styles.skeletonLine} ${styles.long}`}></div>
                                    <div className={`${styles.skeletonLine} ${styles.short}`}></div>
                                </div>
                            </li>
                        ))}
                    </>
                )}
                <div ref={bottomRef} style={{ height: '1px' }} />
            </ul>

css 변경

.autoScrollWrapper{
    content-visibility: auto;
    contain-intrinsic-size: 200px;
}

기존 수백 개씩 렌더링하던 아이템을 한 번의 스크롤당 8개씩 렌더링하도록 수정함으로써, 렌더링 효율이 크게 증가하고 사용자의 경험을 개선시킬 수 있었다..! 단, 특정 게시글 클릭 후 뒤로가기 버튼을 눌렀을 경우, 새롭게 데이터를 불러오기 때문에 기존에 브라우저에서 기억하던 게시글 페이지 위치는 불러오지 못하게 되었다. 이를 위해선 데이터 클릭 시 스크롤 위치와 페이지에 대한 자체 캐싱이 필요하다고 생각된다...

참조 게시글
가상스크롤의 원리 알고 계신가요? https://velog.io/@k-svelte-master/virtual-scroll-principle

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA

공식 문서에서 설명하는 ARIA란 Accessible Rich Internet Applications, 즉 접근 가능한 리치 인터넷 어플리케이션으로써 시각적으로 문제를 가진 사용자의 접근성을 위해 HTML을 통해 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공하는 방식을 의미한다.

ARIA의 5가지 속성

1. 위젯 속성

•    UI 구성 요소(버튼, 체크박스, 슬라이더 등)의 상태나 속성을 정의한다.

예)

2. 실시간 영역 속성:

•    콘텐츠가 실시간으로 바뀌는 경우, 스크린리더에게 알리는 방식을 정의한다.

예)

3. 드래그 & 드롭 속성:

•    요소 간 드래그/드롭 인터페이스 구현 시 사용한다.

예)

4. 관계 속성:

•    요소 간 논리적 관계를 연결하여 스크린리더가 의미를 이해하게 돕는다.
예)

* 일부 전역 속성이 따로 존재하는데, 이는 ARIA 역할 적용 여부와 관계없이 모든 HTML 요소에 적용된다.

ARIA 사용 시의 주의사항

1. 기존 HTML 시맨틱 요소가 우선

•    원칙: 가능한 경우 HTML5의 시맨틱 태그(<button>, <nav>, <header> 등)를 먼저 사용할 것.
•    예: <div role="button"> 대신 <button> 사용
•    이유: 시맨틱 태그는 이미 브라우저와 보조기기에 기본 역할을 제공하며, 추가 설정이 필요 없습니다.

2. 불필요한 ARIA 사용 금지

•    ARIA 속성을 무조건 넣는 건 오히려 접근성을 해칠 수 있다.
•    role="presentation"을 잘못 사용하면 스크린리더가 요소를 완전히 무시할 수 있음

3. 적절한 role과 속성 조합

•    role에 따라 요구되는 ARIA 속성이 정해져 있다. (예: role="progressbar" → aria-valuenow, aria-valuemin, aria-valuemax)
•    누락 시 의미가 전달되지 않게 된다.

기존에 내가 진행했던 프로젝트나 레퍼런스에서는, 항상 .css 파일을 통해 페이지를 디자인하려고 시도했었다. 하지만 이 구조로 페이지를 구현하는 경우, 만약 다른 파일의 클래스명이 같은 경우 다른 컴포넌트에서 사용하는 전혀 다른 구조의 클래스더라도 컴파일러에서 잘못 인식하여 종종 다른 컴포넌트 스타일 클래스와 충돌해버리는 문제가 발생하곤 했다.

import React from 'react';
import './button.css';

export default function Button({ children, onClick }) {
  return (
    <button className="btn" onClick={onClick}>
      {children}
    </button>
  );
}

위 버튼 컴포넌트의 예시는 내가 기존에 사용하던 .css 파일을 활용하는 button.jsx 컴포넌트이다. 이 버튼에 대한 스타일 코드는,

.btn {
  background-color: red;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

와 같은 식으로 구현된다. 하지만 내가 만약 다른 컴포넌트에서도 .btn이라는 스타일 클래스를 사용하고 있는 경우,

/* ex) App.css에서의 .btn 클래스라면? */
.btn {
  background-color: blue;
  color: black;
}

내가 사용하고자 했던 빨간색 버튼이 App.css의 영향으로 파란색으로 바뀌게 되어버린다.

어떻게 해야 할까?

css 파일을 만들 때 기존의 {클래스명} .css 대신, {클래스명}.module.css의 형태로 파일을 만들어 준다.

/* button.module.css라면 */
.btn {
  background-color: red;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

위와 같이, css 파일 작성 구조 자체는 기존과 다르지 않다. 하지만, 다른 점은 css를 실제 javascript에서 활용하는 과정에서 나타난다.

import React from 'react';
import styles from './button.module.css';

export default function Button({ children, onClick }) {
  return (
    <button className={styles.btn} onClick={onClick}>
      {children}
    </button>
  );
}

위와 같이, .btn 클래스를 실제로 사용할 button.jsx에서는 className에 className="클래스명" 대신 className={styles.[클래스명]}이 사용된다. 이렇게 명시해 주면, 같은 .btn이라는 컴포넌트 스타일이 있더라도 각각의 css마다 고유한 className을 부여받게 되어 고유한 스타일을 보장받을 수 있게 되는 것이다.

결론

.css 대신 .modules.css를 사용한다면 구체화된 클래스 참조를 통해 같은 스타일 클래스 간 충돌이 방지되고, 나아가 코드의 가독성 상승으로 인해 유지보수가 훨씬 더 간편해질 것이라고 생각된다.

const fetchDetailsByChannelId = async (channelId) => {
        setLoading(true);
        try {
            const response = await axios.get(`http://localhost:8080/chat/channel/${channelId}`);
            const formattedDetails = response.data.map((item) => ({
                msgUrl: item.msgUrl || "N/A",
                text: item.text || "No text available",
                image: item.image, // 이 부분이 출력되지 않았음
                timestamp: parseDateTime(item.timestamp),
            }));
            setSelectedDetails(formattedDetails);
        } catch (err) {
            setError(`Error fetching channel details: ${err.message}`);
            setSelectedDetails([]);
        } finally {
            setLoading(false);
        }
    };

base64로 인코딩된 이미지의 형태

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...

현재 mongoDB에 저장되어 있는 encoded image의 형태는 위와 같이 'data url:데이터타입/이미지타입;인코딩여부,순수문자열' 의 형태로 저장되어 있다.

하지만 나에게 필요한 것은 오로지 순수한 문자열이기 때문에, 우선 문자열 앞 헤더 부분을 모두 제거해 주어야 한다. 이를 위해 나는 JavaScript의 replace() 함수를 사용했다.

image: item.image.replace(/^data:image\/\w+;base64,/, "")

위와 같은 형태로 image column의 데이터에서 앞부분의 필요 없는 헤더 부분을 모두 공백으로 만들어 준다. 즉, "data:image/확장자;base64," 라는 문자열을 모두 찾아서 삭제해 버리는 것이다.
그리고 이제 수정해준 데이터 string을 <img> 태그에서 다시 디코딩해주기만 하면 된다.

{detail.image && (
    <img src={`data:image/png;base64,${detail.image}`}
         alt="채널 이미지"
         className="channel-image"/>
)}

RN에서의 FlexBox의 특징

1. View에서 Flex display를 설정할 때, 이미 모든 View는 기본값이 Flex Container이기 때문에, 일일이 {display: flex}와 같이 지정해 줄 필요가 없다.

2. Flex Direction의 기준은 Column이다.(웹에서는 Row였음)

3. 모바일 디바이스들의 크기는 저마다 다르므로, 레이아웃을 설정해줄 때에는 width와 height의 사용을 최대한 지양한다.(아이콘 제외)

4. flex: x ⇒ 부모 View의 x만큼의 배율로 해당 자식 View를 설정해 준다는 의미. 4-1. 만약 부모 View가 한 코드에 하나만 존재한다면, 부모 View의 flex를 어떤 숫자로 변 경하더라도 비율에 변화는 생기지 않는다. 당연히 비율을 비교할 다른 View가 존재하지 않으니 까.

일반적인 리액트의 구조

• 컴포넌트를 이용해 HTML 생성 → ReactJS를 이용해 JavaScript화 → 브라우저를 이용해 실행

React-Native의 구조

• 운영체제와 개발자 사이의 ‘인터페이스’. 우리가 코드를 만들면 IOS나 안드로이드 자체의 코드로 ‘번역’되도록 그들에게 요청하는 것. 단지 메세지를 주고받는 레이어일 뿐이다.

차이점:

• 리액트에는 Browser가 존재하지만, RN에는 대신 ‘Bridge’가 존재한다.

• 우리는 ‘JavaScript’ 부분만 코드를 작성해주면 된다.
• 예를 들어 우리가 버튼을 누를 때, 운영체제가 모든 화면 터치의 시간과 위치를 감지하고(native 부분), RN이 그 정보로 JSON 메세지를 생성하고(Bridge 부분), JS(우리가 작성한 코드)가 해당 이벤트를 받는다. 이후 어떠한 반응을 보일 지를 native에게 메세지를 보내준다.

• 전체적인 앱의 구조.
• 우리는 JavaScript와 Styling 부분만 만들어서 전송해주는 것. 나머지 InfraStructure은 Java(IOS에서는 Swift) 내부에 존재한다.
• 화살표 부분 = Bridge.

1.1. 설계 및 기본 컴포넌트 구현

• 왼쪽 사이드바에서는 현재 등록된 메모의 목록이, 오른쪽 메모 편집에서는 제목과 내용을 수정할 수 있는 입력 폼.
• 사이드바 구조: SideBarHeader, MemoList(MemoItem), SideBarFooter
• 메모 편집 구조: MemoContainer(MemoTitle + MemoContent)
• 메모 리스트 = [메모1, 메모2, 메모3, 메모4]

1.2. 메모 수정 및 선택 기능 구현

• 사이드바에서 선택한 메모를 오른쪽 편집 영역에서 확인하고 수정.
• 수정된 내용은 다른 메모로 이동하더라도 보존.

1.3. 메모 추가 기능 구현

• 사이드바 최하단에는 새로운 메모를 추가할 수 있는 버튼 존재
• 새로운 메모 추가 시 초기 제목은 ‘untitled’로 설정되며, 내용은 비어있음
• 새로운 메모 추가 시 해당 메모가 자동으로 선택됨

1.4. 메모 삭제 기능 구현

• 사이드바의 각 메모 오른쪽에는 메모를 삭제하는 x 버튼 존재
• x버튼 클릭 시 해당 메모는 삭제, 해당 메모를 선택한 상태라면 가장 첫 번째 메모로 선택이 변경됨
• 모든 메모 삭제 시, 오른쪽 편집 영역에는 “메모가 없습니다. 새로운 메모를 생성해주세요” 라는 문구가 출력됨

1.5. 메모 저장 기능 구현

• 브라우저를 닫아도 편집한 메모가 유지됨 (localStroage 사용)

2. 기본 컴포넌트 구현하기

2.1. App.js

function App (){
    const [memos, setMemos] = useState([
        {
            title: 'Memo 1',
            content: 'This is memo1',
            createdAt: 1719983657532, // 생성한 시간 값.
            updatedAt: 1719983657532, // 업데이트된 시간 값.
        },
        {
            title: 'Memo 2',
            content: 'This is memo2',
            createdAt: 1719983697309, // 생성한 시간 값.
            updatedAt: 1719983697309, // 업데이트된 시간 값.
        }
    ]);

    return (
            <div className="App">
            <SideBar memos={memos}/>
            <MemoContainer/>
        </div>

    );
}

export default App;

2.2. MemoContainer.js

function MemoContainer(){
    return(
        <div className="MemoContainer">
            <div>
                <input type="text" className="MemoContainer_title"/>
            </div>
            <div>
                <textarea className="MemoContainer_content"/>
            </div>
        </div>
    )
}

export default MemoContainer;

2.3. Sidebar.js

import MemoList from "./MemoList";
import SideBarHeader from "./SideBarHeader";
import SideBarFooter from "./SideBarFooter";

function SideBar({memos}){
    return(
        <div className="SideBar">
            <SideBarHeader/>
            <MemoList memos={memos}/>
            <SideBarFooter/>
        </div>
    )
}
export default SideBar;

2.4. MemoList.js

function MemoList({memos}){
    return(
        <div>
            {
                memos.map((memo, index)=>(
                    <div key={index}>{memo.title}</div>
                ))
            }
        </div>
    );
}
export default MemoList;

2.5. SideBarHeader.js

function SideBarHeader({memos}){
    return(
        <div className="SideBar">
            SideBarHeader
        </div>
    )
}
export default SideBarHeader;

2.6. SideBarFooter.js

function SideBarFooter({memos}){
    return(
        <div className="SideBar">
            SideBarFooter
        </div>
    )
}
export default SideBarFooter;

3. 메모 수정 기능 및 메모 선택 기능 구현

3.1. MemoContainer.js에 메모 제목과 내용을 수정해주기

function MemoContainer({memo, setMemo}){
    return(
        <div className="MemoContainer">
            <div>
                <input
                    type="text"
                    className="MemoContainer_title"
                    value={memo.title}
                    onChange={(e)=>{
                        setMemo({
                            ...memo,
                            title: e.target.value,   // 메모 타이틀의 값이 변화하면 value를 업데이트.
                            updatedAt: new Date().getTime(), // setMemo 업데이트 시 시간도 업데이트.
                        });
                    }}
                />
            </div>
            <div>
                <textarea
                    className="MemoContainer_content"
                    value={memo.content}
                    onChange={(e)=>{
                        setMemo({
                            ...memo,
                            content: e.target.value,   // 메모 내용의 값이 변화하면 value를 업데이트.
                            updatedAt: new Date().getTime(), // setMemo 업데이트 시 시간도 업데이트.
                        });
                    }}
                />
            </div>
        </div>
    )
}

export default MemoContainer;

3.2. App.js에서 setMemo 변수를 이용해 내용을 ReRendering해주기

    const setMemo = (newMemo) => {
        // memos[selectedMemoIndex] = newMemo;
        //불변성의 유지를 위해, 아예 newMemos라는 새로운 배열을 만들고, 여기에 기존 배열을 풀어서 렌더링을 위해 다시 집어넣어준다.
        const newMemos = [...memos];
        newMemos[selectedMemoIndex] = newMemo;
        setMemos(newMemos);

        //setMemos([...memos]);   //[...memos]를 이용해 memos의 배열을 풀었다가 다시 감싸는 이유: 기존 reference와 새롭게 변화하는
        //값에 대해 setMemos가 변화했다고 인식해서 새롭게 렌더링을 하기 위해.
        //만약 [...memos] 대신 memos만 적으면, 내부에서 값은 바뀌지만, 바뀐 값이 리렌더링되지는 않는다.
    }

3.3. 메모를 선택하기 위해 새롭게 메모 내용을 불러와주는 컴포넌트인 MemoItem.js를 만들어주고, MemoList.js에 onClick을 넣어주기

function MemoItem({children, onClick, isSelected}){ //부모 함수에서 onClick 때 실행되는 것을 받아옴.
    return(

            <div className={"MemoItem" + (isSelected ? ' selected' : '')}
                onClick={onClick}
            >
                {children}
            </div>
    );
}
export default MemoItem;

import MemoItem from "./MemoItem";

function MemoList({memos, setSelectedMemoIndex, selectedMemoIndex}){
    return(
        <div>
            {
                memos.map((memo, index)=>(
                    <MemoItem
                        key = {index}
                        onClick={()=>{  //MemoItem을 클릭할 때의 onClick 함수가 여기서 구현된다.
                            //사이드바의 메모 리스트를 클릭하면 메모가 수정된다.
                            setSelectedMemoIndex(index);
                        }}
                        isSelected={index === selectedMemoIndex}
                        index = {index}
                        setSelectedMemoIndex={setSelectedMemoIndex}

                    >{memo.title}</MemoItem>
                ))
            }
        </div>
    );
}
export default MemoList;

3.4. App.js에 selectedMemoIndex와 setSelectedMemoIndex를 선언해주기

function App (){
    return (
            <div className="App">
            <SideBar
                memos={memos}
                selectedMemoIndex={selectedMemoIndex}
                setSelectedMemoIndex={setSelectedMemoIndex}/>
            <MemoContainer memo={memos[selectedMemoIndex]}
            setMemo={setMemo}/>
        </div>

    );
}

export default App;

3.5. 시각적인 변화를 보여주기 위해 App.css 구현하기.

.App {
  text-align: center;
  display: flex;
  height: 100vh;  /* vh = 윈도우 창의 높이 단위.*/
}
.SideBar{
  background-color: aquamarine;
  width: 200px;
}
.MemoContainer{
  background-color: beige;
  flex: 1; /* flex: 해당 페이지에서 남은 만큼 넓이를 부여함.*/
}
.MemoContainer_title{
  width: 100%;
  box-sizing: border-box; /* border-box 사용 이유: input 컨테이너가 여백을 꽉 채워서 출력되기 때문에, 기존 페이지에 맞출 필요가 있다.*/
  font-size: 2rem;
}
.MemoContainer_content{
  width: 100%;
  font-size: 1.1rem;
}
.MemoItem{
  width: 100%;
  white-space: nowrap;  /*사이드바의 제목이 다음 줄로 넘어가지 않게 만들어줌.*/
  text-overflow: ellipsis;  /*사이드바를 넘어간 제목은 ...으로 처리해줌*/
  overflow: hidden;
}
.MemoItem.selected{
  background-color: rgba(100, 100, 100, 0.5); /*선택된 메모의 색을 변경해줌*/
  font-weight: 500;
}

3.6. npm start시 화면

4. 메모 추가 기능 구현

4.1. SideBarFooter.js의 css 변경 후 버튼화하기

function SideBarFooter({onClick}){
    //새로운 메모를 추가하는 버튼이 구현됨.
    return(
        <div className="SideBar">
            <button
                className="SideBarFooter_add-Button"
                onClick={onClick}
                //onClick 함수를 통해 버튼 클릭 시 변화를 줌
            >
                +
            </button>
        </div>
    )
}
export default SideBarFooter;

4.2. App.js에 addMemo 함수를 생성하여 버튼 클릭 시 변화를 정의하기

    const addMemo = () => {
        const now = new Date().getTime();
        setMemos([...memos, {
            title: 'Untitled',
            content: '',
            createdAt: new Date().getTime(),
            updatedAt: new Date().getTime()},   //새 메모 생성 시 제목은 'Untitled',
        ]);
        setSelectedMemoIndex(memos.length);
        //새 메모 생성 시, 자동으로 가장 마지막으로 생성된 메모가 띄워짐.
    };

    return (
            <div className="App">
            <SideBar
                memos={memos}
                addMemo={addMemo} //메모 추가 기능 탑재.
                selectedMemoIndex={selectedMemoIndex}
                setSelectedMemoIndex={setSelectedMemoIndex}/>
            <MemoContainer memo={memos[selectedMemoIndex]}
            setMemo={setMemo}/>
        </div>

    );
}

export default App;

4.3. SideBar.js에 addMemo 함수를 추가하여 적용하기.

import MemoList from "./MemoList";
import SideBarHeader from "./SideBarHeader";
import SideBarFooter from "./SideBarFooter";

function SideBar({memos, addMemo, setSelectedMemoIndex, selectedMemoIndex}){
    return(
        <div className="SideBar">
            <SideBarHeader/>
            <MemoList
                memos={memos}
                selectedMemoIndex={selectedMemoIndex}
                setSelectedMemoIndex={setSelectedMemoIndex}/>
            <SideBarFooter onClick={addMemo}/>
            {/*//addMemo: 메모를 추가해주는 함수.*/}
        </div>
    )
}
export default SideBar;

5. 메모 삭제 기능 구현

5.1. SideBar에 삭제 버튼을 구현하기 위해, MemoItem.js에 x버튼 생성해주기

function MemoItem({children, onClickItem, onClickDelete, isSelected}){ //부모 함수에서 onClick 때 실행되는 것을 받아옴.
    return(

            <div className={"MemoItem" + (isSelected ? ' selected' : '')}
                onClick={onClickItem}
            >
                {children}
                <button className="MemoItem_delete_button" //삭제 버튼 구현.
                // onClickDelete라는 삭제 기능을 구현할 함수를 구현.
                onClick={onClickDelete}>X</button>
            </div>
    );
}
export default MemoItem;

5.2. MemoList.js에 onClickDelete라는 함수를 정의해주기

import MemoItem from "./MemoItem";

function MemoList({memos, setSelectedMemoIndex, selectedMemoIndex, deleteMemo}){
    return(
        <div>
            {
                memos.map((memo, index)=>(
                    <MemoItem
                        key = {index}
                        onClickItem={()=>{  //MemoItem을 클릭할 때의 onClick 함수가 여기서 구현된다.
                            //사이드바의 메모 리스트를 클릭하면 메모가 수정된다.
                            setSelectedMemoIndex(index);
                        }}
                        onClickDelete={(e)=>{ //MemoItem 옆 x버튼을 누를 시, deleteMemo라는 이벤트가 발생.
                        //버튼 누를 시 해당 index의 메모가 삭제됨.
                            deleteMemo(index);
                            e.preventDefault();
                            e.stopPropagation();
                        }}
                        isSelected={index === selectedMemoIndex}

                    >{memo.title}</MemoItem>
                ))
            }
        </div>
    );
}
export default MemoList;

5.3. App.js에 deleteMemo 함수의 정의 적용하기

function App (){

    const deleteMemo = (index) => { //deleteMemo의 의미: newMemos라는 새로운 memos를 생성한 뒤,
    //해당 index의 memo가 선택되면, 그 memo를 0으로 지워버리는 역할.
        const newMemos = [...memos];
        newMemos.splice(index, 1);
        setMemos(newMemos);
        if(index === selectedMemoIndex){
            setSelectedMemoIndex(0);
        }
    }

    return (
            <div className="App">
            <SideBar
                memos={memos}
                addMemo={addMemo}
                selectedMemoIndex={selectedMemoIndex}
                setSelectedMemoIndex={setSelectedMemoIndex}
                deleteMemo={deleteMemo}/> //deleteMemo 함수 적용
            <MemoContainer memo={memos[selectedMemoIndex]}
                   setMemo={setMemo}/>
        </div>

    );
}

export default App;

5.4. SideBar.js에 deleteMemo 적용해주기

import MemoList from "./MemoList";
import SideBarHeader from "./SideBarHeader";
import SideBarFooter from "./SideBarFooter";

function SideBar({memos, addMemo, setSelectedMemoIndex, selectedMemoIndex, deleteMemo}){
    return(
        <div className="SideBar">
            <SideBarHeader/>
            <MemoList
                memos={memos}
                selectedMemoIndex={selectedMemoIndex}
                setSelectedMemoIndex={setSelectedMemoIndex}
                deleteMemo={deleteMemo}
            />
            <SideBarFooter onClick={addMemo}/>
            {/*//addMemo: 메모를 추가해주는 함수.*/}
        </div>
    )
}
export default SideBar;

6. LocalStorage를 이용한 데이터 저장

6.1. Cookie, LocalStorage와 Session Storage의 비교

• Cookie: 네트워크 요청 시, 서버로 함께 저장되는 문자열 데이터.
• Local Storage: key-value 쌍으로 데이터를 저장/조회할 수 있는 데이터 저장소. 서버로 전달되지 않고, 지우지 않는 이상 브라우저나 탭을 닫았다 열어도 유지됨
• Session Storage: Local Storage와 같으나, 같은 탭 안에서만 데이터가 유지되고, 탭이나 브라우저를 닫으면 데이터가 지워짐.

###

1.1. 정의

• 브라우저 밖에서도 서버 구축 등의 javascript를 실행할 수 있게 해주는 런타임 환경.

1.2. 특징

• 오픈소스 Javascript 엔진인 Chrome V8을 기반으로 동작.
• Single-Thread의 non-blocking I/O 이벤트 기반의 ‘Async’ 방식. 즉 시간이 오래 걸리는 행동을 계속 기다리지 않고, 시간이 지나 해당 행동의 결과만 따로 받아서 출력한다는 개념.

1.3. NPM(Node Package Manager)

• Javascript를 위한 패키지 관리자.
• 공개된 라이브러리들을 쉽게 설치해 사용할 수 있다. (ex. npm start)
• Node.js의 경우 NPM을 포함하기 때문에, 설치 시 함께 설치된다.

1.4. Node.js의 설치방법

1. 홈페이지에서 자신의 환경에 맞는 Node.js 다운로드
   1. *필자의 경우 Intellij 내부에서 Node.js를 다운로드하여 사용함.
2. 설치 확인 방법(터미널에서)

$ node --version
$ npm --version

1. 실행 확인 방법

$ node
> console.log('test');
> .exit

2. Create-react-app

2.1. 정의

• React 기반의 프로젝트 개발 환경을 구성해주는 툴.

2.2. 설치 방법

• CRA를 이용한 프로젝트 생성

    $ npx create-react-app memo-project
    // npx = npm 레지스트리에 존재하는 최신 버전의 모듈을 설치해줌.
    $ cd memo-project

• 생성한 프로젝트 실행

$ npm run start
// 실행 완료 시 localhost:3000으로 접속하게 된다.

• 실행 종료 = Ctrl + C

2.2. CRA의 구조

• 전체 구성 요소

• package.json: 프로젝트에 설치된 라이브러리와 정보들을 담은 파일.
  • “scripts”: 터미널에 해당 문구를 입력하는 경우 start, build, test, eject 등의 기능을 실행하는 react library.
  • dependencies: 현재 사용 중인 라이브러리 버전 정보.
• index.js: 프로그램의 시작점. 서비스 실행 시 index.js 내부에 존재하는 ‘ReactDOM’에 의해서 안의 코드들이 실행되게 된다.
• App.js: 프로그램 생성 시 기본적으로 존재하는 메인 코드.
• index.css: 모든 js에서 전역으로 사용되는 css.
• App.css: App.js에서만 사용되는 css.

3. eslint와 prettier

3.1. eslint

• 문법 및 코드 스타일을 검사하는 도구.
• 문법적인 오류를 사전에 발견할 수 있고, 협업에서 통일된 코드 스타일을 유지할 수 있도록 도와줌
• CRA에 자체 내장되어 있다. (package.json의 eslintConfig)

3.2. prettier

• 자동으로 코드를 정해진 규칙에 맞게 고쳐주는 툴
• prettierrc.json에서 규칙 정의
• CRA에 내장되어 있지 않으므로 직접 extension에서 설치해 주어야 한다.

• React는 JavaScript처럼 Camel Case 형태로 함수를 전달해줌.
• HTML의 경우에는 Camel Case가 아닌, 소문자 onclick에 실행함수를 넣는다.

import {useCallback, useState} from "react";
function handleClick2(e) {
    console.log('click2', e);
}
function App (){
// 이벤트 연결하기
    function handleClick1(e) {  // e = 합성 이벤트 = JavaScript에서 전달받은 원본 이벤트 객체를 '확장'한 객체.
        // 사실상 동일한 이벤트 객체라고 봐도 된다.
        console.log('click1', e);
    }
        //이벤트 핸들러를 만들 때는 react LifeCycle을 고려하기.
    // - 컴포넌트가 리렌더링 되는 경우 컴포넌트 내에서 단순 정의한 함수가 새롭게 만들어져 성능이 떨어짐
    // - 따라서 함수 정의를 컴포넌트 밖으로 빼거나, useCallback으로 감싸줘서 매 렌더링마다 새롭게 만들지 않게 할 필요가 있다.
    const handleChange = useCallback((e) => {   //e = 버튼 onClick에서의 변화를 인자로 받은 것.
        console.log('change', e.target.value);
    }, []);

    return (
    // 이벤트 연결하기
        <div>
            <button onClick={handleClick1}>
                Button1
            </button>
            <button onClick={handleClick2}>
                Button2
            </button>
            <div>
                <input
                type="text"
                onChange={handleChange}
                />
            </div>

        </div>
    );
}

export default App;

2. 이벤트의 종류

2.1. 마우스와 관련된 이벤트

• onClick: 마우스 버튼을 ‘클릭’했을 때 발생 (Down + Up)
• onMouseDown: 마우스 버튼을 ‘눌렀을 때’ 발생
• onMouseUp: 마우스 버튼을 ‘뗐을 때’ 발생
• onMouseEnter: 요소 밖에서 안으로 마우스가 들어갔을 때 발생
• onMouseLeave: 요소 안에서 밖으로 마우스가 나갔을 때 발생
• onMouseMove: 요소 안에서 마우스 커서를 움직였을 때 발생.

2.2. 키보드와 관련된 이벤트

• onKeyDown: 키보드의 자판을 눌렀을 때 발생(물리적인 키에 반응)
• onKeyUp: 키보드의 자판을 뗐을 때 발생
• onKeyPress: 키보드의 자판을 눌러 ‘문자가 입력되었을 때’ 발생

2.3. Focus, Form 이벤트

• onFocus: 요소가 Focus되었을 때 발생
• onBlur: 요소의 Focus가 사라지면 발생
• onChange: 요소의 값이 변화하면 발생

3. Form

• Controlled Component: React에 의해 입력 요소값이 제어되는 컴포넌트.
• 장점: 컴포넌트의 state와 input value가 완전히 동일한 값을 가짐(신뢰 가능한 단일 출처), 다른 컴포넌트에 input value를 전달하거나 다른 이벤트 핸들러에서 값을 재설정해줄 수 있음
• 단점: 값이 변경될 때마다 렌더링이 됨(컴포넌트의 영향 범위가 클수록 성능 저하)
• UnControlled Component: Controlled Component와는 반대로, input value를 직접 DOM에서 가져와 사용. 이때 렌더링은 단 한 번만 하게 됨.

// Controlled Component의 형식
function TextInput(){
    const [text, setText] = useState('');

    return(
        <input
            type='text'
            value={text}
            onChange={(e)=>{
                setText(e.target.value);
            }}
        />
    );
}

3.1. Controlled vs Uncontrolled Component

//1. Controlled Component - TextInput
import {useState} from "react";

function TextInput(){
    const [value, setValue] = useState('');
    console.log('[TextInput] render', value);
    //form 요소와 value가 직접적으로 연결된 controlled component.
    //렌더링이 value가 변경될 때마다 일어나게 됨.
    return(
        <input
            type="text"
            value={value}
            onChange={(e)=>{
                setValue(e.target.value);
            }}
        />
    );
}
export default TextInput;

//2. UnControlled Component - UncontrolledTextInput
import {useRef} from "react";

function UncontrolledTextInput(){
    const inputRef = useRef();  //useRef: DOM의 특정 Reference를 직접 가져올 때 사용.
    //Uncontrolled Component: input value를 state에 연결하지 않고, 직접 useRef를 이용해 DOM 객체에 접근하여 사용.
    console.log('[UncontrolledTextInput] render');

    return(
        <>
            <input
                ref={inputRef} type="text"  //가져온 객체를 직접 연결하여 사용
            />
            <button
                onClick={()=>{
                    console.log(inputRef.current.value);
                    //state의 상태는 변화하지 않기 때문에, 값이 변경되더라도 Rerendering이 되지 않는다.
                }}
                >
                Get Value
            </button>
        </>
    );
}
export default UncontrolledTextInput;

4. 설문조사 만들기

• 이름과 사는 곳을 입력받는 설문조사 폼 만들기
• 만약 사는 곳이 ‘한국’인 경우, ‘2-1. 한국 어디에 사나요?’라는 항목을 노출시키기.
• 1번과 2번을 모두 입력하지 않았다면 저장 버튼 비활성화.
• 저장 버튼 클릭 시 “저장되었습니다”라는 문구를 띄우고, 입력된 폼 내용을 모두 제거.

4.1. 입력 코드

//1. TextInputEx.js: 이름과 한국 어디에 사는 지 입력할 때 사용됨.
function TextInputEx({value, setValue}){
    //form 요소와 value가 직접적으로 연결된 controlled component.
    //렌더링이 value가 변경될 때마다 일어나게 됨.
    return(
        <input
            type="text"
            value={value}
            onChange={(e)=>{
                setValue(e.target.value);
            }}
        />
    );
}
export default TextInputEx;

//2. SelectEx.js: 사는 곳을 선택할 때 사용.
function SelectEx({value, setValue, options= []}){
    return(
        <select value={value}
                onChange={(e)=>{
                setValue(e.target.value);
            }}
        >
            <option value="" disabled>지역을 선택해 주세요.</option>
            {options.map((item) => (
                <option key={item} value={item}>{item}</option>
                ))}
        </select>
    );
}
export default SelectEx;

//3. SSulMoon.js: 메인 페이지 렌더링.
import {useState} from "react";
import TextInputEx from "./eventComponent/TextInputEx";
import SelectEx from "./eventComponent/SelectEx";

const countryOptions = [
    "한국",
    "러시아",
    "일본",
    "중국",
    "미국"
];
function SSulMoon(){
    const [formValue, setFormValue] = useState({
        name: "",
        country: "",
        address: ""
    });
    console.log('[App] formValue', formValue);

    return(
        <div className="App">
            <div className="form">
                <div className="form-item">
                    <h1>1. 이름이 무엇인가요?</h1>
                    <TextInputEx value={formValue.name} setValue={(value)=>{
                        setFormValue((state)=>({
                            ...state,   //기존의 formValue 내부 요소들을 그대로 유지해 주는 기능.
                            name: value   //name만 바꿔준다.
                        }));
                    }}/>
                </div>
                <div className="form-item">
                    <h1>2. 사는 곳은 어디인가요?</h1>
                    <SelectEx value={formValue.country}
                              setValue={(value)=>{
                                setFormValue((state)=>({
                                    ...state,
                                    country: value
                                }));
                              }}
                              options={countryOptions}
                    />
                </div>
                {formValue.country === "한국" && ( //만약 country의 값이 '한국'이라면,
                    <div className="form-item">
                        <h1>2-1. 한국 어디에 사나요?</h1>
                        <TextInputEx value={formValue.address} setValue={(value) => {
                            setFormValue((state) => ({
                                ...state,   //기존의 formValue 내부 요소들을 그대로 유지해 주는 기능.
                                address: value   //address만 바꿔준다.
                            }));
                        }}/>
                    </div>
                )}
                {/*2-1의 div를 활성화해주고, 아니라면 null값을 출력한다.*/}

                <div className="button-group">
                    <button onClick={() => {
                        alert('저장되었습니다');
                        setFormValue({
                            name: "",
                            country: "",
                            address: ""
                        });
                    }}
                            disabled={!formValue.name || !formValue.country}
                        //name과 country가 공백이면 버튼이 비활성화 되도록 만들기.
                            >
                        저장
                    </button>
                </div>
            </div>

        </div>
    )
}

export default SSulMoon;

4.1. 결과 페이지

• Hook: 여러 컴포넌트 중 function이 class를 사용할 수 있도록 도와주는 기능.

• useEffect: useEffect(() ⇒ {함수}, [state or data값])의 형태로, 렌더링 때마다 특정한 작업을 하게 도와준다.

    useEffect(() ⇒ {함수})

  • =⇒ 페이지를 렌더링(mount)할 때마다 함수가 실행된다.

    useEffect(() ⇒ {함수}, [state or data값])

  • =⇒ 첫 렌더링 시에만 함수가 실행된다.

    useEffect(() ⇒ {함수}, [state or data값])

  • =⇒ 해당 state or data값이 변화할 때 함수가 실행된다.

• useCallback: 기존의 연산 결과값을 다음 번에 재사용하기 위해 저장해두었다가 함수를 반환하는‘Memoization’의 기능을 구현함.

1.1. useEffect 사용예시

import {
    useCallback,
    useEffect,
    useState
} from "react";

function Counter() {
    console.log('Render Counter')

    const [value, setValue] = useState(0);

    //useEffect 사용 1. body 클릭시 콘솔에 어떻게 뜨는지 보기
    useEffect(() => {
        console.log(
            '[Function] useEffect []: 컴포넌트가 마운트될 때 한 번만.'
        );
        const eventHandler = () =>{
            console.log('click body');
        };
        document.body.addEventListener(
            'click',
            eventHandler
        );
        return () => {
            console.log(
                '[Function] useEffect return []: 컴포넌트가 언마운트 될 때.'
            );
            document.body.removeEventListener(
                'click',
                eventHandler
            );
        };
    }, []);

    // useEffect 사용 2. 컴포넌트 마운트 시 value가 변경 or 새로 useEffect를 수행할 때.
    useEffect(() => {
        console.log(
            '[Function] useEffect [value]: 컴포넌트가 마운트될 때, + value가 변경되면, '
        );
            const eventHandler = () =>{
                console.log('click body');
            };
            document.body.addEventListener(
                'click',
                eventHandler
            );

        return () => {
            console.log(
                '[Function] useEffect return [value]: 새로 useEffect를 수행하기 전에,'
            );
        };
    },[value]);

    return(
        <div>
            <h1>value:{value}</h1>
            <button onClick={increaseValue}>Increase Value</button>
            <button onClick={resetValue}>reset Value</button>
        </div>
    )
}
export default Counter;

1.2. useCallback 사용예시

import {
    useCallback,
    useEffect,
    useState
} from "react";

function Counter() {
    console.log('Render Counter')

    const [value, setValue] = useState(0);

// useCallback의 사용법. 이전에 있던 memoization된 값(여기서는 value)을 다음 렌더링에서 재활용하는 방식.
    const increaseValue = () => {
        setValue(value + 1);
        console.log('Render Counter2')
    };

    const resetValue = useCallback(() => {
        setValue(0);
    }, []);

    return(
        <div>
            <h1>value:{value}</h1>
            <button onClick={increaseValue}>Increase Value</button>
            <button onClick={resetValue}>reset Value</button>
        </div>
    )
}
export default Counter;

1.3. Hook 기능 사용 시 주의점

1. 반복문 or 조건문 내부에서 Hook 구문이 실행될 수 없다.
2. Hook 기능은 component 내부에서만 사용하자.

2. 렌더링

2.1. 렌더링의 과정

1. Re-rendering이란? state나 props의 상태가 변화했을 때, 다시 렌더링하는 것.

2.2. Class Component와 Functional Component의 Life Cycle 비교

1. Class Component

• Mounting: 가장 처음 Component가 실행되었을 때
• Updating: Component의 상태가 변경되었을 때
• UnMounting: Component를 지울 때

1. Functional Component

• 처음 mount되면, 자신을 바로 실행하고, 반환된 jsx값을 DOM에 반환함.
• Update하는 경우에도 똑같이 실행하고 반환된 jsx값을 DOM에 반환함.
• useEffect를 통해 Class Component의 componentDidMount, componentDidUpdate, componentWillUnmount 기능을 모두 수행할 수 있다.

2.3. 예시를 통한 렌더링의 비교

1. Class Component

import {Component, useEffect, useState} from "react";

//Class Component의 lifecycle. 렌더링을 기반으로 다양한 method들이 실행된다.
class ClassComponent2 extends Component{
    state = {
        value: 0
    };

    constructor(props) {
        console.log('[Class] Constructor');
        super(props);
        this.state = {
            value: 0
        };
    }

    // 컴포넌트 렌더링 전 실행(return이 false면 렌더링 안함)
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        console.log('[Class] shouldComponentUpdate');
        return true;
    }

    // 컴포넌트 마운트가 끝나면 실행
    componentDidMount() {
        console.log('[Class] componentDidMount');
    }

    // 컴포넌트 업데이트 후 실행
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('[Class] componentDidUpdate');
    }

    // 컴포넌트 언마운트 직전 실행
    componentWillUnmount() {
        console.log('[Class] componentWillUnmount');
    }

    render() {
        console.log('[Class] render');
        return(
            <div>
                <h1>ClassComponent</h1>
                <h1>value: {this.state.value}</h1>
                <button
                    onClick={()=>{
                        this.setState((state)=> ({
                            value: state.value + 1
                        }));
                    }}
                >
                    Increase Value</button>
            </div>
        )
    }

}
export default ClassComponent2;

1. Functional Component

import {useEffect, useState} from "react";

//Functional Component의 구현. useEffect를 사용하여 Mount/Update/UnMount가 모두 처리된다.
function FunctionalComponent() {
    console.log('[Function] Beggining');    //Mount 시 1번 로그, Update 시 1번 로그
    const [value, setValue] = useState(0);

    useEffect(() => {   //Mount될 때의 useEffect. //Mount 시 3번 로그, Update 시 생략.
        console.log('[Functional] useEffect []');
        return() => {   //Unmount 시 1번 로그.
            console.log(
                '[Function] useEffect return []'
            );
        }
    }, []);

    useEffect(() => {   //value가 update될 때, 위 useEffect는 생략하고 ReRendering된다. //Mount 시 4번 로그, Update 시 4번 로그.
        console.log('[Functional] useEffect [value]');
        return() => {
            console.log(
                '[Function] useEffect return [value]'
                   //Update 시 3번 로그, Unmount 시 2번 로그.
            );
        }
    }, [value]);

    console.log('[Function] end');  //Update상황에서 이 로그가 실행된 뒤 화면에 출력된다.
     //Mount 시 2번 로그, Update 시 2번 로그

    return(
        <div>
            <h1>FunctionComponent</h1>
            <h1>value: {value}</h1>
            <button
                onClick={()=>{
                    setValue((state)=>state + 1);   //value를 update시키는 trigger.
                }}
            >Increase Value</button>
        </div>
    )
}
export default FunctionalComponent;

3. 간단한 아코디언 컴포넌트 만들기

• 조건: 오른쪽 상단의 ‘+’ 버튼을 누르면 하단 ‘content’ 페이지가 펼쳐지고, 다시 ‘-’ 버튼을 누르면 하단 ‘content’ 페이지가 접히게 만들어보자.

  ⇒ 버튼에 대해 변화를 주는 함수를 만들자!

    import {useEffect, useState} from "react";
  
    function Accordion({title, content}){
        const [isOpened, setIsOpened] = useState(false);
  
        return(
            <div>
                <div
                    style={{
                        background: '#666',
                        color: 'white',
                        fontWeight: 'bold',
                        padding: 10,
                        display: 'flex',
                        justifyContent: 'space-between'
                    }}
                >
                    <div>{title}</div>
                    <div
                        onClick={()=>{
                            // setIsOpened(!isOpened);  //1안. 직접 바꿔주기
                            setIsOpened((state)=>{
                                return !state   //2안. onClick 내부에서 자체적으로 바꾸기.
  
                            });
                        }}
                    >{isOpened ? '-' : '+'}</div>
                </div>
                {isOpened && <div style={{
                    border: '1px solid #999',
                    padding: 20
                }}
                >
                    {content}
                </div>}
  
            </div>
        )
    }
  
    export default Accordion;

• 한 페이지를 구성하게 되는 작은 구성요소.
• 장점:
  • 코드의 양이 줄어듦
  • 개발 시간이 줄어듦
  • 유지보수가 간편해짐
• 예시: hello와 world라는 component로 App.js를 구성하기

// hello.js

export default function Hello() {
    return <div>Hello</div>;
}

// world.js

export default function World(){
    return <div>World</div>;
}

// App.js

import Hello from './components/hello.js';
import World from './components/World.js';

function App () {
    return(
        <div>
            <Hello></Hello>
            <World/>
        </div>
    );
}
export defualt App;

2. props와 state

• props: 부모 component에서 자식 component로 전달되는 ‘읽기 전용’의 입력 데이터. 자식 component에서 수정이 불가능.
• state: component 자체가 가진 데이터. 읽기와 쓰기 모두 가능하며, setState를 활용해 값에 변화를 주어 component의 상태를 변환할 수도 있다.
• 예시: useState를 활용하여 increase버튼을 클릭할 때마다 value값이 1씩 증가하고, reset버튼을 누르면 값이 0이 되도록 만들기

import {useState} from "react";

function App (){
    const [value, setValue] = useState(0);
    //state의 형식: const [state, setState] = useState();

    return (
        <div>
        <h1>value: {value}</h1>
        <button
            onClick={() => {
                console.log('increase value', value);
                setValue(value + 1);
                //setValue를 사용하여 value값을 변화시킨다.
            }}
            >
            Increase value
        </button>
        <button
            onClick={() => {
                setValue(0);
                //setValue();를 사용하여 value값을 설정해준다.
            }}
            >
            Reset Value
        </button>
        </div>
    );
}
export default App;

3. Class형 Component

import {Component} from "react";

// 클래스형 컴포넌트의 사용방식
export default class ClassComponent extends Component{  //Component라는 클래스를 react에서 가져옴.
    state = {   //const [value, setValue] = useState(0); 의 형태 대신, 클래스형 컴포넌트에서는
                            // state={value: 0}; 의 형태로 사용한다.
        value: 0
    };

    constructor(props) {    //Component에서 constructor를 바로 가져와서 생성이 가능
        super(props);
        this.state = {
            value: 1
        };
    }

    resetValue() {
        this.setState({value: 0});  //setState도 Component에 있으므로 바로 가져와서 사용 가능하다.
    }

    render(){
        return(
            <div>
                <h1>value: {this.state.value}</h1>
                <button
                    onClick={()=>{
                        this.setState((state) => ({
                            value: state.value + 1
                        }));
                    }}
                    >
                    Increase value
                </button>
                <button
                    onClick={this.resetValue.bind(this)}
                    // resetValue라는 함수를 외부에서 만들고, this를 통해 가져오고, .bind를 통해 온다.
                    >
                    Reset Value
                </button>
            </div>
        //     클래스형 컴포넌트의 단점으로 인해 Hooks라는 개념을 사용 => 함수형 컴포넌트.
        )
    }
}

4. Component 실습:

• CourseCard.js의 Component인 CourseCard를, StudyFi.js에서 호출하여 데이터값을 집어넣고 스터디파이 강의 페이지를 만들어 보자.

//CourseCard.js

export default function CourseCard({
        img,
        tags,
        title,
        salePercent,
        monthlyPrice,
        installmentMonth
    }){
    return (
        <div className="CourseCard">
                <div className="cover">
                    <img alt=""
                         src={img}
                         />
                </div>
                <div className="info">
                    <ul className="tags">
                        {tags.map((item, idx) =>
                            <li key = {idx} className="tag">{item}</li>
                        )}
                    </ul>
                    <h4 className="name">{title}</h4>
                    <div className="prices">
                        <span className="sale-percent">{salePercent}%↓</span>
                        <span className="monthly-price">월 {monthlyPrice.toLocaleString()}원</span>
                        <span className="installment-month">/ {installmentMonth}개월</span>
                    </div>
                </div>
        </div>
    );
}

//StudyFi.js

import CourseCard from "./components/CourseCard";
function StudyFi () {
    return(
        <div style={{padding: 30}}>
            <CourseCard
                img = {"https://dst6jalxvbuf5.cloudfront.net/media/images/Course/cover_image/221020_172526/%E1%84%8F%E1%85%A9%E1%84%89%E1%85%B3%E1%84%8F%E1%85%A1%E1%84%83%E1%85%B3_%E1%84%92%E1%85%A1%E1%86%A8%E1%84%89%E1%85%B3%E1%86%B8%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A5%E1%86%BC_PC.png"}
                tags = {['발표', '패키지', '최대할인']}
                title = "비즈니스 올인원, 방구석 어학연수 패키지"
                salePercent = {51}
                monthlyPrice = {16583}
                installmentMonth = {12}
                />
        </div>
    );
}

export default StudyFi;

• jsx의 기본형식:

///예시: 여러 가지 형태의 변수 사용 가능성 및 사용예시
let text = "hello, world!";

const num = 15;// const obj = {key: 0, a: 1, b: 2};
    //object는 jsx에서 사용 불가
    const arr = ['a', "b", "c"];

const imageUrl =
    "https://dst6jalxvbuf5.cloudfront.net/static/img/logo/logo.svg";

function App (){

    return (

<div className={"new"}>

    <h1>변수 넣기</h1>

    <ul>

        <li>{text}</li>

        <li>{text + 'test'}</li>

    </ul>

    <h1>숫자 및 계산식 넣기</h1>

    <ul>

        <li>{num}</li>

        <li>{num + 10}</li>

    </ul>

    <h1>Boolean, Nullish 값 넣기</h1>

    <ul>

        <li>{true}</li>

        <li>{false}</li>

        <li>{undefined}</li>

        <li>{null}</li>

    </ul>

    <h1>Object, array 넣기</h1>

    <ul>

        {/*<li>{obj}</li>*/}

        <li>{arr}</li>

        <li>{[<div>hello</div>, <div>you</div>]}</li>

    </ul>

    <h1>주석 넣기</h1>

    <ul>

        <li></li>

    </ul>

    <h1>주석 속석에 넣기</h1>

    <img src={imageUrl} alt='logo'/>

</div>

    );

}
export default App;

형태와 같이, java + HTML의 형태를 구사하고 있다.

마지막 줄의 ‘export default App;’이라는 구문을 통해 App함수를 추출하고, 메인 렌더링을 담당하는 index.js를 비롯한 다른 여러 component 소스들에서 이 App함수를 import하여 사용할 수 있게 해준다.

2. if문과 반복문

1. 조건문

   • 삼항연산자: {조건 ? 조건이 참일 때 return값 : 조건이 거짓일 때 return값}의 형태.

   • or문: {조건 || 조건이 거짓일 때 return값}의 형태.

   • And문: {조건 && 조건이 참일 때 return값}의 형태.

   • if문: {(()=>{ if (조건) return '조건이 참일 때 return값';

     else return '조건이 거짓일 때 return값'; })()}의 형태로 컴포넌트 내에서 사용 가능.

function App (){
    return (
const arr = [1, 2, 3];

const text = '';

function App (){    return (

<div className={"ifMoon"}>

    <h1>삼항연산자</h1>

    <ul>

        <li>{1 + 1 === 2

            ? '참입니다'    //true일때

            : '거짓입니다'   //false일때

        }

        </li>

    </ul>

    <h1>And 연산자</h1>

    <ul>

        <li>

            {1 + 1 === 2 && 'And 연산자 1'}

        {/*만일 && 앞의 값이 true일 경우, 뒤의 값을 리턴. 그렇지 않은 경우 리턴하지 않음*/}

        </li>

        <li>

            {arr.length && 'And 연산자 2'}

        </li>

    </ul>

    <h1>Or 연산자</h1>

    <ul>

        <li>

            {1 + 1 !== 2 || 'Or 연산자 1'}

        </li>

        {/*만일 || 앞의 값이 false일 경우, 뒤의 값을 리턴. 앞의 값이 True인 경우 리턴하지 않음*/}

        <li>

            {text || 'Or 연산자 2'}

        </li>

    </ul>

    <h1>IF문</h1>

    <ul>

        <li>

            {(()=>{

                if (1+1!==2) return 'IF';

                else return 'ELse';

            })()}

        </li>

        <li>

            {(()=>{

                const data = '조건실행함수';

            //     어떤 연산이든 추가가 가능하다.

                return data;

            })()}

        </li>

    </ul>

</div>

    );

}
export default App;

• 반복문
  • java의 그것과 같은 형태로 사용.
  • mapping을 통해 반복적인 출력이 가능함.

const arr = ['1번', '2번', '3번', '3번'];
const arr2 = [];
for (let i = 0; i < arr.length; i++){
    arr2.push(<h4 key={i}>{arr[i]}</h4>);   //arr의 길이만큼 반복해서 <h4>로 넣어주기.
}

function App (){

    return (
            <div>
            <h1>배열로 넣기</h1>
            <ul>
                <li>{arr}</li>
                <li>{arr2}</li>
            </ul>

            <hr/>

            <h1>Array.map</h1>
            <ul>
                <li>
                      {arr.map((item, index) => {  //map((item, index) => {})의 형식을 이용
                                                                                  //하여 데이터를 index(순서)에 맞게 출력.
                    return <h4 key ={item}>{item}</h4>;
                })}</li>
            </ul>
        </div>
     );
}
export default App;

• CSS

import './App.css';
function App (){
    return (
        <div
            style={
                {
                    position: 'relative', width: 400, height: 1000, background: '#f1f1f1'
                }
            }
        >
            <div style={roundBoxStyle}>Hello1</div>
            <div style={{...roundBoxStyle, top: 350}}>
                <div className={"highLight"}>Hello2</div>
            {/*className을 이용해서 .css의 스타일을 가져오기 --> 굳이 쓸 필요가 있나...*/}
            </div>

            <div style={{...roundBoxStyle, top: 650}}>
                <div className={
                    1 + 1 === 2 ? 'highLight' : ''
                }>
                Hello3
                </div>
            </div>
        </div>

3. 활용예제: 구구단

• 조건문, 반복문, css를 활용하여 구구단 표 만들어 보기

//조건: 2단부터 9단까지의 구구단을 작성하되, 1단과 5단은 제외하고, 짝수는 blue/홀수는
// black으로 작성하기
import './App.css';

const num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

function App (){

    return (
        <div style={{display: 'flex'}}>
            {num.map(
                (n) =>
                    n >= 2 && n !== 5 && (<div style={{padding:10, color: n%2
                     ? 'blue' : 'black'}}>
                            {num.map((m) => (
                                <div>
                                    {n} x {m} = {n * m}
                                </div>
                            ))}
                        </div>
                    )
            )}
        </div>
    );
}
export default App;

0.1. react-router-dom 라이브러리 설치.

npm install react-router-dom

0.2. 기초 사용법

import { Routes, Route } from 'react-router-dom';

const router = () => {
    return (
        <Routes>
                <Route    //r
                    path='/'
                    element={<rendering_Page/>}
            />
        </Routes>
    )
}
export default router;

1. BrowserRouter

• 페이지의 새로고침 없이도 주소의 변경이 가능하고, 현재 주소의 정보들을 props를 통해 활용이 가능하다.
• pushState, replaceState, popstate event 등, HTML5의 History API를 사용하여 URL과 UI를 동기해줌
• 위 코드에서는 컴포넌트를 감싸게 된다.

1.1. BrowserRouter props

• basename: 특정한 URL에서 실행되도록 만들어줌. string의 형태.
• future: 무엇을 ‘future flag’로 선택할 지. 즉 어떤 새로운 기능이나 변경된 동작을 활성화하거나 비활성화할 지 선택함. FutureConfig 타입 객체.
• window: 다른 window에서의 변경 사항을 추적할 지에 대한 여부.
• props type 선언:

declare function BrowserRouter(
  props: BrowserRouterProps
): React.ReactElement;

interface BrowserRouterProps {
  basename?: string;
  children?: React.ReactNode;
  future?: FutureConfig;
  window?: Window;
}

2. HashRouter

• URL의 해쉬값(#)을 사용하여 주소를 나타냄

• 별도의 서버 설정 없이도 페이지 새로고침 시 오류가 발생하지 않음

  ⇒ HashRouter는 # 뒤의 값을 브라우저에서만 관리하고, 서버에는 기본 URL로 데이터를 요청하기 때문.

• History API를 사용하지 않아 동적 페이지와의 호환이 어렵다.

• *** 서버를 온전히 제어하기 어려운 “공유 호스팅 시나리오” 상에서 활용하기 좋다!!!

3. BrowserRouter vs HashRouter

이런 에러가 발생하면서 앱이 실행되지를 않는다. 분명 어제까지만 해도 잘 실행됐는데..? 하면서 코드를 다시 한 번 천천히 뜯어봤다. 그런데 java 코드에서도 딱히 오류도 없는 듯 하고, PERMISSION_GROUP 이라는 단어에 갑자기 꽂혀서 '혹시 github에서 pull받아올 때 생긴 오류는 아닐까?' 하고 github의 base permission 설정까지 바꿔봤지만, 역시 이것도 아니었다.

그렇게 늦은 새벽에 뜬금없이 안드로이드와의 싸움을 지속하던 앱린이... 그러다가 드디어! 찾아내고야 말았다...

build.gradle.kts(:app) 부분의 의존성 설정을 살펴보던 중, 팀원의 코드를 pull받아올 때 추가된 implementation("yanzhenjie:permission:2.0.3") 부분이 눈에 띄었다. 이 기능이 무엇인가 하고 인터넷을 찾아보니, '위험 권한 설정'을 위한 permission이었다. 그런데 이미 나에게는 Tedpermission이라는 동일한 기능을 가진 라이브러리가 존재하고 있다. 혹시 중복되는 기능의 존재로 인해 해당 오류가 발생하는 건 아닐까? 하고 yanzhenjie:permission:2.0.3을 주석 처리한 뒤 다시 실행했더니..!

(많이 구린 인터페이스..)

정상적으로 작동한다!

결론)

'INSTALL_FAILED_BAD_PERMISSION_GROUP' 의 해결책 = 중복되는 permission을 찾아 단일화하자!