본문 바로가기

분류 전체보기57

[Netlify] PR preview - Pull Request 를 바로 배포하기 서론 코드스쿼드 과정을 하면서 서로의 코드를 확인하고 리뷰를 하는 식으로 프로젝트를 진행했다. 그런데 리뷰를 하다보면, "아~ 이건 화면에서 어떻게 돌아가는지 확인해보고 싶은데," 같은 상황이 무조건 생긴다. 이 코드는 과도한 리렌더링을 일으키지 않을까? 추측만 되고, 직접 확인하기는 어려우니, 나중엔 Git 협업 전략을 세울 때 상대방의 코드를 내 local 에 불러와서 사용하는 것이 쉽도록 같은 레포지토리의 Collaborator 로 추가하여 사용하는 방식을 사용하기도 했다. 그런데 당연히 귀찮다. 내꺼 개발하다가~ 상대방이 작업하던 브랜치를 Pull 받아와서 다시 돌려보고~ 그래서 간단히 확인해볼 수 있게 Netlify 로 배포하여 PR 에 추가해주기도 하였다. 그런데 이것도 여간 귀찮은 일이 아니.. 2022. 9. 6.
styled component font import, layout shift layout shift 처음엔 List Item 의 width 가 바짝 차렷 하고있는 모습을 먼저 보였다. 이를 해결하기 위해 Item 의 width 를 어떻게줄까.. 하다가 List 에 max-content 를 주니 해결이 되는 모습을 보았다. 그런데 문제가 생겼다. Layout Shift? 처음엔 저게 왜 생겼지? top, left 를 지정해주다 생긴건가? 싶었는데 여러 테스트를 해보면서 width 가 max-content 로 동적으로 지정되니 생기는 문제인가.. 로 추측해보면서 Dropdown Item 의 width 를 지정해줘보았다. const DropdownItem = (props) => { const { children } = props; return ( {children} ); }; 뭔가 l.. 2022. 9. 1.
Dropdown 구현 (2) Dropdown (2) Dropdown 을 만들어보고있다. 이전에 포스팅 했던 Dropdown 의 컨셉을 그대로 가져와서 사용해보려고 하고 있는데, Trigger 는 외부로 부터 받아와 button 의 children 으로 사용하고자 했다. const DropdownTrigger = (props: { trigger: ReactNode }) => { const [, dispatch] = useDropdownContext(); const { trigger } = props; const handleTrigger = () => { dispatch({ type: 'TOGGLE_OPEN' }); }; return ( {trigger} ); }; // UserInfoCircle const UserInfoCircle:.. 2022. 8. 31.
ErrorBoundary 구현기 ErrorBoundary ErrorBoundary 를 구현했다. ErrorBoundary 를 만들어 보니 내가 원하는 곳에서 원하는 컴포넌트로 fallback 하고 싶은 상황이 무조건 생길 것이고 그 때마다 ErrorBoundary 를 만드는 것은 비효율적이라는 생각이 들었고, 이와 관련하여 한재엽님이 Suspense 와 ErrorBoundary 를 선언적으로 사용하기 와 관련된 게시글을 읽어보았다. 늘 그렇듯 학습을 위해 프로젝트에 바로 적용하기보다 컨셉을 하나하나 적용해가며 불편함을 겪고 넘어가려한다.. 일단은 fallback component 를 지정하여 렌더하는 방식부터 해볼 생각이다. 설계했던 백엔드 부터 간단히 만들어서 사용하던 백엔드 응답에 문제가 있었다. 무조건 2XX 의 status co.. 2022. 8. 29.
[back] credentials (cookie) TL;DR 백엔드에서는 Cookie 를 Setting 해주기 위해 CORS 설정 'Access-Control-Allow-Credentials': 'true' 을 해줘야 한다. back 서버에서 token 넘겨주기 JwtResponse 를 데이터 값으로 넘겨주는 것(payload) 에서 set cookie 하는 방식으로 변경 - 데이터 값으로 넘겨주는 것을 어떻게 탈취하는 걸까? - setCookie 로 하기 위해서 express 에서 제공하는 response cookie 메서드를 사용했다. res.cookie('accessToken', appAccessToken, { maxAge: 120_000, httpOnly: true, secure: true, }); 이 상태로 보내주니 Network 탭에서는 Se.. 2022. 8. 25.
Server State, Client State (feat. react query) Client State, Server State 며칠 전 우아한 테크세미나에서 진행한 React Query 발표영상을 보면서 Server State 와 Client State 의 구분에 대한 느낌을 잘 받았다. 두리뭉실하게 전역상태 라고 사용하던 것을 명확히 구분지어 사용할 기준이 생겼다. 그런데 React Query 로 이것 저것 만들어 보다보니, Server State 의 데이터를 Action 을 통해 Client State 에 저장해야 하는 상황도 존재하겠다는 생각이 들었다. 발표하신 내용의 질문으로도 나온 주제였는데, 그때 당시에는 질문의 상황을 제대로 인지하지 못하여 와닿지 않았었다. 그런데 만약 Server 로 부터 데이터를 전달받아, 어플리케이션은 데이터로부터 사용자가 선택한 특정 값 을 기.. 2022. 8. 22.

티스토리툴바