Ming's develop story

웹의 동작방식 웹은 요청과 응답으로 굴러간다. 클라이언트가 서버에게 요청, 서버가 클라이언트에게 응답! 서버가 하는 일 서버가 하는 일은 엄청 많다. 데이터도 관리하고, 분산처리도 하고, 웹 어플리케이션도 돌리는 등 서버가 할 일이 많다는 건, 서버가 하는 일을 우리가 전부 관리해줘야한다는 이야기이기도 하다. 서버리스란? 서버리스는 서버가 없다가 아니라, 서버를 신경쓸 필요 없다이다. 이미 누군가가 구축해둔 서버의 일부분을 빌려서 쓸 수 있다. 우리가 인프라를 구축하고, 서버 스펙을 고민할 필요 없다는 소리이다! 그냥 우리한테 필요한 서버를 필요한만큼만 빌려 쓰면 된다. BaaS는 뭘 빌려오는 걸까? BaaS는 Backend as a Service의 약자이다. → 우리가 흔히 백엔드 하면 떠올리는 것들을..

1) 버킷리스트 아이템을 추가하면, 리스트 항목이 있는 div에만 스크롤 생기게 하기 - 키워드: overflow, max-height 혹은, div 넘치지 않게 하기 const ListStyle = styled.div` display: flex; flex-direction: column; height: 50vh; // 50vh로 맞춰줌으로써 처음 추가할 때에도 박스가 늘어나지 않도록 할 수 있다. 또, max-height을 줄여서 하는 방법도 있다. overflow-x: hidden; overflow-y: auto; // auto말고 scroll을 주면 리스트의 높이가 박스 높이보다 많지 않아도 스크롤 바가 생성된다. hidden으로 하면 높이보다 더 많아지는 리스트를 잘라버린다. max-height:..

App.js에서 input박스 밑에 만들어보자 { window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); // 여기에 들어가는 것은 좌표이다. }} > 위로 가기 위로 가기 버튼을 만들어주고 window.scrollTo()를 통해 누르면 위로 가도록 해준다 behavior: "smooth"를 통해 부드럽게 올라가도록 만들 수 있다.

1. {}}>완료하기 Detail.js에 완료하기 버튼을 먼저 달아준다. onClick에 들어갈 함수를 만들어 주어야 하는데 const initialState = { list: [ { text: "영화관 가기", completed: false }, { text: "매일 책읽기", completed: false }, { text: "수영 배우기", completed: false }, { text: "코딩하기", completed: false }, ], // list: ["영화관 가기", "매일 책읽기", "수영 배우기", "코딩하기"], }; 일단 bucket.js에서 배열이었던 list 데이터를 딕셔너리 형태로 바꿔주자! 그러고 새로고침 해서 보면 오류가 날텐데 BucketList.js를 들어가서 {li..

keyframes 사용하기 keyframes는 styled-components안에 이미 들어있다! 웹에서 애니메이션을 구현할때는 transition과 animation이라는 스타일 속성을 많이 사용한다. transition은 단순한 엘리먼트 상태변화에 쓰기 좋고, animation은 다이나믹한 효과를 주는데 쓰기 좋다! Keyframes은 animation에서 사용하는 속성 중 하나이다! App.js import styled, { keyframes } from "styled-components"; function App() { return ( ); } const boxAnimation = keyframes` 0% { border-radius: 0px; top: 20px; } 30%{ top: 300px;..