Dev On The Coffee Dev On The Coffee

개발자로 살아갈 때 뿌리가 되어야 할 두 가지 mindset 공통적인 부분들을 포괄하는 학습 패러다임을 습득하여 학습 속도가 상승시키자! 다른 사람들이 배운 것들을 인정하고 열린 마음으로 받아들이는 태도를 가지자! (다만, 스스로 지식을 잘 쌓아 정말 잘못된 것만은 분별하자)

알고 있는 것과 내 말로 다시 풀어 설명하는 것은 다르다. 훌륭한 개발자는 디자이너, 기획자나 아무것도 모르는 Junior에게 잘 설명할 줄 아는 커뮤니케이션 능력을 갖춰야 한다. 대부분이 사용하는 방식이 있더라도 그것이 무조건 정답은 아닐 것이다. 개발에도 창의성의 영역이 있음 기억하자. 전부 다 기록하려 하지 말고, 내가 어려움을 겪었던 부분을 첫째 나를 위해, 둘째 다른 사람들을 위해 쓰자! 외유내강! 개발에 대해 마음 속으로 자신감을 가지고, 새로운 것에 더 용감히 시도해보자. 커뮤니케이션은 상대방에게 기분 나쁘지 않게 잘 할 수 있을 것 같다. 생각을 통해 나온 복붙이라면 거부감 가지지 말자! 괜찮다. 타자를 빠르게 가져가자! 단축키를 포함해 빠르게 이것저것 시도하는 손가락은 실력있는 개발자의 ..

Programming patterns 리액트는 자주 사용되는 프로그래밍 패턴이 존재합니다. Scene 1 - Stateful components to stateless components Stateful component가 자신의 state setter 함수를 props로 child component에 전달하면, child component의 어떠한 event에 의해 해당 함수가 호출되어 parent component의 state를 변경합니다. 그리고 parent component는 변경된 state를 props로 또 다른 child component(=sibling component)에게 전달해 해당 child component에서 화면에 표시합니다. Scene 2 - Separating contain..

Functional components 지금까지 JavaScript의 클래스를 사용해서 정의한 리액트의 component들은 함수를 사용해서 정의할 수도 있습니다. 이를 function component라고 합니다. Function component는 간단하고 직관적이라는 장점이 있습니다. // A component class written in the usual way: class MyComponentClass extends React.Component { render() { return Hello world; } } // The same component class, written as a stateless functional component: const MyComponentClass = () =>..

Component lifecycle methods 리액트의 수많은 component들은 각각 자신의 lifecycle을 가집니다. 보통 component의 lifecycle 다음과 같이 구성됩니다. Mounting, when the component is being initialized and put into the DOM for the first time Updating, when the component updates as a result of changed state or changed props Unmounting, when the component is being removed from the DOM 그리고 이러한 lifecycle 각각을 제어하기 위해 개발자들이 사용할 수 있는 lifecycl..

Component interacting React application은 몇 십에서 몇 백 개까지 component를 가질 수 있습니다. 각각의 작은 component들은 자신의 역할을 담당하면서 거대한 app을 구성하고 서로 상호작용함으로써 app을 동작시킵니다. Component 간 상호 작용 유형 Component가 다른 component를 렌더링하는 것 Component가 다른 component에게 정보를 전달하는 것 A component in a render function class WelshCorgi extends React.Component { render() { return Welsh Corgi wooooow!; } } class Dog extends React.Component { re..

Component of React Component란 하나의 작업을 수행하는 재사용할 수 있는 작은 코드 뭉치를 의미합니다. 여기서 하나의 작업이란 대체로 HTML 코드를 렌더링하는 것을 말합니다. Necessary import Component를 사용하기 위해서는 React 객체를 import 해두어야 합니다. React 객체에는 리액트 라이브러리를 사용하기 위한 필수적인 메서드들이 담겨있습니다. JSX expression을 사용하는데도 React 객체가 반드시 필요하므로, 첫 줄은 항상 다음 코드로 시작하도록 합니다! import React from 'react'; 또한, component 사용을 위해 ReactDOM 객체도 import합니다. ReactDOM 객체는 React 객체와 마찬가지로 Re..

React basic React.js는 Facebook 엔지니어들이 개발한 UI 개발 목적의 JavaScript 라이브러리입니다. 리액트의 컴포넌트 기반 개발은 Single Page Application을 비롯한 프론트 개발에 큰 변화를 이끌었으며, 근 5~6년간 자바스크립트 생태계의 가장 중요한 존재 중 하나로 자리해 왔습니다. 최근에는 더 효율적인 프론트 개발 라이브러리들이 많이 등장했지만, 리액트의 영향력은 여전히 직간접적으로 느껴집니다. JSX const h1 = Welsh Corgi!!; JSX는 리액트에 사용되기 위해 쓰여진 JavaScript의 syntax extension입니다. 보통 JavaScript 파일 속에 JavaScript 코드와 HTML 코드들이 혼용되어 쓰여진 것들로 통용되므..