TIL (Today I learned)
오늘 나는 무엇을 했나요
- React 숙련강의
- React 미니 과제
- UX집중반
오늘은 어떤 것을 배웠나요
-React 숙련강의
styled componet를 배웠다 정말 간략해서 요약해보았다. 이것만 알면 개념이나 사용하는데 충분한것 같다.
순서 요약 정리
1.styled-component 정의: ${(props) => props.속성명} 형태로 props 활용.
2.props 전달: styled-component를 사용할 때 JSX에서 props를 전달.
styled-component사용하는이유 css줄때
1. 조건에 따라 스타일을 바꿀수있다.
2. 고유한 클래스이름 자동생성해주어서 충돌방지해줌
3.별도의 .css파일을 생성하지 않아도 된다.
4.기존의 만들어놓은 styled-component를 기반으로 새로운 컴포넌트를 만들수있다. ( 확장성과 재사용성)
-React 미니 과제
미니과제를 시작했다. 미니과제로
STEP 1 프로젝트 세팅
STEP 2 기본 레이아웃 구성하기
STEP 3 1개 이상의 map 메서드 활용하기
STEP 4 1개 이상의 Components 분리하기
STEP 5 간단한 Event 만들기(stete 사용하기)
이렇게 5가지 필수과제가 있고 나머지 도전과제가있다.
일단 오늘 5가지 필수과제를 완성하였다.
프로젝트세팅과 레이아웃구성을 이미배운거고, 이번에 map메서드와 컴포넌트분리, state사용하여 간단한 이벤트만드는과제를 하였다.
먼저 아래와같이
버튼에 온클릭으로 버튼을 클릭시 goodhend를 호출하고 그안에 메인로직으로는 관심(좋아요)갯수를 증가하는 로직을 짯다.
이를 위해 먼저 state를 이용하였다. 여기서 state를 이용하는 이유는 좋아요버튼을 누르면 변경이 되어 리랜더링을 하게 만들기 위해서는 함수가 아닌 state를 사용해야한다.
그다음은 컴포넌트 분리하는 과제이다.
컴포넌트를 분리하기위해서는 먼저 분리할내용을 담을 파일을 만들어야한다.
여기서는 SkillList.jsx파일을 만들고 분리할 내용을 함수에 담았다. 그다음 app.jsx에서 먼저 export한 파일을 import하였고, 그다음 태그를 넣는것처럼 <SkliiList/> 로 넣으면 분리 끝이다!
아그리고 여기서 .map 메서드를 활용했는데 for문과 비슷하다.
map메서드를 원리를 세가지로 정리하면
1.map앞에 적힌 Skills안에 array 자료 갯수만큼 함수안의 코드를 실행해준다.
2.함수의 파라미터 (여기서는 skill) 은 array안에 있던 자료이다.
3.return에 뭐 적으면 array에 담아준다.
이게끝이다.
여기서는 skills자료에있는게 스킬이 5개이므로 5번 실행해주는것이고 파라미터에는 각 name과 level이 담겨있다.
또 이것을 출력하기위해 skill.name skill.level을 사용해 안에 내용을 뽑아서 출력한것이다.
- UX집중반 ( UX 프로젝트)
오늘은 솔루션도출을 위한 아이디어도출을 진행하였다.
먼저 핵심문제는 반납장소가 부족한경우 새 주차장을 찾는 시간과 추가금이 소모되는것이다.
일단 쏘카도 이문제를 인지하고 해결을 하려고 노력을 하고있다.
주차장밸류업서비스, 모두의주차장, 노는주차장을 공유 주차장으로 바꾸기 등 주차공간자체를 더욱 많이 만들어
문제를 해결하려고 노력중이다. 하지만 단기간내에 결과를 내기는 어려운상황이다
그리고 쏘카가 정밀위치안내시스템으로 주차장에서 차량위치를 확인할수있는 기능을 만들고있지만 아직은 개발중이라 이것도 솔루션으로 하기에는 힘들다.
또 우리는 쏘카가 현재 고객센터가 있지만 잘 문의가 안되는 문제도 있는것을 데이터로 알고있다.
그래서 우리는 일단 고객센터를 거치지않고 반납을 원활하게 할수있는 방법이 있지않을까 생각을 해보았다.
이게 반납장소가 부족한공간일 경우 쏘카존에 다른 일반 차량이 이미 주차를 한 상태여서 문제가 발생하는것이므로,
우리는 반납을 하기전부터 내가 반납하려는 곳이 주차장이 만차인지 알수있으면 내 쏘카존도 누가 이미 주차를 한상태라는것을 알수있기때문에 굳이 그쪽으로 안가고 다른 반납장소에 반납후 반납신청을 하면 문의를 할수있지않을까 생각을 해보았고,
또 시간별 주차장 혼잡도를 데이터를 이용하여 반납전에 주차장이 꽉찬다면 자동으로 다른 주차장을 추천 및 안내를 해주면 어떨까도 생각해보았다.
실제로 공공데이터포털에서는 서울시설공단의 공영주차장 시간별 주차현황데이터를 제공해주고있으므로 만약 사용할일이 있다면 이것을 사용해도 될것같다.
다음으로 서울특별시에서도 주차정보안내시스템으로 여기는 정말 주차장마다 주차가능면과 혼잡도 만차등을 알려주고있다!
또 쏘카가 만든 소피아라는 플랫폼이있는데 요약하면 정차지데이터를 알수있는플랫폼이다.
지금은 정차지데이터로 주로이용하는 여행지를 선정하여 데이터를 뿌려주고있는데 이것을 잘 사용하면 주차장의 혼잡도나 만차여부를 알수있지않을까 생각을 해보았다.
실제로 카카오 T 주차에서 축적된 빅데이터를 분석해 주차장 만차 예측 시스템을 도입중이다.
핵심문제
1.반납장소가 부족한경우 새 주차장을 찾는 시간과 추가금이 소모
미래에는 가능하지만 현재로는 솔루션으로 활용하기 어려운것.
1.주차장밸류업서비스, 모두의주차장, 노는주차장을 공유 주차장으로 바꾸기 등 주차공간자체를 더욱 많이 만들어
문제를 해결하려고 노력중이다. 하지만 단기간내에 결과를 내기는 어려운상황이다.
2. 정밀위치안내시스템으로 주차장에서 차량위치를 확인할수있는 기능을 만들고있지만 아직은 개발중이라 이것도
솔루션으로 하기에는 힘들다.
아이디어
1.시간별 주차장 혼잡도 체크
2.주차장 만차 여부 체크
(정보 출처)
https://biz.chosun.com/it-science/ict/2024/11/20/GA67UYOUNZAFFDBA5FUGZ7GC7A/
https://news.mt.co.kr/mtview.php?no=2023071708370561574&utm_source=chatgpt.com
https://digitalchosun.dizzo.com/site/data/html_dir/2023/04/17/2023041780201.html
https://www.koit.co.kr/news/articleView.html?idxno=104619
https://www.socarcorp.kr/news/pr/458
https://www.data.go.kr/data/15090908/fileData.do
https://zdnet.co.kr/view/?no=20230717084056
https://brunch.co.kr/@kakaomobility/66
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
오늘은 아이디어발산을 하면서 어려움을 겪엇다.
주차장 부족에 관한 문제는 사실 UXUI로 해결하기가 힘들다.
원인이 주로 오프라인에 있기때문이다.
그래서 최대한 UXUI로 해결하기 위해 리서치와 아이디어도출을 진행하였고, 최대한 쏘카가 현재 가지고있는 데이터로 할수있을만한것을 찾고는 있지만 쉽지않다.
앞으로는 원인이 오프라인에 있는거는 패스하는게 좋을듯 ㅎ... 예) GPS의 기능문제, 주차장공간부족문제