gsap에서는 TextPlugin이 존재한다!

플러그인 사용법은

gsap.registerPlugin( 원하는 플러그인 );

이렇게 상단에 등록해주면 된다!

이외에도 다른 플러그인 종류는

• ScrollTrigger : 스크롤 이벤트

• MotionPathPlugin : 경로에 따라 움직이는 애니메이션 - 내가 하고싶은 공 path
• Draggable : 요소 드래그
• CSSRulePlugin : CSS의 @keyframes나 :before, :after 접근 가능
• Flip Plugin : UI 요소의 위치나 상태가 변할 때 부드러운 전환 가능
• DrawSVGPlugin : SVG의 경로를 그리듯한 애니메이션 적용 가능

이런것들이 있는데, 이건 차차 배워가도록 해보자!

일단 TextPlugin부터 사용해보자 !

공식 홈페이지 들어간 순간부터 화려한 애니메이션이 내 마음에 들었다..!!

그래서 이번 내 포트폴리오로 만들 웹사이트도 GSAP을 거의 중점으로 사용해보려고 한다.

그러기 위해선 일단 러닝커브가 좀 필요한 라이브러리 같아서 연습 겸 사용법을 익혀보려고 한다 !! 👏🏻

처음에 아무것도 모르고 서치했을 땐,

그냥 gsap을 사용한 react에서 useEffect를 사용한 방법이 나왔어서 이렇게 고대로 연습해봤었다.

• 단일 애니메이션을 쓸거면 바로 gsap.to로 시작해도되지만,

• 여러 애니메이션을 쓸 상황이면 useEffect 안에 여러 애니메이션을 변수에 담아서 써주면 된다 !

gsap + useRef 사용하기

import { useEffect, useRef } from 'react';
import '../styles/main.scss';
import gsap from 'gsap';

const Main = () => {
  const container = useRef();
  const circle = useRef();

  useEffect(() => {
    let tot = gsap.context(() => {
      gsap.to('.box', { rotate: 360 });
      gsap.to(circle.current, { rotation: 360 });
    }, app);

    return () => tot.revert(); //정리
  });

  return (
    <div ref={container} className='container'>
      <div className='box'>selector</div>
      <div className='circle' ref={circle}>
        circle
      </div>
    </div>
  );
};
export default Main;

그런데 이 방법 말고 react-gsap에선 react에서 좀 더 편리하게 쓰기 위해 내장객체 Timeline / Tween 를 이용해서 간결한 코드로 작성할 수 있게 해준다고 한다!!

• 단일 애니메이션을 쓸거면Tween만으로 충분하지만,

• 여러 애니메이션을 쓸 상황이면 Timeline 안에 Tween을 넣어서 순서대로 또는 동시 실행, 지연 시간 추가 등 다양한 제어를 해줄 수 있다!

react-gsap + Timeline 사용하기

import '../styles/main.scss';
import { Timeline, Tween } from 'react-gsap';

const Main = () => {
  return (
    <div className='app'>
      <Timeline target={<div className='box'>box</div>}>
        <Tween from={{ opacity: 0 }} to={{ opacity: 1 }} duration={2} />
        <Tween to={{ x: '200px' }} />
      </Timeline>
    </div>
  );
};
export default Main;

방금 위에껀 순차실행이었지만,

동시 실행은 position={0}을 사용해서 동시에 시작할 수 있게 해준다

😅 그래서 그냥 둘 중 아무거나 쓰면 되는거 아니야..?

라고 생각한 나는 열심히 서치를 해본 결과

✨ GSAP 관련 정리

- Timeline

• 간단하게 + 순서대로 (순차적일 때) 적합
• 여러 애니메이션 실행 시킬 수 있음
• 코드 간결

- gsap + useRef

• 특정 시점에 트리거 하고 싶을 때 적합

└> 🔎 트리거가 뭐야?

: 어떤 행동이나 이벤트를 시작하는 것

• (조건이 충족 됐을 때 무엇인가 실행되는 상황)

└> 🔎 이건 Timeline도 할 수 있지 않아?

할 수는 있지만, 더 직접적으로 그 특정 시점의 상태에 접근하고 싶을 땐! useRef로 써준다!

특정 시점(ex: 페이지가 로드되거나, 이 버튼을 클릭하면 좌우로 움직이게 해주는 것 )에 정확하게 제어하

**[GSAP 사용법] ** - 참고 1 / 참고 2

한달 반이 흘러가서 벌써 4주차 마지막 주가 됐다!

이번주는 엄청 바쁜 한 주 였는데, 왜냐하면~

우리 팀이 발표 팀 안에 들었기 때문이다!!!😆✨🥳🎈🎉

그래서 한 주동안 정말 바쁘게 발표준비도 하고, 수정사항 거쳐서 배포도 하고 의미 있는 한 주를 보내며 마무리 지을 수 있었다!

대망의 최종 성과발표회 날!!!

날씨도 완전 가을날씨처럼 좋고 럭키비키잖햐~~🌥️😆💫

정해진 발표팀 좌석에 앉아서 리허설도 하고, 밥도 먹고 돌아와서 발표회를 시작했다

우리팀은 1등으로 발표하고, 그 뒤로 나머지 팀들도 발표했는데 다들 진짜 영혼을 갈아넣은게 보였다,,,

다른 팀들도 진짜 너무 잘했,,,,같이 고생한 2기 분들께 박수 👏🏻

대망의 시상식!!!

두구두구두구~

몇 십명이 이 프로젝트 캠프에 참여한 걸로 알고있는데, 그 중에 3명의 우수수료생을 뽑는다고 OT때 들었다

근데 진짜 상상도 못했는데, 내가 그 안에 들어서 팀원들과 함께 너무 놀랬다,,,!!!!!!🎈🎉👧🏻👏🏻💫😆✨

*열심히 성실하게 참여했는데 알아봐주신것 같아서 너무 기분이 좋았다 *

이 캠프를 알게되서 얻어가는 것도 너무 많고,

특히나 특히 우리 KT멘토님👨🏻,, 팀원들끼리 얘기하면서 진짜 천사 아니냐며

우리 멘토님 덕분에 KT이미지 다시 보인다고 ㅋㅋㅋㅋㅋㅋㅋㅋ

진짜 좋은 멘토님과 함께 착하고 좋았던 팀원들과

재밌게 한달간 프로젝트를 끝낼 수 있어서 값지고 행복한 시간이었던 것 같다!

누군가 이 프로젝트를 생각한다면 무조건 추천!

직무교육 + 기업연계 프로젝트까지 안하지 않을 이유가 전혀 없다~👍🏻

📝 마지막 회고록

• Kepp (유지) : 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분

• 우리 팀이 발표 팀안에 든거 !!
• 배포 성공한거

└>

나빼고 다 대학생이라 학업이랑 병행하느라 다른 팀들보다는 시간 쏟아붓는 것도 적고 그래서 그 부분이 힘들다면 힘들었지만,

그래도 잘 마무리 지을 수 있어서 다행이었다 😆

• Problem (문제)

• 반응형까지 고려하기엔 프로젝트 시간이 부족했기 때문에

멘토님과 프로젝트 시작 전부터 이 부분에 대해선 하지말자고 얘기를 하고 시작했었다.

그래서 그 부분을 놓친게 조금 아쉬웠다!

• Try (시도) : 다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항

• 반응형 고려
• 클린코드를 위한 리팩토링

_ —————————————————————————— 본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다._

코드를 입력하세요

간혹 웹사이트나 인스타 보다보면 ... 텍스트가 너무 길어서 말 끝이 ...로 대체된 걸 볼 수 있을 것이다.

참고 : KTWIZ

2가지 방법이 있는데

🤔 첫번째 방법

: 한 줄 텍스트 생략

1) 너비 설정 2) white-space: nowrap = (공백 줄바꿈 x) 한줄로 처리 3) overflow: hidden = 너비에서 벗어나는건 히든처리 4) text-overflow: ellipsis = 잘려지는 부분에 말 줄임표시

😆 두번째 방법

: 다중 줄 텍스트 생략

1) 너비 설정 2) white-space: normal = 여러 줄 텍스트 표시 3) overflow: hidden = 너비에서 벗어나는건 히든처리 4) display: -webkit-box = -webkit-box는 요소를 박스 컨테이너로 설정하여 자식 요소들이 플렉스박스처럼 배치되도록 만듦 5) -webkit-box-orient: vertical 박스의 배치 방향 텍스트가 세로로 여러 줄에 걸쳐 표시되도록 설정 6) -webkit-line-clamp:2 = 표시하고싶은 줄 개수

프로젝트 기간 : 2024.09.02 ~ 2024.09.27 *프로젝트 주제 *: React로 KTwiz 정보제공 페이지 만들기

이번주는 직접 kt송파 사옥에 가서 멘토님과 함께 중간발표를 하는 대면 미팅이 잡혀있었다,,!!

팀원들과 열심히 준비하고 기회가 된다면 나중에 다시 만나기로 했다(?)ㅋㅋㅋㅋㅋ

그만큼 그동안 열심히 준비해서 취업하자 이 말,,,!!

벌써 마지막 차주가 다가오다니 신기하다

시간이 넘 금방가버린 것 같은 이 기분,,

요새 오프미팅 나가면 다들 마지막까지 마무리 잘 하자고 외치고 있다 😆

🔥 TODO

🫨 정규리그

이번주는 정규리그 페이지에 메달렸다,,, 양이 꽤 많았기때문에, 달렸어야하는데 추석도 껴있어서 약간 마음이 불편했다...

테이블과 차트, 막대 그래프를 사용해야해서 해당 라이브러리는 처음 써보는 거라 학습도 좀 필요했는데,

막상 사용해보니까 차트,막대 그래프는 러닝커브가 낮은편이었다

어떤 라이브러리를 고를지 고민해서 그렇지...!

차트, 막대 -> recharts 라이브러리

테이블 -> tanstack-table 라이브러리로 결정해서 사용했다!!

자세한 내용은 따로 게시글에 쓸 예정이다

📝 회고록

• Kepp (유지) : 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분

• 나를 제외하곤 다 학교랑 병행하고 있는 대학생들이여서 지치지 않고 열심히 계속 해주는 우리 팀원들 모두 박수,,대단해👏🏻

• 오프라인 미팅할 때 다같이 으쌰으쌰하고, 막히는 부분있으면 같이 문제 해결해줘서 너무 좋다! 팀원들 최고

• 사진은 추억하기위해 중간발표 때 찍은 사진! (출입증정도는 괜찮을 것 같다🤔)

• Problem (문제)

진짜 사소한건데 너무 시간을 많이 잡아먹었던,,,,

데이터 패치 무한렌더링의 늪에 빠져버린,,,,

이번주에 작업했던 내용들이 주 프로젝트 key라, 프로젝트 끝나고 더 자세하게 쓸 예정이다!!!

기록하고 싶은 말 엄청 많다,,,!!!!

• Try (시도) : 다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항

• 멘토님이 말씀해주신 피드백 사항 적용하기
• 배포 try!!!

_ —————————————————————————— 본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다._

🤔❓ 이유

폴더구조는 정해진 규칙이 없고 개인의 취향을 따라가기 때문에 팀원들간에 경험했던 바도 다르므로 처음에 정해놓고 시작해야한다. 기존에 많이 잘 알려진 폴더구조로는 FSD(Feature Sliced Design) 가 있지만, 우리 조는 프로젝트를 처음 해보는 친구들도 있었기에 강사님께서 알려주신 방법대로 기본 폴더 구조로 시작해보려고 한다.

참고 : FSD [ 기능 분할 설계 ]

기능별로 컴포넌트를 나눈 구조로 / 컴포넌트 / 타입 / 상태 관리 / 커스텀 훅 등 역할에 따라 명확히 분리되어 있어 파일을 찾기 쉽고 코드 관리가 효율적이라서 이렇게 선택했습니다.

✅ 랜딩페이지

1-1)

변경 전

변경 후

🤔❓ 이유

• ** 브랜드 강조: ** 로고를 중앙에 배치함으로써 브랜드 정체성 강화 ↑ / 시각적으로 중심을 잡으므로 안정감 부여

• ** 사용자 경험 개선: ** 메뉴 아래에 하단선을 추가하여 네비게이션 바가 더 명확하게 구분되고 일관된 하단선이 있어서, 인터페이스가 더 정돈 된 느낌이 있음

• ** 디자인의 통일성: ** 로로 양 옆으로 메뉴 항목들이 있어서 균형잡힌 레이아웃으로 깔끔함과 정리된 느낌을 줄 수 있음

1-2)

변경 전

변경 후

🤔❓ 이유

현재 나는 데이터가 모두 나열된 테이블 형식으로 출력되고 있다

근데 내가 원하는건 이렇게 팀 간 승패를 행과 열로 나눠서 표시하고 싶은데,,,!

출처 : [ktwiz] https://www.ktwiz.co.kr/game/regular/ranking/team

나는 기존에 테이블 라이브러리를 쓸 때 이렇게 여러 데이터를 이용해서 하질 않아서 낯설었다

나는 각 팀별로 상대 팀에 대한 승-패-무 데이터를 행렬로 배치하고,

상단에 각 상대 팀을 열로 배치하고 싶다

그러려면 어떻게 해야하는가?

기존에 있던 타입정의에 ㅇㅇㅇ도 있고 , [key: string]에 해당하는 key도 있는데

그럼 기존에 있던 타입정의에 + [key: string]: string;만 추가하면 안되나?

결론은,

안된다! 그 이유는 이렇게 되면 기존 타입정의에는 여러 타입이 정의 되어 있을텐데

[key: string]: string;가 들어오면 모든 문자열이 string이 되어야해서 타입충돌이 일어난다 😣

그러니까 따로 타입을 새로 정의해주도록 하자

type TTeamMatchupTableType = {
  ㅇㅇㅇ: string;
  [key: string]: string;  // ㅁㅁㅁ = key, 승-패-무 = 값
};

Javascript에서 숫자 연산을 시도할 때, undefined or null이라서 나타난다.

NaN = Not a Number : 데이터가 잘못된 상태로 숫자로 변환될 때

🫨 구현하고자 하는 것

index로 내가 원하고자 하는 셀을 찾아서 없으면 "" 이게 했지만, 여기서 문제가 생겼나보다,,

cell.getValue()가 undefined or null or 데이터 자체가 비어있어서 발생할 수 있다고 한다 ,,,!!

😆 구현한 것

<tbody>
    {visitTable.getRowModel().rows.map((row,rowIndex) => (
      <RowTr key={row.id}>
        {row.getVisibleCells().map((cell,cellIndex) => (
      <MainStatsCell key={cell.id}>
        {rowIndex === visitTable.getRowModel().rows.length-1 && cellIndex === 0 
      ? "": String(cell.getValue())}
      </MainStatsCell>
          ))}
    </RowTr>
  ))}
    </tbody>

테이블은 react-table을 선택했고, 차트는: nivo을 택했다.

└> 선택한 이유? 참고

reatc-table 기능

=> 이제는 tanstack-table이라고 불린다

단순 그냥 보여주는거 말고, 나는 검색과 정렬이 필요했다. 그리고 Headless라서 내가 원하는대로 커스텀이 가능하다. 나는 열과 컬럼의 크기 조절이 됐으면 좋겠다고 생각해서 해당 라이브러리를 선택했다.

• 필터
• 정렬
• 페이징
• 수정
• 열 크기 조절
• 컬럼 선택 필터
• 컬럼 위치 조정
• 컬럼별 검색

1. reac-table 설치

• 이건 현재 react-table 후속버전 : typescript 지원 o

npm install @tanstack/react-table

• 구버전 react-table

npm add react-table @types/react-table

2. useTable 훅 작성

: 공식문서에서 무조건 required라고 되어있음 (columns/data => memonized되어있어야함,두가지 옵션 필요!)

createColumnHelper

: 타입 안정성 ↑ / 특정 데이터 구조에 맞춰 컬럼 정의 가능

const columnHelper = createColumnHelper<TMenu>();

const columns = [
  columnHelper.accessor("menu", { header: "메뉴" }),
  columnHelper.accessor("price", { header: "가격" })
];

이런식으로 타입을 미리 지정해둬서, 에러 미리 방지!

But, 동적으로 데이터를 매번 API 받아와야하는 상황이라면! createColumnHelper는 정적으로 고정된 데이터에서 유용하다

1. useTable 커스텀 훅 생성

동적컬럼을 생성할 때 자동으로 생성되게 해주는 것도 있다는데, 나는 안쓰는 컬럼과 그렇게 되면 순서가 data 응답값 순서대로 나열되므로 직접생성하기로 했다.

• key값은 내장되어있는 id를 써도 됨

• 아니면 API응답값의 고유 key값을 써도되지만,,, column에서 조합해줘야하니 귀찮아서 나는 내장 id를 쓰겠어,,,

🤔 row.getVisibleCells() ❓

• 컬럼 = 셀(cell)

• 각 행(row)에 있는 모든 셀(cell) 데이터 가져오는 함수

이런 데이터가 있다고 가정했을 때,

row.getVisibleCells() 하면 ["Suein", 25]와 같은 데이터를 반환 할 것이다.

그러니까

첫번째 행(row) = "name": "Suein" / "age": "25"

2개의 셀로 이루어져있다

ex)

한개의 행(row)에는 5개의 셀로 이루어져있는거지

그러면 이러한 데이터들을 map으로 하나씩 꺼내서 <td>안에 내용을 집어넣는데

{row.getVisibleCells().map((cell)=>(
    <td key={cell.id}>
          {flexRender(cell.columnDef.cell, cell.getContext())}
//{cell.getValue()} : 단순 텍스트화
    </td>
))

🤔 flexRender ❓

• 셀 데이터를 텍스트, 버튼, 아이콘, 컴포넌트 등으로 렌더링하는 테이블 라이브러리 내장함수 ⭐

• 🫨 info는 TanStack Table(React Table)에서 자동으로 전달되는 매개변수로, 각 셀의 정보(위치, 데이터 등)를 포함하고 있다.

info의 주요 속성들

• row: 현재 행에 대한 정보 ex) info.row.original을 사용하여 원본 데이터에 접근할 수 있음
• column: 현재 컬럼에 대한 정보
• getValue(): 해당 셀의 데이터 가져오는 메서드
• row.original: 현재 행의 원본 데이터에 접근

이렇게 표에도 클릭할 수 있는 버튼이 생긴다

{cell.getValue()}이렇게만 쓰면 React가 렌더링 할 수 있는 모든 요소로 변환(ReactNode)해줘야해서

• 타입 캐스팅 = (as string) /as { key: string; value: any }}

• 문자열로 변환 = {String(cell.getValue())}

🫨 ColumnDef ❓

• TanStack Table 라이브러리의 내장타입
• 각 컬럼을 정의하는 타입

프로젝트 기간 : 2024.09.02 ~ 2024.09.27 *프로젝트 주제 *: React로 KTwiz 정보제공 페이지 만들기

추가로 디자인 바꾸고 싶은거 의견내고 취합하느라 생각했던 것보단 시간이 걸렸지만, 공통컴퍼넌트 작업을 일요일까지 완료했다!

너무 친절하신 멘토님이랑 주 1회 온라인 미팅을 진행하고 있고,

이제는 issue랑 PR을 사용해서 충돌해결하고 merge하자고 말해서

다들 어색해하는 것 같지만, 그렇게 작업중이다

🔥 TODO

🫨 Landing 페이지 작업

기존 심플한 웹사이트에서

ktwiz만의 구단 색깔을 살려서 강렬하고 힘이 있어보이지만 (red + black) 심플한 요소들을 살렸다.

그래서 디자인적인 요소를 바꿔보고자 랜딩페이지를 새롭게 꾸며보았다.

└> 🤔❓ Problem (문제)

동영상을 데이터 파싱하는건 처음이라, 어떻게 해야할지 감이 안잡혀서

서치를 해보니 <iframe>이라는 태그를 써서 한다고 했다.

기존 <video>태그랑 다른점은

• video :

  웹 페이지에 직접 비디오 삽입하고 재생할 때, 재생/볼륨 등 컨트롤 할 수 있음
  <video controls>라고 적으면 이런 비디오 모양이 뜸
  
  
  

• iframe ⭐

  : 외부 웹페이지나 동영상을 현재페이지에 임베드할 때! : 직접 재생하는게 아니라, 프레임 안에 외부 웹페이지를 삽입하는 역할
  이번에 네이버tv를 임베드 하는거였는데, clipNo이 같이 api에 넘어왔다!
  그 안에서 map으로 돌릴 때, split으로 (clipNo=)을 자르게 되면 , [앞에주소, clipNo번호]가 나오니까 [1] 두번째 인덱스를 고르면 번호를 추출해서 임베드 할 수 있다!

📝 회고록

• Kepp (유지) : 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분

• 랜딩페이지 전체 데이터 받아오기 성공 + UI 리뉴얼 😆

• useFetchData 커스텀 훅 생성해서 팀원들과 공유해 재사용성 ↑

• Problem (문제)

한 팀원이 혼자 계속 랜딩페이지가 데이터 fetch가 안돼서 한참을 다같이 고민하고 시간을 썼다.

결론적으론 내가 커스텀 훅을 만들 때,

어쨌든 멘토님의 API 서버이기도하고, 보안상 + 유연성의 이유로,

.env에 BASE_URL변수를 만들어놓고, 그걸 데이터 패치할 때 사용하고 있었는데

팀원이 .env는 gitignore에 해놨기 때문에 아무리 새로 받아도 안됐던 것이다,,,

근데 우리가 문제점을 파악못하고 헤맸던 이유는

BASE_URL이 없을 땐 "" 값이 없는 문자열로 해놨기때문에

개발자도구에서도 에러를 발견못하고 계속 로딩중만 떴던 것이다,,

└> 😆❗ Good Point

이번에 갑자기 인스턴스가 죽어서 api주소 변경되는 일이 생겼었다

한번에 바꿀 수 있어서 편했다 !!

• Try (시도) : 다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항

• *랜딩페이지 * 애니메이션 추가 지난경기 하이라이트 => 하이라이트 영상에 따로 추가

  
  

• *정규리그 * 테이블 차트 라이브러리 TRY해서 페이지 구현 START...!!!

_ —————————————————————————— 본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다._

Web API

: 개발하는 동안 사용할 수 있는 모든 인터페이스(객체)

아래 공식문서에서 더 자세하고 많은 API들을 보고 경험할 수 있다.

MDN 공식문서 : [ web API ]

이 중에서 오늘은 Breadcrumb을 만들면서 그 해당 주소를 어떻게 알아야하는지에 대해서 궁금하다가

└> 🔎 breadcrumb ? 헨젤과그레텔에서 빵 부스러기 흘리면서 길을 안내했듯이, 유저가 웹사이트 내에 어디에 있는지 알려주는 *네비게이션 텍스트 *

window.location에 대해서 알게 되었다. Javascript할 때 잠깐 배웠었던 기억이 있다. 이 객체를 사용하면 현재 url이나 쿼리스트링을 알 수 있다.

window.location.href // 전체 url 불러오기
window.location.protocol //  :를 포함한 앞에 https: 불러오기
window.location.host //  가운데 공통 불러오기 ( : + port번호 포함)
window.location.hostname //  가운데 공통 불러오기 ( : + port번호 미포함)
window.location.pathname // /뒤의 경로인데, 이니셜과 url경로가 포함된 문자열
window.location.search //  ? 뒤의 쿼리스트링 가져오기

기억하고 써먹어보자!

1번째 방법 )

ex) 예시

const theme = {
    black: "#000000",
    white: "#FFFFFF",
}

export default theme;

이렇게 export default theme;쓰게 되면

① 단 하나의 변수를 내보내고 ② import 할때 이름을 마음대로 지어도 된다는

장점을 가지고 있다!

2번째 방법 )

ex) 예시

export const theme = {
    black: "#000000",
    white: "#FFFFFF",
}

이렇게 export + 변수선언을 같이 하게 되면

① 여러개의 변수를 내보내고 ② 변수에 이름을 지정했기 때문에 그 이름 그대로 import해야 함

잊지말고 구분해서 상황에 맞춰 쓰자!!!😆😆

프로젝트 기간 : 2024.09.02 ~ 2024.09.27 *프로젝트 주제 *: React로 KTwiz 정보제공 페이지 만들기

📝 회고록

KPT (Keep – Problem – Try – Complete)

• Kepp (유지) : 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분
  
• Problem (문제) :프로젝트 동안 발생한 문제나 어려움
  
• Try (시도) :다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항
  
• Complete (완료) : 완료된 것들

KPT 회고록을 많이들 사용한다고 하길래, 나도 KPT

회고록을 담아보려고한다

오늘은 팀원들이랑 ktwiz의 프로젝트 킥오프 미팅을 했다

오늘 처음보는 팀원들이었지만 다들 밝고 성격이 좋아서 금방 친해졌다 :) 4주간 다같이 화이팅 !!!

📒 시작

• 1)

  이전 프로젝트들은 맨 처음 배웠기에 당연하게 cra로 구동했었다. 그런데 이번엔 서버 구동이나 빌드 속도 개선을 위해 프로젝트로는 경험해보지 않았던 vite로 해볼까한다.
  

• 2)

  상태관리는 props drilling을 주로 쓰고, 전역적으로 사용을 해야할 때만 zustand를 쓰기로 했다! 가볍고, 불필요한 코드가 적고, 직관적이기도 하고 요즘 트렌드인 zustand를 쓴 프로젝트를 경험해보고 싶었다.
  

• 3)

  Git Repository 구축 (완료) : 개인 git  vs    organization [조직]으로 채택!

└> 깃허브 주소 : 현재 private임

└> Zustand / styled-components 라이브러리 설치

• 4)

  프로젝트 진행 계획서 └> 노션 및 피그마 기획 작업 (1주차)
  
• API 정의서 : 멘토님께서 따로 postman으로 전달해주심
  

우리 팀은 DB를 다뤄본 적이 없는 친구들이 대다수여서, 수업 때 배운 json-server를 이용하기로 했다.

└> JSON-SEVER란?

• 아주 경량화된 미니 DB다!
• Rest API로 이루어져있어서 API를 호출할 때 restful의 디자인을 따르면 됨

1) npm install -g json-server 설치 2) db.json이라는 파일 만들어서 데이터 안에 넣어주기 └> 제일 밖에 있는 root에 만들어주기!

JSON-SERVER: 참고

✅ 개발환경 구축

Frontend: React (build : vite / version : 18.3.1 / port :5173) DataBase: json-server

IDE: VSCode 언어: JavaScript, TypeScript, React

협업도구: Notion (문서화), Slack (git 연동 및 회의) 형상관리: Git (개발/배포 브랜치 전략)

🔥 TODO

✅ 개발 일정

240830 회의록

*0주차 킥오프 *

• **9/3(화) 5시 오프라인 & ZEP 미팅 예정

• **[ WIZonFire 컨벤션] - 더 좋은 협업을 위해 숙지 필수!!!! https://www.notion.so/989b7f6fcade45cda35cf6ac7f0e8b9b

우리는 제대로 하자는 마음으로 Waterfall방법론(폭포수)으로 진행하기로 했다. 애자일 방법론이 아닌 폭포수 방법론을 선택한 이유는 전통 개발 방식을 경험해보고싶기도 했고, 배포까지 할 예정이지만 단기 기업연계 프로젝트이기도 하고, 기존에 있던 ktwiz를 벤치마킹해서 만드는 것이기 때문에 순차적으로 진행할 수 있어서 전통적인 방법으로 개발해보자! 하는 마음에 기획 + 문서정리부터 차근차근 해보려고 한다

폭포수 방법론 : 참고

⏰ [ Todo List ]

• 각자 맡은 기능에 대한 컴포넌트 생각해오기
• 피그마 공부하기
• 부족하다고 생각하는 부분 공부하기 ex) Git - PR, issue 등
• 규칙(?)

📒 [ Meeting Day ]

1주차 (09.02~09.06) 예정

• 화요일에 공통 컴포넌트 정리 및 구조 설계 진행 예정
• 프로젝트 로컬 환경 셋팅 ( + Git fork 및 clone)
• 기획 토의 (+피그마)

✅ [ Check List ]

• css 스타일 - styled-components
• 라이브러리는 최대한 적게 쓰기 / 구현할 수 있는건 우리가 구현해보자!
• 상태관리 - (주)props drilling / (부) zustand는 꼭 필요할 때만
• .prettierrc 기본 설정 / eslintrc.json => 지수님이 (화)까지 목업 짜주시면, 수정/추가사항 같이 고민해보기
• 소통은 Discord & ZEP으로! 멘토님이랑 얘기할 때만 slack으로!

- 반응형 : 멘토님과 진행 상황공유하면서 추후 결정

☑️ [ Todo Later ]

• Github 멘토님 초대

• Kepp (유지) : 성공적으로 수행 / 긍정적인 경험 / 만족하는 부분 / 앞으로 유지할 부분

라이브러리를 최대한 사용하지 않도록 공통컴퍼넌트 작업 진행

내가 맡은 역할은 [ footer / 텍스트네비게이션 / 페이지네이션 ] !

• Problem (문제)

• 팀원 한명의 부재로 => 역할 재분배 필요 ❗

• 어디까지 props로 받아와야하는지,

ex) selectbar가 다른 디자인으로 되어있으면 dropdown과 selectbar중에 어떤거로 사용해야하는지?

이런 간단한 디자인은 크게 신경쓰지않고 그대로 기존 웹사이트껄로 구현하려다보니까

어디까지 똑같이 따라해야하는지 헷갈려했다.

• Try (시도) :다음 스프린트에서 시도해 볼 새로운 아이디어나 개선 사항

깃 이슈 + pr 올려서 진행하기

현재 팀원들이 깃과 친하지가 않아서 공통컴퍼넌트까지만 브랜치 파서

구두로 완료됐다고 말해주면 pull해서 작업하고 있다.

—————————————————————————— 본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

Keyboard Shortcuts

• ctrl + alt + s = 히스토리 저장
• ctrl + \ = 양쪽 사이드 바 hide
• ctrl + alt + a = select matching layers
• z + 원하는 부분 드래그 = 드래그 확대
• ctrl + shift + l = 잠금 / 해제
• n 누르면 = 다음 페이지로 이동

Font

• ctrl + B = 폰트 굵게

Frame 규격

1920 x 1080 => 일반적인 웹사이트 규격

오늘 처음보는 팀원들이었지만 다들 밝고 성격이 좋아서 금방 친해졌다 :) 4주간 다같이 화이팅 !!!

• Git Repository 구축
• 프로젝트 진행 계획서 └> 노션 및 피그마 작업
• api 정의서 받기

json-server

https://velog.io/@genius_jihyepark/JSON-SERVER-%ED%8C%A8%ED%82%A4%EC%A7%80-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-api-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

✅ 개발환경 구축

Frontend: React (build : vite / version : 18.3.1 / port :5173) DataBase: json-server

IDE: VSCode 언어: JavaScript, TypeScript, React

협업도구: Notion (문서화), Slack (git 연동 및 회의) 형상관리: Git (개발/배포 브랜치 전략)

✅ 기능 정의

🔥 TODO

✅ 개발 일정

240830 회의록

*0주차 킥오프 *

• **9/3(화) 5시 오프라인 & ZEP 미팅 예정

• **[ WIZonFire 컨벤션] - 더 좋은 협업을 위해 숙지 필수!!!! https://www.notion.so/989b7f6fcade45cda35cf6ac7f0e8b9b

우리는 제대로 하자는 마음으로 Waterfall방법론(폭포수)으로 진행하기로 했다. 애자일 방법론이 아닌 폭포수 방법론을 선택한 이유는 전통 개발 방식을 경험해보고싶기도 했고, 배포까지 할 예정이지만 단기 기업연계 프로젝트이기도 하고, 기존에 있던 ktwiz를 벤치마킹해서 만드는 것이기 때문에 순차적으로 진행할 수 있어서 전통적인 방법으로 개발해보자! 하는 마음에 기획 + 문서정리부터 차근차근 해보려고 한다

폭포수 방법론 : 참조) 설명

⏰ [ Todo List ]

• 각자 맡은 기능에 대한 컴포넌트 생각해오기
• 피그마 공부하기
• 부족하다고 생각하는 부분 공부하기 ex) Git - PR, issue 등
• 규칙(?)

📒 [ Meeting Day ]

1주차 (09.02~09.06) 예정

• 화요일에 공통 컴포넌트 정리 및 구조 설계 진행 예정
• 프로젝트 로컬 환경 셋팅 ( + Git fork 및 clone)
• 기획 토의 (+피그마)

✅ [ Check List ]

• css 스타일 - styled-components
• 라이브러리는 최대한 적게 쓰기 / 구현할 수 있는건 우리가 구현해보자!
• 상태관리 - (주)props drilling / (부) zustand는 꼭 필요할 때만
• border만 pixel / 나머지는 rem
• .prettierrc 기본 설정 / eslintrc.json => 지수님이 (화)까지 목업 짜주시면, 수정/추가사항 같이 고민해보기
• 소통은 Discord & ZEP으로! 멘토님이랑 얘기할 때만 slack으로!

- 반응형 : 멘토님과 진행 상황공유하면서 추후 결정

☑️ [ Todo Later ]

• Github 멘토님 초대

async/await를 사용하면 비동기 함수의 실행을 마치 동기 코드처럼 사용할 수 있다

└> 이 zustand 에 해당하는 타입도 정의해주기

📂 router - index.ts

└> 위아래 코드의 차이점은

• export default: 모듈에서 기본적으로 내보낼 값이 하나일 때 사용
• export const: 여러 값을 내보낼 때 사용합니다. 모듈을 가져오는 쪽에서 import { router } from './path'와 같이 중괄호를 사용하여 명시적으로 가져옵니다.

학습 예제 출처: 수코딩

점점 파일과 폴더가 늘어나면서 뭐가 뭔지 헷갈린다,, 그래서 정리해 본 ...!

📂 파일 구조

✏️ Learned

1. React Error Boundary

에러 공식홈 : 에러바운더리 ((구)문서)

• 런타임환경에서에러를 잡기위해 사용하는 컴퍼넌트 └> 직접 만들어줘야함 (but, 리액트에서 사용하는 공식문서가 있음)

• 클래스형 컴퍼넌트 코드로 작성

• React Error Boundary = 자바스크립트에서만 돌아가는 런타임 에러만 캐치가능!! └> React 자바스크립트 웹브라우저가 데이터 통신을 해주기때문에 그 과정에서 발생하는 에러는 리액트 에러바운더리가 인지를 못하는거였음,,,

  웹브라우저가 데이터 통신을 해주기때문에 그 과정에서 발생하는 에그래서 이때[isError, setIsError] = useState(false)로 처리해줌

=> 타입스크립트 기반에선 에러바운더리를 하기 좀 그런데, 자바스크립트 기반에선 충분히 에러바운더리를 사용할 수 있음

• 에러 컴퍼넌트를 wrapping했다... └> fallback이 뭐지,,?

그럼 타입스크립트 기반에선 에러바운더리는 어떻게 구성하는가??

개별적으로 url에 관한 에러를 처리하기 유용

프로젝트 진행시

1) 안전하게 전체프젝을 감싸는 에러 바운더리 처리를 해둠 2) try-catch 예외처리 (ex) API 데이터 통신)

2. Router 라우터

_설치하기

-main.tsx`에서 라우터설정하기

3.공통레이아웃설정

4.게시글 등록

1. 사용자가 무슨 값을 입력했는지 ?

useStae => 객체로 useInput => customhook

<pre>{JSON.stringify({ title, category, writer, desc }, null, 2)}</pre>

이미지 태그에 연결 안한 이유? 업로드 서버가 없으니,,,(우회)이미지파일을 data64문자열로 바꿔서 이미지파일로 쓸거다

공통함수 vs 공통 커스텀 훅(존재하지않는 기능을 존재하는 훅을 사용해서 입맛대로 만들었기때문에)

4-1. json server 설치

내부적으로 crud를 처리할 수 있는 기능을 제공하는 가상의 API

npm install json-server

GET방식 POST방식 : 데이터 추가할때 PUT : 데이터 업데이트 DELETE : 데이터 삭제할때

└> HTTP 메서드

// https://localhost:3000/posts?필드명_ne=값 -> 값이 아닌 것을 가져와요 // https://localhost:3000/posts?필드명_like=값 -> 필드명이 값과 포함되는 것을 가져와요

===> json-server (0,17,0까지만 지원)

// [GET] https://localhost:3000/posts?id_ne=1 // [GET] https://localhost:3000/posts -> posts 속성의 데이터 전체 가져오기 // [GET] https://localhost:3000/posts/1 -> posts 속성의 데이터 중 id가 1인 것만 가져오기 // [POST] https://localhost:3000/posts -> posts 속성에 JSON 객체로 넘긴 데이터 추가하기 // [DELETE] https://localhost:3000/posts/1 -> posts 속성의 데이터 중 id가 1인 것 삭제 // [PUT/전체] https://localhost:3000/posts/1 -> posts 속성의 데이터 중 id가 1인 것의 데이터 변경 // [PATCH/일부분] https://localhost:3000/posts/1 -> posts 속성의 데이터 중 id가 1인 것의 데이터 변경

일부변경

"all": "concurrently \"json-server --watch src/server/db.json --port 5500\" \"vite\""

탠스텍쿼리

• 1) 최신의 데이터를 자체적으로 가져와서 업데이트를 시켜줌 => 요청이 하나하나 계속 생김

• 2) 캐싱이 됨

에러 - 주소가 틀리면 자체적으로 3번 api요청을 하고 그동안은 loading으로 처리함

요청 횟수를 내가 정할 수도 있음

탠스택쿼리를 쓰는 가장 큰 이유

데이터 요청한게 캐싱이 됨 -> 깜빡임이 없어짐

• 페이지 이탈(signal=>abortcontroll)도 자도으로 해줌

• 렌더링 최적화가 안됨... 캐싱데이터

✅ 학습 내용 정리

학습 예제 출처: 수코딩

✏️ Learned

1. useReducer

• 전역상태관리는 아님 ❌ => 상태를 효율적으로 관리해주는 훅

• 상태관리하는 데이터가 많아질 때 사용

• 2개의 매개변수( reducer함수,0(초기값) )받음

• reducer 함수는 if문 대신 switch문을 주로 쓴다!

• action으로 넘기는 dispatch는 매개변수는 무조건 1개인데, 이땐 객체 형태로 많이 쓴다 -> 확장성을 위해 type : "action"

• reducer함수는 reducer폴더로 빼서 작업함 => 결합도 낮출수록⬇️ 좋음'

• 상태관리하는 로직이 한곳에 모여있기때문에 => 유지보수 / 가독성 ⬆️

• 따로 컴퍼넌트를 뺐다면 dispatcher를 props drilling 방식으로 넘겨주면 됨

• dispatch는 원리상 하나의 어플리케이션에서 한번만 생성되므로, 컴포넌트가 재렌더링하더라도 한번만 렌더링된다 => 🫠 useState의 차이점 (useState는 별도로 useCallback으로 최적화 렌더링을 해줘야했다)

useReducer 만드는 순서

: 이런건 정답이 없지만 헷갈려서 정리해두면 좋겠다 싶어서 적어봄

1. 📂reducer폴더 => export해서 변수 선언하기

const todoReducer = (state:any,action:any)=>{return state}
일단 처음엔 다 any로 해두는게 심신안정에 좋음...

2. switch문 만들어주기

3. case "ㅇㅇㅇ"일때 return에 원래 state때 적었던 함수 내부 내용이랑 같으니 넣기

4. reducer완료 => 작업하던.tsx에 가서 useReducer(export로 만들어놨던 reducer,초기값) 훅 써주기

https://ccomccomhan.tistory.com/281

2. zustand

: 전역상태관리

• 설치는 이것만 하면 끝난다...so very 간단

• set함수 = 현재상태(state)를 인자로 받고 -> 새로운 상태 만들기

• state = 현재상태에서 속성에 접근하기위해선 state.xxx라고 해야한다.

비구조할당 받아서 컴포넌트 작업했었는데,

메모이제이션 하려고 했는데 안된다,,,오잉 🔎

zustand의 최적화 방법(메모이제이션)

Zustand 공식 홈: zustand

: 비구조할당이 아닌 하나씩 꺼내오는 방식으로 작업하면 렌더링 최적화가 가능하다

=> Zustand에서 공식문서에서 지향

└> zustand에서 하나씩 꺼내오는 방식으로 한다고 해서 컴포넌트 메모이제이션(React.memo(컴퍼넌트)💡 하는 방법이 없으면 안됨! 있어야함

2. 데이터 통신

2-1. 싱글페이지(Single Page APPlication , SPA)

장점 :

① 단일 페이지 구성 ② 페이지 요청 시 필요한 데이터만 전달받아서 트래픽 감소⬇️ ③ 전체 페이지 렌더링 ❌ 변경된 부분만 갱신하므로(새로고침 X ) 사용자 경험 향상 ⬆️

단점 :

① 웹에 필요한 모든 리소스를 최초에 한번에 다운 => 느림 ② 서버렌더링 방식이 아닌 자바스크립트 기반 비동기 모델이라 검색최적화(search engine optimization, SEO) 이슈 有

💡 SPA 참고 : SPA

2-1.클라이언트 사이드 렌더링(Client Side Rendering, CSR)

(<-React 해당):

특징 :

모든걸 웹브라우저로 불러와야지만, 필요한 정보만 요청하고 변화된 부분만 렌더링하므로 =>웹브라우저가 화면을 구성한다.

단점

: api통신이 웹페이지가 생성된 다음에 들어가므로 찰나의 깜빡임이 존재함 => csr의 한계,,,🥲

2-1. 서버 사이드 렌더링(Server Side Rendering, SSR)

(<- Next.js 해당): 서버에서 이미 완성되어져있는 걸 응답받는다.

장점 :

① 초기로딩 빠름 ② html의 body에 content가 담겨있기때문에 SEO(검색최적화 엔진)에 좋다

단점 :

① 모든 요청에 대해 완전 새로 렌더링 한다 ② 서버 과부화

💡 CSR/SSR참고 : CSR/SSR

2-2. fetch API

: 웹브라우저에서만 사용가능 : 웹브라우저가 기본으로 제공하는 기능

axios : 외부 라이브러리에서 사용하는 옵션기능

2-3. 🛜server - 터미널 입력

┌> 1️⃣    Node에서 기본적인 package.json 파일을 생성

┌> 2️⃣    Node.js 프로젝에 cors,express,nodemon 패키지를 설치

cors

• CORS(Cross-Origin Resource Sharing)를 처리하는 미들웨어
• 다른 도메인에서 오는 요청을 허용 or 제한

express

• Node.js에서 서버를 구축 => 웹 프레임워크
• 라우팅, 미들웨어 관리, 요청/응답 처리

nodemon

• Node.js 애플리케이션을 자동으로 재시작해주는 도구

┌> 3️⃣   Node서버 시작

2-4.📥 데이터 통신의 4가지 방법과 순서 이해하기

1. 데이터 불러오는 방법 fetch
2. 로딩상태 핸들링
3. 에러핸들링
4. API 요청이 끝나기 전에 사용자가 이탈할 때

🫠 [강의실습] - Let's make it together!

웹브라우저에서 데이터 통신하는 법 2가지 🛜

• fetch api : 웹브라우저가 제공
  
  
• axios 라이브러리 : 라이브러리가 제공 (범용성 & 기능up)

tmdb API 🍿를 불러와서 데이터를 받아보자!

홈페이지 하단 아래 API 클릭

_API Reference 메뉴바 클릭 _

Url확인 후 JSON형식으로 어떻게 받아오는지 체크

예를 들어 jsonplaceholder에서 예시url을 들고와서 fetch api로 데이터 통신을 해보자!

fetch라는 api를 만나게 되면 기다리지 않고 다음 코드를 시작하게 됨

그 간극이 짧으니까 fullfilled 상태가 되지 못하고 pending으로 보였는데, 비동기방식이니까 그사이에 fulfilled가 된 거다!

promise를 반환하려면 then을 써줘야함

then이라는 콜백함수로 response 응답결과를 받아준다. 이땐, 변수로 정의안해도 됨!

fetch는 기본적으로 then을 2번 사용해야함

then을 한번 더 써줘야하는 이유?

response.json()은 promise객체를 반환하니까 then 쓸 수 있음

—————————————————————————— 본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

✅ 학습 내용 정리

학습 예제 출처: 수코딩

✏️ Learned

1. useTransition

• 동시성 모드 훅

• <useTransition>이 부분으로 감싸진 코드 블럭의 우선순위를 낮춤 🔽

2. useDefferedValue

• 특정 값의 우선순위를 낮춤 🔽

  
  

• 변수로 받아서 우선순위를 낮추고싶은 state를 넣는다 const deferredValue = useDeferredValue(dummy);

3. 메모이제이션

3-1. useCallback

함수값을 메모리에 저장해놨다가 가져다 쓰는 방법

export default React.memo(컴퍼넌트이름);

: 컴퍼넌트가 메모리에 저장되어있어서 전달함 : 불필요한 재렌더링 방지

메모이제이션은 남발하면 성능저하 🔽 일으킬 수 있음!

메모이제션 컴퍼넌트 구분

• 반복 렌더랑 : 메모이제션
• 그 외 : 선택적

🔎 메모이제이션 메모리가 퓰어질 때 ?

컴퍼넌트 전달받은 props가 데이터변경될 때

 const increment = () => {
    setCount((count) => count + 1);
  };

increment안에 값이 들어가있을 것 같지만, 참조자료형이라 주소값이 들어가있기 때문에 함수가 늘어난다

useCallback

: 함수를 메모이제이션 하기 위해 사용됨

⭐------------------------------------------------------

1) 컴퍼넌트 메모이제이션 ; React.Memo(리액트패키지의 메모함)

메모이제이션 해지할때?

└>컴퍼넌트로 전달받은 데이터가 변경될 때 └>context로 공급받은 데이터가 변경될 때

2) 함수 메모이제이션 : useCallback

└>의존성 배열에 있는 데이터가 비었을 때 = 메모이제이션 절대 풀리지 않음

└> useCallback을 했을 때, 리액트는 함수 scope(비슷한 말로 상태)를 기억함

• 콜백함수 형태 : 원래(이전) 형태의 값을 참조할거면 => 최신값을 보장함
• value 형태 :이전 값 참조 안해도될 때

🔽 그래서 아래 코드에서 count는 콜백함수형태로 작성해야 좋다

const [count, setCount] = useState({ count: 0 });

  //useCallback (()=>{},[])
const increment = useCallback(() => {
    setCount((count) => ({ count: count.count + 1 })); //콜백함수형태 = 최신값을 보장함
    //{ count : 0 } 을 기억하고있어서 value형태로 작성하면
    // setCount({ count: count.count + 1 }); //value형
  }, []);

3) 값 메모이제이션 : useMemo

└>의존성 배열에 있는 데이터가 비었을 때 = 메모이제이션 절대 풀리지 않음

⭐------------------------------------------------------

useMemo (()=>{return"""},[]) => (메모이제이션, 의존성배열)

객체로 변경하게 되면 , props는 객체일텐데 메모이제이션이 풀리지않음

useState는 내장되어있는 것처럼 자동으로 메모이제이션되는 훅임

• 관리하는 데이터가 변경될 때 메모이제이션 변경

3-2. useMemo

: 값을 메모이제이션 (재렌더링 방지)

🫨 리액트의 고차컴퍼넌트(Higher-Order-Component)에 대한 이해?

└> 고착컴퍼넌트가 뭐야 🔎

컴퍼넌트로 매개변수를 받아서 다시 컴포넌트를 반환하게 하는 컴퍼넌트임

ex) React.Memo(컴포넌트형) => 컴퍼넌트를 응답받음

3-3. Todo 메모이제이션

🔎 TodoList를 메모이제이션 해야하는이유?

= 최적화가 필요한 이유?

: 반복화 = 메모이제이션 하면 좋다!

Todo를 1번 입력하면

Todo를 2번 입력하면 : 이전에 렌더링 된 것이 초기화돼서 다시 불러와짐

todo리스트를 메모이제이션 하는데 개념이 잘 안잡혔나보다,,,

1) 컴퍼넌트 메모이제이션을 사용해서 , 컴퍼넌트 트리구조를 생각하고 그 안에서 원하는거 React.memo() 하기!

=> 막아지지 않았단 얘기는 props가 변경되었을 때 !

2) useState는 메모이제이션이 자동으로 된 것처럼 작동함

• todos는 메모이제이션 할 대상이 아님 - useState라서

• 나머지 toggle /delete 만 메모이제이션 바꾸면 됨

• 그 함수가 직접적으로 영향을 받는 맨 상위 곳에서 메모이제이션 하자!

4. Context API

:Provider-Consumer

before) 기존

: root 컴퍼넌트 -> 하위 컴퍼넌트 전달

after) Context API

: context라는 영역에 데이터 정의 -> 원하는 데이터 요청 - > 전달받기

--안티패턴......

1. createContext => 공급자 생성
2. 1번context.Provider 범위설정
3. 그 범위 안에 value 속성으로 데이터 모아두기
4. 다른 컴퍼넌트에서 useContext(1번컴퍼넌트이름);을 받아서 사용 ex) const { count } = useContext(CounterContext)!;

🔎🫨 그럼 어떻게 실무에선 하는데?

1. context라는 폴더 만들고
2. 그 안에 이름 + Provider.tsx 공급자 파일을 만들고
3. children을 사용함
4. 그 공급자파일을 전체 root 상위 컴퍼넌트를 감싸기!

=> 유지보수와 재사용성이 좋아짐 👏🏻

—————————————————————————— 본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.

✅ 학습 내용 정리

학습 예제 출처: 수코딩

시작하기 전에 앞서서

💡 <StrictMode> 알아두기

• main.tsx에 있음!
• 해지하면 콘솔창에서 1번씩 실행될거임
• 개발모드에서만 console창에서 두번씩 출력되게 해놓음
• 되도록 제거하지 않은 상태로 진행해보자!

🔎 <hook> 이 뭘까?

• React state랑 생명주기랑 연동(hook into)할 수 있게 해주는 함수

✏️ Learned

1. useEffect ⭐⭐⭐

└> 컴포넌트의 생명주기관리를 도와주는 hook

🔎 생명주기란?

: 컴퍼넌트가 생성되고 삭제되는 순간까지의 일련주기

*└> 생성 / 수정(업데이트 / 삭제) *

📌기본 함수 공식

useEffect(콜백,의존성배열) => useEffect(( )=>{ },[ ])

🔎 useEffect 언제 사용할까?

• 컴포넌트가 렌더링 될 때 특정 작업(API 호출⭐ 등)을 수행하거나, 언마운트될 때 정리하기 위해 사용됨

  • 목적과 상황에 따라 여러번 쓸 순 있지만, 의존성 배열이 달라야 함

  분리해서 썼을 때 ?

  • 생성시점과 종료시점을 다시 실행시킬 필요가 없으니 분리시킬 수 있음
  • 생성시점과 종료시점이 한번만 실행되길 보장하면 -> 분리해서 작성

  분리해서 작성안해도될 땐 ?

  • [의존성 배열] 변경될 때마다 생성+종료가 계속 실행됨

• [의존성 배열] 안에 적어도 적어놔도 됨

  
  
  

1-1. useEffect [생성]

확인해보면 화면이 켜지고 콘솔창에 뜸

1-2. useEffect [삭제]

= clean up 함수

• <strict></strict>모드가 사용되는 중이면, 내부적으로 한번 만들었다가 이상이 없으면 지워주기때문에 삭제가 보임

• <strict></strict>모드를 사용안하면 눈에 안보임

  ---

useEffect는 async 비동기를 사용하지 못함 ⭐

: 콜백함수를 내부에서 반환하는데 이땐 동기 함수로 작동 해야하기때문에 !

• aysnc는 항상 Promise를 반환함

  └> 🔎 Promise가 뭐지?

• 작업의 결과가 promise 객체에 저장

• promise 객체는 3가지 중 1개의 상태

  pending : 작업이 진행중 fulfilled : 작업이 성공적으로 완료 rejected : 작업이 실패했음

• 비동기 작업을 순차적으로 실행하기 위해서 사용함

• 3가지 메서드 (then / catch / finally)

혹시 async비동기를 쓰고싶다면 useEffect 내부에 이렇게 쓰는 방법도 있는데, 나중에 배우게 될 것 같다!

1-3. useEffect [수정 / 업데이트]

: 한번만 실행하고 싶다면, 의존성배열에 [ ] 해당 객체 넣어두기

• 메모리가 삭제되고 다시 생성돼서 실행되니까 변경사항이 체크됨

  

🔎 useEffect 삭제는 왜 필요할까?

setTimeOut / setInterval 은 초기화해주는 코드를 꼭 넣어줘야함

안그럼 인터벌 코드가 화면에서 삭제되었음에도 불구하고 계속 메모리가 살아있음

= 메모리누수를 방지하기위해!

2. useEffect를 활용한 DarkMode만들기 🌛

tailwind css 이용

class명에 dark:를 붙이면 다크모드일 때 쓰고싶은 css가 적용됨

darkMode는 index.html에 다크모드를 설정하면 됨

"다크모드 "일 땐, class에 dark 붙여짐

3. useLayoutEffect 훅

useEffect

• 컴퍼넌트가 생성되고, 렌더링(화면에 보여진) 다음에 비동기적으로 처리함
• 깜빡임을 볼 수 있다
• ** ex) 데이터 통신**

useLayoutEffect

• 동기적으로 실행되는 hook이어서, 컴퍼넌트가 생성되고나서 렌더링 되기 전에 실행되므로, 깜빡임이 없다
• 이 코드가 실행되는 동안은 동기적인 훅이라서 *다른 기능들을 실행할 수 없음 *🥲
• ex) 레이아웃 변경

=> 단순 html 변경 등을 제외하곤 useEffect를 쓰는게 좋음

4. 실습과제 point

useEffect

• filter((item)=>item.name.includes(terms)) : 해당 단어가 포함된거 필터처리하기

이거 필요 -입력요소에 렌더링되는거 -> 한번만 렌더링되게 debounce

프롭스 드릴링 방식으로 설계함

-> depth가 짧으면 props drilling방식이 이득이지만, zustand나 redux contextAPI를 이용해봐도 괜찮음

컴퍼넌트는 데이터를 전달할 때 위에서 아래로밖에 못주는데, state lift 기법을 사용해야한다.

부모영역에서 state를 만들어야함

5. useId

React 18에 새로 추가된 유니크한 id를 만들어주는 hook

• 컴포넌트의 최상위 수준에서 호출하여 고유한 ID를 생성
• 반복문이나 조건문 내에서 호출할 수 없음

6. useTransition

const [pending, startTranstion] = useTransition()

과부화를 낮춰주는 훅 (무거운 코드들을 startTranstion으로 wrapping하면)

• 특정 코드블럭= starter함수 안의 우선순위를 낮춰버리기떄문에 가능

• 동시성 (=비동기 / 코드의 실행을 기다리지 않겠음)

• 리액트에선 잘 쓰진않지만 next에선 엄청 잘 쓰인다

—————————————————————————— 본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.