props & event 를 사용하여 부모, 자식 간의 정보를 교환할 수 있음.그런데, 교환하고 싶은 게 속성이 아니라 템플릿 정보라면?👉 이때 사용하는 게  slot슬롯(Slot)이란?부모 컴포넌트 → 자식 컴포넌트: 템플릿 정보를 전달하는 방법템플릿이 뭔데 ❓생겨 먹은 모양새.. html 이라고 생각하셔슬롯을 사용하지 않는 경우자식 컴포넌트: CheckBox1.vue부모 컴포넌트: NoSlotTest.vueinput 태그를 사용해 체크박스 생성`:value=id`:체크박스의 값이 id 프로퍼티로 설정`:checked=checked`: 체크박스의 초기 체크 상태가 checked 프로퍼티에 따라 결정`@change` 이벤트를 통해 체크 상태가 변경될 때마다 부모 컴포넌트 (여기선 NoSlotTest.v..

전역 스타일` style 태그 안에 `.child` 스타일을 각각 정의했지만, 마지막에 임포트한 `Child3`의 style로 적용되어 충돌이 발생함이렇게, 동일한 css 클래스 이름 (여기서는 `.child`)이 여러 컴포넌트에 사용되면, 마지막에 임포트한 스타일이 적용됨다른 컴포넌트와의 스타일 충돌을 피하면서, 특정 컴포넌트만의 스타일을 지정하는 방법은 두 가지가 있음.특정 컴포넌트 스타일 지정1. 범위 CSS컴포넌트가 렌더링하는 요소에 특성 기반의 추가적인 식별자를 부여하여 충돌을 피하는 가장 쉬운 방법을 `` 로 변경하여 적용 위에서 충돌이 발생한 Child1과 Child2의 style을 로 변경하면, 충돌 없이 style이 적용됨console의 빨간 네모 박스와 같이, Child1과 Child2..

해당 포스트는 생성형 AI를 사용해 만든 게시글입니다.❓ Proxy 란Proxy(프록시)는 "대리인"이라는 뜻을 가지고 있음쉽게 말해, 어떤 객체를 직접 건드리지 않고, 그 객체를 대신해서 조작하는 역할을 함마치 온라인 쇼핑몰에서 `구매 대행업체`를 이용하는 것과 비슷해외 직구를 할 때 직접 구매하는 게 아니라, 구매 대행업체를 통해 물건을 받으면 여러 가지 이점이 생김배송 추적이 쉬워짐 🛒 (변경 사항을 알 수 있음)환율 변동을 관리해줌 💰 (특정 조건을 적용할 수 있음)불량 제품을 걸러줌 🚫 (데이터를 검증 가능)Proxy도 같은 개념임 객체의 값을 직접 변경하지 않고, Proxy를 거쳐서 값을 변경하면 추가적인 기능을 구현할 수 있음.👀 Proxy의 필요성직접 객체를 다룰 때의 문제점Java..

📜 문제문자열 `s`, 단어 사전 `wordDict`가 주어짐wordDict에 있는 단어들로 s를 분할할 수 있는지 확인 (≒ 단어들로 s를 만들 수 있는지 확인)wordDict내의 단어들은 여러번 재사용 가능생각 하기40분 정도 고민하다가 답을 봤다.나는 단어 사전에 있는 단어들의 첫글자를 key로 하여 Map에 저장 하여 접근하도록 했다.예시) wordDict =[cats, sand, dog, and, cat]Map: [a - and], [c - cat, cats], [d - dog ], [s- sand]dfs를 이용하여 접근했지만, 시간초과에 걸려서 틀렸다. (∵ 중복 탐색)이 문제를 풀기 위해선, 이전 값의 결과를 저장해 중복 탐색을 하지 않도록 `memoization`을 이용해야한다.`DFS`..

2025.03.12 - [Frontend/JS] - 화살표 함수 & 비동기 처리 에서 간략하게 화살표 함수를 설명했다.화살표 함수에서 `this` 키워드를 사용하는 방법을 작성하려 한다.JS의 this화살표 함수와 전통적인 함수는 서로 다른  `this` 값이 바인딩될 수 있다.JS에서의 this는 메서드, 함수가 호출될 때마다 현재 호출중인 메서드를 보유한 객체가 this로 연결됨만일, 현재 호출 중인 메서드를 보유한 객체가 없다면, 전역 객체 (Global Obj, window)가 연결된다.let obj = { result: 0 };obj.add = function (x, y) { this.result = x + y;};obj.add(3, 4);console.log(obj); // { result:..

화살표 함수 (Arrow Function)ECMA Script 2015부터 함수를 선언할 때 `화살표 (=>)`를 사용해서 표현할 수 있게 됨.`function` 예약어를 사용하지 않고, 함수 이름도 없다.기본형:  `() => {...}`, `(매개변수) => {...}`화살표 함수에서 실행할 명령줄이 한 줄이라면 중괄호 & return을 생략할 수 있음let add = (a, b) => {return a+b;}add(10,20) // 30// 생략let add = (a, b) => a + b;add(10,20) // 30JS 비동기 처리동기 처리 & 동기 프로그래밍 (Synchronous)코드가 위에서 아래로 순차적으로 실행됨하나의 작업이 끝날 때까지 다음 코드가 실행되지 않으므로 작업이 `블로킹` ..

문서 객체 모델(DOM, Document Object Model)?웹 페이지 (HTML, XML)의 콘텐츠, 구조 그리고 스타일 요소를 구조화 시켜 표현하여프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 `인터페이스`문서 객체: HTML 태그를 JS에서 사용할 수 있는 `객체`로 만든 것DOM은 어떻게 생성되고 어떻게 보여지는가DOM은 HTML 문서를 계층적 구조 & 정보로 표현하며, 이를 제어할 수 있는 트리 자료구조임∴  HTML DOM 혹은 HTML DOM Tree로 칭함트리 자료구조는 노드들의 `계층 구조`로 이루어짐따라서 부모-자식 & 형제 관계를 표현하는 비선형적 자료구조를 나타냄 hello world! 노드 종류설명Document NodeDOM의..

운영체제의 역할과 구조운영체제 역할CPU 스케줄링과 프로세스 관리CPU 소유권을 어떤프로세스에 할당할지, 프로세스의 생성과 삭제, 자원 할당 및 반환 관리메모리 관리: 한정된 메모리를 어떤 프로세스에 얼만큼 할당할지디스크 파일 관리: 디스크 파일을 어떤 방법으로 보관할지I/O 디바이스 관리: 마우스, 키보드 등과 컴퓨터 간에 데이터 주고 받는 것 관리운영체제 구조GUI: 사용자가 전자장치와 상호 작용할 수 있도록 하는 사용자 인터페이스의 한 형태드라이버: 하드웨어를 제어하기 위한 소프트웨어CUI: 그래픽이 아닌 명령어로 처리하는 인터페이스커널 (Kernel)하드웨어와 응용 프로그램 사이에서 자원을 관리하는 역할CPU, 메모리, 디스크, 네트워크, 파일 시스템 등 제어일반 응용 프로그램이 직접 접근 할 수..