독일개발자초록이

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

React hooks 리액트 훅 React Router Dom란? 우리는 홈페이지에서 다른 홈페이지로 이동하려면, 즉 예를 들어 메인 페이지에서 About페이지로 이동하려면, 그에 맞는 HTML파일과 데이터들을 fetch 해야 했습니다. 하지만 리액트의 리액트 라우터 돔을 이용하면, 페이지의 이동이 아닌 각각의 페이지에 필요한 컴포넌트들을 불러와 보여주게 됩니다. 이는 좀 더 빠르고 다이내믹 해질 수 있어, 유저에게 조금 더 편안하고 만족스러운 경험을 줄 수 있습니다. 그럼 오늘도 여전히 전혀 비전문적이고 쉽게 알아보겠습니다. 목차. React Router Dom란? React Router Dom 사용 방법. 마치며. 1. React Router Dom란? 앞서 말했듯이 리액트 라우터 돔을 이용하여, 페..

React hooks 리액트 훅 이벤트 처리란? 사용방법 오늘은 리액트 훅에서 이벤트 처리하는 방법을 알아보겠습니다 이러한 이벤트를 처리하는 함수들을 이용하여, 개발자는 유저로부터의 Input을 받아서 저장, 사용 가능하고, 유저는 이러한 기능을 통해 홈페이지와 상호작용 가능합니다. 오늘은 수많은 이벤트 처리 함수 중 대표적인 두 가지를 파헤쳐보려 합니다. 오늘도 역시 전혀 비전문적이고 쉽게 알아보겠습니다. 목차. onClick 이벤트란? onChange 이벤트란? 마치며. 1. onClick 이벤트란? onClick 이벤트는 아마 가장 흔하며 자주 사용되는 이벤트이지 않을까 생각합니다. 이는 말 그대로 클릭 시 어떠한 이벤트를 발생시킨다는 뜻입니다. 예를 들면 로그인, 로그아웃 등등의 버튼이 있겠습니다..

Node.js npm이란 무엇인가? 오늘은 Node.js를 설치하면 자동으로 설치되는 Npm이라는 것에 관해 알아보겠습니다. 오늘도 역시 전혀 비전문적이고 쉽게 알려드리겠습니다. 목차. Node.js란? Npm이란? React와 Npm? 1. Node.js란? 우리는 리액트로 프로젝트를 만들기 위해 Node.js가 꼭 필요합니다. 과연 Node.js란 무엇일까요? Node.js는 크롬 v8 자바스크립트 엔진으로 빌드된 런타임이라고 합니다. 일단 무슨 말인지 이해가 잘 안 되시겠죠??? 그냥 우리는 쉽게 자바스크립트를 서버로서 이용할 때 쓰인다고 알아 둡시다. Javascript는 사실 우리가 자주 사용하는 VsCode와 같은 에디터 외에, 브라우저에 기본으로 내장되어 있습니다. (궁금하시다면 "F12"번..

React hooks 리액트 훅 리스트와 map함수. 프로그래밍에서 Iteration 즉 반복문이 없다면, 얼마나 불편하고 손이 많이 갈까요?? 수작업으로 한두 개야 만들 수 있을 것입니다. 하지만 그것이 몇십 개, 몇백 개씩 된다면?? 어떨까요? 시간과 노력이 많이 필요할 거고 코드 자체도 아주 보기 싫겠죠. 그렇다면 리액트에서 이러한 반복을 줄이기 위해, 어떤 방법이 있을까요?? 오늘도 전혀 비전문적이고 쉽게 알아보겠습니다. 목차. 반복문이란? foreach?? map?? 리액트와 map 함수. 마치며. 1. 반복문이란? 반복문이란 무엇일까요? 반복문이란, 어떠한 동작을 정해진 수 혹은 정해지지 않은 수에 맞춰 같은 활동을 반복하게 해주는 코드라고 보시면 될 것입니다. 개발자는 항상 코드를 가능한 한..

React hooks 리액트 훅 Component와 Props. 리액트에서는 항상 재사용 가능한 Element를 Component로 나누어 주는것이 좋습니다. 이를 통해 우리는 같거나 비슷하게 동작하는 Element들을 각각 필요에 따라 새로 만드는 것이 아닌, import 해서 사용하는 것이죠. 그렇다면, 컴포넌트끼리 혹은 컨테이너와 값, 함수등을 주고받으려면 어떻게 해야 할까요? 그를 위해 Props가 필요합니다. 오늘도 어김없이 전혀 비전문적이고 쉽게 알아보겠습니다. 목차. Props란? 사용방법은? Props를 고급스럽게 사용하기. 마치며. 1. Props란? Props란 쉽게 말해 부모의 Component 혹은 Container안의 값, 변수, 함수 등을 자식 Component들에게 넘겨주려 할..