[TIL]05.20

제품을 검색해서 가져오는 경우 이름이 너무 길어 form이 깨지는 경우가 발생하여 텍스트가 정해진 크기를 벗어나면 잘리게 되는 css 를 적용 하였다. 

text 길이를 제한 할 때는 아래와 같은 조건이 필요하다. 

i. width 또는 height가 고정적일 것

ii. overflow: hidden; 을 사용해 영역을 감출 것

iii. 아래줄로 내려가는 것을 막기위해 white-space: nowrap 등이 필요

 

URL을 /search?product="검색어" 이런식으로 넣어 주기 위해서 쿼리 스트링을 사용 하였다. 

next를 사용하고 있가에 Router.pushRouter(`/saerch?product=${keyword}`를 적용하고 routes 파일로 가서 URL을 지정해 주었는데

URL에 쿼리스트링을 추가하면 에러가 난다. 

/search 이렇게 설정을 해야지 /saerch?product=:keyword 이렇게 설정을 하면 값을 찾아갈 수가 없다. 

 

getinitialprops 인자를 설정 할 때 타입 때문에 꽤 애를 먹었는데 타입 가드로 해결을 할 수 있었다. 타입에 대해서 좀 더 공부한 다음 다시 블로깅을 해보아야 겠다.