[React] ⑧ WebPack 설치 및 개발환경구성 (2) 2021.11.21 71번째 포스팅 입사 71일차. Create-React-App(이하 CRA)을 사용해도 된다. 오히려 좋은 방법일 가능성이 높다. 하지만 개발자가 자신이 작성하는 코드의 의미도 모른채 그냥 넘어가도 되는걸까? 오늘은 지난 포스팅에 이어 개발환경구성(2)를 이어서 작성해보려고 한다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. 프로젝트 기본구성파일 ① 사용할 클래스명.jsx ② client.jsx ③ package-lock.json ④ package.json ⑤ webpack.config.js ⑥ index.html 1. ClassName.jsx ① 기본구조.. [React] ⑧ WebPack 설치 및 개발환경구성 (1) 2021.10.04 59번째 포스팅 입사 210일차. 개발에는 늘 진입방지턱이 존재한다. 대표적으로는 C의 포인터, React의 WebPack 등이 있다. 오늘은 React의 진입방지턱 역할을 하는 WebPack의 설치법 및 개발환경구성을 알아보려고 한다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. package.json ① npm(Node.js에서 사용할 수 있는 모듈들을 모아둔 저장소)을 사용해서 설치한다. ② package의 정보를 관리한다. ③ Visual Studio Code(이하 VSC)에서 터미널을 연다. ④ WebPack을 설치할 폴더로 이동한 뒤, npm i.. [React] ⑦ HTML5 Attribute 비교 2021.09.2758번째 포스팅 입사 203일차.React는 HTML5에서 사용하는 Attribute들 중, 기능은 같지만 이름이 다르거나 혹은 그 반대의 경우들이 있다.오늘은 그 종류들을 기록해보려고 한다. 0. 출처① ZeroCho님의 무료 인프런강좌 (링크)② Do it! 리액트 프로그래밍 정석 (eBook)③ 초보자를 위한 Node.js 200제 (오프라인 구매)④ 리액트 공식홈페이지 (링크) 1. attribute명 (HTML5 > React : 설명) ① tabindex > tabIndex : tab키를 눌렀을때 focusing되는 태그의 순서를 지정 ② class > className : React에는 class가 다른 예약어로 사용되기 때문에 className으로 변경됨 (클래스형.. [React] ⑥ HooksAPI 2021.09.22 57번째 포스팅 입사 198일차. 리액트쪽에서 Class방식이 아닌 method방식을 계속 종용하고 있고, 그에 맞는 api들을 지원하고 있다. HooksAPI로의 전환 이후, HooksAPI가 장점만을 가지고 있지는 않다. 이제 다른 라이브러리들에 비해 나은 것이 없다. TypeScript가 더 낫다. 등등의 글들을 읽어볼 수 있다. 하지만, 아직 리액트로 프로젝트 하나 만들어보지 못한 내가 이러쿵저러쿵 입방아를 찧는 것 보다는 리액트를 최고로 만들어준 HooksAPI를 공부한 뒤에 까는 것이 맞지않나싶다. 서론이 길었지만, 결론은 하나다. HooksAPI를 알아보자. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ .. [React] ⑤ React.Fragment, this, ref 2021.09.15 56번째 포스팅 입사 191일 차. 약 한 달간 3개의 프로젝트에 세 다리를 걸쳤다.기존에 하던 프로젝트 유지보수, 새롭게 참여한 차세대 프로젝트 그리고 주말에만 참여한 하이브리드 앱 프로젝트.블로그도 딱 30일만에 다시 시작해보려고 한다. 배운것도 많지만 피부도 상하고 머리카락도 많이 빠졌다.팔자주름도 깊어졌다.이번 주말은 정말 쉬고싶다. 오늘은 가볍게 정리만 하려고 한다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. React.Fragment ① 기존의 리액트에서는 쓸데없이 부모 태그를 만들어주어야 제대로 렌더링이 되었다. ② 최근에는 같이 빈 태그를 .. [React] ④ <input>태그에 값 입력하기 2021.08.1655번째 포스팅 입사 161일차.React에서는 html에서 쓰던 것처럼 태그를 만들면 값이 입력되지도 않고 바뀌지도 않는다.값을 입력하거나 수정하는 것 뿐이지만 이벤트를 만들어줘야 한다. ZeroCho님의 무료강의의 첫번째 실습예제인 '1-6 구구단 리액트로 만들기' 강좌를 보고소수판별 페이지를 만들어보기로 했다. 구구단 만들기와 같은 구조로 짜봤고, 소수판별 로직만 추가로 만들어봤다. 0. 출처① ZeroCho님의 무료 인프런강좌 (링크)② Do it! 리액트 프로그래밍 정석 (eBook)③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. 태그에 값 입력하는 이벤트 ① 기본적인 태그들을 만들어 렌더링해준다.123456789101112131415161718192021.. [React] ③ babel 2021.08.03 54번째 포스팅 입사 148일차. React는 스크립트에서 태그들을 그대로 return에 작성할 수 있도록 지원한다. 하지만 모든것을 지원하지는 않기 때문에 Spring의 빌드도구들(maven, gradle)처럼 특별한 무엇인가가 필요하다. 그런 기능들을 지원해주는 것이 바로 babel이다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. babel ① JavaScript Compiler ② JavaScript 최신 문법을 브라우저가 이해할 수 있는 문법으로 변환해주는 트랜스파일러. ③ ES6, ES2017등의 최신문법을 사용할 수 있기 때문에 생산성 및 편리.. [React] ② 클래스 컴포넌트 (Class Component) 2021.08.01 53번째 포스팅 입사 146일차. Hooks API의 등장으로 React에서의 class는 뒷방 늙은이가 되어버렸다. 하지만 Hooks API가 널리 상용화되기 이전 또는 지금까지도 class로 구성된 컴포넌트들은 많기 때문에 우리는 class 컴포넌트에 대해 공부해야만 한다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. ReactDOM ① 작성한 React코드를 WEB에 렌더링 (= 화면을 구현) ② ReactDOM.render(e(클래스명), document.querySelector('#id')); ReactDOM.render(, document.get.. [React] ① React가 주목받게 된 이유 2021.07.19 51번째 포스팅 입사 133일차. 그동안 바쁘다는 핑계로 미뤄왔던 리액트를 다시 진행하기로 마음먹었다. 책 2권을 구매해서 필요한 지식들을 습득하기엔 나는 너무 게으르고 멍청했다. 구매한 책들은 최신버전과 맞지 않는다는 점도 한몫했다. 그래서 기존의 ToDoList는 잠시 접고, 처음부터 다시 시작하기로 했다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. React? ① Facebook이 만든 FrontEnd Framework ② Component 기반 = 사용자 정의 태그를 사용할 수 있다 ③ JSX는 React개발에 도움을 주는 JavaScript문법의.. 이전 1 다음
