React5 피드백 반영 업데이트 - 메뉴 등록 화면 개선 안녕하세요. 이번 주에는 사이드 프로젝트 '오늘 뭐 먹지?'를 오픈하고 주변 분들께 피드백을 받는 시간을 가졌습니다. 오늘은 피드백 사항 중, 메뉴 등록 화면의 불편 사항을 개선하는 업데이트를 진행하는 과정을 담아보려고 합니다. 피드백 사항 등록하기 화면에서 엔터를 누를 시 무조건 폼 제출이 되어서 불편했어요. (음식점 검색 인풋이 포커스되었을 때는 엔터했을 때 음식점을 검색하게 하는 건 어떨까요?) 음식점을 검색하고 지정하는 과정이 힘들었어요. (음식점을 검색했을 때 지도 영역 주변에 모든 검색 정보를 리스트로 보여주고 클릭 시 해당되는 마커를 선택할 수 있는 영역이 있으면 좋겠어요) 일부 음식점이 검색 시 나오지 않아서 불편했어요. (음식점 검색을 전반적으로 자동 완성 + 수동 지정을 할 수 있으면 .. 2022. 7. 4. 사이드 프로젝트 오늘 뭐 먹지? 소개 안녕하세요. 1인 개발 프로젝트인 오늘 뭐 먹지? 서비스를 소개합니다. 평소에 만들어보고 싶었던 서비스를 혼자서 만들어 보았는데, 기획과 개발 파트로 나누어 소개하겠습니다. 기획 직장인들의 점심메뉴 선정 시 발생하는 커뮤니케이션을 돕는 서비스 매일 찾아오는 점심메뉴 선정 시간.. 쉽고 빠르게 결정할 수 없을까? 한 명 한명 먹고 싶은 메뉴를 묻고, 투표하는 과정이 번거롭게 느껴졌어요. 그 과정을 간소화, 자동화하는 서비스를 만들어보고 싶었습니다. 문제 정의 점심 메뉴 선정시 불편한(번거로운) 이유는 비슷한 질문과 답변이 매일 반복된다는 점에서 발생한다고 생각했습니다. 이에 대한 해결책으로 질문과 답변에 일정한 형식을 제공하여 사람이 직접 고민하고 행동할 부분들이 서비스 내에서 제공될 수 있도록 하는 방안.. 2022. 6. 16. 모달 컴포넌트 설계하기 지난번에 설정했던 컴포넌트 개발 규칙에 맞춰 모달 컴포넌트를 설계해 보려고 한다. 수립한 Action item은 다음과 같다. [Action Item] 1. 컴포넌트를 설계할 때 이 컴포넌트가 어떻게 사용되어야 하는지 먼저 정의한다. 2. UI 요소와 데이터 기반 요소를 정리하고 분리하여 각각의 컴포넌트로 구성한다. 3. 컴포넌트의 의도를 정의하고 이를 검증할 수 있는 테스트 케이스를 작성한다. 4. 테스트 케이스를 통과할 수 있는 컴포넌트를 작성한다. 5. 컴포넌트를 리팩터링 하며 정리한다. 한 항목씩 진행해보자! [어떻게 사용되어야 하는가?] 먼저 모달 컴포넌트는 스크린 위에 레이아웃을 씌운 것처럼 보여야 한다. 구현 방식에는 여러 가지가 있는데 css를 이용할 수도 있고, react DOM 트리에 .. 2022. 5. 17. 컴포넌트 개발 규칙 설정하기 이번 글에서는 현재 진행하고 있는 사이드 프로젝트의 컴포넌트 개발 규칙을 설정해 보고자 한다. 프로젝트의 초반 단계에서 어떤 규칙을 가져갈 것인지 결정하는 것은 무척 중요하다. 지난 개발 경험에서 느낀 문제점들을 개선할 수 있도록 고민한 규칙들을 정리해보고자 한다. [문제점] - 컴포넌트는 사용자 UI와 직접적으로 맞닿아있는 부분이고 변경사항도 잦다. 그때그때 필요할 때마다 덧붙이듯 개발을 진행한 결과, 일관성이 없고 코드를 모두 읽어봐야 파악할 수 있게 되었다. 일관된 규칙이 없기 때문에 확장성도 매우 떨어진다. - 코드를 수정할 때, 기존 코드가 제대로 작동하는지를 보장할 수 없다. [개선 방향] - 어떻게하면 확장성을 향상할 수 있을까? 이러한 규칙을 정하면 이를 지키면서 일관성도 얻을 수 있다. .. 2022. 4. 24. Django + React 소셜 로그인 구현 구현 목표 프론트 서버와 백엔드 서버를 구축할 때, 유저 인증에 소셜 로그인을 활용해 본다. 구현 목표 요약 [프론트] 유저 로그인 시 먼저 Javascript SDK를 통해 OAuth provider에게 토큰을 발급받고, 이를 장고 서버에 넘긴다. [백엔드] 유저 로그인 시 전달받은 토큰(각 provider별 식별자)을 REST API 방식으로 OAuth provider에게 전달해서 유저 정보를 얻는다. 유저 정보를 활용하여 회원가입 혹은 로그인 처리를 진행하고, JWT 토큰을 발급하여 응답한다. + 우리는 백엔드 서버에 자체적으로 유저 관리 시스템을 가지고 있다. 따라서 우리 서버에서 사용하는 별도의 토큰 발급 과정이 필요하다. 흐름도 [프론트] 구현 계획 1. SDK를 스크립트에 직접 삽입하여 적용.. 2022. 4. 7. 이전 1 다음
