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 ① 기본구조..

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..

2021.09.27 58번째 포스팅 입사 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으로 변경됨 (클래..

2021.09.22 57번째 포스팅 입사 198일차. 리액트쪽에서 Class방식이 아닌 method방식을 계속 종용하고 있고, 그에 맞는 api들을 지원하고 있다. HooksAPI로의 전환 이후, HooksAPI가 장점만을 가지고 있지는 않다. 이제 다른 라이브러리들에 비해 나은 것이 없다. TypeScript가 더 낫다. 등등의 글들을 읽어볼 수 있다. 하지만, 아직 리액트로 프로젝트 하나 만들어보지 못한 내가 이러쿵저러쿵 입방아를 찧는 것 보다는 리액트를 최고로 만들어준 HooksAPI를 공부한 뒤에 까는 것이 맞지않나싶다. 서론이 길었지만, 결론은 하나다. HooksAPI를 알아보자. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ ..

2021.09.15 56번째 포스팅 입사 191일 차. 약 한 달간 3개의 프로젝트에 세 다리를 걸쳤다.기존에 하던 프로젝트 유지보수, 새롭게 참여한 차세대 프로젝트 그리고 주말에만 참여한 하이브리드 앱 프로젝트.블로그도 딱 30일만에 다시 시작해보려고 한다. 배운것도 많지만 피부도 상하고 머리카락도 많이 빠졌다.팔자주름도 깊어졌다.이번 주말은 정말 쉬고싶다. 오늘은 가볍게 정리만 하려고 한다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. React.Fragment ① 기존의 리액트에서는 쓸데없이 부모 태그를 만들어주어야 제대로 렌더링이 되었다. ② 최근에는 같이 빈 태그를 ..

2021.08.16 55번째 포스팅 입사 161일차. React에서는 html에서 쓰던 것처럼 태그를 만들면 값이 입력되지도 않고 바뀌지도 않는다. 값을 입력하거나 수정하는 것 뿐이지만 이벤트를 만들어줘야 한다. ZeroCho님의 무료강의의 첫번째 실습예제인 '1-6 구구단 리액트로 만들기' 강좌를 보고 소수판별 페이지를 만들어보기로 했다. 구구단 만들기와 같은 구조로 짜봤고, 소수판별 로직만 추가로 만들어봤다. 0. 출처 ① ZeroCho님의 무료 인프런강좌 (링크) ② Do it! 리액트 프로그래밍 정석 (eBook) ③ 초보자를 위한 Node.js 200제 (오프라인 구매) 1. 태그에 값 입력하는 이벤트 ① 기본적인 태그들을 만들어 렌더링해준다. 1 2 3 4 5 6 7 8 9 10 11 12 1..