[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문법의.. [FE/JS] 정규표현식 정리 2021.04.1520일차 입사 39일차.일반적으로 정규표현식은 JS에서 처리한다.전화번호나 주민번호, 사업자번호 등 숫자만을 입력하거나 ID나 PW에 특수문자를 제거하기 위해 사용한다.매번 필요할때마다 하나씩 검색하는 수고를 덜기위해 자주쓰는 정규표현식을 정리해두려고 한다. 1. 숫자만 입력 ( replace )function fn_regExNumber( str ) { chkStr = /[^0-9]/gi; return str.replace( chkStr, "" );} 2. 영어만 입력 ( charCodeAt )function fn_regExEng( str ) { for ( int i = 0; i str.length; i++ ) { if ( str.charCodeA.. [FE/JS] JavaScript로 Json 생성하기 2021.04.1118일차 입사 35일차.내가 주말마다 시간을 쏟는 Football Manager시리즈는 작년에 매치엔진 문제로 크고 작은 이슈들이 있었다.FM개발자들은 선수들의 방향전환속도, 태클속도, 태클범위 등의 매치엔진을 구성하는 요소들을 .json파일로 생성했었고, json파일의 key와 value를 그대로 노출시켰기 때문이었다. 지금은 2021시리즈로 넘어오면서 json파일을 암호화해서 접근을 막아버렸지만,어제 공부한 fs.writeFile()로 FM의 매치엔진파일인 physical_constraints.json를만들어보려고 한다. 1. writeFile()을 이용한 json생성 ① JSON.stringify()는 Json으로 변환해준다. // fs모듈을 사용하기 위한 선언const fs.. [FE/JS] fs module 2021.04.10 17일차 입사 34일차. React를 공부하기 위해 샀던 책 2권에는 fs에 대한 설명없이 fs.으로 시작하는 메소드들을 사용했기 때문에 좀 당황스러웠다. 내가 사용하는 기능들에 대해서는 꼭 알고 넘어가는 것이 나의 공부목표이기에 fs모듈에 대한 개념을 알고 기록하려고 한다. 1. fs 모듈 ① 출처 : 오픈튜토리얼스 (링크) ② FileSystem의 약자. 파일처리와 관련된 모듈이다. ③ const fs = require('fs'); 를 코드 맨위에 선언해주어야 사용가능하다. 2. fs.writeFile( '경로 및 파일명', 작성할내용, [파일을 저장하는 방식], function(err) {} ) ① fs.writeFile()은 비동기방식, fs.writeFileSync()는 동기.. 이전 1 2 다음
