프론트엔드 첫걸음

개요김민태 React 강의를 보다가 DOM을 추가하는 코드에서 forEach(bind()) 부분이 이해되지 않았다. 처음에는 forEach(child => parent.appendChild(child))는 이해가 됐는데, forEach(parent.appendChild.bind(parent))가 같은 동작을 한다는 점이 납득되지 않았다. 그래서 이 부분을 공부한 내용을 정리해 본다.function createDOM(vdom) { const element = document.createElement(vdom.tag); // element가 생성됨 vdom.children .map(createDOM) // 각 자식 요소를 재귀적으로 DOM 요소로 변환 .forEach(element.appe..

아직 part2 canvas 강의밖에 올라오지 않아 해당 부분에 관한 강의후기만 남긴다. 느낀점 1. 명확하다. 나는 웬만한 강의들을 다 한번씩 찍먹해보았는데, 어떤 강의는 강의 찍기 전 리허설 같은것도 안하는지.. "아 죄삼다. 이부분이 잘못되었네요" 이렇게 하고 넘어가버린다. 제로초님처럼 화면에 자막으로 '이부분 오타입니다 ' 띄워주고 바로바로 정정해주면 좋은데 나는 강의 30분대에서 멈춰서 오류난다고 1시간쯤 방황하다가 나중에보면 강사가 40분대에 가서 오타였다, 오류였다 정정해주는 경우도 있었다. 강사님이야 라이브코딩하면서 10분만에 오류확인하는 거겠지만, 코드 따라치는 입장에선 중간에 일시정지해놓고 한참 방황하는데.... 하지만 이번 패캠 강의는 달랐다. ppt와 대본이 완전히 준비되어 있는 느..

https://www.youtube.com/watch?v=ZQDsWySjY6g 아 웃겨 눈물났네 ㅋㅋ 컴퓨터는 이진법으로 숫자를 처리하는데, 이 방식으로는 모든 숫자를 정확하게 표현하지 못한다. 1/3 이를 십진법으로 나타내면 0.3333333333333333333...으로 나타내나 끝없이 나타낼수없으며, 이를 끊어서 쓰는 순간 오차가 생김 이처럼 이진법도 오차가 나옴. 이진법에서는 0.1이 무한소수가 됨. 컴퓨터는 메모리를 가장 효율적으로 활용할 수 있는 방식으로 데이터를 저장한다. 프로그래밍에서 사용되는 숫자자료형으로 대표적으로 int가 있고, 자바에서는 작은 범위의 숫자를 나타내기 위해 byte를 사용한다. 두번째로 자바의 float, 자바스크립트의 number가 있다. 부동소수점 = floatin..

웹브라우저의 초기역사 웹 브라우저의 초기 역사는 월드 와이드 웹이 대중에게 처음 소개된 1990년대 초로 거슬러 올라갑니다. 최초의 웹 브라우저는 WorldWideWeb이라고 불리며 웹 발명가인 Tim Berners-Lee가 만들었습니다. 그러나 이 브라우저는 NeXT 컴퓨터용 틈새 운영 체제인 NeXTSTEP에서만 사용할 수 있었고 널리 사용되지 않았습니다. 1993년 NCSA(National Center for Supercomputing Applications)의 Marc Andreessen과 그의 팀은 광범위한 인기를 얻은 최초의 웹 브라우저인 Mosaic을 출시했습니다. Mosaic은 사용하기 쉬웠고 그래픽 사용자 인터페이스가 있었으며 이미지 및 기타 멀티미디어 콘텐츠를 지원했습니다. Mosaic..

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..