프론트엔드 팀 링크 공유

기술 스택

• react-query

[번역] #1: 현실적인 리액트 쿼리

2018년에 미국에서 GraphQL과 Apollo Client가 인기를 끌었을 때, 그것이 Redux를 완전히 대체하는 것에 대해 많은 소동이 있었고, "Redux는 이제 끝인가요?"라는 질문을 많이 받았습니다. 저는 이게 무슨 소동인지 이해하지 못했습니다. 일부 데이터를 가져오는 라이브러리가 전역 상태 관리 라이브러리를 대체할 수 있다고? ...그게 무슨 상관이야?

https://parang.tech/react/2022-react-01/

• msw

Mocking으로 생산성까지 챙기는 FE 개발

안녕하세요, 카카오엔터프라이즈 검색플랫폼프론트파트의 Lawrence.net입니다. 프론트엔드 개발 업무의 효율성을 높이기 위한 방법의 하나로 고민해 본 Mocking에 대해 설명하고 이를 적용했던 사례에 대해 공유하고자 합니다. 먼저, 프론트엔드 개발 과정에서 프론트엔드 개발자들이 겪고 있는 문제점에 대해서 이야기하고, 이에 대한 해결 방안으로 Mocking을 어떻게 하면 더 효율적으로 사용할 수 있을지 고민했던 부분에 대해 공유드리려고 합니다.

https://tech.kakao.com/2021/09/29/mocking-fe/

Browser - Getting Started

Mock Service Worker operates client-side by registering a responsible for requests interception. However, we don't have to write any of the worker's code by ourselves, but rather copy the worker file distributed by the library. Mock Service Worker provides a dedicated CLI to help us do that.

https://mswjs.io/docs/getting-started/integrate/browser

• 리프레시 토큰
axios interceptors로 토큰 리프레시 하기
사용자 인증은 많은 서비스에서 필수적인 부분이다. 사용자 인증에는 크게 세션/쿠키 인증과 토큰 기반 인증이 있는데, 대표적인 토큰 기반의 인증으로 JWT(Json Web Token) 을 많이 사용한다. JWT 토큰 인증 방식은 제 3자에게 토큰이 탈취되는 경우 보안에 취약하다는 단점이 있어 토큰에 유효기간을 부여하여 보안을 강화하게 되는데, 유효기간이 짧으면 사용자는 계속 로그인을 다시 해야하기 때문에 불편해 진다.
https://maruzzing.github.io/study/rnative/axios-interceptors%EB%A1%9C-%ED%86%A0%ED%81%B0-%EB%A6%AC%ED%94%84%EB%A0%88%EC%8B%9C-%ED%95%98%EA%B8%B0/

• adobe spectrum
• 디자인 가이드의 기반을 제공해준다.
Spectrum, Adobe's design system
Spectrum provides interface components, resources, and tools to help teams work more efficiently and to make applications more consistent.
https://spectrum.adobe.com/

• 사용성에 맞춰서 어떻게 디자인하는 것이 좋은지
Spectrum, Adobe's design system
Design tokens are all the values needed to construct and maintain a design system - spacing, color, typography, object styles, animation, etc. - represented as data. These can represent anything defined by design: a color as a RGB value, an opacity as a number, an animation ease as Bezier coordinates.
https://spectrum.adobe.com/page/design-tokens/

• 레이아웃을 어떻게 잡고, 모바일과 PC에서는 어떤 방식으로 디자인을 제공하는 것이 좋은지.
• 미디어 쿼리에 대한 표준- break point

Breakpoints

Breakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size. Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters.

https://getbootstrap.com/docs/5.2/layout/breakpoints/

단위 이야기 — 필수

• rem, em 적극적으로 활용하기
• rem extention 을 사용하면 좋다.
⇒ px to rem
• 참고하기 좋은 예시
• 그린랩스, 쿠키런 킹덤
• 특히 대상자가 다양할 수록 반응형을 많이 적용

• vw, vh 적극적으로 활용하기
• 레이아웃잡을때 어떻게 반응형으로 적용시킬지
• 모바일의 경우 특히 기기 마다 정교하게 고려해야한다.

• IOS Safe Area
• 어떻게 대응할 것인가? 명시하고 있기.
• 수동으로 설정하면 된다. — 일반적인 경우 대응할 일이 크지 않다.
meta tag — viewport fit cover 설정들을 사용한다.

기타

🔐 Private Route in react-router v6

Things are changing fast in WEB today, and react-router v6 is in beta already and around the corner. 🤔 This is just for learning purposes only, react-router v6 is still in beta, use at your own risk Private routes in v5 and below were done in a specific way using a custom component mostly named PrivateRoute that was most of the times just a wrapper and composition of basic Route and Redirect e.g.

https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5