FrontEnd51 vertical-align 속성으로 이미지 공백 지우기 개요 모던 웹사이트 디자인의 정석 책을 공부하면서 새로 알게된 부분을 정리하기 위해 작성하였습니다. 다른 분들께도 도움이 됬으면 합니다. vertical-align vertical-align은 기본적으로 인라인 요소들에 대해서 수직적으로 정렬하기 위해서 사용합니다. 기본 개념은 이러한데, 더 깊은 내용이 담겨있습니다. vertical-align 속성은 기본적으로 다음과 같이 있습니다. baseline - 기본값, 부모 요소의 기준선에 맞춤, 기본 옵션 top - 요소의 상단과 자식 요소를 전체 줄의 상단에 맞춤 middle - 요소의 중간과 자식 요소를 전체 줄의 중간에 맞춤 bottom - 요소의 하단과 자식 요소를 전체 줄의 하단에 맞춤 vertical-align 의 속성에 대한 더 자세한 내용은 다.. 2020. 1. 21. 리액트 기본 과정 정리 - 10 [앞으로의 공부 방향] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 리액트는 따지고보면 정말 간단한 라이브러리 입니다. 지금까지 공부해본 것들을 요약해보면 재사용 가능한 컴포넌트를 만듭니다. props 는 부모에게서 전달받는 값입니다. state 는 자기 자신이 지니고 있는 데이터입니다 props 나 state 가 바뀌면 컴포넌트는 리렌더링 합니다. LifeCycle API 를 통해 컴포넌트 Mount, Update, UnMount 전후로 처리 할 로직을 설정하거나 리렌더링을 막을 수 있습니다. 스타일링 리액트 컴포넌트를 스타일링 하는 방법은 여러가지 입니다. 일단, 가장 기본적인 방법으로는 일반 .css 파일을 만들.. 2019. 12. 13. 리액트 기본 과정 정리 - 9 [불변성을 지키는 이유와 업데이트 최적화] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글에서는 불변성을 왜 유지하는지, 그리고 컴포넌트 업데이트 성능 최적화는 어떻게 이뤄지는지에 대해서 알아보겠습니다. 데이터 필터링 구현하기 우선 불변성의 중요성을 알아보는 과정에서 이름으로 전화번호를 찾는 데이터 필터링 기능을 구현해보겠습니다. 일단 App 컴포넌트에서 state에 기본값을 등록해놓겠습니다. 컴포넌트 업데이트 최적화 작업을 할 것인데 매번 값을 등록하는 것보다 사전에 값이 준비되어 있는 것이 작업할 때 편하.. 2019. 12. 13. 리액트 기본 과정 정리 - 8 [배열 다루기 (2) 제거와 수정] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글에서는 강의에서 중요하다고 생각되는 부분만 담았으니 참고 부탁드립니다. 데이터 제거 지난 섹션에서 배열에 데이터를 추가하는 방법과 배열 내부의 내용들을 화면에 보여주는 기능을 구현하였습니다. 이번에는 배열 내부의 데이터를 제거하는 방법과 수정하는 방법을 알아보겠습니다. 이 작업이 어려운 것은 아니지만 불변성을 유지하면서 작업을 처리해줘야 하기 때문에 기존에 하던 것과는 조금 다를 수 있습니다. 기존의 배열 데이터를 건들지.. 2019. 12. 12. 리액트 기본 과정 정리 - 7 [배열 다루기 (1) 생성과 렌더링] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글은 개인적으로 강의에서 중요하다고 생각되는 부분만 담았으므로 참고 부탁드립니다. 데이터 추가 우리 애플리케이션의 상태 데이터는 App 컴포넌트에서 관리하겠습니다. 나중에 가면 상태를 컴포넌트에서 분리하여 따로 관리하는 방법도 있습니다. 앞서 자식 컴포넌트인 PhoneForm 에서 받은 데이터를 App 의 상태에 추가하겠습니다. 이를 위해 우선 App 컴포넌트의 state에 information 배열을 만듭니다. 이 배열에.. 2019. 12. 11. 리액트 기본 과정 정리 - 6 [input 상태 관리하기] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 이번 글은 개인적으로 강의에서 중요하다고 생각되는 부분만 담았으므로 참고 부탁드립니다. input 상태 관리하기 지금까지 배운 것들을 정리해보면 리액트 기본 개념 JSX 문법 props와 state LifeCycle API 입니다. 이것만으로도 많은 것을 만들 수 있습니다. 리액트는 자바스크립트와 매우 가깝습니다. 그래서 자바스크립트를 잘 알고 있으면 리액트를 배울 때도 큰 어려움이 없습니다. 앞으로 전화번호부 프로젝트를 만들면.. 2019. 12. 11. 리액트 기본 과정 정리 - 5 [LifeCycle API] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. LifeCycle API LifeCycle API 는 컴포넌트가 우리의 브라우저에서 나타날 때, 사라질 때, 업데이트 될 때 호출되는 API 입니다. LifeCycle API는 전부 외울 필요는 없고, 이러한 종류들이 있어서 특정 상황에선 이 API를 사용해야겠다는 정도만 숙지하면 충분합니다. 하나하나 살펴보겠습니다. Mounting, Updating, Unmounting 가 의미하는 것은 각각 다음과 같습니다. Mounting.. 2019. 12. 9. 리액트 기본 과정 정리 - 4 [props와 state] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. Props와 State 리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉩니다, 바로 props와 state 입니다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값입니다. 자식 컴포넌트에선 props 를 받아오기만하고, 받아온 props를 직접 수정할 수 없습니다. 자식 입장에서 props는 읽기 전용입니다. state는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. Props props 에 대해서 그림으.. 2019. 12. 8. 리액트 기본 과정 정리 - 3 [JSX] 이 글은 Velopert 님의 인프런 - 누구든지 하는 리액트 강의 를 참고하여 작성한 글입니다. 혹시 저작권 상의 문제가 발생할시에 내리도록 하겠습니다. 개요 리액트 강의를 듣고 기본 개념을 정리하고 기억하기 위해 작성하였습니다. 공부하시는 다른 분들께 도움이 되었으면 합니다. 컴포넌트 파일 파헤치기 JSX에 대해 알아보기 전에 리액트의 컴포넌트 파일에 대해서 먼저 알아봅니다. 지난 글에서 봤던 리액트 보일러 플레이트를 통해 프로젝트를 구성하면 대략 다음과 같은 구조로 만들어집니다. 리액트를 사용하면 여러분의 웹 애플리케이션에서 사용하는 유저 인터페이스를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 우수하게 해줍니다. 여기서 컴포넌트에 해당하는 코드는 App.js 에서 확인해.. 2019. 12. 6. 이전 1 2 3 4 5 6 다음
