독일개발자초록이

Typescript와 React npm 모듈 설치 관련 정보. 개발자에 관한 관심이 많아지면서, 자연스럽게 코딩을 접하는 분들이 많아지고, 프런트엔드에 필요한 프로그래밍 언어, 라이브러리 혹은 프레임워크를 배우시게 되는 과정에서 리액트를 알게되거나 배우시는 분들이 많아지는 것 같습니다. 저는 개인적으로 너무 좋은 현상이라고 생각합니다. 개발자는 자신의 지식을 이리저리 꽁꽁 숨기는 직업이 아닌 너도나도 지식을 나누어 필요한 혹은 유용한 프레임워크 라이브러리 혹은 알고리즘을 대중화시키고 나누는 것이 중요합니다. 리액트를 배우시는 경우라면 자바스크립트를 어느 정도 사용하실 수 있다는 뜻일 것입니다. 또한 그 과정에서 타입스크립트를 들어보시거나 경험해 보신 분들도 많을 것입니다. 오늘은 타입스크립트로 리액트 프..

custom hook 이란? React hooks custom hook 이란? 오늘은 짧게 리액트 훅에서 커스텀 훅을 알아보겠습니다. 커스텀 훅이란 말 그대로 개발자가 스스로 커스텀 한 훅을 말합니다. 예를 들면 useState, useEffect, useContext 등은 이미 내장되어 있는 훅으로 바로 사용 가능하지만, 커스텀 훅은 개발자의 입맛에 따라 만들어 사용 가능합니다. 그럼 짧게 커스텀 훅은 무엇이고 또 언제 왜 사용하는지 간단히 알아보겠습니다. (어느 정도 커스텀 훅에 관해 알고 계신다면 바로 코드 예시로 가시는 것도 좋은 방법입니다.) 커스텀 훅이란? 언제? 왜? 사용하는가. 코드 예시. 마치며. 1. 커스텀 훅이란? 우리는 리액트를 사용할 때 상태에 관해서 많은 신경을 쓰게 됩니다. 리..

리액트 Styled Components와 사용 방법? Styled Components란? 리액트에서 스타일을 지정하는 방법은 여러 방법이 있습니다. 즉 당연히 기본 css파일을 생성해 import 하는 것도 가능하다는 것입니다. 하지만 좀 더 모던하고 편리하며 프로젝트를 좀 더 깔끔하게 정리하기에 Styled Components만큼 좋은 것도 없을 것입니다. 오늘은 리액트에서 자주 사용되는 Styled Components를 알아보고 쉽게 어떻게 사용하는지 알아보겠습니다. 목차 Styled Components란? Styled Components 사용 방법? 마치며. 1. Styled Components란? Styled Components란 무엇일까요? 어떻게 다운로드하고 어떻게 사용할까요? Styled C..

React hooks JSX란? 리액트 훅 JSX란? 우리는 저번 시간 useState와 useEffect를 배웠고 그 사이 짧게 JSX에 관해 언급했습니다. JSX란 아래와 같이 HTML의 형태를 띠고 있습니다. hello 하지만 엄밀히 말하자면 이건 HTML이 아닙니다! 엄연한 자바스크립트 문법이죠!! 오늘도 어김없이 전혀 비전문적이고 쉽게 알아보겠습니다. 목차 JSX의 법칙. JSX의 사용법. 컴포넌트를 사용할 때는? 마치며. 1. JSX의 법칙. 사실 딱히 법칙이라고 할만한 것도 없는데, 법칙이라 정하니 민망합니다. 하지만 여전히 몇 가지 지켜주어야 하는 것들이 있습니다. 같이 알아보겠습니다. - 파일 안에 JSX에서 최상위에 위치한 Tag는 꼭 하나여야 합니다. 무슨 말일 까요? 기본적인 리액트..