유이로운 개발일지

Props란? Props는 부모컴포넌트에서 자식컴포넌트로 값을 전달해 줄 때 사용된다 예를 들자면, 할아버지의 이름을 엄마에게 전달해 주기 위해서는 아래와 같은 코드가 작성된다. function Grandpa() { const name = "할아버지"; return ; } function Mother(props) { return 나는 {props.fatherName}의 자식입니다 ; } 여기서 Mother(props)에 있는 props는 p나 father mother f m 등으로 적어도 return 문과 동일하게 맞춰 준다면 잘 해석되긴 하지만, props는 props임을 보여 주는 것이 여러모로 좋으니 props로 통일해서 적는 것이 좋다! Props Drilling이란? Props Drilling이..

React 문법 내에서 return을 할 때 한 줄일 때는 소괄호가 따로 필요 없지만, 한 줄을 초과할 경우 소괄호가 필요하다 그리고 JSX 식에는 부모요소가 한 가지만 있어야 하고, retrun 문의 최상단에는 태그가 하나만 존재해야 하기 때문에 return을 여러 줄 해야 할 경우 하나의 태그로 해당 줄을 감싸 줘야 한다! 참고로 빈 태그도 사용 가능하며, 브라우저에서는 빈 태그는 해석하지 않기 때문에 빈 태그 내부의 내용만 보이게 된다! function () { return ( 안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! 안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! 안녕하세요 저는 유이입니다! 즐거운 하루 보내세요! ) } return 뒤에 ()을 붙이고, 태그로 감싸 준 모습 fun..

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가 잘 설정되어 있었다. 그래서 구글링을 했는데 나에게 해당되는 부분은 전혀 없었다. 고민하던 도중 우리의 친구! 관리자 도구를 열어보자는 생각이 들었다! 그래서 해당 설명칸 부분을 확인해 보았다 귀신이 곡할 노릇..