mimizae 님의 블로그

37기 DIVE SOPT에서 진행한 프로젝트 CareNA에서 보안에 대해 공부하며 인증/인가 관련 전략을 구성했던 전반적인 과정을 담은 글입니다! 🙌🏻 CareNA는 사용자의 건강검진 데이터를 입력·분석·시각화하는 서비스로, 일반적인 서비스와 달리 개인에게 매우 민감한 의료·건강 정보를 다룬다는 특징이 있었다. 건강검진 수치, 분석 결과, 생활 습관 추천 데이터는 단순한 콘텐츠가 아니라 유출되었을 경우 사용자에게 직접적인 피해를 줄 수 있는 정보이기 때문에, 기능 구현 이전에 프론트엔드에서 어디까지 보안을 책임져야 하는가라는 질문부터 고민하게 되었다. 이러한 문제의식 속에서 프로젝트를 살펴보니, 프론트엔드 단에서도 보안과 직결되는 요소들이 곳곳에 존재했다.OAuth 기반 로그인 및 리다이렉트 흐름ac..

37기 DIVE SOPT에서 진행한 프로젝트 CareNA를 본격적으로 시작하기 전, 보안에 대해 공부한 과정을 담은 글입니다! 🙌🏻 우리 서비스 CareNA는 사용자의 건강검진 데이터 해설을 통해 본인의 건강에 대해 쉽게 이해할 수 있도록 도와주며 실제 건강관리를 위한 운동과 식단같은 행동 정보도 쉽게 탐색할 수 있는 건강관리 서비스이다. 즉!!! 민감정보(건강 검진 데이터)를 다뤄야 한다...아직 와이어 프레임 단계이지만!!!!! 기본적으로 건강 검진 데이터 입력을 받아야 하고, 건강 검진 데이터 분석 결과를 렌더링해야 한다. 즉, 민감 정보 입력과 민감 정보 렌더링 두 측면에서 보안을 신경 써야 한다.프론트엔드 보안으로는 완전한 방어선을 구축할 수는 없지만… 최소한으로는 챙겨야 할 요소들에는 무..

37기 DIVE SOPT에서 진행한 프로젝트 CareNA 프로젝트에서 맡은 부분을 구현한 과정을 담은 글입니다! 🙌🏻💡 shadcn/ui를 사용한 이유pnpm dlx shadcn@latest add select shadcn/ui 컴포넌트을 활용해서 drop-down 공통 컴포넌트를 제작했다.shadcn/ui 컴포넌트를 사용하기로 한 가장 큰 이유는!! 속도, 일관성, 확장성을 동시에 가져갈 수 있을 거라고 생각했기 때문이다. shadcn/ui는 Tailwind CSS를 전제로 설계된 컴포넌트 시스템이라 스타일 충돌이나 설정 이슈가 거의 없고, 컴포넌트가 npm 패키지로 감춰져 있는 구조가 아니라 실제 코드가 그대로 프로젝트 안에 생성된다는 점이 특히 매력적이었다!!!덕분에 디자인 요구사항이나 UX ..

37기 DIVE SOPT에서 진행한 프로젝트 CareNA 프로젝트에서 맡은 부분을 구현한 과정을 담은 글입니다! 🙌🏻💡 내가 구현을 맡은 UI💡 폴더 구조 선정 이유shared│ │ │ │ │ └── ui│ │ ├── buttons│ │ │ ├── add-button.tsx│ │ │ ├── button.tsx│ │ │ └── ocr-button.tsx│ │ ├── check-box│ │ │ └── check-box-button.tsx│ │ └── radio-button│ │ └── radio-button.tsx FSD 기준에 맞춰 공통으로 사용되는 ..

37기 DIVE SOPT에서 진행한 CareNA 프로젝트에서의 트러블 슈팅 과정을 담은 글입니다! 🙌🏻💡 문제점CareNA의 마이페이지를 구현하는 과정에서, 페이지의 콘텐츠 양과 상관없이 항상 화면 전체 높이를 채우도록 만들고 싶었다. 하지만 실제로 페이지를 렌더링해보니, 화면 전체 높이를 차지하기는커녕 페이지 내부 콘텐츠의 높이에 따라 화면이 줄어드는 문제가 발생했다. 특히 콘텐츠가 적은 페이지에서는 하단에 배경이 비어 보이는 현상이 눈에 띄게 나타났다. 그래서 global.css를 확인해 보니 이미 이렇게body와 #root 에 다음과 같이 min-height 를 설정해두고 있었다… 왜지!! 왜 전체 높이가 안 먹힐까!body { min-height: 100vh; min-height: 10..

37기 DIVE SOPT에서 진행한 프로젝트 CareNA 프로젝트에서 맡은 부분을 구현한 과정을 담은 글입니다! 🙌🏻💡 내가 구현해야 할 UI내가 맡은 공통 컴포넌트 중 하나인, ticker는 사용자의 건강검진 상태에 맞게 맞춤 건강 팁들을 홈에서 세로로 자동 스크롤 되며 보여주는 기능을 갖고 있다. 이 컴포넌트를 처음 보고 vetical로 자동으로 올라가는 걸 어떻게 구현할지 고민하다가 자동으로 올라간다는 것과 방향만 다를 뿐 이게 가로였다면... 캐러셀 그 자체인 것!!을 깨닫고 캐러셀의 원리를 공부하고 로직을 구성했다!💡 기능 구현이 ticker의 핵심 원리는 위치 이동 + 상태 관리이다. 기본 아이디어는 다음과 같다!여러 개의 텍스트를 세로로 쭉 나열해 두고지금 보여줘야 할 요소의 inde..

37기 DIVE SOPT에서 진행한 프로젝트 CareNA 프로젝트 초기 세팅 과정을 담은 글입니다! 🙌🏻💭 해당 구조는 웹 파트 리드님의 아이디어로, 스스로 떠올린 아이디어는 아니지만! 처음 접해본 패턴이라 동작 원리와 설계 의도를 이해해보고자 했다. 단순히 사용하는 데 그치지 않고 왜 이런 방식으로 설계했는지, 어떤 문제를 해결하려는 구조인지를 이해하기 위해 관련 문서와 코드를 참고하며 혼자 정리해보는 시간을 가졌다.그 과정에서 라우트를 단순한 경로 정의가 아니라 페이지 메타데이터를 관리하는 단위로 확장해볼 수 있다는 관점을 얻었다…!!! 💡 문제점페이지마다 헤더가 다르다…!!홈: 로고 + 마이페이지 아이콘마이페이지: 뒤로가기 + 타이틀로그인: 헤더 없음etc...React Router 초기 세..

37기 DIVE SOPT에서 진행한 프로젝트 CareNA 프로젝트의 초기세팅 과정을 담은 글입니다! 🙌🏻⚙️ react-router 설치❓ 왜 react-router-dom이 아니라 react-router? React Router는 v7부터 패키지 구조가 변경되었다.기존에는 웹 환경에서 react-router-dom을 설치하는 것이 일반적이었지만, v7부터는 패키지가 단일화되어 새 프로젝트 기준으로 react-router만 사용하는 것이 권장된다.실제로 package.json을 확인해 보면, 메인 버전이 7 이상으로 시작하는 경우가 대부분이다.⚠️ 버전별로 헷갈리기 쉬운 포인트React Router는 v5 → v6으로 넘어오면서 라우팅 방식, 훅, API 구조가 크게 변경되었다.따라서 라우터 관련 검..