seopport.log

개인과제 리팩토링 1. 함수이름 컨벤션에 맞게 수정 2. nano id 라이브러리로 아이디값 설정 Virtual Dom (가상돔) 리액트의 virtual dom을 사용하면 조작을 빠르게 처리할 수 있다. 리액트는 가상돔을 이용해서 실제돔을 변경하는 작업을 효율적으로 수행한다. 실제 돔의 구조를 그대로 따온 복사본 형태 실제 돔은 아니지만 객체 형태로 메모리에 저장되기 때문에 실제 돔 조작보다 빠르게 조작할 수 있다. (실제 돔 조작보다 메모리상에 올라와있는 js객체를 변경하는 작업이 훨씬 가볍다) 리액트의 DOM조작 과정 리액트는 두가지 버전의 DOM 정보를 가지고 있음. 화면이 갱신되기 전 구조가 담겨있는 가상 돔 객체(좋아요 누르기 전) 화면 갱신 후 보여줘야할 돔 객체(좋아요 누르기 후) - sta..

CSS-in-JS 자바스크립트로 CSS 코드를 통해서 작성하는 방식 styled component는 말그대로 스타일된 ‘컴포넌트’이기 때문에 대문자로 시작해야한다. 그렇지 않으면 적용이 안됨. 만든 후 html태그 처럼 사용한다. import React from "react"; import styled from "styled-components"; const StBox = styled.div` //styled.p styled.span 등등 width: 100px; height: 100px; border: 1px solid green; margin: 20px; `; function App() { return 박스; } export default App; React Hook useState 기존 업데이트 방..

개인과제 Growth 컴포넌트 분리하기 task의 isDone 상태에 따라서 영역과 버튼 요소를 다르게 출력하는 코드이다. // Layout 컴포넌트 In progress {/* isDone이 false인것들만 filter돼서 렌더링 */} Done //Tasks 컴포넌트 return tasks.filter((item) => { return item.id !== 0 && item.isDone === isDone; //여기서 task들 필터링 }).map((item) => { return ( {item.title} {item.memo} {isDone ? returnButtonClickHandler(item.id)} >되돌리기 delButtonClickHandler(item.id)} >삭제 : doneBut..

CSS - transform css로 마우스를 hover하면 크기가 바뀌는 것을 구현할 때 width, height값을 주니까 좌상단을 기준점으로 커져서 어색해보이는 문제가 발생했다. 이 부분은 transform의 scale로 바꿔서 작성하니 원하는 대로 중심점을 기준으로 요소가 확대되었다. .add-btn:hover { transform: scale(1.1); /* 1.2배 확대 */ transition: transform 0.1s ease-in-out; /* 변화를 부드럽게 만들기 위한 트랜지션 추가 */ } CSS - 메인컬러 변수로 사용하기 /* 변수 선언 및 색 할당 */ --main-color-green: #738a6f; --main-color-beige: #fef9ed; /* 변수로 접근하여..

append와 appendChild의 차이 appendChild: parentElement.appendChild(newElement); appendChild 메소드는 주어진 부모 요소(parentElement)의 자식으로 주어진 새로운 요소(newElement)를 추가한다. 하나의 노드만 추가하고, 이미 존재하는 요소를 추가할 수도 있다. append: parentElement.append(newElement1, newElement2, ...); append 메소드는 하나 이상의 노드나 텍스트를 동시에 여러 개 추가할 수 있다. 또한, 문자열을 직접 전달하여 텍스트 노드를 생성하거나, DOM 노드 객체를 추가할 수 있다. 여러 개의 인자를 받기 때문에 여러 노드를 한 번에 추가하는 데 편리하다. ex) ..

불변성 원시데이터는 불변성. → 값 자체를 바꾸는 것이 아니라 바라보는 방향을 바꿈 그 외 → 주소값을 가지고 있음. 안의 값을 바꿔도 주소값이 바뀌지 않음. 불변성이 없으므로 객체, 배열 등의 값을 바꾸더라도 state가 바뀌지 않았기 때문에 렌더링은 되지 않음. → spread operator 활용하여 복사하여 새로운 객체 만든 후 그걸로 set State const [ value, setValue ] = useState( 초기값 ) state로 변수를 선언했다는 것은 그 변수를 바꿀 수 있는 방법은 setState를 사용하는 것. TMI 리액트 앱 만들면 해피 해킹하라고 나오는데 갑자기?? 해피하게 해킹하라고?? 궁금해서 지피티한테 물어봤다 "Happy hacking!"은 개발자들 사이에서 일종의 ..

💡 React A JavaScript library for building user interface - React.js는 SPA 기반의 프론트엔드 개발 프레임워크 중 하나로서, 컴포넌트 단위의 독립적인 블록을 이용한 개발 방법을 이용한다. SPA란? Single Page Application, 하나의 페이지로 이루어진 애플리케이션이라는 뜻. MPA(Multi Page Application)와 상반된 개념 SPA↔MPA 왜 좋을까? 하나의 페이지로 구성된 웹앱이므로 서버에 1회 리소스를 요청하고(index.html하나만 존재) 그 이후에는 필요할 떄, 데이터만 받아와서 기존 페이지를 ‘수정’하는 방식으로 화면을 수정함. (re-rendering이 필요하지 않음) 사용자에게 최적의 UX 경험 제공 안좋은 ..

getter setter에서 언더바 변수 사용 이해하기 //잘못된 코드 class user{ constructor(firstName,lastName,age){ this.firstName = firstName; this.lastName = lastName; this.age = age; } get age(){ return this.age; } set age(value){ this.age=value; } } const user1 = new user('steve','job',-1); console.log(user1.age); get과 set 메서드에서 동일한 이름의 변수를 사용하면서 발생하는 문제가 발생하는 이유 생성자 호출: const user1 = new User('steve', 'job', -1); 코드를..

프로젝트 트러블 슈팅 페이지를 로드할 때 데이터를 불러와 리뷰를 추가하는 함수와 리뷰 등록 버튼을 눌렀을 때 해당 리뷰를 추가하는 함수 두 가지 스크립트가 존재했다. 첫 번째 함수에서는 페이지 로드 시에 작성된 리뷰가 없는 경우, 이를 사용자에게 알리기 위해 HTML 요소를 동적으로 추가하는 함수가 포함되어 있었다. 그러나 문제는 두 번째 함수를 실행할 때, 첫 번째 함수에서 추가한 HTML 요소가 DOM 로드 순서 때문에 null로 반환되는 현상이 발생했다. 이로 인해 개발자 도구에서는 올바르게 나타나지만 스크립트에서는 null로 판단되어 사용할 수 없는 상황이었다. 이 문제를 해결하기 위해 리뷰 등록 버튼을 눌렀을 때 HTML 요소를 직접 불러오도록 코드를 변경하여 정확한 시점에 필요한 HTML 요소..

버블소트 구현하기 function bubbleSort(arr) { var len = arr.length; // 배열의 길이 저장 for (var i = 0; i arr[j + 1]) { // 현재 원소가 다음 원소보다 큰 경우 // 두 값을 교환 var temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; // 정렬된 배열 반환 } // 테스트 var arrayToSort = [64, 34, 25, 12, 22, 11, 90]..