어제보다 더 나은 오늘

1. React.Fragment () 추가 HTML 요소 없이 여러 요소를 함께 렌더링하려는 경우에 사용한다. react legacy docs의 JSX in Depth 파트를 보면 JSX는 React.createElement의 syntatic sugar임을 상기해 보면 왜 그루핑이 필요한 지 알 수 있다. import React from 'react'; import CustomButton from './CustomButton'; function WarningButton() { // return React.createElement(CustomButton, {color: 'red'}, null); return ; } // node_modules/@types/react/index.d.ts function cr..

딱 1년 전 이맘때 부트캠프 파이널 프로젝트를 마친 후 회고를 작성하면서 아쉬운 점으로 "무한스크롤도 써보고 싶었던 ui인데 시간 문제로 도입하지 못했다"고 꼽은 적이 있다. 그리고 그로부터 약 10개월 뒤 무한 스크롤을 원없이 사용하게 된다 😇 지난달 다른 팀원이 맡았던 파트를 인계 받았는데 그 중 메인 feature가 무한 스크롤이었다. 인계 받을 당시 프로젝트의 가장 큰 이슈는 다음과 같았다. 1. 스크롤을 위아래로 이동함에 따라 nextPage와 previousPage를 fetch하고, 서버에서 응답으로 받은 데이터를 UI를 그리는데 사용하는 배열 안에 순서에 맞게 삽입하는 게 때때로 올바르게 동작하지 않고 있었다. 가령 [... 6, 7, 8, ...] 페이지가 렌더링되어야 하는데, [... 7..

📍 문제가 발생한 상황 ant design 라이브러리를 사용한 프로젝트에서 Modal 컴포넌트의 modal open 관련 로직을 별도의 ui 컴포넌트로 작성해 사용하는 쪽에서는 관련 로직에 대한 상태 없이도 사용할 수 있게 설계하고자 했다. 처음에 생각한 코드는 다음과 같다. import { Modal as AntdModal } from 'antd'; function Modal({ title, children, ...rest }) { const [isOpen, setIsOpen] = useState(false); return ( setIsOpen(false)} {...rest}> {children} ); } 이렇게 선언한 컴포넌트를 사용부에서는 다음과 같이 호출한다. centered나 width 같은 스..

기술 과제를 진행하면서 styled-components를 사용해 공통 ui 컴포넌트를 만들던 중 input 입력란의 텍스트 정렬을 다르게 가져가야 할 필요가 생겼다. 아래의 화면 이미지와 같이 우편번호 input은 중앙정렬, 그 외에 input은 일반적인 좌측 정렬로 화면 디자인이 구성되어 있었다. 이를 위해 input ui 컴포넌트에서 prop으로 textAlign 값을 줘서 제어하려고 시도했다. // 공통 ui 컴포넌트 선언부 export const Input = styled.input` box-sizing: border-box; width: ${(props) => props.width || 'inherit'}; height: 40px; padding: 9px 13px; border: 1px soli..

들어가기에 앞서 프로젝트 폴더 구조를 설계하면서 많은 도움을 받았던 아티클을 공유하고자 합니다. Folder Structuring Techniques for Beginner to Advanced React Projects를 번역한 포스팅임을 밝힙니다. 번역에 오류가 있는 경우 댓글로 알려주시면 감사하겠습니다. React는 코드 작성과 구조에 관해서 정해진 통념이 없는 엄청나게 유연한 라이브러리다. 하지만 어떤 규칙도 없기 때문에 React로 프로젝트를 만들 때 이 유연성이라는 특성으로 인해 프로젝트 구조를 설계하는 작업 자체가 도전 과제가 된다. 이 글에서는 모든 규모의 프로젝트에 적용할 수 있는 세 가지 폴더 구조를 다룰 것이다. 가장 간단한 폴더 구조에서 시작해서 가장 복잡한 구조 순서로 소개할 것이..

TMDB API를 통해 영화 데이터를 받아와 무한 스크롤을 구현해 보았다. 먼저 고전적인 스크롤 이벤트를 사용하는 방식으로 구현해 본 후, Intersection Observer API를 사용하는 방식으로 리팩토링했다. - GitHub 레포: https://github.com/Ah-ae/infinite-scroll - 배포 링크: https://infinite-scroll-practice.vercel.app 구현 화면 영상 1. 스크롤 감지 방식 핵심은 다음과 같다. 1) window.scrollY로 스크롤 위치를 기억한 다음, window.scrollTo() 메소드를 사용해 해당 위치로 보내주기 2) 스크롤이 바닥에 닿았는지를 판별해 바닥에 닿았다면 다음 데이터를 fetch하기 3) scroll 이벤트..

Frontend Mentor | Expenses chart component coding challenge In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose. www.frontendmentor.io 💡 기능 구현 목표: - Bar 차트를 보고 개별 Bar 위로 마우스를 가져가면 일별 정확한 금액을 볼 수 있습니다. - 오늘 요일의 Bar는 다른 요일의 Bar와 색상이 다릅니다. - 기기의 화면 크기에 따라 콘텐츠에 대한 최적의 레이아웃을 작성합니다. (데스크탑/모바일) - hove..

React docs의 beta 버전이 정식으로 풀렸다. 기존 reactjs.org를 주소창에 입력하면 바로 새 주소인 react.dev로 이동하지만, https://legacy.reactjs.org/ 로 예전 사이트를 여전히 볼 수 있다. 새로운 react 사이트는 아직 다국어 버전을 지원하지 않기에 한국어로 편하게 볼 수 있는 legacy react 사이트를 종종 방문할 일이 있을지도 모르겠다. React The library for web and native user interfaces react.dev 새로운 리액트 사이트를 둘러보다가 새 프로젝트 시작하기 페이지를 보고 깜짝 놀랐다. 리액트에서 소개하는 리액트 프로젝트를 시작하는 터미널 명령어가 다음의 네 가지다. - Next.js : npx cr..

프로젝트를 진행하면서 공통 UI 컴포넌트를 제작해서 사용했고, 그 중 대표적인 UI 컴포넌트가 버튼이었다. 먼저 프로젝트 진행 과정 중 버튼 컴포넌트의 변천사를 간단하게 정리한 다음, 프로젝트가 끝난 후 새로 알게 된 스타일 컴포넌트의 theming 기능을 적용해 보는 과정까지 기록하고자 한다. 1. styled-components로만 만든 버튼 프론트 팀원 중에서 한 분이 공통 ui 컴포넌트 제작을 맡아주셨다. 처음 만든 공통 ui 버튼 컴포넌트는 활성화/비활성화 느낌으로 두 종류의 다른 색상의 버튼을 컴포넌트명을 달리 해서 사용하는 방식이었다. 이후 다음의 두 가지 이유에서 해당 컴포넌트의 리팩토링 필요성을 느꼈다. 기본 파란색 버튼과 회색 버튼이 아닌 다른 색상의 버튼이 필요해졌다. (카카오톡 로그..

1편과 2편에 이어 최종편으로 마무리해보려 한다. 프로젝트를 하면서 만난 에러 모음 및 회고는 언제 포스팅할 수 있으려나..🥲 1. 비밀번호 유효성 검사 필요한 유효성 검사: 최소 8자, 하나 이상의 문자와 하나의 숫자 // 8~20 글자 let regExp = /^[a-zA-Z0-9]{8,20}$/ // 8 글자만 검사 통과 let regExp = /^[a-zA-Z0-9]{8}$/ // 8 글자 이상 let regExp = /^[a-zA-Z0-9]{8,}$/ 🔽 최종적으로 작성한 checkPassword 함수 2. request header의 Authorization 인증 토큰을 서버에 보낼 때 요청 헤더의 authorization에 실어서 보냈다. 여러 곳에서 post 요청을 보내야 했기에 먼저 다음..