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); 코드를..

GitHub - seopport/CineSearch: Vanilla.js + TMDb API를 사용한 영화 소개 및 검색 사이트 Vanilla.js + TMDb API를 사용한 영화 소개 및 검색 사이트. Contribute to seopport/CineSearch development by creating an account on GitHub. github.com 🪅KPT 회고 Keep (유지): 팀과제를 통해 협업 능력 향상. 다른 사람의 코드를 이해하고 리뷰하면서 협업에 필요한 기술과 소통 능력 강화 OpenAPI를 다루는 경험을 통해 새로운 기술 학습 및 활용 능력 향상 Git을 통한 협업과 Pull Request를 사용하는 경험을 통해 효율적인 협업 방식 습득 Problem (문제): 처음에는 ..