seopport.log

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

CSS 1. css할때마다 궁금했던 것이 있는데, 높이 값이 없는데 어떻게 높이를 차지하고 있는지였다. 그래서 팀원분께 여쭤보았다 -> css 높이 값을 주지 않아도 자식들이 자리를 차지 하고 있고, 그 값들의 패딩, 마진값에 따라서 높이가 자동으로 결정되기 때문에 높이값을 따로 주지않아도 높이가 설정되는 것이었다. 2. flex로 구성한 박스는 웹사이트 크기를 줄이면 자식 요소가 저절로 줄어든다. 그런데 내가 의도한 썸네일 div는 줄어들면 안되기 때문에 어떻게 해야하나 고민했다. 정답은 flex-shirink를 0으로 설정하는 것이었다. flex-shrink: 0;를 추가하면 해당 요소가 부모 컨테이너의 크기를 줄일 때 축소되지 않도록 강제한다. 이렇게 하면 thumb-box-in-list가 강제로 ..