cominuna 님의 블로그

1. 유효성 검사란? 유효성 검사는 사용자가 입력한 값이 서버로 넘어가기 전에 올바른지 확인하는 과정입니다.왜 프론트엔드 유효성 검사가 중요할까요?사용자 경험 향상: 즉각적인 피드백 제공합니다.서버 부하 감소: 불필요한 요청을 줄여 서버 부담 감소시킵니다.네트워크 비용 절감: 잘못된 데이터 전송 방지합니다.왜 백엔드 유효성 검사도 필수일까요?데이터 무결성 보장: 잘못된 데이터 저장 방지합니다.보안 강화: 악의적인 공격 방어 (예: SQL Injection, XSS 등)합니다.비즈니스 로직 적용: 백엔드에서만 검증 가능한 로직 처리합니다.유효성 검사 기준필수 입력 필드 확인데이터 형식 검증 (예: 이메일 형식, 숫자 범위 등)일관성 체크 (예: 비밀번호 확인 일치 여부)특정 조건 만족 (예: 최소/최대 길..

1. 성능 최적화 & 번들링성능 최적화란?UI를 최적화하여 애플리케이션의 속도를 높이는 것을 의미합니다.프론트엔드 관점에서는?⇒ 웹 애플리케이션의 로딩 속도와 사용자 경험(UX)을 개선하기 위해 다양한 기술과 기법입니다.번들(bundle)이란?여러 파일을 하나로 결합하는 작업을 의미합니다.위 사진은 이해를 돕기위한 예시입니다 : 초등학교 입학을 위한 제품 번들⇒ 어떤 제품을 묶음으로 판매하는 것을 '번들링'한다고 합니다.번들러(Bundler)번들링을 수행하는 도구JavaScript, CSS, 이미지, 폰트 등 다양한 파일을 묶고 최적화하는 기능을 제공합니다.주요 번들러 도구:Webpack: 모듈 번들링의 표준으로 자리 잡은 도구Vite번들링(Bundling) = 빌드번들러가 수행하는 작업 또는 과정을 의..

1.MSW란 무엇이며 왜 필요한가서비스 워커를 사용합니다 (네트워크 호출을 가로채는 API 모킹 라이브러리)Mock 서버 구축하지 않아도 API를 네트워크 수준에서 Mocking가능합니다.테스트 환경을 예측 가능하고 격리된 상태로 유지하여 테스트의 일관성을 보장합니다.프론트엔드와 백엔드가 서로 의존적인 경우에 유용하게 사용할 수 있습니다.[기존의 API 테스트 방법과의 비교] 기존방법:실제 API 호출 후 테스트 진행외부 서버의 응답 속도에 따라 테스트 결과가 일관되지 않을 수 있습니다.외부 API의 상태에 따라 테스트가 실패할 가능성이 있어, 개발자들이 테스트 결과를 예측하기 어려운 경우가 많습니다.⇒ 문제해결 by MSWMSW는 클라이언트와 테스트용 서버 사이의 중개 역할을 하여, 외부 의존성을 제거..

1. virtual dom 등장배경[DOM이란?]Document Object Model웹페이지에 들어가 있는 html 엘리먼트들을 트리 형태의 구조로 표현한것 [브라우저 렌더링 과정]1. DOM tree생성:개발자가 작성한 HTML을 브라우저가 전달 받음 ⇒ 브라우저의 렌더 엔진이 이를 파싱 2.Render tree 생성: css파일과 각 엘리먼트의 lnline 스타일을 파싱 스타일 정보 추가 3.Layout: 각 노드들은 스크린 좌표가 주어지고, 정확히 어디에 위치해야할지 정해짐 4.Painting: [1-3]번 과정에서 얻은 정보들로 모든 요소들에 색을 입히는 과정: 이후 화면에 UI 렌더 why? 브라우저 렌더링 살펴본 이유: DOM 조작의 비효율성을 이해하기 위해서! P1) 성능저하돔의 변화가 발..