[WIL] 230205

오늘의 Todo

⭐️ 필수

• 브로셔 준비
  • 기술적 의사결정
    • [ ] Redux toolkit (현빈)
    • [ ] Intersection Observer (수빈)
    • [ ] react-cookie (수빈)
    • [ ] axios(instance) (수빈)
    • [ ] styled-components (수빈)
  • 주요 기술 (공통)
    • [x] 무한스크롤
    • [x] 소셜 로그인
• Feature
  • [ ] 닉네임 변경 중복확인 로직 변경 (수빈)
  • [ ] url env 처리 후 테스트 (수빈)
  • [x] cookie 모듈 닉네임 만료시간 수정 (수빈)
• UI (수빈)
  • 크로스 브라우징
    • [ ] 웹폰트 적용 문제
  • 커뮤니티 페이지
    • [ ] 게시글 제목 내용 댓글 글자 수 제한
    • [ ] 게시글 검색 시 결과 없을 때 보여줄 문구
  • 전체 UI 수정
    • [ ] 랜딩 페이지, 게임룰 모달
    • [ ] 로비 페이지, 설정 모달
    • [ ] 게임방 페이지
    • [ ] 커뮤니티 페이지
    • [ ] 글 수정 및 삭제 페이지
• Refactoring (수빈)
  • [ ] 중복 스타일 컴포넌트 공통 컴포넌트 분리하여 적용하기
  • [ ] modules 폴더 삭제하고 밖으로 모듈 파일 빼기(api 폴더처럼 구조 통일)
  • [ ] 에러 해당 파일에 규칙 해제 → eslint 규칙으로 추가
  • [ ] feature 폴더 삭제하고 폴더들 밖으로 빼기
• 렌더링 최적화
  • [ ] 세션 녹화영상 보기 (수빈)

~ 필수 ⭐️

 

오후에 프론트끼리 모여서 주요 기술을 간단히 정리했다.

오늘 이거 진짜 다 해야 하는데 10시 반이다.

env처리했는데 왜  ERR_NAME_NOT_RESOLVED 가 뜰까?

깃허브 올리기 전에 했을 때도 그래서 후순위로 미뤘었는데 이제 진짜 해결해야 한다ㅠㅠ

도대체 왜! 왜 안돼!! 흐어엉

내가 바보였군 역시 api url 을 잘못 썼다. / 가 아니라 . 이었음 🤣

 

https://han-py.tistory.com/441

[react] 실무 개발 환경/배포 환경 설정(.env)

 

[ERROR] Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

https://ko.reactjs.org/docs/forwarding-refs.html

Ref 전달하기 – React

https://stackoverflow.com/questions/56484686/how-do-i-avoid-function-components-cannot-be-given-refs-when-using-react-route

How do I avoid 'Function components cannot be given refs' when using react-router-dom?

 

공식문서 예시를 보고 바꾸었더니 위의 에러는 안 나는데 함수 실행이 안 됐다. 다른 컴포넌트들에도 저 에러 때문에 공통 Input 을 못 쓰고 styled component 를 썼고 계속 고쳐야지 하며 마음의 짐으로 남아있었다. 그런데 더 급한 일들이 많아서 우선 보류하고 날을 잡고 해야겠다ㅠㅠ

 

부모컴포넌트에서 ref 속성과 props를 내려주면

const ref = React.createRef();

return(
            <ChangeNickInput
            ref={ref}
            {...register('nickname', { required: true })}
          />
)

공통 input 컴포넌트에서 ref와 props를 받는다.

const ChangeNickInput = React.forwardRef((props, ref) => {
  return (
    <StChangeNickInput
      {...props}
      forwardedRef={ref}
      placeholder="변경할 닉네임을 입력해주세요."
    />
  );
});

required 로 지정한 텍스트가 helptext로 나타나는 것까진 확인했다.

그런데 다른 속성들과 에러 메시지들이 helptext로 안 보이고 함수 실행이 안 된다.

 

eslint 규칙 해제

해당 라인 또는 파일에만 해제해서 사용했는데 지금 rules로 다 추가해야겠다.

 

https://velog.io/@ainochi95/TypeScript-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1

TypeScript React 프로젝트 생성

https://velog.io/@cutyapple/eslint-%EA%B7%9C%EC%95%BD#jsx-a11yno-static-element-interactions

eslint 규약

 

 

✔️ 지금까지 한 일

⭐️ 필수

• 브로셔 준비
  • 기술적 의사결정
    
    • [ ] Intersection Observer (수빈)
    • [ ] react-cookie (수빈)
    • [ ] axios(instance) (수빈)
    • [ ] styled-components (수빈)
  • 주요 기술 (공통)
    • [x] 무한스크롤
    • [x] 소셜 로그인
• Feature
  • [x] 닉네임 변경 중복확인 로직 변경 (수빈)
  • [x] url env 처리 후 테스트 (수빈)
  • [x] cookie 모듈 닉네임 만료시간 수정 (수빈)
• UI (수빈)
  • 크로스 브라우징
    • [ ] 웹폰트 적용 문제
  • 커뮤니티 페이지
    • [x] 게시글 제목 내용 댓글 글자 수 제한 - css 깨진다는 유저 피드백
  • 설정 모달
    • [x] ver1 로그아웃 탭에서 모달 띄워서 변경
    • [x] ver2 로그아웃 탭 안에서 변경
• Refactoring (수빈)
  • [x] 설정 모달 공통 컴포넌트로 분리
  • [x] modules 폴더 안의 모듈 파일들 밖으로 빼고 폴더 삭제(api 폴더와 같이 통일)
  • [x] 에러 해당 파일에 규칙 해제 → eslint 규칙으로 모두 추가 및 주석
    • [x] jsx-props-no-spreading
    • [x] prop-types
    • [x] jsx-a11y/no-noninteractive-element-interactions
    • [x] jsx-a11y/click-events-have-key-events
    • [x] no-nested-ternary
    • [x] label-has-associated-control
    • [x] consistent-returnya
    • [x] func-names
    • [x] no-use-before-define
  • [x] 닉네임 변경 컴포넌트 분리
  • [x] feature 폴더 삭제하고 컴포넌트들 밖으로 빼기
• 렌더링 최적화
  • [ ] 세션 녹화영상 보기 (수빈)

~ 필수 ⭐️

 

브로셔 넣은 내용들 준비하고 웹폰트 문제도 찾아보고 렌더링 세션 녹화본 보고 뭐 채택할 지 정해야 한다.

 

다음주 우선순위

• 에러
  • [ ] acces token 재발급 확인
• 렌더링 최적화
  1. 리소스 줄이기(폰트, 이미지)
  2. 이미지(새로고침 등) → 폰트로 적용
  3. 코드
  image CDN→ 도표, 그래프 등 수치화 자료만들고 github readme 애 update
• lazy loading : Img 태그 loading 속성에 lazy주거나 IntersetctionObserver 사용 등
• UT 개선 사항
  • [ ] 커뮤니티 버튼 드래그앤드롭하면 url 노출되는 오류 막기
  • [ ] 게시글 검색 시 결과 없을 때 보여줄 컴포넌트
  • [ ] 배경음악 추가
• 전체 UI 수정
  • [ ] 랜딩 페이지, 게임룰 모달
  • [ ] 로비 페이지, 설정 모달
  • [ ] 게임방 페이지
  • [ ] 커뮤니티 페이지
  • [ ] 글 수정 및 삭제 페이지
• refactoring
  • [ ] PostDetail 컴포넌트 index 를 map의 key값으로 쓰지 않는 방법으로 리팩토링
  • [ ] ChatBox 컴포넌트 index 를 map의 key값으로 쓰지 않는 방법으로 리팩토링
  • [ ] code convention 맞게 썼는지 전체 점검
• github readme, wiki 추가
  1. 주요 기능
     • [ ] 주요 기능 리스트로 간단하게 한 줄씩
  2. 컴포넌트 정보
     • [ ] 폴더 별 컴포넌트 정보 및 설명
  3. 일정
     • [ ] 개발 주요 일정
     • [ ] 개발 타임라인
  4. 트러블 슈팅
     • [ ] 트러블 슈팅 항목별 코드

이거 말고도 할 게 많은데 최종 발표회까지 얼마 안 남았다니...

 

또 생각난 할 일들

- 실시간 채팅 트러블 슈팅에 추가

- 트러블 슈팅 내용들 중 수치화할 항목 고르고 데이터 추출

- 유저 피드백 다시 보고 개선사항들 추가

 

시간이 더 있었다면 도입했을 기술들

react query

react hook form

atomic design pattern

github actions - CI/CD

 

좋은 블로그 글들 야금야금 모으기

https://talkwithcode.tistory.com/86

javascript . 어떻게 무한 스크롤을 구현하시나요?

https://velog.io/@pjh1011409/ESLint-Prettier#-eslint--commit

ESLint & Prettier

https://velog.io/@eunbinn/Axios-vs-Fetch

[번역] 입문자를 위한 Axios vs Fetch

https://ssangq.netlify.app/posts/axios-and-fetch

Axios와 Fetch, 무엇을 사용할까? - Develop To be a Developer

https://doqtqu.tistory.com/338

[React.js] 상태 관리 라이브러리 비교 3 - Recoil

 

기술적 의사결정

Infinite Scroll

도입 이유	게시글 상세페이지에서 유저가 게시글에 초점을 맞춰 읽다가 댓글을 읽고 싶은 경우 일정한 데이터를 순차적으로 보여주기 위함.
후보군	Pagination 장점 : 유저의 의도에 맞게 원하는 페이지로 이동할 수 있다. 단점 : 다음 버튼을 클릭하는 추가적인 작업(액션)이 필요하다. Infinite Scroll 장점 : 유저가 다음 버튼을 클릭하고 기다리지 않아도 계속해서 데이터를 보여줄 수 있으므로 더 나은 유저 경험을 줄 수 있다. 단점 : 특정 데이터를 다시 찾기가 어렵다. → Infinite Scroll 구현 방법 1. 순수 JS로 scroll height를 계산 3. Intersection Observer API
의견 조율	scroll height 를 구해서 dabouncing과 throttling을 사용하는 경우 스크롤을 할 때마다 이벤트가 발생하므로 reflow 단계가 계속 일어남. Intersection Observer API 를 사용하는 경우 타겟의 변화를 관찰하여 스크롤시 지정된 수만큼 데이터가 요청되며 렌더링됨. 타겟이 얼마만큼 보였을 때 콜백함수를 실행할지 지정할 수 있다는 점도 장점임.
의견 결정	scroll이 일어날 때 마다 특정 element가 화면에 존재하는지에 대한 여부를 계속 계산하는 것은 비효율적이라고 판단하였음. 따라서 Intersection Observer API 를 사용함
부가 설명	서버와 미리 조율하여 db의 모든 댓글을 한번에 불러오는 것이 아니라 댓글을 보여줄 영역에 맞게 5개의 댓글만 먼저 로딩하고 target 컴포넌트가 화면에 보일 때 다음 5개 댓글을 로딩하도록 설정하였다. 데이터를 일부만 먼저 렌더링하고 차례대로 보여주므로 로딩 시간을 단축하였다.

 

axios(instance)

도입 이유	API를 연동할 때 axios를 사용하면 자동으로 JSON 데이터 형식으로 변환이 가능하고 XSRF의 보호를 받기 때문
후보군	fetch 장점 : JavaScript 내장 라이브러리이므로 별도로 import할 필요가 없음 단점 : 네트워크 에러 발생 시 response timeout이 없어 기다려야 하고 axios에 비해 기능이 부족함 axios 장점 : fetch에는 없는 response timeout 처리 방법이 있음. 단점 : 사용하기 위해 모듈 설치가 필요함.
의견 조율	axios를 사용하는 경우 JSON 데이터를 자동 변환해줌. 또한 400, 500 대의 에러가 발생한 경우 rejectfh response를 전달해 catch로 잡아낼 수 있음.
의견 결정	axios 를 인스턴스화하여 baseURL 과 token을 사용하는 컴포넌트들에서 instance를 호출하여 사용할 수 있어 편리하므로 axios 를 사용하는 것으로 결정함.