프로젝트 셋업, 왜 프론트 4명이나? 혼자서 진행하던 프로젝트에 코드스쿼드에서 함께 공부했던 도니, 햄디, 제이미를 꼬드겨 합류시켰다. 프론트에서만 3명을 추가로 합류하는건 과하다고 느껴질 수도 있는 부분이라 고민을 많이 했었고, 합류하시는 분들도 고민이 많으셨을 것이다. 그럼에도 이렇게 진행한 이유를 생각해봤다. 1. 지금까지의 프로젝트는 혼자 or 프론트 2명 이 진행하였음 -> 여러명 일때는 프로젝트를 어떻게 진행할까? 2. 진행하고 있는 스터디의 수작업 (체크인, 체크아웃)이 너무 귀찮음 -> 하루라도 빨리 기능이 돌아가는 페이지를 만들자. 3. 우리만의 UI 시스템을 만들어보자. -> 변경에 유연한 컴포넌트를 작성하기위한 노력 프로젝트를 혼자서 진행해보면서 처음에는 "2. 하루라도 빨리 기능이 ..

보통 children 의 type 은 ReactNode 로 설정하는 편이다. children 을 배열로 사용할 상황이 있었다. props 를 통해 받은 값을 바탕으로 Group 의 최대 갯수를 지정하고, slice 하고싶었다. 물론 group 이라는 컴포넌트에 미리 데이터를 slice 하여 보내줄 수도 있겠지만, 미리 데이터를 정제하여 보내는 것 보다 생략해서 보여주는 로직은 Group 컴포넌트의 역할이 맞다고 생각했다. 간단히 JS 환경에서 테스트해보았을 땐 children 이 배열로 반환되어서 map 을 사용할 수 있을거라고 생각하고 사용해보았다. 그런데 다음과 같은 ts 오류가 발생했다. children 을 ReactNode 로 타입을 지정하여 사용하고 있기 때문에 오류가 났다. 의도한대로 map ..

서론 코드스쿼드 과정을 하면서 서로의 코드를 확인하고 리뷰를 하는 식으로 프로젝트를 진행했다. 그런데 리뷰를 하다보면, "아~ 이건 화면에서 어떻게 돌아가는지 확인해보고 싶은데," 같은 상황이 무조건 생긴다. 이 코드는 과도한 리렌더링을 일으키지 않을까? 추측만 되고, 직접 확인하기는 어려우니, 나중엔 Git 협업 전략을 세울 때 상대방의 코드를 내 local 에 불러와서 사용하는 것이 쉽도록 같은 레포지토리의 Collaborator 로 추가하여 사용하는 방식을 사용하기도 했다. 그런데 당연히 귀찮다. 내꺼 개발하다가~ 상대방이 작업하던 브랜치를 Pull 받아와서 다시 돌려보고~ 그래서 간단히 확인해볼 수 있게 Netlify 로 배포하여 PR 에 추가해주기도 하였다. 그런데 이것도 여간 귀찮은 일이 아니..

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..

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:..

ErrorBoundary ErrorBoundary 를 구현했다. ErrorBoundary 를 만들어 보니 내가 원하는 곳에서 원하는 컴포넌트로 fallback 하고 싶은 상황이 무조건 생길 것이고 그 때마다 ErrorBoundary 를 만드는 것은 비효율적이라는 생각이 들었고, 이와 관련하여 한재엽님이 Suspense 와 ErrorBoundary 를 선언적으로 사용하기 와 관련된 게시글을 읽어보았다. 늘 그렇듯 학습을 위해 프로젝트에 바로 적용하기보다 컨셉을 하나하나 적용해가며 불편함을 겪고 넘어가려한다.. 일단은 fallback component 를 지정하여 렌더하는 방식부터 해볼 생각이다. 설계했던 백엔드 부터 간단히 만들어서 사용하던 백엔드 응답에 문제가 있었다. 무조건 2XX 의 status co..

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..

Client State, Server State 며칠 전 우아한 테크세미나에서 진행한 React Query 발표영상을 보면서 Server State 와 Client State 의 구분에 대한 느낌을 잘 받았다. 두리뭉실하게 전역상태 라고 사용하던 것을 명확히 구분지어 사용할 기준이 생겼다. 그런데 React Query 로 이것 저것 만들어 보다보니, Server State 의 데이터를 Action 을 통해 Client State 에 저장해야 하는 상황도 존재하겠다는 생각이 들었다. 발표하신 내용의 질문으로도 나온 주제였는데, 그때 당시에는 질문의 상황을 제대로 인지하지 못하여 와닿지 않았었다. 그런데 만약 Server 로 부터 데이터를 전달받아, 어플리케이션은 데이터로부터 사용자가 선택한 특정 값 을 기..

Styled-components css() 함수, 왜쓰지? styled-component 를 사용하면서 props 의 특정 상태에 따라 스타일링을 다르게 하는 경우가 있다. 그런데 이전에 다른 분들이 사용하시는 것을 보면 css() 함수와 함께 사용하는 경우를 여럿 봤다. import styled, { css } from 'styled-components'; const flexMixin = ({ jc, ai }: { jc?: string; ai?: string }) => css` display: flex; ${jc && css` justify-content: ${jc}; `} ${ai && css` align-items: ${ai}; `} `; const MyBox = styled.div` ${({ fl..

headlessUI with styled-components 어제 올린 글 에서 headlessUI 로 로직을 분리한다면, 스타일은 어떻게 접목시킬지에 대해 고민을 했었다. 이리저리 삽질을 해보았는데, 해결책은 Styled-components 공식문서에서 찾았다. import { createContext, useContext, useState } from "react"; const DropdownContext = createContext(); function DropDown(props) { const openState = useState(false); return ( {props.children} ); } function useDropdownContext() { const context = useCont..