공부하자 공부 공부하자 공부

첫 생각 처음에는 키프레임을 사용하고 애니메이션 시간을 정해서 움직이게 하면 되겠다! 라는 생각을 가지고 구현을 했다. // MainLayout.tsx const ContentBox = styled.div` width: 400%; display: flex; margin-left: ${(props) => (props.img ? `300%` : `none`)}; animation-duration: ${(props) => (props.img ? `18s` : `none`)}; animation-name: ${(props) => (props.img ? `img` : `none`)}; animation-iteration-count: ${(props) => (props.img ? `infinite` : `none`..

오늘은 props와 state를 공부하며 과제를 진행했다. 전보다 컴포넌트를 세분화하고 컴포넌트끼리 데이터를 주고받으며 컴포넌트 안에서 값을 바꾸는 것을 배웠다. 아직까진 공부하면서 벅찬다기보단 재미가 조금 있는 것 같다. 구현을 못하고 있다가 구현이 되면 이 성공했다는 기분이 좋다. 이 기분 계속 가져가고 싶다. props 컴포넌트의 속성이며 변하지 않는 값이다. 컴포넌트 외부에서 값을 전달받는다. 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값이다. 어떤 타입이라도 값을 전달하기위해 객체의 형태를 가진다. 외부에서 전달받고 변하지 않는 값이기 때문에 읽기 전용 객체이다. (읽기 전용이 아니라면 전달받은 값을 하위 컴포넌트에서 수정 시 값을 전달해준 상위 컴포넌트의 값도 바뀌기 때문에 개발자가 의도하지..

오늘은 React SPA를 배웠다. 이전 같은 경우에는 다른 내용을 출력하려면 다른 HTML을 만들어서 출력했어야 했다. HTML에서 내가 바꾸고 싶은 내용만 바꾼다는 것이 신기했다. 이벤트 핸들러를 사용하지 않고도 다른 것에 변화를 줄 수 있다는 것도 알게 되었다. React SPA 페이지를 바꿀 때 원래는 매번 페이지 전체를 불러와야 했다. 하지만 매번 페이지를 불러오면서 사용자와 서비스 간 상호작용이 많아지게 되면 중복되는 요소들 때문에 불필요한 트래픽이 발생한다. 그로 인해 사용자 입장에서는 서비스의 느린 반응을 경험하게 된다.(좋지 않은 사용자 경험(UX)을 제공하게 된다) SPA를 사용하게 되면 중복되는 부분은 불러오지 않고 바꾸려는 부분만 불러오기 때문에 불필요한 트래픽이 감소되면서 위의 단..

오늘은 HTML과 JS가 묶여있다고 생각되는 리액트의 인트로를 배웠다. 이번 주는 새로운게 너무 많아... React 리액트는 프론트앤드 개발을 위한 Java Script 오픈소스 라이브러리라고 불린다. 리액트를 배워야하는 이유 선언형(명시적이다) - 코드를 자세히 분석을 안하고도 코드의 의도를 분명히 알 수 있는 것을 말한다. (jsx를 활용하여 직관적으로 작성이 가능하다.) 컴포넌트 기반 - 하나의 가능을 구현하기위해 여러 종류의 코드를 묶어 놓은 것을 말한다. (컴포넌트로 분리하면 서로 독립적이고 재사용이 가능하기 때문에, 기능 자체에 집중하여 개발할 수 있다.) 범용성 - s프로젝트 어디든 유연하게 적용가능이 가능하다. 번외 - facebook에서 만든 오픈소스이기 때문에 관리가 안정적이고 가장 ..