yOu gOOd ?!

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

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

function solution(arr) { // 재귀 호출을 위한 내부 함수를 만든다. // 이 함수는 처리해야 할 배열의 부분을 인자로 받는다. function recursiveOR(currentArr) { // **베이스 케이스:** 만약 현재 처리할 배열이 비어있다면 (길이가 0이라면) if (currentArr.length === 0) { // 더 이상 OR 할 게 없으니 0을 반환하고 재귀를 멈춘다. return 0; } // **재귀 스텝:** // 1. 배열의 첫 번째 요소를 가져온다. const firstBinaryString = currentArr[0]; ..

바닐라 자바 스크립트로 컴포넌트 구현, api 로 데이터를 가져오는 작은 과제를 하는데 "바닐라", "컴포넌트"로 하려니 ㅇ-ㅇ 상태되어서 아무것도 못하겠더라. 리액트는 잘 모르고 스벨트는 좀좀따리 강의를 듣는 중이라 스벨트로 구현하고 바닐라로 옮길 계획을 세웠다. 확실히 스벨트로 하니 신경쓸게 적어서 좋았다. 하나의 컴포넌트가 하는 일은 하나의 파일에서만 작성하면 되니까 하나의 파일에서 handle을 정의하고 내려줄 일이 적어지니 참 편했다. 모르겠는 부분은 문서와 구글링, ai 도움 조금으로 금방 해결됐다. 그리고 이 완성된 파일들을 ai에게 자바스크립트 컴포넌트 파일로 변환하라고 "시켰"더니 "해줬"다. 파일을 열어 코드를 뜯어보는데 app.js 파일 갔다가 컴포넌트 파일 갔다가 와리가리를 너무..

1. 왜 클래스?단순 함수와 전역 변수: 가장 간단하지만, 여러 카운터를 만들 경우 상태 관리가 복잡해지고 변수 이름 충돌이나 스코프 문제가 생기기 쉬웠다.클로저(Closure) 활용: 클로저를 이용해 상태를 숨기고 함수를 반환하는 팩토리 함수 패턴도 가능했다. 상태를 비공개로 유지할 수 있다는 장점이 있지만, 여러 인스턴스를 만들 때마다 함수들이 새로 생성되는 점, 그리고 '틀'로서의 명확성이 클래스보다는 부족하다고 느껴졌다.ES5 생성자 함수와 프로토타입: new 키워드와 함께 사용하는 전통적인 방식이다. 클래스와 가장 유사하지만, prototype을 직접 다뤄야 해서 문법이 다소 번거롭고 가독성이 떨어진다고 생각했다.이런 점들을 고려했을 때, ES6의 class 문법이 관련 데이터(상태)와 기능(메..

만들면 생성되고 실행된다. 코드가 이해 안 간다면 줄줄이기차, 해라.

냅다 시작합니다. 왜냐하면 나는 바닐라로 함수범벅인 코드만 짜봤기에 .. 해보고 싶어졌다. 내 머리로. 과연 .. 5:42pm 5:57pm if (this.data.data[this.data.currentIndex].answerIndex === parseInt(selectedIndex)) {            this.data.upScore();            console.log("정답")        } else {            console.log("오답")        } 이것. 뭐예요~?6:15pm 얼추 완성. 어디서 어떻게 접근해야하는지는 감이 잡혔음. 허나, MVC 패턴의 관점에서 현재 코드를 분석해보겠습니다.현재 코드는 MVC 패턴의 기본적인 구조는 가지고 있지만, 몇 가지 ..

window.requestAnimationFrame() 완벽 정리 (MDN Web Docs)이 문서는 MDN Web Docs의 window.requestAnimationFrame() 페이지를 기반으로 핵심 내용을 상세하게 정리하고, 이해를 돕기 위해 추가 설명과 예시 코드를 포함합니다.1. requestAnimationFrame()이란?정의: window.requestAnimationFrame()은 브라우저에게 수행하기를 원하는 애니메이션을 알리고, 다음 리페인트(repaint)가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하도록 요청하는 메서드입니다. 즉, 브라우저의 렌더링 주기에 맞춰서 애니메이션을 부드럽게 처리할 수 있게 해주는 API입니다.동작 방식:requestAnimationFra..

* 개인 공부를 정리한 포스트입니다. * 잘못된 정보는 댓글로 알려주세요. * 위키북스의 정재남 코어자바스크립트를 참고하였습니다. 리액트에서 불변성이란? 리액트를 공부하다보면 상태를 불변하게 업데이트 해야한다고 배웠을 것이다. 이게 과연 무엇일까? 앞서 객체는 가변(내부의 프로퍼티 값이 변함)이라고 하였다. 리액트의 상태(변수)의 값으로 객체를 할당하였을때 사용자는 객체에 접근하여 값을 바꾸는 것이 가능하다. 이것은 불변하다는 것에 반하는 것이 된다. 따라서 새로운 객체를 만들어 재설정 하는 방식으로 값을 업데이트 해줘야 한다. 이러한 것을 불변성을 지키는 것이라고 한다. 또한 리액트의 set은 이전값의 값과 같을때 값이 변하지 않고 상태가 유지 된다. 내부 프로퍼티로 접근해서 값을 변경한 경우 주소를 ..

* 개인 공부를 정리한 포스트입니다. * 잘못된 정보는 댓글로 알려주세요. * 위키북스의 정재남 코어자바스크립트를 참고하였습니다. 상수는 불변값인가? 기본형 참조형 가변값 불변값 각각의 정의를 살펴보자. 상수란 변경될 수 없는 값이다. 불변값이란 값이 변하지 않는 것이다. 얼핏 들으면 같은 말처럼 들린다. 하지만 자바스크립트에서는 다르다. 변수와 상수의 구분은 변수 영역 메모리에 따라, 불변값의 여부는 데이터 영역 메모리에 따라 구분된다. 불변값으로는 기본형 데이터(숫자, 문자열, null 등)가 있다. 값을 바꿀 때 마다 기존값을 수정하는 것이 아니라 새로운 변수를 만들어낸다. 고로 기존에 저장된 데이터는 변하지 않는다. 참조형 데이터의 기본적인 성질은 가변값이다. 변수에 객체를 할당할때 객체의 프로퍼..