What is Vanilla Javascript link
in the past there are a lot of developers a lot of companies are using jQuery, which is supposed to
help the developers to create a better experience manipulating it down and nowadays because JavaScript has to involve so much more clean JavaScript can just do a lot of the things that in the past javascript couldn't do. when we were talking about vanilla JavaScript we are specifically talking about javascript on the DOM.
there are JavaScript that are running in the backend, which is no js' and it's using javascript as a back-end languages.
"is vanilla JavaScript worth learning?" and the answer to that is absolutely "yes". because vanilla javascript is literally plain JavaScript code so much more opportunities and possibilities that you can create things in the Dom with vanilla JavaScript without even using any kind of frame works like react or angular .
Cons. - only vanilla javascript
Why "vanilla JavaScript first" might NOT be the best approach!
Pros. - javascript frameworks - react / angular / vue
JavaScript frameworks vs Vanilla JavaScript - in 2018
Cons. - javascript frameworks - react / angular / vue
Why I don't use React, Angular, or any other Javascript Frameworks
vs. vanillascript : minimalism and simplicity, fewer files, directories, configurations, and tools
Basics - Typescript
TypeScript Course for Beginners 2020 - Learn TypeScript from Scratch!
React vs Vanilla Javascript | Learn React For Beginners Part 1
-----------
TERMS
IDE : An integrated development environment (IDE) is software for building applications that combines common developer tools into a single graphical user interface (GUI).
One of the tools of the programming trade is the integrated development environment (IDE). link
An IDE typically consists of: Source code editor, Local build automation, Debugger. link
---------------
TypeScript 개념 : link
1. JavaScript 업그레이드 버전이 TypeScript 입니다.
이 JavaScript와 TypeScript에는 여러 프레임워크가 존재합니다.
(프레임워크란 쉽게말해 생산성,효율성을 높여주고 코드들이 재사용이 될 수 있도록 도와주는 역할을 합니다.)
리액트, 앵귤러, 뷰 등이 그에 해당되죠. (사실 리액트는 라이브러리이지만 설명이 길어지니 패스)
그러니 JavaScript 혹은 TypeScript 없이 리액트는 존재할 수 없다는 것이지요.
그러니 아래와 같이 말씀하신 내용은 오류가 있습니다 ^^
------------------------------------------------------------------------
현재까지 React와 Redux만으로 프론트엔드 개발을 해왔는데
점점 더 typescript를 요구하는 사항이 많아져
typescript를 수련중입니다.
------------------------------------------------------------------------
JavaScript와 React만으로 개발을 하셨다가 맞습니다.
그리고 말씀하신 내용으로는 아직 Redux를 새용해 보시지 않은 것 같습니다. (다음 2번 참고)
2. 상태관리는 크게 두가지가 있습니다.
1. Local State,
2. Global State
글로벌 스태이트 같은 경우는 예를들자면
로그인 기능을 구현을 한다고 치면, 현재 로그인을 한 상태인지 아닌지 모든 페이지에 알려줘야하는데
일일이 모든 페이지에 값을 넘겨준다면 비효율적이며 골치가 아프죠.
리덕스를 사용하면 값을 컨테이너에 담아두었다가 모든 페이지에서 값을 사용하게 해주어
전역적으로 상태를 관리할 수 있는 것입니다.
리액트에서는 Local State 밖에 관리가 안되기 때문에, Redux를 사용하여 글로벌하게 상태를 관리하는 것입니다.
Redux는 JavaScript를 위한 것이고, 상태를 담아주는 역할을 하며 리액트말고도 앵귤러, 뷰 등 모두 사용이 가능합니다.
3. 말씀하신 상태관리는 리엑트(Local State)에서 어떻게 상태관리를 할 것인가 입니다.
일반적인 상태관리(state)는 두가지 방법이 있습니다.
1. 클래스 컴포넌트이냐 (ex. Class App extends Component {})
2. 함수형 컴포넌트이냐(ex. const App = () => {})
말씀하신거 보니까 클래스 컴포넌트를 사용하시고 계신것 같은데
클래스(Containder??)를 쓰던 함수형(Hooks)을 쓰던 상관없으나,
함수형(Hooks)을 사용하시기 바랍니다.
취업을 하신건지 모르겠는데 취업을 하신다면 대부분 Hooks를 사용하고 있을듯합니다.
Hooks가 그만큼 생산성이 좋고 코드양도 줄여줍니다.
예전에는 함수형에서는 상태관리가 불가했지만, Hooks의 탄생으로 함수형에서도 상태관리가 가능해졌지요.
구글에 React native Class vs Function이라고만 쳐도 장단점 잘 분석되어 있을겁니다.
물론 Class도 사용하 실 수 있어야합니다.
(불가피하게 Class를 써야 할때도 있고, 라이브러리 Sample들이 대부분 Class라 코드분석할 때 필요.)
저도 처음 공부할때 무작정 이것저것 만들어본다고 JavaScript와 React의 경계가 없었고,
많이 헷갈렸는데 이런 기초적인 개념들은 알고 개발을 하셔야 빠른 성장에 도움이 될 것입니다.
------------
TypeScript 변환 경험 장단점 :
10만줄의 자바스크립트 코드를 TypeScript로 변환한 경험|작성자 Dingdong
Pros.
→ 개발 효율성이 상당히 개선되었습니다.
· 입력 보완이 강합니다.
· 입력 중에 형 검사가 됩니다.
· 마우스오버 변수형을 확인할 수 있습니다.
· 함수 인수와 리턴값형을 확인할 수 있습니다.
→ 버그를 막아줍니다.
· 컴파일시, 정적인 형검사를 해줍니다.
→ 소스코드를 깔끔하게 작성할 수 있습니다.
· 형 정의는 간이적인 문서로 취급합니다.
· 형의 모호함이 없기 때문에 누가 봐도, 나름대로 알기 쉬운 상태에 있습니다.
· 새로운 개발자가 투입되더라도 쉽게 분석이 가능합니다.
Cons.
→ 상당한 작업시간이 걸렸습니다.
→ 마이그레이션 하기 전에 소스코드가 지저분하여 깔끔하게 형정의를 작성하기 어려웠습니다.
→ TypeScript 공부가 어려웠습니다.
· 초기에는 의미를 알수 없는 오류가 상당히 많았습니다.
· 어떻게 만드는 것이 최상의 방법인지 찾아내는데 많은 시간이 걸렸습니다.
· tsconfig 설정과 각 항목을 이해하기 어려웠습니다.
· decorator나 클래스기반과 같은 JavaScript에는 없는 개념이 나옵니다.
→ 사용하는 라이브러리 형정의가 포함되어 있지 않았습니다. (이에 따라, 형정의파일(d.ts)를 따로 만들 필요가 있었습니다)
[출처] 10만줄의 자바스크립트 코드를 TypeScript로 변환한 경험|작성자 Dingdong
