※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 이번에는 react dependency를 이용하여 어플을 스타일링하는 방법을 알아볼 것이다. 코드 샌드박스의 왼쪽 패널에 add dependency를 눌러준다. 이후, "material ui" 라고 입력한 뒤, "material-ui/core"와 "material-ui/icons"를 설치해준다. 만일 로컬에서 작업하고 있다면 npm install을 이용하여 설치해주면 된다. documentation에 어떤 명령어를 이용하여 설치하는 지 나오니 따라하면 된다. material-ui/icons material-ui/core 이제 원하는 아이콘 compone..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 오늘은 declarative와 imperative programming에 대해서 포스팅해보겠다. 나는 투두리스트를 만들고 싶고 여기 buy carrot이라는 나의 할일이 있다. 그리고 이 할일이 끝났을 때 위 paragraph를 아래와 같이 만들고 싶다. 여러가지 방법이 있겠지만, 우리는 isDone이라는 bool 변수를 만들어서 그것이 true일 때와 false일 때로 나누어 ui를 변경해주려고 한다. 이를 코드로 나타내면 이렇게 할 수 있다. var isDone = false; const strikeThrough = {textDecoration : ..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. map/filter/reduce는 자바스크립트의 아주 유용한 function들이다. 1. map 먼저 map은 우리가 흔히 아는 loop와 비슷하다. map은 배열 안의 요소가 각각 어떤 함수에 들어가서 처리된 결과값으로 새로운 배열을 만들어낸다. 아래처럼 numbers라는 배열의 요소가 map 함수에 의해 내가 임의로 정한 double이라는 함수에 하나하나 들어가게 된다. 이후, newNumbers라는 배열에 새롭게 저장된다. var numbers = [3, 56, 2, 48, 5]; function double(x){ return x*2; } con..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 1. node js 가 안정된 버전인지 확인(node js 공홈) 터미널에 아래와 같이 입력하여 node 가 최신의 안정적 버전인지 확인한다. node --version 그렇지 않다면 왼쪽의 버튼을 클릭하여 업데이트 해준다. 2. vs code 설치 + extension 추가(babel javascript, vscode-icons) 어떤 에디터를 사용하여도 상관없지만 나는 vscode를 사용하였다. 그리고, "babel javascript"이라는 extension을 설치해주었다. vs code 왼쪽 패널 맨 아래의 extension 버튼을 클릭해준 뒤,..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. *모든 실습은 codesandbox에서 하고있다. 지난 포스팅에 리액트의 장점은 커다란 웹사이트를 작은 컴포넌트 단위로 나누어 개발할 수 있는 것이라 하였다. 오늘은 그 컴포넌트에 대해 알아볼 것이다. import React from "react"; import ReactDOM from "react-dom"; //이름 첫글자는 대문자 function Heading() { return My Favourite Foods; } ReactDOM.render( , document.getElementById("root") ); 가장 간단한 heading을 만들어서..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(Hello World!, document.getElementById("root")); react에서 inline 스타일링을 하는 것은 일반 html에서 하는 것과 다르다. 따라서 그냥 위와 같이 적으면 오류가 나게된다. style부분에 javascript 객체를 넣어주어야 하고, 이는 아래와 같다. import React from "react"; import ReactDOM from "react-dom"; ReactD..