TIL (Today I learned)
오늘 나는 무엇을 했나요
- React 숙련강의
- React 미니 과제
- UX집중반
오늘은 어떤 것을 배웠나요
-React 숙련강의
미니과제에 필요한 강의가 아직 전 강의를 못들어서 일단 노션자료와 그외 검색으로 공부를 먼저 하였다.
react-router-dom를 배웠다.
1.사용방법
터미널에 패키지설치
2.이동시킬 페이지 컴포넌트생성후 안에 내용을 채운다.
ex) cafe.jsx , webtoon.jsx
3.우리가 만든 페이지 컴포넌트로 이동하게끔 컴포넌트를 만든다
Router.jsx를 생성후 아래 코드 입력
이때 중요한점은 경로를 잘 적어서 import를 해야함
ex) "../pages/Contact";
5.그후 App.jsx에 Router.js를 import한다.
App.jsx에 import하는이유는 결국 어떤 컴포넌트든지 app.jsx를 거치기때문이다.
6. 이제 브라우저에 path를 입력하면 이동이 잘되는것을 알수있다.
react-router-dom 사용하는이유
1.여러 페이지를 왔다갔다 할수있다.
예시로 네이버메인에서 네이버카페로 갈수있거나 네이버웹툰으로 갈수있다.
useNavigate
하지만 여기까지만들어도 보통 이용자는 주소창에 저렇게 path를 입력하지않는다.
버튼이나 무언가를 클릭해서 넘어가는게 보통이다.
이를 위해 useNavigate 가있다.
간단하게 클릭 이벤트를 이용해 클릭을해서 다른 페이지로 넘어갈수있게 쉽게 도와주는것이다.
사용방법은 간단함
위에처럼 useNavigate를 import하고 navigate("/webtoon ");처럼 보내고자하는 URL을 적으면 됨
여기서는 같은 pages폴더에 있는 webtoon으로 가기 위해서 /webtoon으로 작성
-React 미니 과제
오늘은 도전과제중 페이지 라우팅, Styled-Components 활용을 하였다.
먼저 페이지 라우팅은 포트폴리오를 클릭하면 포트폴리오페이지로 넘어가게 하고싶었는데 시간이 부족했다.
그래서 일단 path입력해야 넘어갈수있게 하였다.
안에 내용도 시간이 없어서 못채움
일단 path를 넘어가면 메인에있는 화면은 안보이게하고 넘어간 부분에 화면만 나오게 함
페이지 라우팅
Styled-Components 활용
css파일에 있는부분을 styledComponent로 변경을 하였다.
- UX집중반 ( UX 프로젝트)
오늘은 저번에 아이디어 도출을 끝내고 팀원들과 함께 만든것을 토대로 장표를 만들었다.
먼저 기존문제현황에 대한 아이디어도출한것으로
사용자는 결국 주차자리현황을 바로 알수없다는것과, 만차시의 반납과정이 번거롭다는 문제에 대한 아이디어를 도출후
이로인한 전체적인 해결방안과 그에대한 기대효과를 인사이트로 뽑았다.
쏘카 반납에 대한 솔루션 플로우차트이다.
플로우차트를 먼저 그린후 그것을 보면서 와이어프레임을 진행을 하였다.
여기서 와이어프레임은 분업해서 하였는데 나는 그중 주차장에 대한 상세정보 와이어프레임을 맡았다.
일단 바뀐 핵심은 다른 주차장들의 자리현황을 앱에서 쉽게 알수가 있어서 만약 기존의 주차장자리가 만차라면
기존주차장을 갈필요없이 바로 다른주차장을 찾아 길안내를 받은후 주차를 할수가있다.
그외는 UI적인 부분에서 지도의 핀이나 전기차 충전가능여부, 필터등을 개선을 하였다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
3주동안 진행을 하면서 정말 많은 어려움이 있었던것같음.
리서치를 했지만 필요한정보가 계속 나와 리서치를 계속진행을하거나
리서치중에서도 잘못된정보가 있어서 중간에 수정을 하거나 했다. 그리고 항상 할때마다 느끼는거지만
이게 정말 최선인지 모르겠다. 리서치든, 문제해결이든, 아이디어도출이든 뭔가 정보는 많이 나오지만
중간에 건너띈 단계도 있는것같기도하고 없는것같기도하고 암튼 계속 해보면서 경험을 쌓는게 중요한듯..