Today I Learned
- 팀 프로젝트 UI 그리기
GOLLA 팀 프로젝트 기록
"useNavigation must be used within a data router" Error
const navigate = useNavigation();Uncaught Error: useNavigation must be used within a data router.
Header 컴포넌트에서 useNavigation을 사용하려고 했는데 갑자기 에러가 뜨면서 Header가 보이지 않는다. 검색해 보니 useNavigation이 아니라 useNavigate를 사용해야 하는 거였다ㅎㅎ
Layout.js 구조
const Layout = ({ children }) => {
return (
<Wrap>
<Header>
<div>{children}</div>
</Header>
</Wrap>
)
};이런 구조였는데 어느 페이지를 들어가도 Header 밑으로는 다른 요소가 렌더링되지 않았다.
const Layout = ({ children }) => {
return (
<Wrap>
<Header />
<div>{children}</div>
</Wrap>
)
};근데 생각해 보니 Header 안에 children이 들어가는 게 아니라 Header랑 children이 동일 선상에 있어야 하는 거였다. Layout 구조를 이렇게 수정하니 헤더 하단으로 다른 컴포넌트들이 잘 렌더링된다.
로컬에서 이미지 가져오기
<Img src={require("../../../assets/Logo.png")} />항상 이미지를 URL로 가져오다가 로컬의 이미지를 가져오는 건 처음이라 조금 헤매었는데 경로를 바로 src에 작성했을 때는 이미지를 불러오는데 실패하고, require를 써야 정상적으로 이미지를 불러올 수 있었다.
참고 https://sleepy-it.tistory.com/4
뒤로 가기 기능 구현 방법
<button onClick={() => navigate(-1)}>Go back</button>디테일 페이지에 뒤로 가기 기능을 구현하려다 웹에서는 굳이 필요 없을 거 같다는 의견에 안 하게 됐지만 생각보다 쉽게 뒤로 가기 기능을 구현할 수 있는 게 신기해서 기록해 둔다. 실제로 해본 건 아니지만 navigate에 -1을 하면 된다고 한다!
참고 https://bobbyhadz.com/blog/react-router-go-back-to-previous-page
margin에 마이너스를 줄 수 있다!
<img
src={require('../../../assets/Logo.png')}
style={{ height: 50, marginRight: -20 }}
/>로고 이미지 자체에 오른쪽에 공백이 있어서 정렬하는 데 어려움이 있었는데 margin: -20px을 주니까 이미지 자체의 오른쪽 부분을 줄일 수 있었다.
Programmers 문제 풀기
문자열 뒤집기
나의 풀이
function solution(my_string) {
let answer = ""
for (i = my_string.length-1; i >= 0; i--) {
answer += my_string[i]
}
return answer;
}쉬운 문제 같은데 자꾸 에러가 나서 뭔가 했더니 i>=0을 i=>로 써서 그런 거였다... >= <= += 모두 항상 =이 오른쪽에 간다는 것을 기억하자!! 근데 오늘도 결국 for문으로 풀었네😅
다른 사람의 풀이
function solution(my_string) {
return my_string.split('').reverse().join('');
}split으로 문자열 하나하나 쪼갠 배열을 만들고 reverse한 다음에 그걸 다시 join으로 합친다! 풀이 보자마자 딱 이해되는데 왜 이 생각을 못했지? 나 너무 for문만 사용하는 거 같아서 메서드를 좀 다양하게 사용하기 위해 이제 스스로에게 for문 금지령을 내려야겠다 ㅋㅋ
회고
리액트 네이티브 쓰다가 리액트 쓰려니까 적응 시간이 필요할 거 같다. 자꾸 View랑 Text 써야 될 거 같고 onClick도 어색하고 그렇다 ㅋㅋ 그래도 뭐랄까 고향에 돌아온 듯 편안한 느낌이다😇
오늘 하루종일 팀플 UI 구현했는데 나는 UI보다 기능적으로 코드 어떻게 짜면 좋을까 고민하는 시간이 더 재밌는 거 같다. 주말 내내 팀플에 시간 쏟느라 타입스크립트 공부를 하나도 못했다. 이렇게 된 이상 평일에 집중 열심히 해서 공부해야겠다. 화이팅!
