React (Front-end)

    (React 만들기) 05. JSX 도입을 통한 쉬운 마크업과 트랜스파일 결과물 바꾸기

    이전 글: https://moneytech.kr/54 (React 만들기) 04. createElement와 app.js 코드량 줄이기 0. 들어가는 글 애플리케이션과 소프트웨어가 사용자의 선택을 받는 것 중 가장 큰 요소는 "편리함"이다. 앞서 작성한 vdom의 코드를 보면 객체 내에 tag, props, children 이렇게 3개의 속성이 있다. 간 moneytech.kr 앞에서 react.js 파일에 createElement라는 함수를 만들어서 app.js의 코드량을 조금은 줄였다. 여기서 React 개발진들은 함수 호출보다 더 나은 방식을 생각해내는데, 바로 '마크업(Markup)' 방식으로 React를 이용하는 것이다. 형태는 HTML처럼 Tagging 하듯이 태그로 감싸서 코딩하고, 그것을 ..

    (React 만들기) 04. createElement와 app.js 코드량 줄이기

    이전 글 보기: https://moneytech.kr/53 (React 만들기) 03. 현대화 작업 - webpack과 babel을 이용하자. 1. 빌드 환경 세팅과 빌드해보기 02번에서 만든 것은 HTML과 javascript로 만든 간단한 코드였다. 앞으로 제작해야 할 것들은 더 많은 파일들을 생산해야 하고, 이것을 브라우저로 보내기 위해서는 번 moneytech.kr 0. 들어가는 글 애플리케이션과 소프트웨어가 사용자의 선택을 받는 것 중 가장 큰 요소는 "편리함"이다. 앞서 작성한 vdom의 코드를 보면 객체 내에 tag, props, children 이렇게 3개의 속성이 있다. 간단해보이지만 내용이 더 많아지면 훨씬 더 복잡해질 것이다. 샘플 앱 수준도 이런데, 애플리케이션의 UI 구조를 이런 ..

    (React 만들기) 03. 현대화 작업 - webpack과 babel을 이용하자.

    1. 빌드 환경 세팅과 빌드해보기 02번에서 만든 것은 HTML과 javascript로 만든 간단한 코드였다. 앞으로 제작해야 할 것들은 더 많은 파일들을 생산해야 하고, 이것을 브라우저로 보내기 위해서는 번들링과 같은 과정을 거쳐 빌드(build)해야 한다. 먼저 npm이 가능하도록 세팅한다. npm init npm install webpack-cli --save-dev npm install webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react npm install html-webpack-plugin --save-dev (npm install은 한꺼번에 여러 개도 가능하지만, 너무 길면 글에 드래그가 생겨서 명..

    (React 만들기) 02. 간단한 객체와 DOM 그리기 (Render)

    여기 간단한 HTML 파일이 있다. (index.html) 이걸 어떻게 할 것이냐면, 복잡한 DOM → 간단한 객체로 바꿈 → DOM Render라는 함수를 하나 만들고 앞에서 만든 객체를 입력 받음 → 그 객체를 실제 DOM으로 변경한다. 위의 HTML 파일에 연결된 app.js의 코드는 아래와 같다. (app.js) function createDOM(vdom) { // 아래 변수를 vdom으로 했으니 우선 input값을 vdom으로 선언 const element = document.createElement(vdom.tag); return element // DOM을 만드는 역할 } const vdom = { tag: 'p', props: {}, children: [ { tag: 'h1', props:..

    (React 만들기) 01. DOM API의 문제점, 해결책 만들기

    0. 리액트 프레임워크 (React)의 원리를 파악하자 예전부터 무지성으로 React, Next.js 프레임워크를 달달 암기하면서 프레임워크의 내부는 어떻게 동작하는지 알고 싶었다. 오픈소스로 되어있지만 현재 버전을 들어가서 이해하는 것은 사실상 불가능. 그 방대한 코드를 다 보는 것만으로도 엄청난 양의 시간이 들어간다. 그래서 마침 React를 간접적으로나마 구현해보는 강좌가 있어 듣기로 했고. 정리하고자 한다. 현재 프론트엔드에 쓰이는 라이브러리나 프레임워크로는 Vue.js, JQuery, Angular, React 등이 있다. 되도록 React를 배우라고 하는 이유는 시장에서 가장 수요가 많기 때문이다. 무엇이 우월하고의 차이를 따지기 전에 시장이 어떻게 돌아가고, 얼마나 많은 자료와 커뮤니티가 있..