cominuna 님의 블로그

문제점 선정 이유프론트엔드에서 JWT 토큰을 디코딩하여 사용자 역할을 확인하고 페이지 라우팅을 처리하는 로직을 구현했습니다.하지만 현직자분과의 멘토링 과정에서 이 방식이 불필요할 뿐만 아니라 보안상 위험하다는 지적을 받았습니다.이 글에서는 JWT 디코딩이 왜 위험한지, 그리고 더 안전한 대안은 무엇인지 실제 프로젝트 코드를 통해 알아보겠습니다.현재 로그인 로직은 어떻게 동작하는가?소셜 로그인을 기반으로 사용자를 인증하고 있습니다. 전체 로그인 흐름 요약사용자가 로그인 버튼을 클릭합니다.(고객용/디자이너용 구분)프론트엔드에서 소셜 로그인 모달이 열리고, 해당 소셜 플랫폼으로 이동하여 인증을 시도합니다.인증이 성공하면, 백엔드 서버는 accessToken과 refreshToken을 발급한 뒤, 해당 토큰을 ..

문제점 선정 이유프로젝트를 처음 진행할 당시엔 상태 관리에 대한 이해가 깊지 않아 그냥 주변에서 많이 쓰는 라이브러리를 선택해 개발을 진행했습니다. 큰 문제는 없었지만 리팩토링 시점에 다시 코드를 들여다보니 “이 상태, 꼭 이렇게 관리해야 할까?”라는 의문이 들기 시작했습니다. 결국 단순히 잘 알려진 도구를 쓰는 것보다, 상태의 복잡도와 사용 패턴에 따라 적절한 도구를 선택하는 것이 더 중요하다는 걸 느끼게 되었습니다. 해당 과정에서 Recoil로 관리하고 있던 상태를 실제로 Zustand로 옮긴다면 어떤 구조로 바꿔야 할지도 고민하게 되었고 이 글에서는 그런 고민과 시도, 그리고 배운 점들을 담아보려 합니다.상태 관리가 필요한 이유상태란?상태는 애플리케이션의 현재 모습을 결정하는 데이터를 의미합니다...

Skeleton UI란?Skeleton UI는 콘텐츠가 로드되는 동안 사용자에게 시각적인 힌트를 제공하는 로딩 방식입니다.빈 화면 대신 콘텐츠의 레이아웃을 회색 블록 등의 형태로 미리 보여줌으로써, 사용자 경험을 보다 부드럽게 만듭니다. Skeleton UI의 핵심 개념로딩 상태를 시각적으로 표현하여 사용자가 무작정 기다리는 느낌을 줄임콘텐츠 배치를 미리 보여줌으로써 사용자 경험(UX) 개선화면 전환 및 로딩 경험을 더 자연스럽고 직관적으로 제공Skeleton 필요성 굳이 필요한 이유가 무엇일까?과거에는 로딩 스피너(Spinner)나 프로그레스 바(Progress Bar)를 사용하여 로딩 상태를 알렸습니다. 하지만 이러한 방식은 사용자가 ‘기다리고 있다’는 인상을 강하게 줍니다. Skeleton UI는..

문제점 선정 이유프로젝트를 진행할 당시 촉박한 일정으로 인해 화면 구성과 기능 개발에 집중할 수밖에 없었습니다.그러다보니 디테일 한 부분까지 챙기지 못했고 SEO에 대한 고려가 조금은 부족했습니다. 프로젝트를 마무리한 이후, 검색엔진에서의 노출이나 메타 정보 설정 같은 부분에 대한 필요성과 중요성을 더욱 인식하게 되었습니다. 따라서 이번 리팩터링에서 SEO 개선이 필요한 이유와 함께, 실제로 적용한 메타 태그들을 정리해보았습니다. 특히 기존 코드에는 기본적인 외에 메타 정보가 거의 없어서 검색 엔진 노출과 소셜 미디어 공유 시 정보가 부족한 문제가 있었습니다. 이에 따라 페이지의 목적과 내용을 명확히 전달할 수 있는 메타 태그들을 추가하였습니다. 이러한 개선을 통해 검색엔진 최적화는 물론 사용자 경험..

프로젝트 소개2024년 6월부터 12월까지 LG 유플러스에서 진행하는 유레카 SW 교육 과정에 참여했습니다.저는 유레카 교육 과정에서 프론트반을 수강하였습니다. 교육 과정 중 총 4번의 프로젝트를 진행하였는데 , 그 중 백엔드 반 수강생분들과 함께 협업을 진행하였던 최종 융합 프로젝트(2024.11.11-2024.12.19 총 6주 진행)에 대해 소개하려고합니다. 이번 경험은 기획부터 디자인, 개발, 그리고 서비스 배포까지 전 과정을 아우르며 실제 현업에서의 사이클을 그대로 체험해볼 수 있는 소중한 기회였습니다. 총 4가지 주제 중에서 팀별로 하나를 선택할 수 있었고 저희 팀은 ‘견적서를 이용한 반려동물 미용 중개 플랫폼’을 주제로 삼아 작업을 진행했습니다. 최종 융합 프로젝트의 경우, 선택한 주제에 ..

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) 성능저하돔의 변화가 발..