아동의 발달권 보장을 위한 “YES 키즈존" 정보 제공 웹 서비스 : “얼라 IT(얼라잇)"
아동들을 위한 공간정보를 제공하는 웹 서비스 구현
https://www.youtube.com/watch?v=azKnLuOpeVQ
| Backend | Backend | |
|---|---|---|
| 한솔 | 진노 |
| Frontend | Frontend | ||
|---|---|---|---|
| 현수 | 민수 |
JWT (JSON Web Token) 인증에 필요한 정보들을 암호화시킨 토큰을 뜻한다.
JWT 기반 인증 방식이란 Client가 Server에게 요청을 보낼 때 HTTP의 Header에
이전에 Server로부터 발급받은 JWT를 담아 보내고, 이를 기반으로 Server가 Client를 식별하는 방식을 뜻한다.
클라이언트에서 패스워드를 통하지 않고 암호화된 token기반으로 로그인 성공여부를 파악하기때문에 보안성이 높다.
header의 인코딩 값 + payload의 인코딩 값 + 서버의 key값 을 header에서 정의한 알고리즘으로 암호화한 것.
이 때 서버의 key값이 유출되지 않는 이상 복호화할 수 없다.
Client는 JWT를 저장하고, 이후 인증이 필요한 요청마다 Authorization Header에 Access token을 담아 보냄
[' . '로 구분된 세 문자열인 Header, Payload, Signature로 이루어져있다.] Server는 발행했던 token과 Client로부터 받은 token의 일치여부를 확인한다 (인증).
클라이언트 측에서 요청한 노키즈존, 키즈존, 아동복합문화공간을 카테고리ID 별로 필터링을 통해 원하는 Store 정보를 전송해준다.
import {useMap,Map,MapMarker} from 'react-kakao-maps-sdk' 문을 추가하여 카카오 지도 API를 사용한다.
지도를 디스플레이 크기에 맞춰 출력하기 위해 Map 컴포넌트를 아래와 같은 코드로 사용한다.
직접 구현한 함수 EventMarkerContainer 내에서 마커를 표시하기 위해 MapMarker 컴포넌트를 사용한다.
마커에 인포 윈도우 띄우기
마커를 클릭하였을 때, 인포 윈도우에 위치 정보를 담아 띄우고 exit 버튼을 누르면 창이 닫히는 기능을 구현하기 위한 컴포넌트를 생성하여 사용한다.
Feat : 새로운 기능 추가, 기존의 기능을 요구 사항에 맞추어 수정
Fix : 기능에 대한 버그 수정
Build : 빌드 관련 수정
Chore : 패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
Docs : 문서(주석) 수정
Refactor : 기능의 변화가 아닌 코드 리팩터링 ex) 변수 이름 변경
Test : 테스트 코드 추가/수정
최근 신조어 중 “노키즈 존”이라는 단어가 있다. 이는 카페, 식당 등 특정 자영업자들이 자신의 사업장에 아이들을 받지 않겠다고 해서 붙혀진 신조어이다. 물론 아이들을 차별하려는 것이 아닌 사업장 컨셉과의 불일치 또는 일부 고객으로 인한 피해로 생겨난 것이지만 UN 에서 선언한 UN 아동인권협약에 따르면, 아이들은 차별받지 않고 교육받고, 놀 권리인 ‘발달권'이 있다고 명시되어 있다. 우리는 이 ‘발달권’ 보장에 초점을 두기로 하였다. 아이들을 차별하는 현 세태를 재고하며 아이들이 언제 어디서든 정당한 ‘발달권'을 보장받을 수 있도록하는 웹 서비스를 구현하고자 한다.
핵심 내용
- 지도 API 를 활용하여 실시간으로 ‘내 위치' 주변 탐색이 가능하도록 구현
- 해당 지도에서 대구시 내의 “YES키즈존" 공간 및 이벤트 등의 정보 제공
- “NO키즈존” 필터링 할 수 있는 알고리즘 구현 예정 - 지도 내에서는 “NO 키즈존" 정보는 제외시킬 것
- “YES 키즈존”의 공간과 이벤트는 고유의 색으로 구분하여 표시 예정 (Ex. 식당/카페 :파란색, 활동/행사 : 초록색)
- 식당과 카페의 경우, 등록된 메뉴 정보로부터 ‘주니어’ ,’어린이’,’키즈'’등 아동 관련 특정 단어에 대한 필터링을 실시하여 해당 메뉴가 우선적으로 노출되게끔 구현 예정
- 이 기능을 통해 주 타겟 사용자(부모)는 해당 식당/카페에 아이들을 위한 메뉴가 있는 지 쉽게 확인 가능
JWT (JSON Web Token) 인증에 필요한 정보들을 암호화시킨 토큰을 뜻한다.
JWT 기반 인증 방식이란 Client가 Server에게 요청을 보낼 때 HTTP의 Header에
이전에 Server로부터 발급받은 JWT를 담아 보내고, 이를 기반으로 Server가 Client를 식별하는 방식을 뜻한다.
클라이언트에서 패스워드를 통하지 않고 암호화된 token기반으로 로그인 성공여부를 파악하기때문에 보안성이 높다.
header의 인코딩 값 + payload의 인코딩 값 + 서버의 key값 을 header에서 정의한 알고리즘으로 암호화한 것.
이 때 서버의 key값이 유출되지 않는 이상 복호화할 수 없다.
Client는 JWT를 저장하고, 이후 인증이 필요한 요청마다 Authorization Header에 Access token을 담아 보냄
[' . '로 구분된 세 문자열인 Header, Payload, Signature로 이루어져있다.] Server는 발행했던 token과 Client로부터 받은 token의 일치여부를 확인한다 (인증).
클라이언트 측에서 요청한 노키즈존, 키즈존, 아동복합문화공간을 카테고리ID 별로 필터링을 통해 원하는 정보를 전송해준다.
클라이언트 측에서 요청한 모든 상점에 대한 정보를 json 형식으로 파싱하여 전송해준다.
import {useMap,Map,MapMarker} from 'react-kakao-maps-sdk' 문을 추가하여 카카오 지도 API를 사용한다.
지도를 디스플레이 크기에 맞춰 출력하기 위해 Map 컴포넌트를 아래와 같은 코드로 사용한다.
직접 구현한 함수 EventMarkerContainer 내에서 마커를 표시하기 위해 MapMarker 컴포넌트를 사용한다.
마커에 인포 윈도우 띄우기
마커를 클릭하였을 때, 인포 윈도우에 위치 정보를 담아 띄우고 exit 버튼을 누르면 창이 닫히는 기능을 구현하기 위한 컴포넌트를 생성하여 사용한다.
'react-kakao-maps-sdk'패키지 내의 Map 컴포넌트를 사용할 때, 지도의 너비와 높이에 대한 style을 지정해주어야한다.
현재 브라우저 창의 너비와 높이에 따라 지도의 크기를 세팅하기 위해 Custom hooks를 활용한다.
(window.innerWidth,window.innerHeight 속성 사용)
navigator.geolocation을 이용하여 접속 위치를 찾아, 현 위치 마커를 사용하여 표시한다.