개발

먼저 렌더링에 대한 정의를 알아야 한다 렌더링 브라우저에 html,css,javascript를 이용해서 웹페이지를 그린다 렌더링 방식 (CSR, SSR) 렌더링 방식에는 CSR,SSR이 있다 CSR 클라이언트가 모든 렌더링을 도맡아서 한다 순서 클라

왜? typescript로 프로젝트를 진행하던 중 특정 기능에서 반복적으로 사용되는 컴포넌트가 있길래 공용컴포넌트로 만들었다. 그런데 특정 타입만 props로 전달받을 수 있게 해뒀더니 확장성에서 다소 불편함을 느꼈고 공용컴포넌트라고 하기엔 많이 제한적이다 라고 생각이

개발이 끝나고 난 뒤 되돌아 보니 사용하지 않는 코드들이 생각보다 많아서 이걸 어떻게 해야 하나 고민했었는데 Knip 라이브러리를 알게 되었다.monorepo 구조next v12knip v5 사용knip이란 사용하지 않는 함수, 타입, 패키지 들을 모두 찾아주는 라이브

배경 기능개발에 들어갈때 프론트개발은 항상 백엔드쿼리를 기다리는 입장이 된다. 마냥 기다리기만 할 수 없으니 쿼리 인터페이스를 백엔드와 맞춘 후 더미데이터를 만들어서 개발을 진행하긴 했지만 불편한 점들이 약간씩은 있었다. 쿼리를 전달받은 후 작업들은 처리가 어려움 더

\[ApolloClient] MockedProvider사용하기지난 시간에 이어서 이번엔 mock-apollo-client 라이브러리를 사용해서 Mocking을 해보려 한다.ApolloClient에서 제공하는 MockedProvider는 배열에 Query,input,ou

MSW 사용해보기 -1 (+ ApolloClient)이전 시간에는 msw를 세팅해보았다이제는 네트워크요청을 가로채서 세팅한 응답값을 리턴해보겠다여러 서버에 대한 임의의 응답값을 리턴해줄 수 있지만 일단은 1개의 endpoint에 대한 과정을 정리하겠다.handlers안

mock-apollo-client 사용하기 지난 시간에 이어서 이번엔 msw 라이브러리를 사용해서 Mocking을 해보려 한다. 배경 mock-apollo-client의 기술검증을 해보고 있던 중 모킹할 쿼리문에 일일이 mockclient를 생성해서 넣어줘야 하는

컴포넌트 props로 값을 넘길때 props명과 변수,함수명이 동일하다면 구조분해할당을 이용해서 넘겼다. 그런데 PR리뷰어가 구조분해할당으로 넘기면 props에 없는 변수를 넘겨도 에러가 뜨지 않으니 삭제를 요구했다.왜 안뜨지????🧐 그래서 관련 개념들을 찾아보다

팀원 중 한명이 controlled컴포넌트라는 단어를 언급한 적이 있었는데 해당 단어에 대해서 제대로 알지 못해서 이번기회에 공부해보았다.먼저 Form에 대해서 간략한 설명을 하겠다. Form에 대해서 설명한 이유는 제어,비제어 컴포넌트에 관한 설명을 하기 위해서 필요

TOAST UI글을 읽다가 Object.freeze()라는 함수를 보게 되었다. 처음 본 함수였는데 단어가 freeze?얼린다? 무엇을 얼린다는 건지 궁금해서 찾아보다가 생각보다 우리 프로젝트에 유용하다고 생각이 들어 적용까지 시켜봤다.이 함수의 기능은 이름자체에서 힌

동일한 depth에 있는 자식요소가 2개이상일때 부모요소가 이를 감싸주지 않으면 에러가 뜬다.처음엔 div로 감싸서 해결했는데 나중에 빈 요소 <> Fragment를 사용해도 된다 라는 피드백을 받았다.뭐가 다른거지 싶어서 찾아보게 되었다.React에서 JSX는

배경 코드 컨벤션에 넣을 내용이 있을까를 고민하던 중 예전에 팀원이 type전용 import,export를 사용하는걸 강제하는게 어떻겠냐고 말했었다. 당시 근거로는 단순히 type을 import,export한거를 직관적으로 알 수 있다는 점외에는 이렇다할 장점이 없었