본문 바로가기

웹개발4

API 에러 처리: 사용자 경험 향상을 위해서. 안녕하세요, 웹 YB 신지수입니다 ! 이번 과제에서 React와 TypeScript를 활용한 로그인/회원가입 기능을 구현하면서, API 통신 과정에서 발생하는 다양한 에러를 어떻게 효과적으로 처리할 수 있을지 고민했습니다. 에러는 불가피하게 발생하지만, 이를 어떻게 처리하느냐에 따라 사용자 경험이 크게 달라질 수 있다고 생각합니다. 이번 글에서는 제가 프로젝트에 적용한 API 에러 처리 전략과 그 과정에서 배운 점들을 공유하려고 합니다 ☺️ 🚨 API 에러, 왜 신경 써야 할까 ?API를 사용하다 보면 에러 상황은 피할 수 없습니다. 하지만 이때 단순히 "오류가 발생했습니다."라는 메시지를 보여주는 것과, 구체적인 원인과 해결 방법을 안내하는 것은 사용자 경험 측면에서 큰 차이를 만들어낸다고 생각합니다.. 2025. 5. 15.
단축키처럼 쓰는 유틸리티 함수 ? 안녕하세요 웹 YB 신지수입니다 !지금은 과제 마감 2시간 전입니다 .. 2주차 과제인 투두 만들기를 진행하면서, 여러 기능이 추가될수록 JavaScript 코드가 점점 복잡해지고 길어지면서 반복되는 패턴이 많아지는 것을 경험했습니다. 특히 DOM 요소를 선택하는 document.querySelector() 같은 코드를 자주 사용하게 되었는데요, 이런 반복적인 코드들을 보다 효율적으로 관리할 방법이 필요하다고 느꼈습니다. 그때 유틸리티 함수라는 개념이 떠올랐고, 이를 활용하면 자주 사용하는 코드들을 함수로 묶어서 간결하게 만들 수 있겠다는 생각이 들었습니다 🤓 유틸성 코드의 정확한 정의는 존재하지 않지만, 코드의 크기가 작고, 애플리케이션 비즈니스와는 관련이 적으며, 굉장히 일반적인 기능을 담당하는 코.. 2025. 4. 25.
JavaScript 프론트엔드 면접 개념 정리 & 자주 나오는 질문 모음집 안녕하세요, 36기 YB 웹파트 최서희입니다.😀2주차 세미나를 통해 JavaScript에 대해 한층 더 구체적으로 배울 수 있었고,이를 바탕으로 기술 면접 준비에 도움이 되는 내용을 정리해보면 좋겠다는 생각이 들었습니다.이번 포스팅에서는 프론트엔드 면접을 준비하며 정리한 JavaScript 핵심 개념과자주 나오는 면접 질문들을 공유해보려고 합니다.JavaScript는 프론트엔드에서 가장 기본이 되는 언어인 만큼,기초 문법부터 비동기 처리, this 바인딩, 이벤트 루프 등 다양한 주제의 질문들이 면접에서 자주 등장합니다.저 역시 여러 자료를 참고하고 직접 정리하면서 개념을 더욱 탄탄히 이해할 수 있었어요.실전 면접을 앞두신 분들께 조금이나마 도움이 되기를 바라며,개념 요약 + 실전 질문 리스트 + 참고.. 2025. 4. 15.
[Javascript] this 이것 뭐에요? 자바스크립트 this 정복하기 1주차 세션에선 웹개발의 기본중에 기본! 순정! HTML, CSS, JAVASCRIPT 개념에 대해서 배워봤는데요. 이 세션과 연관지어 같이 더 풀어볼 수 있는 소재를 찾아보다가,, javascript에서 종종 쓰이는 this에 대해 정리해보려고 합니당~ 다른 언어에서도 this를 쓰는데 각자 돌아가는 작동 방식도 조금씩 달라서, javascript 내에선 어떻게 사용하고 어떤 개념이 있는지 알아보도록 합시다. 그럼 출~바알 🚀 동적 바인딩호출과 동시에 this가 결정됩니다. 특히 기본적으로 함수는 동적으로 this가 바인딩됩니다! 우선 기본 this는 뭘 가리키고 있을까요?? 한번 콘솔로 확인해보시져(1)console.log(this)그냥 아무것도 없는 상태에서 전역적으로  이래버리면 이 this 키.. 2025. 4. 11.