TIL (Today I learned)
오늘 나는 무엇을 했나요
- React 입문 2주차 마무리
- UX집중반
오늘은 어떤 것을 배웠나요
-React 입문 2주차
오늘은 입문2주차에서 익혀야할것들인 state와 props를 잘 이해가 안가 다시 한번 복습하는 차원으로 다시 복습을 하였다.
그래서 진짜 중요한것들은 다시 한번 적어놓고 외웠다.
state 사용용도
1.자주 변경될것같은곳에 사용하기
2.굳이 한번 정하고 자주 변경이 안될것같으면 함수로 사용하기
state 변경방법 및 이벤트핸들러 와함께 사용방법
1.클릭시 뭔가 실행하고 싶으면 onClick={함수} 이렇게 이벤트 핸들러를 달아서 사용합니다.
2.. state를 변경하려면 state 변경함수를 꼭 이용하자
state변경함수는 ( ) 안에 입력한걸로 기존 state를 갈아치워준다.
props로 부모 -> 자식 state 전송하는 법
2개의 step을 따라주시면 된다.
1. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름} />
2. 자식컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용
그리고 이미지를 넣거나 public 폴더를 이용하는 방법이 궁금해서 따로 찾아보고 이미지를 넣어보면서 해보았다.
- UX집중반 ( UX 프로젝트)
솔루션 도출을 위한 과정
오늘부터 정의한 핵심문제를 해결하기 위한 솔루션 도출을 시작하였다.
그전에 지난주에 나온 피드백중 핵심문제가 무엇인지 모르겠단 피드백을 바탕으로 장표를 추가하여 핵심문제가 무엇인지를 한눈에 알 수있게 하였다.
여기서 왼쪽 우선순위에서는 그래서 1위가 핵심문제인가요? 어떤게 핵심문제인가요 란 피드백으로 수정을 하였다.
그후 그 핵심문제에 대한 근본적인 이유를 판단하는 과정이 부족하다고 판단하여 팀원들과 같이 5whys를 진행을 한 후
솔루션 도출 과정으로 들어가기로 하였다.
먼저 우리는 핵심문제를 반납장소의 부족으로 결정을 하였다.
그래서 일단 정보가 살짝 부족하여 추가적으로 리서치를 진행하였다.
모아온 자료들과 이전에 데이터들을 바탕으로 내일부터 아이디어 발산하는 시간을 가질 예정이다.
오늘은 어떤 문제를 겪었고, 앞으로는 어떻게 해결할 것인가요
이미지를 넣을때 문제가 있었다.
분명 검색한것처럼 똑같이 했는데 사진이 안나오는 문제였다.
개발자모드에서 네트워크로 봤을땐 정상적으로 요청까지 되었는데 왜 안되는지 조금 시간을 투자하였다.
App.jsx에
를 넣고
App.css에
이런식으로 했는데 이미지가 안뜨고 이게 글자를 입력해야지만 그 글자가로길이에 따라 나오는것이다.
아 그래서 이미지 크기가 고정이 안되있나. 이게 이미지가 이상한가 계속 찾아보다가 결국 원인은 다른곳에있었다.
저기서 root가 원인이였다. 이 root의 max-width 크기가 1280px으로 되있는데 이것을 100%으로 변경을 해주니깐 그제서야 이미지가 정상적으로 나왔다. root가 원인인 이유가 index.html을 보면 알수있었다.
이게 결국 root가 가장 크게 묶어주는div였던거고 이root가 설정이 이상해서 이미지가 출력이 안된것이였다.
피그마로 치자면 가장 바깥쪽의 프레임과 비슷하다.