유이로운 개발일지

React의 컴포넌트는 항상 대문자로 시작한다 function App () {} 처럼! 이는 React 내부의 약속과도 같은 것이기 때문에 대문자로 쓰지 않으면 오류가 발생하므로 주의할 것!!! 그리고 폴더는 소문자로 시작하는 camelCase로 작성해 주면 된다! 오늘도 잘 해냈다!

배경을 설정하고, 이후 마지막 부분을 함수로 설정해서 영화 정보에 따라 자동으로 이미지가 들어오겠끔 해야 하는 상황이었다. 그렇기에 당연히 JS를 이용해 background image의 url 을 변경해야 했는데, background image에 linient-gradient도 함께 넣어놓은 상태라 적용이 될지부터가 걱정이었다. 결론적으로 아래 코드를 이용하였더니 gradient와 함수를 적용한 url 모두 잘 나옴을 확인할 수 있었다! bg.style.backgroundImage = `linear-gradient(rgba(0, 0, 0, 25%), rgba(0, 0, 0, 100%)),url(https://image.tmdb.org/t/p/original/${backdrop}`; bg는 참고로 아래 코..

분명 flex-grow: 1을 적용을 해 놨었고, 이전까지는 이가 잘 적용되는 것을 확인했었는데 갑자기 flex-grow가 적용되지 않는 현상이 나타났다. 위 사진처럼 영화 설명 부분에 flex-grow:1을 설정하여 정렬된 박스 중 설명칸이 가장 긴 카드에 맞추어 제목/평점 칸이 정렬되어야 했는데, 갑자기 이가 적용이 되지 않는 상황이었다. 정말 의아했던 점은 설명부분에 부모가 movie-card로 설정이 되어 있었는데 이에 flex설정이 잘 되어 있었고, 당연히 설명부분에도 flex-grow가 잘 설정되어 있었다. 그래서 구글링을 했는데 나에게 해당되는 부분은 전혀 없었다. 고민하던 도중 우리의 친구! 관리자 도구를 열어보자는 생각이 들었다! 그래서 해당 설명칸 부분을 확인해 보았다 귀신이 곡할 노릇..

overflow: scroll 로 css를 설정하게 되면 내부의 양과 외부 크기를 맞추어 스크롤을 만들어 준다 참 편리하고 좋은 기능이지만, 당연히도 기본적인 스크롤 디자인이기 때문에, 몇몇 사이트에는 적합하지 않을 가능성이 높다! 이럴 때에는 css로 아래사항을 변경해 주면 된다. element::webkit-scrollbar -> 스크롤바의 전체적인 사이즈, 배경색상등을 조정 가능하다 element::webkit-scrollbar-thumb -> 스크롤바 중 현재 위치 바를 조정할 때 사용하면 된다. .movie-info { overflow: auto; } /* 스크롤바를 주고자 하는 대상에 overflow:auto 또는 scroll 입력 */ .movie-info::-webkit-scrollbar ..