유이로운 개발일지

원래는 사진처럼 Header가 fixed된 상황이고, body의 컨텐츠가 header의 뒤로 인식이 되어 header앞으로 튀어나오지 않았다. 근데 body 컨텐츠에 hover로 animation, transform(scale)효과를 적용하고 나니, 하버할 경우 사진처럼 컨텐츠가 header의 앞으로 튀어나오는 현상이 생겼다. 이후 animation, transform을 적용할 경우 z-index가 1로 처리되는 효과가 있다는 블로그 글을 보고, header의 z-index를 999로 설정하여 문제 해결하였다. (꼭 999가 아니더라도 1보다 큰 숫자면 모두 유효하다) (실제로는 hover 적용된 상태이지만 header의 앞으로 튀어나오지 않는다) 오늘도 잘 해냈다!

기본적으로 로컬스토리지에는 문자열로 저장되기 때문에 object, object로 저장된다 ex) localStorage.setItem("상품명", {name: "멋있는 티셔츠", 가격: 10000}) -> Object, object 따라서 setItem을 할 때 JSON.stringify를 이용해 로컬 스토리지에 저장한다. ex) localStorage.setItem("상품명", JSON.stringify({name: "멋있는 티셔츠", 가격: 10000})) 이렇게 해서 getItem으로 데이터를 불러와 보면 문자열 속에 갇혀있는 객체로 데이터가 저장된다. ex) localStorage.getItem("상품명") -> '{"name":"멋있는 티셔츠","가격":10000}' 따라서 문자열 속성을 삭제하..

화살표 함수를 사용 경우 함수 내 다른 것 없이 'return 문'만! 존재하면 return과 중괄호 함께 생략 가능함! 예를 들어 function arrowFunction() => { return 이러쿵저러쿵 } 위처럼 화살표 함수 내 return문만 딱! 홀로 외로이 존재할 경우 function arrowFunction() => 이러쿵저러쿵 이렇게 return문과 {} 를 함께 생략하여 깔끔하게 한 줄로 만들 수 있다! 오늘도 잘 해냈다!

특징: 변수는 랜더링 될 때마다 초기화 된다. 그래서 변경된 값을 저장하기 위해 아래 두 가지의 hook이 필요하다. useState : 변경값이 필요할 때 사용, 값이 변경될 때마다 랜더링이 일어나게 한다. useRef: 값 자체는 변경이 된 상태로 저장이 되지만, 랜더링이 일어나기 전까지 이가 표면적으로 보이진 않는다(값을 저장하기 위해 주로 사용) useEffect: 특정 상황에서만 랜더링이 일어나게 한다. 의존성배열이 적용 되는데, 이가 빈값 [ ]으로 설정될 경우 단 한 번만 랜더링이 일어난다. 특정값을 설정할 경우에는, 해당 경우에만 랜더링이 일어난다. useContext: props를 최하위로 내려 주기 위해 props drilling현상이 일어날 때가 있는데, 이가 필요 없도록 전체를 기준..