yOu gOOd ?!

[ Gemini 대화 요약 ] React 컴포넌트 간 상태 공유 (Context API)최종 목표 interestPage.tsx에서 사용자가 SelectButtonGroup 컴포넌트를 통해 '관심사'를 선택하면, 그 결과가 형제 컴포넌트인 SelectedInterests에 실시간으로 표시되도록 하는 것.핵심 문제 및 해결 과정문제: SelectButtonGroup과 SelectedInterests는 부모(interestPage)는 같지만 서로는 관계가 없는 형제(sibling) 컴포넌트입니다. 한쪽에서 일어난 일을 다른 쪽이 직접 알 방법이 없습니다.해결책:중앙 저장소(Context API) 생성: 모든 관련 컴포넌트가 구독할 수 있는 중앙 데이터 저장소인 InterestContext.tsx를 만들었..

유즈 이펙트 사용 목적 : 컴포넌트를 React가 아닌 위젯, 네트워크, 또는 브라우저 DOM과 같은 외부 시스템과 동기화 어떤 코드가 Effect에 있어야 하는지 이벤트 핸들러에 있어야 하는지 확실하지 않은 경우 이 코드가 실행되어야 하는 이유를 자문해 보세요. 컴포넌트가 사용자에게 표시되었기 때문에 실행되어야 하는 코드에만 Effect를 사용하세요. 핵심 패턴:렌더링 로직 내에서 파생 상태 계산:어떤 상태 $A가 변경될 때 $B 상태도 $A에 기반하여 변경되어야 한다면, $B를 별도의 useState로 관리하기보다는 $A로부터 파생된 값으로 렌더링 로직 내에서 직접 계산합니다.이것은 $B가 $A의 변화에 즉각적으로 반응하여 재계산되어야 할 때 가장 효율적인 방법입니다.이벤트 핸들러 내에서 여러 상태..

NodeList와 HTMLCollection은 모두 DOM(문서 객체 모델)에서 여러 요소를 선택하여 반환할 때 사용되는 배열과 유사한(array-like) 객체입니다. 그러나 중요한 차이점이 있으며, 이 차이점에 따라 할 수 있는 일과 주의할 점이 달라집니다.NodeList vs HTMLCollection: 차이점 및 활용 가능성1. 핵심 차이: 실시간(Live) vs. 정적(Static)이것이 두 객체의 가장 근본적인 차이점이며, 활용 방식에 큰 영향을 미칩니다.HTMLCollection (실시간 - Live)DOM 구조의 변경 사항을 자동으로 실시간 반영합니다. 예를 들어, HTMLCollection을 얻은 후에 DOM에서 해당 컬렉션에 포함될 요소가 추가되거나 제거되면, HTMLCollection..

Element: insertAdjacentHTML() 메서드 - Web API | MDNElement 인터페이스의 insertAdjacentHTML() 메서드는 지정된 텍스트를 HTML 혹은 XML로 파싱하고 결과 노드들을 지정된 위치의 DOM 트리에 삽입합니다.developer.mozilla.org모든 것이 재렌저링 되지 않음. "beforebegin"요소 이전에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다. "afterbegin"요소 바로 안에서 처음 자식 이전에 위치합니다."beforeend"요소 바로 안에서 마지막 자식 이후에 위치합니다. "afterend"요소 이후에 위치합니다. 오직 요소가 DOM 트리에 있고 부모 요소를 가지고 있을 때만 유효합니다. ..

lastChild -> 텍스트노드lastElementChild -> 마지막 요소 쿼리 셀렉터는 문서를 한번 전체 스캔해야 하는구나~ parentNode가 쓰이는 경우는 고작 이거. .closet('') -> 조상 중 가까운 조상 -> 요소 트리에 있는 아무 조상을 선택할때 사용합미다. 같은 형제 요소 -> previousElementSlbling, next... 생성!

코드 내용은 태그를 가진 모든 요소를 문서에서 찾아내는 부분입니다.const listItemElements = document.querySelectorAll('li');const listItemElements = document.getElementsByTagName('li'); (이 줄이 강조되어 있습니다.)그리고 이미지 하단의 한국어 설명 "이것만 요소의 변경 사항을 반영하는 실시간 목록을 제공합니다"는 바로 두 번째 방법인 document.getElementsByTagName('li')를 가리키고 있습니다.이것이 의미하는 바는 다음과 같습니다.document.querySelectorAll('li'): 이 메서드는 코드가 실행되는 그 순간 문서에 존재하는 모든 요소들의 **정적인(static) 목록..

속성(Attributes):HTML 코드 상에서 요소 태그에 직접 작성됩니다. (예: 여기서 id, class, value가 속성입니다.)HTML 문서의 초기 상태를 나타냅니다.프로퍼티(Properties):브라우저가 HTML 코드를 파싱하여 DOM 요소를 생성할 때, 이 DOM 객체에 자동으로 추가되는 객체의 속성입니다.해당 DOM 요소의 현재 상태를 나타냅니다. 자바스크립트에서 element.id, element.className, element.value와 같이 접근하고 조작하는 대상입니다.관계 및 동기화:브라우저는 HTML 속성을 읽어와 해당 DOM 객체의 초기 프로퍼티 값을 설정합니다.많은 경우, 속성과 프로퍼티는 서로 **매핑(Mapping)**되어 있으며 **"실시간 동기화(live syn..

Function.prototype.bind() - JavaScript | MDNbind() 메소드가 호출되면 새로운 함수를 생성합니다. 받게되는 첫 인자의 value로는 this 키워드를 설정하고, 이어지는 인자들은 바인드된 함수의 인수에 제공됩니다.developer.mozilla.org bind() 메서드가 실무에서 사용되는 주요 경우 1. 이벤트 핸들러에서 this 컨텍스트 고정Click Meconst myObject = { name: 'MyObject', handleClick: function(event) { // bind를 사용하지 않았다면 여기서 this는 보통 요소를 가리킵니다. console.log(`클릭 이벤트 발생!`); console.log(`this의 name ..

프로퍼티와 메서드를 가질 수 있습니다.설명: 일반 객체처럼 함수에도 키-값 쌍의 프로퍼티를 추가하거나 내장된 프로퍼티를 사용할 수 있습니다.핵심 패턴: 함수.프로퍼티명 = 값; 또는 함수.메서드명();예시:function sayHello() { console.log("Hello!");}sayHello.description = "인사를 하는 함수입니다."; // 커스텀 프로퍼티 추가console.log(sayHello.description); // "인사를 하는 함수입니다."console.log(sayHello.name); // "sayHello" (내장 프로퍼티: 함수 이름)console.log(sayHello.length); // 0 (내장 프로퍼티: 기대하는 인자의 수)const numbers = ..

중요한 참고 사항. 이 글의 끝 부분에 있는 "함수는 객체만 반환"하는 특수 사례를 놓치지 마세요!1) 기본 구문:const add = (a, b) => { const result = a + b; return result; // like in "normal" functions, parameters and return statement are OPTIONAL!};주목하실 만한 사항. 마지막의 세미콜론, 함수 키워드 없음, 매개변수/인수의 괄호.2) 정확히 하나의 매개변수를 받는 경우 더 짧은 매개변수 구문.const log = message => { console.log(message); // could also return something of course - this example j..

inner join 은 양쪽 테이블 모두 일치하는 경우 값 반환outer join 에서 left join 오른쪽 컬럼 nullnot exists는 특정 조건을 만족하는 레코드가 쿼리에 없을때 메인 쿼리를 반환할 경우 유용. 특정 조건이 없는 레코드 필터링 용도rank()는 1224, dense_rank()는 12223over()절은 윈도우를 정의, 데이터를 partition by하고 order by 하는 방법 지저정, 각 행에 대해 어떤 범위의 데이터를 가지고 계산할 것인가. 집계범위. partition by는 전체 결과 집합을 그룹으로 나눔. 그룹별로 별도 계산 수행. 그룹별 집계 구간 지정윈도우 함수 : 결과 집합의 개별 행을 유지하면서 계산 결과를 추가. 각 부서별 급여 순위SELECT 사원..

단순히 명령어를 나열하는 것을 넘어, 프로젝트의 변경사항을 추적하고, 협업하는 것 정의 워킹 디렉토리 (Working Directory):물질적 비유: 사용자님의 컴퓨터 책상 위, 현재 펼쳐놓고 작업 중인 실제 프로젝트 파일들이 놓인 공간입니다. 코드를 수정하고, 파일을 생성하거나 삭제하는 모든 활동이 여기서 일어납니다.실체: 프로젝트 폴더 그 자체입니다. my-project/ 같은 곳이죠.스테이징 에어리어 (Staging Area, 또는 Index):물질적 비유: 책상 위에서 작업한 결과물 중, 다음번 공식 기록(커밋)에 포함시킬 것들만 골라 올려두는 '발표 준비대'와 같습니다. 모든 변경사항을 한꺼번에 기록하는 것이 아니라, 의미 있는 단위로 선별하는 중간 단계입니다.실체: .git 디렉토리 내의 ..