전체 글
(React 만들기) 08. virtual DOM (가상 DOM - 문서 객체 모델)
1. 가상 돔 개발자들이 DOM을 직접 건드리지 않고 훨씬 더 쉬운 구조물로 UI를 개발할 수 있도록 중간에 DOM처리는 리액트에게 맡기고 개발자는 JSX만 개발하면 될 수 있도록 하는 것. 리액트는 실제 DOM과 메모리 상에 쌓아둔 가상 DOM을 비교해서 다른 것만 비교하여 특정 부분을 변경한다. export class Component { constructor(props) { this.props = props; } } export function createDOM(node) { if (typeof node === 'string') { return document.createTextNode(node); } const element = document.createElement(node.tag); Obje..
(React 만들기) 07. 클래스형 컴포넌트
1. 기존 함수형 컴포넌트를 클래스형 컴포넌트로 변경하기 이전에 만들어두었던 함수형 컴포넌트를 클래스형으로 수정한다. 기존 코드 : /* @jsx createElement */ import { createElement, render } from './react'; function Title(props) { return { props.children }; } function Item(props) { return {props.children} } const vdom = React 정말 잘 만들기 첫 번째 아이템 두 번째 아이템 세 번째 아이템 render(vdom, document.querySelector('#root')); vdom 변수를 App으로 변경하고, 아래 render 함수에서도 JSX 형태로 변..
돈을 벌기 위해서 배워야 할 (프로그래밍)언어 3가지
0. 돈을 벌기 위한 언어 예전에 누가 우스갯소리로 프로그래밍 언어도 언어라고 해서 자신은 3개 국어를 할 줄 안다는 유머를 들었다. 사람과 소통하든 기계와 소통하든 어떤 방식으로도 언어를 배우는 것은 현실에서 살아남기 위해 중요한 요소이다. 오늘은 내 경험상 돈을 벌어봤던 언어와 여기저기서 들었던 뇌피셜로 세상에서 살아남기 위한 언어 3가지를 글로 써보고자 한다. 1. 영어 (English) 절대 강자 영어. 인터넷에서 대부분의 문서가 영어라는 것은 모르는 사람이 없을 정도다. 현재 영어는 약 60개국에서 사용하고 있는 언어로 돈을 벌기 위해서는 많은 사람에게 노출되는 것이 필수적이다. 토스의 창업 스토리 "유난한 도전"에 보면 영어에 유창하지 않았던 이승건 대표가 해외로 나가 투자를 받지 못할 때마다..
금융 신용점수 최고점을 찍다.
최근 토스앱을 통해서 신용점수 올리기를 진행하니 KCB에서 신용점수 최대점수를 찍었다. 상위 3퍼센트라고 하는데 어느정도인지 감이 안온다. 신용평가사는 회사마다 개인을 평가하는 잣대가 약간 다르다. 그래서 나도 NICE계열사에서는 신용점수가 낮은 편이다. 신용점수를 올리는 방법에 대해서 알아보고 포스팅 해봐야겠다.
React 환경에서 tailwindcss 사용하기
사이드 프로젝트 진행 2일차. 각각 다른 프로젝트를 진행하는 지인과 온라인으로 스터디 겸 진행 중에 있다. 오늘은 tailwindcss 적용해보자. 0. 들어가는 글 원래는 리액트 환경에서 컴포넌트마다 css를 직접 넣어주는 styled-components를 사용했었는데 이번에는 새로운 경험을 해보고자 Tailwind CSS를 시작했다. 이런 라이브러리 특성이 뭐냐면 클래스명을 전부 외워야 한다는 것이다. 이게 진짜 안 좋다. 예전 부트스트랩처럼 만든 것 같은데 스타일링에 대한 것은 워낙 유행이 빠르기 때문에 "쉽고 편하니까 지금 이거 열심히 공부해야지~"는 파멸의 지름길이다. CSS에 대해서 정확히 알거나 배우고 싶다면 styled-components에 익숙해지거나 차라리 SCSS(Sass) 같은 것에..
전세보증보험제도- 이제는 세입자(임차인)이 집주인(임대인) 건강도 챙겨야할까?
0. 들어가는 글 오늘 「MBC 이진우의 손에 잡히는 경제」에서 빌라 1,000채 이상을 가진 집주인(임대인)이 사망했다는 뉴스를 들었다. 문제는 이 임대인이 종합부동산세도 밀려있고, 전세 가격이 오르고 있을 때 매매 가격보다 더 높은 전세 가격으로 세입자를 들인 곳도 많다는 것이다. 총 1,139채를 가진 임대인이 죽으면서 몇몇 세입자들은 전세보증금을 반환받지 못할 상황이라고 한다. 심지어 주택도시보증공사에서 하는 '전세보증금반환보증보험'도 무용지물이라는 얘기가 나오는데 왜 그런지 제대로 알아보자. 1. 전세보증금반환보증이란? 글자 그대로 전세계약이 종료되는 경우 임대인이 임차인에게 반환해야 하는 전세보증금을 책임지는 보증 상품이다. 해당 보증보험에 가입하려면 여러 가지 조건이 있는데, 가입조건은 1...
npx create-react-app 실행시 "We no longer support global installation of Create React App"이 발생
1. 들어가는 글 오랜만에 개발하려고 하니까 죽겠다. 거두절미하고 해당 오류는 create-react-app을 전역으로 설치해놓아서 발생하는 오류이다. 글로벌로 설치된 모듈을 삭제하자. npm uninstall -g create-react-app yarn global remove create-react-app 이후에 create-react-app을 다시 로컬로 설치한다. add create-react-app 이제 create-react-app으로 프로젝트를 설치할 수 있게 되었다. create-react-app의 리액트 프로젝트를 바로 할 수 있다는 장점이 있지만, 이렇게 설치하는 경우 node_modules가 이중으로 중첩되어 생긴다는 문제점이 있다. 최상위폴더 ㄴnode_modules (방금 우리가 ..
(React 만들기) 06. 함수형 컴포넌트 (사용자 컴포넌트 만들기)
이전 글 보기: https://moneytech.kr/55 (React 만들기) 05. JSX 도입을 통한 쉬운 마크업과 트랜스파일 결과물 바꾸기 이전 글: https://moneytech.kr/54 (React 만들기) 04. createElement와 app.js 코드량 줄이기 0. 들어가는 글 애플리케이션과 소프트웨어가 사용자의 선택을 받는 것 중 가장 큰 요소는 "편리함"이다. 앞서 작성 moneytech.kr 1. 사용자 컴포넌트란 무엇인가 앞서 React 프레임워크의 변천사를 흉내 내서 기본적인 형태를 구현해보았다. 이번에는 React에서 지원하는 '사용자 컴포넌트'라는 것을 구현해볼 것이다. 사용자 컴포넌트에는 크게 2가지가 있다. 함수형 컴포넌트, 클래스형 컴포넌트. 종류를 배우기 전에 먼..