전체 글

(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를 배우라고 하는 이유는 시장에서 가장 수요가 많기 때문이다. 무엇이 우월하고의 차이를 따지기 전에 시장이 어떻게 돌아가고, 얼마나 많은 자료와 커뮤니티가 있..

올해 목표 독서 리스트

1. 3개의 질문으로 주식시장을 이기다 | 켄 피셔 2. 생각에 관한 생각 | 대니얼 카너먼 3. 돈, 뜨겁게 사랑하고 차갑게 다루어라 | 앙드레 코스톨라니 4. 워런 버핏 바이블 | 워럿 버핏/리처드 코너스 5. 안티프레질 | 나심 니콜라스 탈레브 6. 현명한 자산배분 투자자 | 윌리엄 번스타인 7. 전설로 떠나는 월가의 영웅 | 피터린치 1. 로봇 시대, 인간의 일 | 구본권 2. 사피엔스 | 유발 노아 하라리 3. 질서 너머 | 조던 피터슨 4. 휴먼카이드 | 뤼트허르 브레흐만 5. 과학 혁명의 구조 | 토마스 S.쿤 6. 정의란 무엇인가 | 마이클 센델 7. 거의 모든 IT의 역사 & 거의 모든 인터넷의 역사 | 정지훈 8. 소유냐 존재냐 | 에리히 프롬 9. ..

미리 적는 2023년도 목표 정하기

벌써 새해가 밝아온다. 2023년이다. 내년에 해야할 일이 벌써부터 떠오른다. 0. 건강 건강 관리는 모든 것에 우선한다. 꾸준히 유산소 운동을 할 예정이다. 일주일에 최소 2회 이상은 뛸 예정이고, 이것을 앱으로 측정하여 기록을 남길 생각이다. 1. 웹 프로그래밍 이번 년도 12월 한달동안은 타입스크립트, 리액트와 웹 프로그래밍 실무 강의를 모두 들을 예정이다. 다 듣고나서 정리한 후에는 수익을 창출할만한 웹애플리케이션을 제작하고 싶다. 프론트엔드를 공부하면서 인터랙티브 웹도 제작해보고 싶고, 여러가지 재미있는 콘텐츠형 웹애플리케이션도 만들어보고 싶다. 2. 독서 기록 올해는 트레바리 새로운 시즌을 시작하면서 독서에 푹 빠져있다. 이번 기회에 여러 영역의 책을 읽어서 독후감을 남겨보려고 한다. 우선 목..

사이드 프로젝트 쉽게 시작하기 (OpenAPI, Javascript)

최근에 재미있는 깃허브 레포지토리를 발견했다. https://github.com/dl0312/open-apis-korea GitHub - dl0312/open-apis-korea: 🇰🇷 한국어 사용자를 위한 서비스에 사용하기 위한 오픈 API 모음 🇰🇷 한국어 사용자를 위한 서비스에 사용하기 위한 오픈 API 모음. Contribute to dl0312/open-apis-korea development by creating an account on GitHub. github.com 한국어 사용자를 위한 오픈API 모음으로, 사이드 프로젝트를 하기에 괜찮은 것들이 많다. 날씨부터 랜덤 사진, 영어 단어와 금융 정보까지. 간단하게 디스플레이하거나 가공해서 시각화하면 좋을 것들이 많다. 이렇게 공개된 API로..