프론트엔드
-
프론트엔드 개발자를 위한 리액트 기초 part-3Javascript& React study 2021. 2. 24. 21:50
리액트에서 컴포넌트라는 것은 개념적으로 prop를 input으로 하고 UI가 어떻게 보여야 하는지 정해야 하는 React Element를 output으로 하는 함수를 뜻합니다. 그래서 합성을 이용해서 UI를 재사용할 수 있으며 또한 독립적인 단위로 쪼개서 생각을 할 수 있습니다 그래서 컴포넌트라는 것은 React.Component 를 상속받아서 정의를 할 수 있지만 컴포넌트 간에는 상속보다는 합성을 사용하길 권장합니다. 또한 UI를 구성하기 위해서는 화면에 컴포넌트를 그리면서 갱신하고 지워야 하는데 여기서 컴포넌트는 각 프로세스가 진행이 될 때 Lifecycle 함수로 불리는 특별한 함수가 실행이 됩니다. 여기서 개발자는 이를 재정의하면서 컴포넌트를 제어하게 됩니다. 리액트에서 컴포넌트 만들기 // Ap..
-
프론트엔드 개발자를 위한 리액트 기초 part-2Javascript& React study 2021. 2. 23. 23:31
리액트를 마주하게 되면 가장 먼저 보게 되는 CRA 즉 Create React App 이 아이의 경우 페이스북에서 만들어진 react 웹 개발용 boilerplate라고 할 수 있다. 그 전까지는 직접 모든 환경들을 설정해야 하거나 또는 남이 만든 boilerplate를 사용했어야 했는데 여기에 es6 버전의 javascript로 작성하는 것이 일반화 되어있어서 webpack같은 모듈 번들러로 컴파일을 하거나 빌드를 하는 것이 필수이기 때문에 이런 환경까지 공부하는 것이 쉬운 일은 아니다. 그래서 이런 사람들의 어려움을 이해(?) 하고자 create-react-app이 만들어지게 되었으며 지속적으로 업데이트가 되기 때문에 더욱 편하게 사용할 수 있게 되었다. create-react-app으로 시작하기 -..
-
프론트엔드 개발자를 위한 리액트 기초 Part-1Javascript& React study 2021. 2. 22. 22:26
필자는 10년 정도 디자이너를 하다가 30대 초반에 개발업에 도전하게 되었으며 지금은 프론트엔드 개발자로 이직을 하기 위해 개발공부를 하고 있다. 솔직히 첫술에 배부르랴 싶지만 그래도 차근차근 공부를 하다보면 결국에는 내가 원하는 개발자가 되어있을 것 같아 이렇게 글을 남기게 되었다. 부디 이 글을 읽는 예비 개발자와 주니어 개발자들에게 도움이 되었으면 하는 바램이다. React란 무엇인가? - 페이스북에서 만든 편리하게 웹페이지를 만들어 주는 Javascript 라이브러리이다. - 리액트는 UI 기능만 제공하며 전역 상태 관리, 라우팅, 빌드 시스템을 각 개발자가 직접 구축해야 한다. - 이러한 리액트의 진입 장벽을 낮추기 위해서 create-react-app을 만들었다. - API 통신이나 사용자 이..