웹 개발을 하다보면 의미없는 노동을 할 때가 있다. 대표적인 예시로 자바의 Getter, Setter가 있다. 캡슐화를 위한 필수적인 작업이지만 IDE를 통해 직접 입력하지 않고 쉽게 생성한다. 이런 단순한 노동을 없애주는 것을 보일러 플레이트(Boiler Plate)라고 한다. 또 다른 예시로는 react를 설정해주는 create-react-app 이다. 만약에 이 템플릿이 없었다면 웹팩을 시작으로 온갖 설정을 스스로 만들어야 한다. 💡요약 ▪️ 반복적으로 사용되는 부분을 재사용한다. ▪️ 최소한의 수정으로 다시 사용한다. ▪️ 개발자의 단순 작업을 해방해준다. 노가다를 줄여준다.
이미 JS로 만들어진 프로젝트 파일을 TS으로 바꾸는 과정에서 겪은 오류 App.tsx Cannot use JSX unless the '--jsx' flag is provided.ts(17004) tsconfig.json 해당 부분을 "jsx": "react" 로 변경해주면 사라진다.
JSX란? const el = Hello, JSX; 위의 태그 문법은 문자열도, HTML도 아닌 JSX(Javascript XML)라는 JavaScript에 XML을 추가하여 확장한 문법이다. JSX는 React element를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트와 달리 일반 객체이다. React는 JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 된다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메세지를 표시할 수 있게 해준다. JSX 사용 JSX는 공식적인 JS문법이 아니기 때문에 브라우저가 이해할 수 있는 평범한 JS로 변환시킬 방법이 필요하다. * 어떤 프레임워크를 사용해 웹앱을 만들때 가장 중..
필요한 모듈을 설치할때 가끔씩 --save 옵션이 붙은 명령어를 볼 수 있습니다. npm install --save --save 옵션은 package.json의 dependencies에 모듈을 추가한다는 의미이다. *npm5 버전 이후에는 옵션을 쓰지 않아도 자동으로 추가 됩니다. 또 package.json 파일을 보면 dependencies와 devDependencies가 두가지가 작성 되어있는데 dependencies와 devDependencies? dependencies: 애플리케이션 동작과 직접적으로 연관된 라이브러리를 설치한다. devDependencies: 개발할 때 필요한 라이브러리를 설치한다. npm npm install 라이브러리명 --save-dev yarn yarn add 라이브러리명..
