08_[항해99 3기 2주차 React.js]_2021.09.25

 

오늘의 공부

 

react 환경에서 슬라이더를 넣고싶을때, react-slider 를 이용하면 편하다는 점을 알았다.

 

styled-components 를 분리할때 컴포넌트별로 조각내서 분리할지 겹치는 부분만 분리할지 고민중이었는데

멘토님께 여쭤보니 멘토님은 겹치는 부분은 분리하고 나머지는 컴포넌트파일에 넣어두신다고..!

 

...뭔가 적어보이는데 작업하느라 시간을 꽤 날렸다.

 

오늘의 작업

 

[과제] 전체적인 스타일 작업ing, 슬라이더 추가

사실 어젠가 그젠가 피그마작업은 다 했지만 TIL에 링크를 안넣어놨길래..허헣

https://www.figma.com/file/iylbKcUH0D9dfzNxyeRhUw/SpartaReact_Dictionary?node-id=2%3A141 

Figma

슬라이더의 버튼으로 할지 input range타입으로 할지 고민해서 일단 figma에는 둘 다 디자인작업을 해두었으나..

버튼 승리. 

 

input range 타입은 보기엔 좀 깔끔하고 (내 눈에)이쁘게 넣었지만..

그것의 용도가 정확히 무엇인지, 그리고 버튼에비해 위의 것을 보려면 마우스를 너무 움직여야하는 점이 싫다!!!

이럴바엔 그냥 바깥의 div에 overflow:scroll; 을 넣어서 웹킷이나 그런걸로 스크롤바를 꾸미는게 낫겠다 싶어졌고..

버튼을 넣으니 확실하게 용도가 보이니 좋다. 

 

슬라이더 안의 요소들 간격 조정이 필요하겠다. 간격으로 인해 아래가 빈 공간처럼 느껴져 여백이 커보인다..

뒤로가기버튼은 왜 저기있냐..방금 알았다..........

짬이 나면 두번째보여지는 박스에 이목을 집중시켜줄 수 있게 위아래녀석을 흐리게 만들어볼까 한다..

 

버튼의 경우 기존의 버튼이 구린데 react와의 문제인지 position:absolute를 사용해도 위치가 하나도 움직이지 않았다!

이것저것 만져보니 내 추측상으로는.. react-slick 으로 슬라이더를 추가한 경우 자동으로 생성된 div들이 컴포넌트파일 안에서 styled-component 를 통한 디자인은 씨알도 맥히지 않는..것..!!!!

 

그래서 일단 작업을 어느정도 진행해야하니 약간 돌아서 아예 새로운 버튼을 두개를 생성하고 자동으로 생성된 버튼은 가렸다.

(이때, 내 경우에는 그냥 겉 div에게 overflow:hidden 을 주어 버튼을 감추었으나 다른 방법도 많다. 불투명도를 0으로 만들고 클릭을 막아둔다던가.. 내가 overflow를 사용한 이유는 저걸 쓰면 한줄로 해결되었기 때문.)

생성한 버튼 두개는 하나의 div로 감싸 position:absolute로 간격을 계산해서 정확하게 원하는 위치에 놓았다.

디자인도 쉽게 하고! 행복하다. 

이렇게 만든 버튼에 onClick으로 함수를 실행해준다.

이 함수는 자동으로 만들어진 react-slick의 버튼을 클릭하는 동작을 하게 짜놓는다.

이러면 "내가 만든 버튼을 클릭한다" > "숨겨진 버튼이 강제로 클릭된다."  끝.

 

그 외에 단어를 추가하는 페이지쪽의 디자인을 좀 잡았다.

아직도 수정할게 꽤 보인다.

텍스트 입력창 내부에 padding 좀 주고 준 만큼 width랑 height 좀 빼야겠다..

저 딱 달라붙어있는게 너무 싫다.

버튼색도 변경해야한다. 이전 페이지의 버튼과 다른 기능임에도 같은 색이라니. 용납할 수 없다!!!

자고로 페이지 이동을 위한 버튼과 무언가의 정보를 수정, 추가하는 버튼은 달리 보여야 하는 법 아닌가?!

(아니면 죄송합니다. 젊은 새싹 프론트엔드희망자의 가오가 넘쳐서 그렇습니다.)

 

오늘 하루는 이런저런 검색때문에 거의 다 보냈다.

특히..이놈의 react-slick 은 뭐가 이리 안되는게 많은지.

감사하게 사용했으나 마음에 들지 않는 점, 내가 검색을 많이 했어야 했던 부분들은 따로 정리를 해서 글을 써야겠다.

(이놈의 따로 정리해서 쓰겠다는 말도 몇번이나 했지..?)

 

이번 TIL은 gif를 추가해보았다. 알고보니 맥에 쉽게 화면녹화기능이 있어서 gif 변환 프로그램도 깔아서 사용해보는데 좋당ㅎ

다른 분들의 TIL을 보니 코드도 쓰시고 하던데 나는..어쩐지 긴 코드를 쓰고싶지 않다.

정확하게 말하자면 나는 코드를 코드로 이해하는 것 보단 그것을 해석한걸 적고 기능과 이 기능을 쓰기위해 검색해야하는것을 적어두는 편을 좋아한다. 이미 수많은 고수님들이 해결책을 올려두셨는데 감히 내가 뉴비의 검색창의 한켠을 이런 빈약한 정보력으로 차지해도 되는가?!

아무튼 그렇다. 

 

그럼 오늘도..20000. 빨리 양치하고 자야지..