전체 글29 EventManager (EventBus) 패턴이란 EventManager(=EventBus) 패턴이란? EventManager는 간단하게 이벤트들을 관리하는 객체 입니다. EventManager에는 다음과 같이 3가지의 역할이 존재합니다. Event (이벤트): 이벤트들을 저장하는 이벤트 data 저장소 Publisher (발신자): 저장된 이벤트를 발생시키는 발신자 Subscriber (수신자): 이벤트가 발생시켰을 때 해당 이벤트를 수신하는 구독자 이러한 개념을 적용시켜서 javascript로 EventManager 객체를 만들면 아래와 같습니다. EventManager 객체 list(이벤트): 특정 key로 이벤트를 저장하는 Map 자료구조 emit(발신자): list 자료구조에 특정 key의 event가 존재하는지 확인하고 존재한다면 해당 이벤트.. 2023. 12. 23. React 18 useSyncExternalStore를 이용하여 전역 상태 구현하기 ex) recoil, zustand, jotai 들어가며 React 18에 새로 나온 useSyncExternalStore를 이용하여 recoil jotai, zustand 같은 전역 상태 라이브러리를 간단하게 만들어보는 작업을 하려고 한다. 먼저 useSyncExternalStore에 대해서 알아보자 useSyncExternalStore는 저장소(store)에 대한 업데이트를 강제 동기화하여 외부 저장소가 concurrent reading(동시 읽기)를 지원할 수 있도록 하는 hook이다. 쉽게 말해서, useSyncExternalStore hook은 react가 아닌 외부 저장소(ex, 바닐라 자바스크립트) 값을 읽어드리고 구독할 때 사용된다. 외부 저장소 값의 변화를 추적하고, 리액트의 동시성 상태 변화에 대응할 수 있다. useSyncExter.. 2023. 6. 3. Next.js + tanstack-query(react-query)로 server-side-rendering(ssr) 구현하기 들어가며 Next.js와 tanstack-query(react-query)를 이용해서 ssr을 구현해보려고 한다. Next.js를 이용하여 데이터를 서버에서 fetch 해서 렌더링을 했을 경우에 layout shift 현상이 없어지고, 초기 로드했을 때 데이터가 바로 보이기 때문에 ux적으로 개선이 된다. layout shift란 layout shift는 데이터가 뒤늦게 로드가 되어 빈화면이 발생하고, 화면에서 ui가 밀리는 현상을 의미한다. layout shift는 ui/ux 경험을 해치고 사용자가 페이지 콘텐츠에서 갑작스러운 이동을 경험하게 된다. 간단한 예시로는 화면에서 아무것도 보이지 않고, 데이터가 로드가 된 이후에 갑자기 데이터가 보이는 현상이 layout shift이다. 이러한 layout .. 2023. 6. 2. React 18 useDeferredValue와 useTransition 이란? 들어가며 React 18에서 concurrent rendering을 위해 새로 나온 useDeferredValue와 useTransition이 무엇인지 알아보자. 서비스에서 무거운 계산을 하는 로직이 실행되면 메인 스레드가 거기서 블록되기 때문에 다음 작업을 처리하지 못하게 된다. 극단적으로 매우 무거운 작업을 하게 될 때 다음 입력을 받지 못할 정도로 프레임이 저하되는 현상이 발생한다. 이럴 경우 유저와 상호작용이 불가능해지는 상태가 발생하고, 유저에게 좋은 경험을 제공하지 못하게 된다. 이 문제를 근본적으로 해결하기 위해서 React 팀에서는 사용자의 상호작용이 있으면 무거운 작업은 메인 스레드가 놀고 있을 때 처리하고, 유저 입력이 들어오면 다시 유저와의 상호작용에 집중하는 것이다. 즉 상태 변화의.. 2023. 5. 28. YAPP 동아리 공식 웹 개편 들어가며 지난 IT 동아리 YAPP 19기 활동 이후, 20기에 웹 파트 운영진으로 참여하게 됐다. 웹 운영진이 되고 처음으로 맡은 역할은 YAPP 공식 홈페이지를 개편하는 작업이다. 기존 YAPP 공식 홈페이지는 만들어진지도 오래되었고, 디자인적으로도 관리가 안되고 있는 것 같은 느낌이 들어서 이 참에 새롭게 개편하기로 하였다. 디자인 운영진 3분과 우리 웹 운영진 2명이 작업을 하였는데, 웹 개편 작업이 진행된 과정부터, YAPP 공식 이메일을 폭파시켰던 일까지 기록으로 남겨보려 한다. 기존 웹과 개편된 웹 개편된 웹은 https://www.yapp.co.kr/ 에서 모두 확인할 수 있다. 프로젝트 기간 19기 활동이 끝나고 22년 1월 24일부터 공식 웹 개편 프로젝트가 시작되었다. 20기 공식 모.. 2022. 4. 21. Typescript Utility Types 정리 들어가며 매번 Utility Types 관련해서 한 번 정리하려고 마음만 먹고 미뤘다가 드디어 오늘 정리 해보려고 한다. 더 자세한 내용을 보려면 공식문서를 참고하면 된다 Partial Partial은 Type의 들어가는 속성들을 전부 optional type으로 셋팅하고 반환한다. interface User { email: string; name: string; } type User2 = Partial /* User2의 타입은 { email?: string | undefined; name?: string | undefined; } * */ Required Required는 Type의 들어가는 속성들을 전부 필수 type으로 세팅하고 반환한다. Partial의 반대 효과이다. interface User .. 2022. 4. 20. React Testing Library를 이용한 Custom Hooks 테스팅 이번에는 React-Testing-Library를 이용해서 Custom Hooks를 테스팅해보겠다. Custom Hooks는 일반적인 함수처럼 테스트 코드를 작성할 수 없다. 그 이유는 Custom Hooks는 React에서 제공하는 Hooks(useState, useEffect...)를 이용한 함수이기 때문이다. 대표적인 Custom Hooks인 useToggle hooks 예시를 보면 다음과 같다. import { useCallback, useState } from "react"; export default function useToggle(initialState = false) { const [state, setState] = useState(initialState); const onToggle =.. 2022. 3. 28. React Testing Library(RTL) 사용법 React Testing Library는 Facebook에서 공식적으로 사용을 권장하는 리액트 테스트 도구이다. 이 라이브러리는 사용자가 컴포넌트를 사용하는 것처럼 테스트를 작성할 수 있도록 설계되어있다. React Testing Library는 기본적으로 cra로 react를 설치하면 같이 설치가 된다. 그럼 한번 사용법을 알아보자 초기 세팅 먼저, 새로운 React 프로젝트를 만들어보자. 이 포스팅에서는 타입스크립트를 이용했다. $ npx create-react-app react-testing --template typescript or $ yarn create react-app react-testing --template typescript 설치가 완료 되었으면 App.test.tsx 파일을 지워주.. 2022. 3. 28. [컴포넌트 재활용하기] - Button 오늘은 재활용 가능한 컴포넌트 중에 가장 많이 사용되는 Button을 만들어 보자. 개발 환경 - react 17.0.2 - typescript 4.4.2 - styled-component 5.3.3 1. styled-components를 적용한 기본적인 버튼 컴포넌트 생성 src/components/Button.tsx import React, { ReactElement } from "react"; import styled from "styled-components"; function Button(): ReactElement { return Button; } const ButtonStyled = styled.button``; export default Button; 우리는 여기서 고민을 해야 한다. 버튼.. 2022. 2. 19. 나는 리액트를 어떻게 설계할 것인가? 들어가며 나는 작년부터 지금까지 리액트를 이용해서 여러 프로젝트들을 했다. 리액트를 배운 지 얼마 안 됐을 때는 책에서 배운 대로, 인강에서 배운 대로만 따라 하느라 큰 고민을 하지 않았었다. 그러나 어느 정도 경험이 생기고, 여러 팀 프로젝트를 참여하면서 팀원들과 의견을 나누다 보니, 프로젝트를 시작할 때 어떤 리액트 패턴을 사용할지, 폴더구조는 어떻게 가져갈지에 대한 고민을 하게 되었다. 이런 고민을 하는 과정에서 배운 내용들을 토대로 포스팅을 작성해보려고 한다. ❓ 리액트 컴포넌트 패턴은 뭐가 있고 어떤걸 사용할까 리액트는 정말 자유로운 라이브러리 이기 때문에, 다양한 패턴들이 존재한다. 그중에서 어떤 방식을 사용할지는 개발자가 정하는 것이기 때문에, 우리는 새로운 프로젝트를 시작할 때 이런 고민을.. 2022. 2. 14. 원티드 프리온보딩 과제 - 견적 요청서 페이지 내가 맡은 역할 - figma 명세에 따라 반응형 디자인 구현 - 필터링 기능 구현 반응형 세팅 Breakpoints는 크게 PC(xlarge), Tablet(medium), Mobile(small)로 나누고, 중간 pc -> tablet으로 가는 과정 중에 필요한 사이즈인 1130px도 추가했다. enum Breakpoints { xlarge = 1440, large = 1130, medium = 748, small = 360, } export default Breakpoints; 방금 만든 Breakpoints를 기반으로 아래와 같이 mediaQuery 함수를 만들었다. import Breakpoints from "./breakpoints"; const mediaQuery = (maxWidth: nu.. 2022. 2. 12. IT 연합동아리 YAPP 19기 활동 후기 들어가며 작년 9월부터 진행했던 YAPP 동아리가 끝이 났다. 5개월이라는 시간 동안 진행이 되었는데, 되돌아보면 정말 많이 성장한 거 같다. 이번 포스팅에는 개발 관련된 내용보다는 Yapp 동아리가 어떤 식으로 진행되었고, 우리가 만들려고 했던 서비스를 어떻게 기획부터 개발까지 진행이 되었는지를 남겨보려고 한다..! YAPP 동아리 면접 후기 포스팅 보러 가기 첫 세션 두근두근 설레는 마음으로 첫 세션에 참여했다. 세션에서는 동아리 진행 일정과, 수료 조건에 대해서 설명을 해주시고, 배정된 팀에 대해서 발표를 해주셨다. 팀은 Android 2팀, iOS 2팀, Web 2팀 해서 총 6팀이 있었고 나는 그중에 Web2팀으로 배정되었다. 각 팀은 기획자 1명, 디자이너 1명 프론트 3명, 백앤드2명 해서 .. 2022. 2. 5. 이전 1 2 3 다음
