전체 글50 Firebase + Chat 웹 트러블슈팅 회원가입 후 자동으로 로그인이되면서 (firebase는 회원가입 시 바로 로그인이된다.)바로 채팅화면으로 넘어갈 시, 프로필 이미지랑 닉네임이 뜨지 않는 문제가 있었다. 회원가입이나 로그인을 하고 인증된 사용자가 존재하면채팅 페이지로 넘어가도록 구현하기로 생각했다. 회원가입, 로그인 컴포넌트는 따로 있고useAuth 훅을 만들어서 전체 컴포넌트를 감싸는 부모 컴포넌트인Layout 컴포넌트에 훅이 실행되도록 작성했다. 콘솔을 찍었을 때 user의 uid는 출력이되는데 프로필 이미지와 닉네임이 전혀 찍히지 않았다.useAuth 훅에서도 일단 user가 있으니까 인증된 사용자를 감지하고 채팅 페이지로 넘어가긴했지만프로필 이미지와 닉네임은 null값이어서 화면에 표시되지 않았다. 문제는 회원가입 로직에 있.. 2024. 7. 1. Absolute로 지정된 요소의 부모는 Relative - CSS 레이아웃 이해하기 웹 개발을 하다 보면 다양한 CSS 속성을 사용해 요소를 배치하게 됩니다.그 중에서도 position 속성은 레이아웃을 조정하는 데 매우 중요한 역할을 합니다.이번 글에서는 absolute로 지정된 요소와 그 부모 요소가 relative일 때 어떻게 동작하는지에 대해 알아보겠습니다. Absolute와 Relative의 차이먼저 position 속성의 기본적인 개념을 살펴보겠습니다.relative: 요소 자신을 기준으로 위치를 조정합니다. 즉, 원래 위치를 기준으로 top, right, bottom, left 값을 이용해 이동할 수 있습니다.absolute: 가장 가까운 relative, fixed, sticky 속성이 적용된 조상 요소를 기준으로 위치가 결정됩니다. 만약 그런 조상 요소가 없다면 init.. 2024. 6. 19. Github 으로 협업하기 저는 혼자서 주로 개발공부를 했어서그냥 github에 프로젝트 올리는 것은 엄청 쉽지만병합하고 브랜치를 이동하고 pull 받고 하는건 익숙치 않았습니다. 이번 기회에 블로그에 정리를 하려고 합니다. Git에서 팀원이 올린 pull request를 merge하여 최신 코드로 업데이트된 dev 브랜치의 코드를자신의 feature 브랜치에 합치는 절차는 다음과 같습니다.이 과정에서 병합 충돌이 발생할 수도 있으며, 이 경우 직접 해결해야 합니다. 1. 로컬 저장소에 dev 브랜치의 최신 코드 가져오기: 먼저, 현재 작업 중인 브랜치에서 변경 사항이 있는지 확인하고 커밋을 저장합니다. 그런 다음 dev 브랜치로 전환하여 최신 코드를 가져옵니다.# 현재 feature 브랜치에 있는 변경 사항을 커밋 (아직 커밋.. 2024. 6. 18. React에서 Link 태그와 useNavigate 훅의 차이점 리액트에서 네비게이션을 구현할 때 많이 사용하는 방법으로 Link 태그와 useNavigate 훅이 있습니다. 이 두 가지 방법은 모두 페이지 간의 이동을 가능하게 하지만, 그 사용 방법과 용도가 약간 다릅니다. 이번 글에서는 Link 태그와 useNavigate 훅의 차이점에 대해 간단한 예제와 함께 설명해 보겠습니다. Link 태그Link 태그는 리액트 라우터에서 제공하는 컴포넌트로, 사용자에게 클릭 가능한 링크를 제공합니다. HTML의 태그와 유사하게 작동하지만, 전체 페이지의 리로드 없이 클라이언트 사이드 네비게이션을 구현할 수 있습니다.import React from 'react';import { BrowserRouter as Router, Route, Routes, Link } from 'r.. 2024. 6. 17. 클라이언트 상태관리 vs 서버 상태관리: 로그인/회원가입 및 지출 관리 시스템 구현 회고 최근에 진행한 '개인 지출 관리' 프로젝트에서 탠스택쿼리(TanStack Query)를 활용해회원가입/로그인 기능과 지출 관리 기능을 구현했습니다. 프로젝트를 하면서 드는 의문점은인증/인가, 데이터 CRUD를 탠스택 쿼리를 쓰면서 서버에서 상태를 관리하게 되었고그럼 현재 프로젝트에서 굳이 리덕스를 써서 클라이언트 상태관리를 할 필요가 없겠네? 였습니다. 굳이 클라이언트 상태 관리할게 있다면 사용자의 로그인상태나, 사용자의 정보 정도...?근데 탠스택 쿼리로 기능 구현이 충분히되는데 리덕스로 같은 작업을 2번이나 할 필요가 있을지 의문이 들었습니다. 진지하게 의문을 갖고 튜터님께 찾아가 위의 내용에 대해 질문을 드렸습니다. 돌아온 튜터님의 말씀은,"사실 현재 프로젝트에서는 크게 클라이언트 상태관리가 중요하.. 2024. 6. 14. Zustand Zustand는 경량 상태 관리 라이브러리로, React 애플리케이션에서 쉽게 상태를 관리할 수 있도록 도와줍니다.Redux와 같은 다른 상태 관리 라이브러리와 비교했을 때,API가 간단하고 보일러플레이트 코드가 적다는 장점이 있습니다. Zustand 설치하기먼저, Zustand를 프로젝트에 설치합니다.npm install zustand 또는 Yarn을 사용하는 경우yarn add zustand Zustand 기본 사용법Zustand는 상태 저장소를 생성하는 함수를 제공합니다. 이 함수는 상태와 상태를 업데이트하는 방법을 정의합니다. 1. 상태 저장소 생성하기import create from 'zustand'const useStore = create(set => ({ count: 0, increase.. 2024. 6. 13. React에서 API 호출하기: Axios를 활용한 예제 React 애플리케이션에서 백엔드 서버와의 통신은 자주 발생합니다.React 애플리케이션에서 API를 호출하는 방법에 대해 알아보겠습니다.우리는 Axios 라이브러리를 사용하여 백엔드 서버에 HTTP 요청을 보내고 응답을 처리할 것입니다. Axios 소개Axios는 JavaScript 및 TypeScript를 위한 강력한 HTTP 클라이언트 라이브러리입니다. 우리는 이 라이브러리를 사용하여 간편하게 서버에 요청을 보내고 응답을 처리할 수 있습니다.yarn add axios 예제: React 애플리케이션에서 Axios 사용하기아래의 예제를 통해 Axios를 사용하여 React 애플리케이션에서 서버 API를 호출하는 방법을 살펴볼 것입니다.import React, { useState } from 'react.. 2024. 6. 12. TanStack Query를 사용한 서버 상태 관리 React 애플리케이션에서 서버 상태를 관리하는 것은 복잡한 작업일 수 있습니다.이를 간단하고 효율적으로 처리하기 위해 TanStack Query(이전의 React Query)를 사용할 수 있습니다.이 글에서는 TanStack Query의 기본 개념과 사용 예제를 통해 서버 상태 관리를 쉽게 하는 방법을 설명하겠습니다. TanStack Query란?TanStack Query는 서버 상태를 효율적으로 관리할 수 있도록 도와주는 React 라이브러리입니다. 서버에서 데이터를 가져오고, 캐시하고, 업데이트하는 등의 작업을 자동화하여 개발자가 서버와 클라이언트 간의 데이터 동기화 문제를 쉽게 해결할 수 있습니다. TanStack Query의 주요 기능데이터 페칭과 캐싱: 서버에서 데이터를 가져오고, 이를 클라이.. 2024. 6. 11. JSON Server와 Axios를 사용한 간단한 RESTful API 구현 JSON Server와 Axios를 사용하면 몇 분 만에 완벽한 API를 구축하고 데이터를 조작할 수 있습니다.JSON Server로 API를 설정하고 Axios로 데이터를 가져오고 조작하는 방법을 단계별로 설명해보겠습니다.1. JSON Server 설치 및 설정JSON Server는 JSON 파일을 기반으로 가상의 REST API를 생성해주는 도구입니다. 이를 통해 백엔드 없이 프론트엔드 개발을 빠르게 시작할 수 있습니다. Step 1: JSON Server 설치먼저, JSON Server를 설치합니다.yarn add json-server Step 2: 데이터 파일 생성JSON Server가 읽을 수 있는 db.json 파일을 생성합니다. 이 파일에 초기 데이터를 넣어줍니다.{ "posts": [ .. 2024. 6. 10. 이전 1 2 3 4 5 6 다음
