seopport.log

시간 배열의 개수에 따라 grid cols 수를 동적으로 스타일링 하고 싶었다. 그런데 이런식으로 계산한 값을 템플릿 리터럴로 넣었더니 문제가 발생했다. const gridColNum = dateInfo.times.length 4 && dateInfo.times.length

className에 스타일을 적용할 때 테일윈드의 문법을 자동완성 시켜주고 툴팁으로 어떤 속성인지 설명까지 적어준다 ... 이런게 있었다니 홈페이지 하나하나 찾아가면서 한 과거의 내가 안타깝군

저번에 찍먹해본 모달창을 이번에는 직접 구현해보았다. 까먹을 수 있으니 기록해두기.. 1. 모달을 띄울 backgroud wrap(StModalWrap)과 모달창(ModalContainer)을 만든다 모달창 backgroud wrap의 부모 요소(MainWrap)를 position relative로, 모달창 backgroud wrap(StModalWrap)을 fixed로 설정하고 모달창 컨테이너는 absolute로 설정한 후 가운데 정렬한다. return ( {isRendered && } {isRendered && } ); } const StModalWrap = styled.div` width: 100%; min-height: 100vh; position: fixed; background-color: r..

parseInt는 공백 있거나 해도 대충 숫자면 다 변환해줌 문자열 있어도 제외하고 숫자만 반환 Number은 엄격하게 체크 태그에 onClick 같은 건 있는데 내가 스타일드를 위해 선언한 props는 인식할 수 없자나 그니까 스타일드에서만 받는 프롭스는 딸라를 붙여줘 마지막 아이템에만 적용되는 스타일: IconWrap에 margin-left: auto;를 적용하여, 마지막 아이콘만 오른쪽 끝으로 이동시킬 수 있습니다. 이 방법은 Flexbox에서 한 요소를 나머지 요소들로부터 분리하여 오른쪽으로 밀어내고 싶을 때 유용합니다. span 등 inline 속성의 margin은 양 옆으로만 적용 때문에 위 아래 마진을 적용하고 싶으면 inline block을 지정해 주거나 block 속성태그를 사용해야한다...

팬레터 사이트 트러블슈팅 1. styledComponent, props 오류 styled components에서 props를 통해 스타일을 제어하는 부분에서 오류가 나고있었다. 1.' React에서 "알 수 없는 속성이 DOM 요소로 전달되고 있습니다' 코드를 살펴보니 이러한 오류가 나는 props들은 스타일드 컴포넌트에서만 사용되는 props였다. 다른 컴포넌트로 해당 props를 전달하지 않고, 해당 스타일 규칙이 현재 컴포넌트의 스타일 범위 내에 있다면 해당 props는 스타일드 컴포넌트에서만 사용되는 것으로 간주된다. 그러나 DOM은 이를 알지 못하고 속성(attribute)으로 인식하게 되어 경고가 발생하는 것이다. 해결 방법은 transient props(일시적인 props)를 사용하는 것이다..

useState와 useRef 비교하기 useState와 useRef의 차이점을 알아보기 위해 간단한 코드를 작성해보았다. function App() { console.log("렌더링 되었음") const [text, setText] = useState(''); const handleStateChange = (e) => { const newText = e.target.value; setText(newText) console.log(newText) } const inputRef = useRef(); const handleRefChange = () => { console.log(inputRef.current.value); } return ( State Ref ) } 두 input에 각각 state와 ref를..

CSS-in-JS 자바스크립트로 CSS 코드를 통해서 작성하는 방식 styled component는 말그대로 스타일된 ‘컴포넌트’이기 때문에 대문자로 시작해야한다. 그렇지 않으면 적용이 안됨. 만든 후 html태그 처럼 사용한다. import React from "react"; import styled from "styled-components"; const StBox = styled.div` //styled.p styled.span 등등 width: 100px; height: 100px; border: 1px solid green; margin: 20px; `; function App() { return 박스; } export default App; React Hook useState 기존 업데이트 방..

버블소트 구현하기 function bubbleSort(arr) { var len = arr.length; // 배열의 길이 저장 for (var i = 0; i arr[j + 1]) { // 현재 원소가 다음 원소보다 큰 경우 // 두 값을 교환 var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; // 정렬된 배열 반환 } // 테스트 var arrayToSort = [64, 34, 25, 12, 22, 11, 90]..