나보단 잘하자

자바스크립트의 class개념은 ECMA6에서 새로 도입된 개념이다. 그러나 마냥 새로운 개념은 아니다. Class로 커피를 만들어보자. Class란? class CoffeeMachine { constructor(coffee){ this.coffee = coffee; } } CoffeeMachine이라는 클래스를 만들었다. 이 머신 안에서 커피가 제조되는 것. 참고로 클래스 함수 이름의 첫 시작은 대문자여야 함. 일반 함수의 시작은 소문자. constructor은 한국어로 생성자라고 한다. 생성자는 말 그대로 객체를 생성하게 한다. 이 생성자가 있어야 class가 호출된다. 또한, 클래스 안에서 생성자는 단 하나여야 한다. this는 CoffeeMachine을 뜻한다. 그럼 왜 this를 쓸까? this ..

- 컴포넌트는 HTML을 반환하는 함수임. ReactDOM.render(, document.getElementById('certainId')); 여기서 컴포넌트는 . - 모든 컴포넌트 파일의 시작은 아래와 같이 써야 한다. 그렇지 않으면 jsx를 이용한 컴포넌트 사용에 대한 이해를 하지 못함. import React from "react"; - 컴포넌트 함수의 앞은 대문자. function Bluebtn(){}; export default Bluebtn;//꼭 이렇게 호출해야함 - 리액트 앱은 하나의 컴포넌트만 렌더링할 수 있다. 그렇기 때문에, 해당 컴포넌트 내에 또 다른 컴포넌트를 import 할 수 있다는 것. - map()은 각각의 배열 요소들에게 원하는 함수를 부여한다. 엥 그러면 배열에는 fo..

- 제대로된 css 절대단위와 상대단위들의 종류와 개념을 공부했다. 잘 써먹을 일만 남음. - 첫 프로젝트가 끝나고 본격적으로 리액트를 배우기 위해 대체 왜 사람들이 리액트에 열광하는지 알아봤다. 여러 페이지가 있을 필요 없이 SPA(Single Page Application)방식으로 한 페이지에서 동적으로 바뀌게 하다니... 여태 여러 페이지에 복사 붙여넣기로 힘들었던 생활은 끝인가보다. - 컴포넌트는 아직 이해가 가지 않았는데 만약에 하나의 버튼이라도 사소하게 달라진다면 어떡하지? 그건 어떻게 수정하나? 그치만 레고조각처럼 기능들을 끼워 맞추는 것이 편리하다는 것도 알았다. 그렇지만, 자바스크립트의 객체지향 프로그래밍에 대해 조금 더 익숙해질 필요도 있다고 생각했다. class개념이나 extends ..

이제는 더이상 웹페이지는 절대적으로 지정된 크기로 코딩돼서는 안된다. 모바일로, 태블릿으로, 노트북으로 그리고 컴퓨터로 심지어 스마트 워치 등 화면의 사이즈는 날이 갈 수록 다양해지고 있기 때문에 절대적 크기는 사용자 경험에 큰 불편을 가져다 준다. 한 예로, 2G 폰을 쓰던 시절, 인터넷에 들어가면 컴퓨터에서 보던 화면이 그대로 깨알같이 그 작은 화면으로 들어갔던 경험을 해본 적 있을 것이다. 또한, 스마트폰에서도 pc버전으로 보기를 누르면 그렇게 나온다. 그러나 이는 크게 불편하기 때문에 당연히 반응형으로 제작해야 한다. 단위는 절대단위와 상대단위로 나뉜다. 절대단위(absolute unit) css에서의 절대단위는 보통 px(픽셀), pt(포인트)를 많이 쓴다. 그렇지만 이 단위들은 화면의 크기가 ..