이번 프로젝트 회원가입은 일반 그리고 구글 로그인 이렇게 두가지를 구현해야했다.구글 로그인 구현을 위해 파이어베이스를 이용하는 방식을 선택하였다.Firebase란 Backend-as-a-Service(Baas) 방식의 서비스로, 백엔드에서의 여러 도구들과 기능을 제공해준다.그럼 파이어베이스를 이용하여 소셜 로그인을 적용하는 방법에 대해 알아보자.Firebase 프로젝트 생성처음에는 파이어베이스에서 프로젝트를 생성 후 firebaseConfig를 발급받는다.블로그 참고Firebase Authentication 세팅하기작업할 프로젝트로 와서 firebase를 설치한다.npm install firebaseyarn add fireabse그 후 src > firebaseApp.ts 파일을 만들고 이전에 발급받은 ..

이전 포스트에서 유효성 검사를 구현하는 방법을 다루었다. 이번에는 폼의 입력값이 올바르게 입력되었을 때만 제출 버튼을 활성화 하는 방법에 대해 살펴보자.1. 버튼 비활성화 상태 관리useState를 사용하여 버튼의 활성화 상태를 관리한다. 기본으로 버튼은 비활성화되어있다.const [isDisabled, setIsDisabled] = useState(true);2. 유효성 검사 결과에 따른 버튼 활성화useEffect를 사용하여 입력값과 에러 메시지의 상태 변화를 감지하고, 모든 입력 필드가 유효한 경우에만 버튼을 활성화한다. 이를 위해, 입력값이 비어 있지 않고, 모든 에러 메시지가 빈 문자열인 경우 버튼을 활성화하도록 설정한다.useEffect(() => { const isFormValid = ..

유효성 검사를 구현하면 사용자가 올바른 데이터를 입력하도록 유도하고, 잘못된 데이터가 서버에 전달되는 것을 방지할 수 있다. 그래서 이번 프로젝트에서 회원가입 페이지를 구현하면서 유효성 검사 기능을 구현하였다.그 과정을 살펴보자.1. 상태 초기화 및 핸들러 설정먼저, useState를 사용하여 폼 데이터와 에러 메세지를 관리한다. 또한 handleChange 함수를 통해 입력값이 변경될 때마다 호출되어 상태를 업데이트하고 유효성 검사를 수행한다.// 입력된 값을 저장const [value, setValue] = useState({ email: "", password: "", nickname: "",});// 유효성 검사 결과를 저장const [errors, setErrors] = useState({..

문제이번 프로젝트에서 user 정보를 관리하기 위해 recoil 전역상태관리 라이브러리를 사용하였다.recoil를 사용하여 user 정보를 프로필페이지에서 볼 수 있었는데 새로고침시 값이 초기화되는 문제가 있었다. 문제 화면문제가 발생한 원인은 다음과 같았다.recoil로 관리하는 상태는 클라이언트 사이드에서만 유지되므로, 페이지를 새로고침하면 서버 측에서 초기 상태를 가져와서 다시 렌더링하기 때문에 recoil 상태가 초기화된다.쉽게 말해, 새로고침 시에 페리지가 렌더링 되면서 recoil 상태도 같이 초기화 된다는 말이다.해결 방법이를 해결하는 방법은 관련 라이브러리 recoil-persist 라이브러리를 사용하여 storage에 저장하는 것이다.이는 storage에 저장하여 새로고침에도 기존에 있던..

무한 스크롤웹 페이지나 애플리케이션에서 사용자가 스크롤할 때마다 새로운 콘텐츠를 계속해서 불러오는 방식을 말한다.사용자가 페이지의 끝에 도달하면 자동으로 다음 콘텐츠를 로드하여 화면에 추가하는 방식으로, 페이지를 새로고침하거나 추가적인 페이지로 이동할 필요 없이 연속적인 스크롤을 통해 콘텐츠를 볼 수 있다.React-Intersection-Observer이란?React-Intersection-Observer는 React 를 위한 라이브러리로, 웹 페이지의 특정 요소가 사용자의 Viewport(화면) 내에 들어오는지를 감지하는 기능을 제공한다.이 라이브러리는 브라우저의 기본 API인 Intersection Observer API를 기반으로 하여, React 컴포넌트에서 쉽게 사용할 수 있도록 만들어졌다.G..

시작하기 앞서이번에 당근 마켓이 리브랜딩 되면서 로고의 색상이 바뀌었다. 만약 hex값을 그대로 사용하였다면 수정하는데 일일이 수정해야하는 번거로움이 있을 것이다.이와 같이 이번에 진행하는 프로젝트에서는 프로젝트의 테마 후보가 2개가 있었다. 우린 퍼블리싱을 먼저 진행 후에 더 잘 어울리는 테마를 적용하기로 하였는데 만약 테마 색상을 디자인 시스템으로 만들지 않는다면 해당 색상이 사용되는 곳을 찾아가며서 바꿔야 하는 번거로움이 생기기 때문에 디자인 토큰을 이용한 디자인 시스템을 미리 세팅하기로 하였다.디자인 토큰은 디자인 시스템의 시각적 원자(atom)이며, 특히 시각적 디자인 속성을 저장하는 실체로 정의한다. 확장 가능하고 일관된 시스템을 유지하기 위해 하드 코딩된 값 대신 이 값(디자인 토큰)을 사용..

문제앞서 웹 성능 최적화 파트에 이어서 웹툰 목록을 조회하는 기능을 구현하던 중 많은 데이터 목록을 한 번에 불러와 렌더링 속도가 느려지는 현상이 있었다. 해결 전영상에서 보면 한번에 이미지가 많이 불러와 지는 것을 볼 수 있다.이를 해결하기 위해서 초기 화면에 보여지는 만큼의 목록만 불러오고, 사용자가 스크롤을 내릴 때 추가 이미지를 불러오는 방식을 적용했다. 이 과정에서 IntersectionObserver를 사용한 Lazy Loading을 도입하여 성능을 최적화 할 수 있었다. IntersectionObserver이란?요소가 뷰포트(Viewport) 내에서 보이는지 여부를 비동기적으로 관찰할 수 있는 API이다. 스크롤 이벤트를 직접 다루지 않고도 특정 요소가 화면에 들어오거나 나가는 시점을 쉽게 ..

문제웹툰 목록 조회 기능을 구현하는데 총 웹툰 개수(total)이 2942개는 되지만 한 번에 30개씩만 받아와지면서 데이터를 전부를 불러오지 못하는 일이 발생했다. 원인이 문제의 원인은 페이지네이션때문이였다. Swagger를 보니 query parameter로 page(페이지 번호), perPage(페이지당 항목 수)를 받을 수 있게 해주었는데 아마 API가 한 번에 많은 데이터를 제공하면 성능에 부담을 주기 때문에 데이터를 페이지로 나누어서 제공해준 거 같았다.useEffect(() => { const fetchFilteredWebtoons = async () => { setLoading(true); try { const apiURL = `${process.env.REACT_AP..

문제웹 사이트이 성능은 사용자 경험에 큰 영향을 미치는다. 특히 웹 페이지의 로딩 속도는 사용자 이탈률을 줄이고 SEO 성능을 향상시키는데 중요하다. 그런데 최근 작업한 프로젝트에서 페이지 로딩 속도가 느리다는 피드백을 받았다. 네트워크를 확인해보니 속도가 414ms였다.  PageSpeed Insights  사이트에 들어가서 확인해보니 웹 페이지의 가장 큰 문제는 1. 누적 레이아웃 이동(CLS) 2. 큰 이미지 파일로 인해 발생하는 로딩 지연이었다. 해결 방법문제를 해결하기 위해 세 가지 접근 방식을 사용했다.1. 이미지 최적화 : 이미지 파일의 크기를 줄이고, 필요한 경우에만 로드되도록 설정한다.2. 폰트 최적화 : 웹 폰트 로딩 시 발생하는 레이아웃 이동을 방지한다.3. 이미지 프리로딩 : 주요 ..

[실행 화면] [html 소스] The Best Colors Tomato #FF6347 Teal #008080 Burlywood #DEB887 Thistle #D7BFD7 [css 소스] body { height: 100vh; background-color:rgb(219, 217, 217); } h1 { text-align: center; margin-bottom: 50px; } .wrapper { width: 450px; margin: 0px auto; } .container { display: flex; justify-content: space-around; align-items: center; } .color { width: 200px; position: relative; margin-bottom:..