이번에 Datepicker 때문에 antd library를 추가하게 되면서 라이브러리의 크기가 커서 성능이 떨어지지 않을까 우려되었습니다. 이를 줄이기 위해 여러가지를 시도해보았습니다.모듈 사이즈 확인하기분명 크기가 클 것 같은데 어느정도인지는 알 수 없어서 일단 자세한 설명을 보기 위해 터미널에 아래 명령어를 입력해주었습니다.npm info antd여러 항목 중 .unpackedSize: 50.3 MB 라는 내용이 눈에 띄었습니다. 이게 무엇을 의미하는건지 검색해봤더니 모듈이 다운로드되어 node_modules에 담겼을 때의 사이즈를 말하는 것이었습니다. 라이브러리가 최종적으로 만들어졌을 때의 사이즈라고 이해해도 되지 않을까 싶습니다. Finder로 확인해보니 정말 사이즈가 같았습니다.제가 줄여야 하는..

※이글의 예시들은 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을 만들어서..