매일 공부한거 기록하기

영어에서 한국어로 처리 하려고 했을때 한국어가 세로로 나오는 문제가 생겼다. 이럴때는 white-space:nowrap; 요걸 추가해주면 된다! 휴 속 시원~~~

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org 1. Set Set 객체는 자료형에 관계없이 원시값, 객체참조 모두 유일한 값을 저장 할 수 있다. Set => 삽입 순서대로 요소를 순회 할 수 있다. 하나의 Set 내 값은 한번만 나타날 수 있다. => 어떤 값은 Set 컬렉션 내에서 유일하다. Set 내의 값은 유일해야 하므로 값이 같은지 검사한다. 2. has() Set객체에 주어진 요소가 존재하는지 판별한다. 3. add() a..

Header에서 메뉴를 눌렀을때 화면에서 해당 위치로 scroll이동을 하려고 했다. Main.jsx에서 Header와 여러 component를 import해서 사용했다. import Header import Test1 import Test2 import Test3 이런식으로 화면이 구성된다. Header에 props와 ref를 넘겨주면 될거라고 간단히 생각했으나 Header에 ref를 넘겨주는것이 아니였음! Main.jsx에서 컴포넌트에 해당되는ref를 생성해준다. 초기값은 null 이다. import Header import Test1 import Test2 import Test3 const test1Ref = useRef(null); const test2Ref = useRef(null); const..

https://ko.reactjs.org/docs/forwarding-refs.html Forwarding Refs – React A JavaScript library for building user interfaces ko.reactjs.org React.forwardRef를 사용해 전달된 ref를 얻고, 렌더링되는 DOM으로 전달해준다. ref는 직접 접근하기 위해 사용된다. html 엘리먼트가 아닌 React컴포넌트에서 ref props를 사용하려면 forwardRef() 함수를 사용해야한다. 컴포넌트를 forwardRef()로 감싸주면 , 해당 컴포넌트는 두개의 매개변수를 갖게 된다. 어렵잖아..

Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. domRect = element.getBoundingClientRect(); 출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect Element.getBoundingClientRect() - Web API | MDN Element.getBoundingClientRect() 메서드는 엘리먼트의 크기와 뷰포트에 상대적인 위치 정보를 제공하는 DOMRect 객체를 반환합니다. developer.mozilla.org 까먹지마~~~~~~

div에 text를 넣었을때 지정한 width를 넘어갈때가 있다! width를 직접 지정해줘서 인데 요거 둘중에 하나 골라 잡아서 써보셈~~~~ word는 단어단위로 잘라준당! word-break: break-all; word-break: break-word; 요걸 추가해주면 된다! 이건 왜 맨날 까먹음ㅎ? 문제 있을시 .. 살살 지적부탁 출처 https://developer.mozilla.org/ko/docs/Web/CSS/word-break word-break - CSS: Cascading Style Sheets | MDN CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다. developer.mozilla.org

아~ 진짜~~~ 이게 뭐라구 이렇게 고생을 했나 싶고ㅋㅋㅋㅋㅋ styled Component로 만든 radio Button이 checked된게 Update되지 않았다! value를 콘솔에 찍어보면 분명히 잘 set되는데! ㅋㅋㅋㅋㅋㅋ 이게 머라고 어제 저녁부터...^^..ㅋ 문제는...바로바로바로 e.preventDefatul(); 때문이였다^^ㅋ 이거 지워주니까 허무하게 잘 됨요ㅎㅎ;;; const onChangeName = (e: React.ChangeEvent) => { // e.preventDefault(); const { target: { value }, } = e; setBottleName(value); }; const onChangeShape = (e: React.ChangeEvent) =>..

반응형화면을 만들때 가장 먼저 어려움을 겪는 구간아닐까? width를 %를 잡고 img를 올렸을때 width별로 img위치가 어그러지는 경험ㅠㅠ 이럴땐 calc를 쓰면 좋다! https://developer.mozilla.org/ko/docs/Web/CSS/calc calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org

charAt()은 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 리턴한다. 출처 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/charAt String.prototype.charAt() - JavaScript | MDN charAt() 함수는 문자열에서 특정 인덱스에 위치하는 유니코드 단일문자를 반환합니다. developer.mozilla.org

styled-component에서 이미지를 항상 background-image:url();로 쓰고 있던중.. 갑자기 styled.img로 써볼까? 하는 생각이 들어서 검색해봤다! 다양한 방법이 있군.. ~이미지를 사용하는 방법을 알아보자~ 1. image를 import해서 url (${image});로 쓰는 방법 import smileLogo from "images/main/smileLogo.png"; const SmileLogo = styled.div` background-image: url(${smileLogo}); `; 여기서 height와 width를 조절하려면? 2. styled.img.attrs를 사용한다. import smileLogo from "images/main/Yummy.png"; ..