기록

ReactFacebook에서 개발한 사용자 인터페이스(UI) 구축을 위한 Javascript 라이브러리이다.🖥️ 특징1️⃣ Data Flow- 단방향 데이터 흐름을 채택하고 있다. 데이터는 부모 컴포넌트에서 자식 컴포넌트로 단방향 전달된다.2️⃣ Component 기반 구조- 어플리케이션의 UI를 독립적이고 재사용 가능한 조각으로 나누어 구성한다. - 코드의 재사용성과 유지보수성이 향상된다.3️⃣ Virtual DOM1) 상태 변경: 컴포넌트의 상태가 변경되면 React는 새로운 Virtual DOM 트리를 생성한다.2) 비교: 새로 생성된 Virtual DOM과 이전 Virtual DOM을 비교하여 변경된 부분을 파악한다.3) 재조정: 변경된 부분만을 실제 DOM에 적용한다.4️⃣ Props and ..

🌊고민 풀장🌊1️⃣ index.ejs의 레이아웃 구조는 유지하되 디자인은 mypage.ejs랑 좀 더 통일성 있게 바꿨다.포인트 디자인(버튼)은 유지하되 input area랑 바탕색을 다시 정렬했다. 고민 듣기 버튼을 누르면 display= "none", display= "block"을 사용해서 페이지 이동 없이 타인의 고민이 랜덤으로 들어온다. 더보기document.addEventListener("DOMContentLoaded", function () { const refreshButton = document.querySelector(".refresh-button"); const contentArea = document.querySelector(".content-area"); const new..

🌊고민 풀장🌊1️⃣ 온도계의 위치가 고민이였다.이미지 자체를 왼쪽에 두자니 전체적으로 모양새가 깨지는 느낌이였다. 이미지 사이즈도 너무 큰건 알겠는데 얼마나 줄여야 할지 감도 안왔다. 생각하다가 사이즈를 확 줄여버리고 header밑에 넣었다. 존재감도 덜 하면서 보기 쉬운 위치를 찾은 것 같아 마음에 들었다. 2️⃣ 사이즈가 안 맞다 싶으면 header에 세로 스크롤바가 생겼다. 이 부분은 overflow: hidden으로 지정된 요소 밖을 벗어나는건 잘리게 해버렸다. .header-wrapper { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-left: calc(-50vw + 50%); overflow: hidden;}...