프론트엔드

이번에 진행하는 프로젝트에서 Atomic Design 패턴을 적용하기로 했다.내가 아닌 팀장님이 먼저 Atomic Design을 도입하는 것에 대해서 이야기를 꺼내주었는데 나 역시 이번 프로젝트에 이 패턴을 도입해보고 싶었다.그 이유는 이전 프로젝트를 진행할 때 기능별

이번에 Atomic Design을 프로젝트에 적용하면서, 어떻게 공통 컴포넌트를 설계할지 고민을 많이 해본 것 같습니다.그렇지만 컴포넌트를 "어떻게 분리할지"에 대해서는 고민을 많이 못해봤던 것 같습니다.프로젝트를 진행하면서, 한 페이지에 수많은 data fetch 로

함수가 어떤 동작을 할 때 입력으로 인한 출력 외의 다른 값을 조작한다면 이 함수에는 Side Effect가 있다고 표현한다. 예를 들면 Side Effect에는 데이터 가져오기, 구독 설정하기, 수동으로 React의 DOM을 조작하기 등이 있다.React의 경우, 이

useRef란 렌더링에 필요하지 않은 값을 참조할 수 있는 React의 훅이다.일반적인 변수의 경우 리렌더링이 일어날 때마다 초기화가 이루어지는 것과 달리, ref의 경우에는 리렌더링 사이에 정보를 저장할 수 있다.useRef(initialValue)initialVa

참고로, \[10분 테코톡] 웨디의 프론트엔드에서의 에러 처리 영상의 아이디어를 많이 참고하였습니다.서버에서 클라이언트 에러든, 서버 에러든 인지할 수 있는 에러가 발생했다면 errorCode를 함께 보내주는데 이 경우를 판별하기 위한 커스텀 에러를 구현했다.만약 서버

처음으로 프로젝트를 진행하며 웹 접근성을 고려해 보았다. 화면을 볼 수 없는 경우에, 사용자에게 현재 어떤 페이지에 존재하는지 또 어떤 요소에 focus를 두고 있는지 음성으로 알려줄 수 있도록 구현하였다.스크린 리더 테스트를 할 때에는 Chrome의 Screen Re