분류 전체보기 (19) 썸네일형 리스트형 스토리북 인터렉션 테스트는 왜 이렇게 잘 깨질까? 세줄 요약테스트를 한꺼번에 돌리면 깨진다.전체 테스트와 개별 테스트의 차이를 이해하고, 스토리 간 독립성을 보장했다.테스트결과가 파랗게 물들었다! 동기TDD를 도입했습니다. 그런데 전체 테스트를 돌리면 자꾸 깨져서 수시로 테스트를 돌릴 수가 없었습니다.그래서 문제가 발생시 빠르게 확인하는 이점을 얻을 수가 없었습니다. 저는 스토리북으로 UI를 만들고 컴포넌트 테스트를 작성합니다.그동안 개별 테스트를 통과시키고 컴포넌트 명세의 용도로 사용하고 있었는데, 사실 테스트 코드를 쓰는 본질은 그게 아니라고 생각합니다. 지금은 마치 맥북을 사놓고 인터넷과 유튜브만 하는 느낌이랄까요..?테스트 코드를 통해 기존 기능과 관련된 기능을 개발한다던지 수정한다던지 리팩토링을 진행할 때기존 테스트가 깨지지않는지 수시로 체크하.. React 개발자가 구글 oAuth를 이해하기 3년 전, NextAuth를 이용해서 구글 로그인을 처리한 적이 있습니다. 그 당시 oAuth를 이해했다고 생각했는데, 이번에 애플과 구글로그인을 클라이언트 사이드에서 구현하면서 어려움을 겪었습니다. 사실 NextAuth가 code 발급과 token, 그리고 JWT를 관리해 줘서 내부에서 어떤 일이 일어나는지 자세히 알지 못했습니다.서비스의 백엔드 서버에서 토큰을 발급받고, 모바일도 함께 처리하다보니 Access Token과 Refresh Token을 클라이언트에서 관리해야 했습니다. 이걸 어떻게 처리해야 할지 몰라 한동안 헤맸습니다. 이번 기회에 클라이언트에서 토큰을 활용한 로그인 관리와 구글 서버, 프론트엔드, 백엔드 각자의 역할과 토큰들을 정리해 보았습니다. oAuth 시스템이 잘 이해가지 않을 때.. 다중 포인터 문제다중 포인터 - averagePairaveragePair라는 함수를 작성합니다. 정렬된 정수 배열과 목표 평균이 주어졌을 때, 배열에 쌍의 평균이 목표 평균과 같은 값의 쌍이 있는지 확인합니다. 목표 평균과 일치하는 쌍이 두 개 이상 있을 수 있습니다. 보너스 제약조건:Time: O(N)Space: O(1) 예시 인풋:averagePair([1,2,3],2.5) // trueaveragePair([1,3,3,5,6,7,10,12,19],8) // trueaveragePair([-1,0,3,4,5,6], 4.1) // falseaveragePair([],4) // false 문제 이해하기Q) 쌍의 평균이 목표 평균과 같은게 존재하는지 찾아내기input) [number], numberoutput) bo.. 빈도수 세기 문제빈도수 세기- validAnagram두 개의 문자열이 주어졌을 때, 두 번째 문자열이 첫 번째 문자열의 애너그램인지 확인하는 함수를 작성합니다. 애너그램은 다른 글자의 글자를 재배열하여 형성된 단어, 구 또는 이름입니다. (예시: cinema -> iceman)예시:validAnagram('', '') // truevalidAnagram('aaz', 'zza') // falsevalidAnagram('anagram', 'nagaram') // truevalidAnagram("rat","car") // false) // falsevalidAnagram('awesome', 'awesom') // falsevalidAnagram('amanaplanacanalpanama', 'acanalmanplanpama.. React 렌더링 (feat. Reconciliation & Fiber 동작) 리액트 디자인 원칙에서 스케줄링의 내용은 다음과 같습니다.If something is offscreen, we can delay any logic related to it. If data is arriving faster than the frame rate, we can coalesce and batch updates. We can prioritize work coming from user interactions (such as an animation caused by a button click) over less important background work (such as rendering new content just loaded from the network) to avoid dropping fr.. RSC가 비동기 함수를 관리하는 방법 (feat. Observer Pattern) 옵저버 패턴 (Observer Pattern)비유하면, 구독하는 유튜버의 새 유튜브 콘텐츠 알림을 받는 것과 같습니다. 즉, 객체의 상태(유튜버 콘텐츠)를 지켜보고 싶은 관찰자(구독자)들에게 상태 변화(새 콘텐츠)를 알려주는 디자인 패턴이라고 할 수 있습니다. 이 패턴의 핵심은 관찰자들을 등록시키고, 이벤트가 발생하면 변화됨을 통지하는 거죠. 관찰자들은 변화가 일어났는지 직접 확인할 필요가 없고, 변화에 따른 적절한 행동만 수행하면 됩니다. 이는 update 메서드를 정의하여 이벤트 발생 시 동작되도록 합니다. 그럼 이 패턴을 어디에 적용하면 좋을까요?첫 번째로 (사용자에 이벤트 등) 외부에서 발생한 이벤트에 대해 대응하거나,두 번째로 객체의 속성 값이 변화할 때 사용할 수 있습니다. 자, 그럼 첫 번째.. [Next.js] 라우팅과 네비게이션의 동작 라우팅과 네비게이션 동작을 이해하는데 도움이 되고자 How Routing and Navigation Works 내용을 더 상세하게 정리했습니다. 1. 코드 분할 (code splitting) 유저가 페이지에 접속하면 최초 경로에 대한 분할된 코드만 응답합니다. 이게 가능한 이유는 Next.js 서버가 각 경로마다 코드를 별도의 청크로 코드 분할하기 때문입니다. 후속으로 경로를 탐색해도 새로 탐색한 경로에 대한 코드만 가져오게 됩니다. 따라서 요청에 따른 응답 데이터양과 전송 시간이 줄어듭니다. 2. 미리 가져오기 (prefetching) 유저가 링크로 된 경로로 이동하기 전에, Next.js는 코드를 미리 로드합니다. Link 컴포넌트의 prefetch를 설정하면, 위 이미지와 같이 사용자의 뷰포트.. React Server Components 딥 다이브 누군가 RSC가 무엇이냐?라 묻는 질문에 대한 답을 한 번 생각해 봤습니다.그에 대한 저의 대답은 "RSC는 서버에서 렌더링 되는 새로운 컴포넌트로, 빌드 시 JSX 트리를 구성하여 HTML을 산출한다."입니다. 어떻게 이렇게 대답할 수 있을까요? 자, 우선 RSC가 일반적인 리액트 컴포넌트와 어떻게 다른지 보겠습니다. 아래는 일반적인 컴포넌트와 서버 API입니다.클라이언트가 요청을 보내면, 서버는 db에서 데이터를 찾아서 응답합니다. 클라이언트는 이 데이터를 받아서 렌더링하죠.// bundle.jsfunction Note({id}) { const [note, setNote] = useState(''); // NOTE: loads *after* first render. useEffect(() =>.. CSR부터 RSC까지 렌더링 방식의 변화 Next.js의 서버 컴포넌트와 서버 액션을 보면서 관련된 개념들이 헷갈렸습니다.그래서 그 흐름을 정리하고, 각각의 렌더링을 비교해 보겠습니다. CSR(SPA) - 2013CSR은 브라우저에서 코드를 사용자 인터페이스로 변환하는 렌더링 방법입니다렌더링 순서클라이언트가 요청합니다.서버가 빈 HTML을 응답으로 보냅니다.클라이언트가 JS 코드를 로드합니다.클라이언트는 HTML을 생성하고, 하이드레이션 하면서 상호작용이 가능한 UI를 만듭니다.💡 하이드레이션 (hydration)비유하자면, 말라비틀어진 HTML에 상호작용이 가능하게 물을 주는 것과 같습니다.구성 요소를 렌더링 하고 이벤트 핸들러를 연결합니다.약점SEO에 적합하지 않습니다. 크롤러가 인덱싱 하기에 번들 사이즈가 크고 다운로드 속도가 느립니다.. Storybook으로 시각적 요소 테스트하기 최근 TDD를 지향하면서 단위 테스트코드를 많이 짰습니다.기능 테스트는 Jest로 큰 무리가 없었는데, UI 테스트 코드를 짤 때는 시각적으로 확인할 수 없어 답답함과 불안함이 있었습니다.UI 테스트를 어떻게 진행할지 엄두가 안 났습니다. 꼼꼼하게 하자니 생산성이 바닥을 기어갈게 뻔했고, 그렇다고 대충 하거나 안 할 수도 없는 노릇이었습니다. 레이아웃이나 색이 변경되는 걸 어떻게 테스트할 수 있을까요? 그러던 차에 NHN FE개발랩의 김동우님이 발표하신 '실용적인 프런트엔드 테스팅 전략' 유튜브 영상을 봤고, Storybook을 한번 써보기로 했습니다. 시각적 요소 테스트먼저 UI 테스트 요소에는 '시각적 요소', '구성 요소', '상호작용', '접근성', '유저 플로우'가 있습니다.이번에는 소개해 .. 이전 1 2 다음 목록 더보기
