FireFox, Chrome - input, textarea
기본 input tag, textarea tag width/height 가 파이어폭스에서랑 크롬에서랑 다르구나 다른 태그들도 브라우저 따라 차이 조금씩 있을 수 있겠다. 물론 css 놓치지 않고 잘 짜면 똑같이 보인다 ~
2023.08.22
프론트 상태 관리 Recoil 사용하기
프론트 상태 관리 뭐로 할까하다가 useState 처럼 쓰이는 것 같은 recoil 발견 function App() { return ( ); } 대충 감싸주고 const textState = atom({ key: 'textState', // unique ID (with respect to other atoms/selectors) default: '', // default value (aka initial value) }); state key하고 기본 값 넣어주면 function TextInput() { const [text, setText] = useRecoilState(textState); const onChange = (event) => { setText(event.target.value); }; r..
2023.08.19
webpack ts react boilerplate
https://ryuhojin.tistory.com/19 [ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료) [2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않 ryuhojin.tistory.com 위 글 작성자분의 webpack5 boilerplate 위에 //webpack.common.js new webpack.ProvidePlugin({ React: "react", process: 'process/browser.js', //추가 }), process 못 찾는 에러 해결하기 위해 추가하고..
2023.08.18
JS Custom Elements, 사용자 정의 태그
Custom Elements class Test extends HTMLElement { constructor() { // super()를 호출함으로써 시작하여 올바른 프로토타입 체인이 확립되도록 한다. super(); } static get observedAttributes() { // 모니터링 할 속성 이름 // 이 메서드는 관찰하기를 원하는 특성들의 이름을 포함하는 배열을 return 해야 한다. return ['c', 'l']; } connectedCallback() { // 사용자 정의 요소가 문서에 연결된 요소에 추가될 때마다 호출된다. // 이것은 노드가 이동될 때마다 발생할 것이며, 요소의 내용이 완전히 해석되기 전에 발생할 지도 모른다. // DOM에 추가되었다. 렌더링 등의 처리를 하자...
2023.08.09