react7 API 에러 처리: 사용자 경험 향상을 위해서. 안녕하세요, 웹 YB 신지수입니다 ! 이번 과제에서 React와 TypeScript를 활용한 로그인/회원가입 기능을 구현하면서, API 통신 과정에서 발생하는 다양한 에러를 어떻게 효과적으로 처리할 수 있을지 고민했습니다. 에러는 불가피하게 발생하지만, 이를 어떻게 처리하느냐에 따라 사용자 경험이 크게 달라질 수 있다고 생각합니다. 이번 글에서는 제가 프로젝트에 적용한 API 에러 처리 전략과 그 과정에서 배운 점들을 공유하려고 합니다 ☺️ 🚨 API 에러, 왜 신경 써야 할까 ?API를 사용하다 보면 에러 상황은 피할 수 없습니다. 하지만 이때 단순히 "오류가 발생했습니다."라는 메시지를 보여주는 것과, 구체적인 원인과 해결 방법을 안내하는 것은 사용자 경험 측면에서 큰 차이를 만들어낸다고 생각합니다.. 2025. 5. 15. API 모듈화 - axios Instance 활용하기 안녕하세요 YB 박소이입니다.세미나 때 API 요청을 다뤘는데, axios 인스턴스를 활용해 API를 모듈화할 수 있는 방법이 있다고 해서 알아 보았습니다!보통은??useEffect(() => { const fetchUsers = async () => { try { const res = await axios.get(''); setUsers(res.data); } catch (err) { console.error(err); } }; fetchUsers();}, []); API 요청 다들 어떻게 하고 계신가요..??저는 보통 이런 식으로 컴포넌트 안에서 직접 요청하는 방법을 사용했습니다. 하지만 이렇게 하다 보니 컴포넌트마다 axios를 반복적으로 작성해야 하.. 2025. 5. 12. React 함수 및 컴포넌트 네이밍 규칙 — 개념부터 기업 실전까지 안녕하세요, 36기 YB 웹파트 최서희입니다.😀React 개발에서 함수와 컴포넌트 네이밍은 단순한 스타일 문제가 아닙니다. 가독성, 유지보수성, 협업 효율을 결정짓는 핵심 요소입니다. 그래서 이 글에서는 기본 개념부터, 기업 현장에서 쓰이는 규칙, 그리고 제가 실제로 사용하는 Git/PR/파일 네이밍 규칙까지 한 번에 정리했습니다.1️⃣ 왜 네이밍 규칙이 중요한가?초반 개발을 시작할 때는 “내가 알아볼 수 있으면 된다”고 쉽게 생각합니다.하지만 프로젝트 규모가 커지거나 팀 작업이 시작되면 곧 문제에 부딪힙니다.예를 들어서이름이 모호해 디버깅이 어려움상태나 함수가 어디서 쓰이는지 찾느라 시간 낭비컴포넌트와 파일명이 뒤엉켜 협업 시 혼란 발생그래서 초기부터 좋은 네이밍 습관을 들이는 것이 중요합니다.2️⃣.. 2025. 5. 2. 코딩 컨벤션이란? (feat. 케이스 스타일) 안녕하세요 웹 YB 김시연입니다😀세미나를 열심히 듣고 복습하던 중 '컨벤션'이 뭐지? 하고 찾아보다가이후 협업 시에도 필요할테니 정리해보면 좋을 것 같아서 이번 공유 아티클 주제로 선정하게 되었습니다.(뭔지도 잘 몰라서.. 이번에 빠삭 정리해보겠습니다!!!) 프로그래밍을 하다 보면 변수, 함수, 클래스 이름을 지을 때 다양한 규칙을 따르고는 하는데이런 규칙들은 코드의 가독성을 높이고 팀 내에서 또는 개인 프로젝트에서 일관성을 유지하기 위해 중요하다고 한다.먼저 코딩 컨벤션에 대해 정리하기 전에 케이스 스타일이 뭔지부터 짚고 넘어가면 좋을 것 같다. 🔎 케이스 스타일(Case Style)이란?변수명, 함수명, 파일명 등에 사용하는 작명 규칙이다.이름예시주로 사용하는 곳카멜 케이스 (camelCase).. 2025. 5. 2. Prop Drilling? 해결 방법? 안녕하세요, YB 박소이입니다.리액트로 개발하다 보면 state나 데이터를 여러 컴포넌트에 전달해야 할 때가 많습니다.저는 이럴 때마다 하위 컴포넌트로 데이터를 전달 하기만 했었는데요…이번 아티클에선 컴포넌트가 깊어지고 데이터를 전달해야할 때 발생할 수 있는 문제인 props drilling에 대해 알아 보겠습니다. 🔎 prop drilling 이란? Prop Drilling(프롭 드릴링)은 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 과정에서 중간 컴포넌트들을 거쳐야하는 문제를 말합니다. 이 과정이 “드릴로 뚫듯이 전달한다”고 해서 다음과 같은 이름이 붙여졌습니다. 리액트의 기존 방식으로 부모 → 자식 → 손자 컴포넌트로 데이터를 전달하려면, props를 계속 내려줘야 합니다.functi.. 2025. 5. 2. useReducer에 대해 잘 이해하고 넘어가셨나요? 확실한가요? 진짜? 아니면 한번 들어와 보실래요?? 잠깐 보고가요 이런 눈빛으로 들어오셨겠죠??네.잘 들어오셨어요.더보기useReducer 설명 갑니다. useReducer란???컴포넌트 내부에 새로운 State를 생성하는 React Hook으로 만든 useState는 useReducer로 대처 가능합니다. useState vs useReduceruseReducer를 이용하면 useState와는 달리 상태를 관리하는 코드들을 컴포넌트 외부로 분리할 수 있다는 핵심적인 차이가 있습니다.React 컴포넌트의 가장 메인 역할은 UI를 렌더링 하는건데 useState를 사용하여 스테이트를 관리하는 코드가 너무 많아지게 되면 코드들이 훨씬 더 복잡하고 길어지게 됩니다. 따라서 App컴포넌트가 렌더링하는 UI요소가 무엇인지 한눈에 파악하기 어렵습니다. 그래서 가독성이 떨어지게 .. 2025. 5. 2. 이전 1 2 다음
