개발 일지

리액트 투두리스트 과제 중, Drag and Drop 기능을 구현했다.react-beautiful-dnd는 지원이 종료되어, HTML Drag and Drop API를 활용했다.지금은 Drag and Drop 1단계 정도고, 계속 응용 해볼 예정. 참고: MDN 문서  | 인파, 드래그 앤 드롭 기능 이해 & 구현하기 | jinist, [React] Drag and Drop 이벤트 적용해보기       우선 이 투두리스트 드래그앤드랍 기능과 관련한 컴포넌트는 두 개가 있다. (1. 최상위 컴포넌트 2. Todo Item 컴포넌트) 1. 최상위 컴포넌트드래그 이벤트 함수를 정의한다.const App = () => { // 드래그 중인 요소, 드래그 하면서 지나치고 있는 요소를 useState로 정의한..

Class Component vs Functional Component (React JSX) React에서는 컴포넌트를 만들 때 두 가지 방식이 있다:Class Component (클래스 컴포넌트)Functional Component (함수형 컴포넌트) 🎯 1. Class Component (클래스 컴포넌트) 클래스를 사용해 컴포넌트를 정의하는 방식 (ES6 Class 문법 활용)state와 라이프사이클 메서드를 사용할 수 있음.  예제:import React, { Component } from 'react';class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; // sta..

Symbol은 JavaScript에서 유일한(Unique) 값을 생성하는 데이터 타입.ES6(ES2015)에서 도입되었으며, 객체의 프로퍼티 키로 사용하면 다른 코드와 충돌하지 않도록 보호할 수 있다. 1️⃣ Symbol 기본 사용법 Symbol 생성하기const sym1 = Symbol();const sym2 = Symbol();console.log(sym1 === sym2); // false (항상 서로 다른 값)두 개의 Symbol은 같은 값처럼 보여도 서로 다른 값임. 2️⃣ Symbol의 주요 특징 Symbol은 고유한 값을 가지며, 절대 중복되지 않음 Symbol은 자동 형 변환이 불가능 (alert(Symbol()) 하면 에러 발생) Symbol은 객체의 키(key)로 사용 가능 Symbol..

디자인 패턴은 효율적이고 유지보수하기 쉬운 코드 구조를 만들기 위한 일반적인 해결 방법이다.JavaScript에서는 객체지향 프로그래밍(OOP), 모듈화, 비동기 처리 등을 다루는 여러 패턴이 존재. 🎯 1. Singleton Pattern (싱글턴 패턴) • 하나의 인스턴스만 생성하고, 어디서든 동일한 인스턴스를 공유하는 패턴.• 전역적으로 공유해야 하는 설정 데이터, 데이터베이스 연결, 상태 관리 등에 많이 사용됨. 📌 JavaScript에서 싱글턴 패턴 구현const Singleton = (function () { let instance; // 단 하나의 인스턴스를 저장할 변수 function createInstance() { return { message: "나는 유일한..

결과물GitHub※ 관련 강의를 참고하여 진행함 기능Export Spreadsheet 버튼 클릭 시 엑셀 파일 다운로드셀 클릭 시 셀 위치(행, 열 값) 표현셀 클릭 시 행, 열 헤더 강조셀 내 텍스트 입력 및 저장작업 순서spread sheet 및 cell data 만들기: Cell 클래스의 인스턴스 객체 생성: spreadsheetRow(배열)에 인스턴스 push: spreadsheet(배열)에 spreadsheetRow pushcell 요소 만들기만든 cell 요소를 html 코드에 넣어 화면에 spread sheet 표현하기 (DOM 조작)spread sheet의 row 행 구분하기: row 별 div 만들고 해당하는 cell append헤더 만들기 & disabled헤더 행, 열에 인덱스 넣기헤..

JavaScript에서 비동기 코드를 더 간결하고 직관적으로 작성할 수 있도록 도와주는 ES8(ES2017) 기능. 기존의 Promise 기반 코드를 async / await을 사용하면 동기 코드처럼 읽히는 비동기 코드로 변환할 수 있다. 1. 기본 사용법 ✅async 함수async 키워드를 함수 앞에 붙이면, 항상 Promise를 반환하는 함수가 됨.async function hello() { return "안녕!";}hello().then(console.log); // "안녕!" (Promise가 반환되므로 `.then()` 사용 가능) ✅ await 키워드await 키워드는 Promise가 처리될 때까지 기다린 후 그 결과를 반환.(단, await은 async 함수 내부에서만 사용 가능)asy..

비동기 작업의 완료 또는 실패를 나타내는 객체. JavaScript에서 비동기 코드를 작성할 때 예전에는 콜백 함수를 사용했지만 콜백 중첩 문제가 발생함.이를 해결하기 위해 Promise 도입. 1. Promise의 기본 구조const promise = new Promise((resolve, reject) => { if (Math.random() > 0.5) { resolve("성공! 🎉"); } else { reject("실패! ❌"); }});promise .then(result => console.log("결과:", result)) .catch(error => console.log("에러:", error));  • Promise는 resolve(..

JavaScript에서 비동기적으로 데이터를 가져오거나 오류를 처리할 때 자주 사용되는 기능들. 1️⃣ fetch fetch는 웹에서 데이터를 가져오는 함수.브라우저의 네트워크 요청(HTTP 요청) 을 처리하는 기본적인 API. 📌 기본 사용법fetch("https://jsonplaceholder.typicode.com/posts/1") .then(response => response.json()) // JSON 형식으로 변환 .then(data => console.log(data)) // 변환된 데이터 출력 .catch(error => console.error("에러 발생:", error)); // 오류 처리 📌 fetch는 Promise 기반• .then(response => ..

JavaScript에서 class 문법이 나오기 전에는 생성자 함수(Constructor Function)를 사용해서 객체를 생성함.ES6부터는 class가 도입되면서 더 직관적이고 가독성이 좋은 문법을 사용할 수 있게 되었지. 1. 기본적인 차이점 🏗 생성자 함수 방식function Animal(name) { this.name = name;}Animal.prototype.speak = function () { console.log(`${this.name}이(가) 소리를 냅니다.`);};const dog = new Animal("강아지");dog.speak(); // "강아지이(가) 소리를 냅니다."🎩 class 방식class Animal { constructor(name) { ..

ES6(ECMAScript 2015)에서 도입된 class 문법은 기존의 프로토타입 기반 객체 지향 프로그래밍을 더 직관적으로 사용할 수 있도록 제공된 기능. 내부적으로는 여전히 프로토타입 기반으로 동작함. 1. 클래스 기본 구조class Animal { constructor(name) { this.name = name; } speak() { console.log(`${this.name}이(가) 소리를 냅니다.`); }}const dog = new Animal("강아지");dog.speak(); // "강아지이(가) 소리를 냅니다." • class 키워드를 사용해 클래스를 선언할 수 있음.• constructor는 인스턴스를 생성할 때 호출되는 특별한 메서드..

JavaScript 핵심 개념 정리  1. 함수 표현식 vs 함수 선언문함수 선언문(Function Declaration)function greet() { console.log("Hello");}호이스팅(hoisting)이 적용되어 코드 어디서든 호출 가능선언과 동시에 정의됨함수 표현식(Function Expression)const greet = function() { console.log("Hello");};변수에 할당되므로 호이스팅 시 초기화되지 않음실행 시점에서 정의됨 2. IIFE (Immediately Invoked Function Expression)즉시 실행 함수는 선언과 동시에 실행되는 함수(function() { console.log("IIFE 실행!");})();전역 스..

chatGPT에게 HTML Collection에 대해 질문했다.꽤나 이해하기 쉽게 답변해 주었다.   📌 HTMLCollection vs 배열(Array)HTMLCollection은 자바스크립트에서 HTML 요소들의 집합을 나타내는 특수한 객체로, 배열과 몇 가지 중요한 차이점이 있습니다.1️⃣ HTMLCollection vs 배열 차이점특성HTMLCollection배열(Array)자료구조유사 배열 객체일반 배열인덱스 접근collection[0] 가능array[0] 가능forEach 사용❌ 직접 사용 불가 (Array.from() 필요)✅ 바로 사용 가능실시간 반영✅ 문서 변경 시 자동 업데이트❌ 변경되지 않음 (정적인 값)메서드.item(), .namedItem() 등 일부 지원.push(), .ma..

1. !import 붙은 속성2. HTML에서 style 직접 지정한 속성3. #id로 지정한 속성4. .class, :pseudo class로 지정한 속성

화면 상 요소의 앞, 뒤 배치 결정.숫자가 높을수록 앞에 나타남.디폴트 0순서 값 없을 경우 코드상 순서에 따라 배치 position: static; (no positioning) 스타일 요소는 항상 뒤에 나타남. z-index 효과 없음.z-index 같거나 position:static이면 코드에서 나중에 작성된 요소가 앞에 나타남 부모에게 z-index 값을 줄 경우 부모끼리 먼저 순위를 정한 뒤 자식이 적용됨. 즉 자식의 z-index 값이 아무리 높다해도 부모의 값이 낮으면 앞에 노출될 수 없음. position 속성을 지정한 후 z-index 속성을 지정해야 함.

grid 컨테이너 설정grid-template-columns / grid-template-rows 그리드 열, 행 크기 지정.grid-template-columns: 40px 50px auto 50px 40px;  //그리드 5개생성grid-template-columns: repeat(5, 10px) //10px 크기 그리드 5개 생성 grid-template-columns: repeat(5, 1fr) //1fr(비율)의 그리드 5개 생성 gap그리드 간 간격. 가로 간격(Column gap), 세로 간격(Row gap) 분리 가능.

① orderitem 순서 우선순위 설정함. 속성 값의 숫자 작을수록 우선순위 높음. 음수 허용. ② flex-grow아이템의 너비를 컨테이너 너비에 맞게 자동으로 늘림.속성 값에 비례하게 너비 조정됨.③ flex-shrink아이템의 너비를 컨테이너 너비에 맞게 자동으로 줄임.속성값 1(default): 적용 / 0: 해제 / 속성 값에 비례하게 너비 조정됨.아이템 전체에 설정할 수도, 개별로 설정할 수도 있음. ④ flex-basis아이템의 기본 사이즈 지정 ⑤ flex[flex-grow, flex-shrink, flex-basis] 결합. default: [0 1 auto]두번째, 세번째 인자 생략 가능 (flex: 5; => shrink=1 basis 0%)(1) 값 한 개일 때- 단위 없으면 gr..

① flex-direction : row, row-reverse, column, column-reverse② flex-wrap : wrap, wrap-reverse, nowrap ③ flex-flow :  ④ justify-content : flex-start, flex-end, center, space-between, space-around, space-evenly⑤ align-items : flex-start, flex-end, center, stretch, baseline⑥ align-contect : flex-start, flex-end, center, stretch, space-beteen, space-around ⑦ align-selfcontainer 정렬 flex-end / item-1 정렬..

Flexbox란?요소를 동적으로 배열하는 1차원(x축 or y축) 레이아웃. 요소를 반응형으로 만듦.(↔ Grid: 2차원 레이아웃)  Flexbox 구성 요소  Flexbox 속성Flex Container PropertiesFlex Items Propertiesflex-direction : item 순서 방향flex-wrap : overflow 시 줄바꿈flex-flow : direction+wrap 통합justify-content : item 간격 정렬 (main축)align-items : item 간격 정렬 (cross축 1줄)align-content : item 간격 정렬(cross축 2줄 이상) align-self : 특정 item만 간격 정렬 따로 설정order : item 순서 우선순위fle..

.element { background-color: aquamarine; height: 100px; width: 100px; position: relative; animation: animation-test 3s linear 2s infinite alternate;}@keyframes animation-test { 0% { left: 0px; top: 0px; } 25% { transform: rotate(30deg); background-color: lightcoral; left: 150px; top: 100px;..