프론트엔드 첫걸음

https://engineering.linecorp.com/ko/blog/line-securities-frontend-3/ [커스텀 훅 도입 이전] 원래 App 컴포넌트는 5개의 구성 요소를 가지고 있습니다. 상태 변수인 checkList와 이벤트 핸들인 handleCheckClick, isAllChecked를 계산하는 부분, 체크박스를 그리는 부분, 그리고 그 밖의 것을 그리는 부분입니다. 이 중에서 Checks 컴포넌트를 분리하는 과정에서 App에서 빠진 것은 체크박스를 그리는 기능뿐입니다. 나머지 4개의 기능은 여전히 App에 남아 있고, 재사용할 수 없습니다. 특히 checkList가 여전히 Checks가 아닌 App에 남아있는 것은 주목할 만합니다. App이 '다음' 버튼의 disabled 속성..

[출처] https://stackoverflow.com/questions/71540973/why-use-usequeryclient-from-react-query-library https://tkdodo.eu/blog/react-query-fa-qs#why-should-i-usequeryclient QueryClientProvider는 생성된 queryClient 를 React Context에 넣어 앱 전체에 배포한다. useQueryClient로 가장 잘 읽을 수 있다. 이렇게 하면 추가 구독이 생성되지 않으며 추가 재렌더링이 발생하지 않는다(클라이언트가 안정적인 경우). //클라이언트가 안정적인 경우 export default function App() { // ✅ this is stable const..

const docFragment = document.createDocumentFragment(); 비어있는 documentFragment 객체를 만드는 함수 const docFragment = document.createDocumentFragment(); for(let i = 0; this.#slideNumber; i++) { const li = document.createElement('li'); li.dataset.index = i; docFragment.appendChild(li); } this.wrapperEl.querySelector('ul').appendChild(docFragment); 비어있는 객체에 li를 넣은뒤에 빈객체에 차례로 넣고, documentFragment객체를 ul안에 넣어서..

css : filter invert - 색상반전 hue-rotate - 색상환 자바스크립트 클래스 private 속성 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields [Private class features - JavaScript | MDN Class fields are public by default, but private class members can be created by using a hash # prefix. The privacy encapsulation of these class features is enforced by JavaScript itself. develop..

[원본 강의] https://youtu.be/337HnOk13zc [참고] https://blogpack.tistory.com/706 clientHeight 는 요소의 내부 높이입니다. 패딩 값은 포함되며, 스크롤바, 테두리, 마진은 제외됩니다. offsetHeight 는 요소의 높이입니다. 패딩, 스크롤 바, 테두리(Border)가 포함됩니다. 마진은 제외됩니다. scrollHeight 는 요소에 들어있는 컨텐츠의 전체 높이입니다. 패딩과 테두리가 포함됩니다. 마진은 제외됩니다. https://deeplify.dev/front-end/markup/position-sticky sitcky 속성은 필수적으로 top, bottom, left, right들 중에 하나를 필수적으로 설정해주어야 합니다. 클래스가..

css border로 삼각형을 그릴수 있다는 것을 알게되었다. 충 격... border가 왜 삼각형이 되는거야... 알고보니 우리가 아는 border는 각각 그 모서리에 각도를 가지고 있었던 것이었다...!! .border { width: 100px; height: 100px; border: 10px solid red; border-right: 10px solid transparent; } 그러니까 내부의 크기를 0으로 하고 border로만 영역을 채운뒤에 세 변의 border를 삭제하면=> 남아있는 border가 삼각형모양으로 보이는것이다.. 응용하면 딱지모양 ☒ 도 만들 수 있고, 가운데가 비어있는 딱지 모양도 만들수 있다..! See the Pen button style by JEONG (@cona..

순회하는 element에 모두 ref를 달지 않고 상위 element에만 ref를 달아준 뒤에 상위 ref에서 Array.from(상위element.ref).map 을 사용해도 되지만- map으로 순회하는 component마다 ref를 달고 싶다면 ?? https://stackoverflow.com/questions/63059962/reactjs-map-with-a-ref-to-each-component ReactJS .map with a ref to each component Working on making it so when a user goes back a page in my react app they will be scrolled to the position on the page they were..

1. 루트경로에 jsconfig.json 만들고 (.gitignore, package.json과 같은 위치) 2. 아래와 같이 compilerOptions에 baseUrl추가 { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 3. ide를 껐다 켠다. 3번이 중요함. 아 왜 안되지 안되나보다 했는데 껐다 켜니까 잘됨 ^^ 껐다 켜시오. [참고] https://imkh.dev/react-absolute-path/

datalist와 option의 차이 datalist는 추천하는 선택지를 나타내는 option 여러개를 보여줄 수 있으면서 input으로 자유롭게 입력할 수 있다. datalist 사용방법 datalist에 id 주고, 그 id를 input의 list속성에 value로 제공한다. img1 img2 img3 예시 See the Pen html datalist by JEONG (@cona) on CodePen.

background-clip text : 백그라운드 이미지를 텍스트에만 border-box : border까지 padding-box : padding까지 context-box : content내에서 background-position: 배경화면 위치 background-position: left 20px; /* 0% 20px; */ background-position: 50% 50%; /* center; */ background-position: bottom 50px right 100px; /*아래로부터 50px, 오른쪽으로부터 100px*/ background-position: 100px 50px; /* 왼쪽으로부터 100px, 위로부터 50px */ background-size /* Keyword v..