1주차Q. label 과 같은 웹 접근성 관련 태그는 어떻게 신경써야 할까요?Q. Zira와 GitHub 의 사용 기준에 대하여Q. 컴포넌트 라이브러리 사용에 대하여 (ex: antd, MUI)Q. 커밋 메시지를 어떻게 사용하시나요?Q. type과 interface를 어떻게 사용해야할까요?
(특별출현 : 동영 멘토님)Q. 사용자 경험의 측면에서 Modal 의 사용은 어떤가요?2주차Q. 전역 상태 관리 - 토큰보너스 - 토큰을 관리하는 다른 방법Q. 전역 상태 관리 - 유저 데이터Q. 전역 상태 관리 - 데이터 무결성, 사이드 이펙트Q. 전역 상태 관리 - 왜 전역 상태 관리 라이브러리를 사용하게 될까?Q. 전역 상태 관리 -언제 전역 상태 관리를 사용하나?Q. Antd 를 사용할 때 유의할 점3주차Q. h 태그를 어떻게 사용해야 잘 사용했다고 할 수 있을까요?4주차Q. 프론트엔드단에서 토큰을 어떻게 관리하나요? 토큰을 이용해서 정보를 추출해서 사용하는 경우가 있을까요?Q. styled-in-JS에서도 style 파일을 따로 분리하는게 좋을까요?
1주차
Q. label 과 같은 웹 접근성 관련 태그는 어떻게 신경써야 할까요?
- 원자 단위 컴포넌트 만들 때 부터 웹 접근성을 잘 신경쓰면서 만드는게 중요하다.
Q. Zira와 GitHub 의 사용 기준에 대하여
Q. 컴포넌트 라이브러리 사용에 대하여 (ex: antd, MUI)
- 프로젝트에 디자이너가 없기 때문에 사용할 때 우려할 점이 크게 없어서 사용하면 좋다.
- 잘 구현되어있는 컴포넌트 라이브러리를 사용함으로써, 나중에 직접 컴포넌트를 구현할 때 어떤속성이 필요하고, 어떻게 동작하는지 모범사례를 참고할 수 있다.
Q. 커밋 메시지를 어떻게 사용하시나요?
Q. type과 interface를 어떻게 사용해야할까요? (특별출현 : 동영 멘토님)
- 각자의 장점에 맞게 사용하기
Q. 사용자 경험의 측면에서 Modal 의 사용은 어떤가요?
- 모달이라는 부분은 UX 적으로 좋지 않아서, 최소화하는 방향으로 개발해야 한다.
- 왠만하면 페이지를 따로 생성할 것
- 또한 모달의 경우, 데이터 분석할 때나 사용자가 어떤 기능을 사용했는지 체크가 불가능하다.
2주차
Q. 전역 상태 관리 - 토큰
- 전역상태관리를 대표적으로 활용하는 예 - 토큰 (리프레쉬 토큰 저장)
- 로컬스토리지의 토큰은 전역 상태를 위한 보조 도구로 사용함
- 동작 자체의 문제라기보단, 코드 퀄리티의 문제
- 단, 리프레쉬 토큰에 대해서는 고민이 필요
보너스 - 토큰을 관리하는 다른 방법
Q. 전역 상태 관리 - 유저 데이터
- 데이터의 최신성을 보장해야하기 때문에 유저 데이터의 경우 전역 상태관리로 관리하는 것은 좋은 생각이 아님
- 데이터의 경우, 서버의 최신 데이터를 그때그때 받아와서 사용해야함
구체적으로 그렇게 생각하시는 이유
Q. 전역 상태 관리 - 데이터 무결성, 사이드 이펙트
Q. 전역 상태 관리 - 왜 전역 상태 관리 라이브러리를 사용하게 될까?
- 전역 상태 관리 라이브러리는 프론트 내에서의 컴포넌트 설계 등의 관리 포인트에 초점이 맞춰져 있음.
Q. 전역 상태 관리 -언제 전역 상태 관리를 사용하나?
- 디자인 테마 관련 ex) 다크 모드
- 테이블 컴포넌트
- 전역 상태 관리로 많은 상태를 관리하면 후에 상태관리가 복잡해지므로 꼭 필요할 때만 사용해야 함
- 예시로, 어디서 렌더링되는지 잘 캐치되지 않을 수 있음
- react query의 경우, key로 관리하고 데이터 유지에 사용하기도 함
Q. Antd 를 사용할 때 유의할 점
- 12 columns or 24 columns 로 해야 깔끔한 디자인이 만들어질 수 있음 ⇒ Antd의 grid에서 확인
- 즉
antd의 grid를 잘 사용하는게 중요하다.
3주차
Q. h 태그를 어떻게 사용해야 잘 사용했다고 할 수 있을까요?
질문 내용
- 굳이 로고로 h1을 안 해도 된다 ! 페이지이름을 h1으로 (이게 best)
4주차
Q. 프론트엔드단에서 토큰을 어떻게 관리하나요? 토큰을 이용해서 정보를 추출해서 사용하는 경우가 있을까요?
질문 내용
우선, 저희는 전역 상태 (recoil)을 사용하여 유저의 상태( 우선 ID 정보, 후에 확장될 가능성o )를 저장하려고 합니다. 하지만, 여기서 문제가 생기는게 전역 상태의 경우 새로고침을 하면 데이터가 날아간다는 점 이였는데요.
이 경우, 로컬 스토리지에는 토큰이 남아 있으므로 해당 토큰을 통해, 현재 로그인한 사용자에 대한 정보를 조회하는 api(+ 유효한 로그인인지 검사)를 백엔드에 요청하였습니다.
그러나 백엔드 단에서는 이러한 요청이 서버에 오버로드를 주는 요청이라고 판단하여, 차라리 이런 경우에는 로컬 스토리지에 있는 access token을 깨서 사용하라고 말씀하셨는데요.
후에 확장될 가능성을 생각해본다면 프론트 쪽에서는 이러한 구현이 껄끄럽다고 생각이 됩니다.....
따라서, 유저의 로그인 상태를 저장하기 위하여 어떤 방식을 사용하는게 좋을까요?
- 답변 내용
- 프론트에서 Token을 디코딩해 사용하는 것에 대하여
- 실무에서는 절대로 그런 방식으로 사용하지 않을 것 같다.
- 프론트에서는 디코딩을 하지 않고, 백엔드에서 주는 데이터를 사용하는 것이 일반적이다.
- 그러나, 작은 규모의 프로젝트에서 협업을 위해서라면 타협의 여지는 있다고 생각한다.
- 현재 프론트엔드에서 생각하는 방식 : 새로고침을 할 때마다 쿠키(나 로컬스토리지)에 들어있는 토큰을 이용해서 서버에 데이터를 찔러서 유저 정보를 패칭하는게 서버에 부하를 줄까요?
- 서버에 큰 부담을 줄 것이라고 생각하지는 않는다. 서버에 부하가 걸린다면 서버의 문제
Q. styled-in-JS에서도 style 파일을 따로 분리하는게 좋을까요?
이 관점은 HTML 파일에서 Style 로직은
style.css 파일로 빼놓는 것과 비슷하게 생각하면 된다. 스타일 로직은 결국엔 UI 로직과는 상관없는 로직이므로 분리하는 것을 추천한다! 결국 파일에 UI 상태와 관련된 부분을 모아넣는게 핵심이다.