본문 바로가기
tech/JS

JavaScript intro

2024. 10. 12.

1. JS는 설치할 필요 없다, 모든 브라우저에 내장되어 있다, 브라우저가 이해하는 세 가지가 html, CSS, 그리고 자바스크립트

 

2. FE에서는 자바스크립트를 반드시 배워야 한다, BE에서는 루비, 파이썬, 고, 자바 등 고를 수 있지만, FE는 그렇지 않다

 

3. JS를 더 깊게 배우고 싶다면 프레임워크로 넘어가면 된다, 프레임워크는 헬퍼다, 가령 리엑트네이티브는 자바스크립트로 안드로이드와 iOS 앱을 만들게 해준다, 즉 자바스크립트를 배우면 안드로이드랑 iOS앱을 만드는 방법도 이해하게 되는 거다  

 

4. 일렉트론은 데스크탑앱을 만들게 해준다, 가령 VSCode도 html, css, is로 만들어졌다, 페북메신저, 슬랙, 피그마도 이렇게 만들어졌다

 

5. FE를 JS로 만들고 BE도 만들 수 있기도 하다, (위툽클코 강의 참고)

 

6. 3D나 실시간 stuff를 하고 싶으면 역시 JS가 딱이다, socket.Io가 실시간 가능하게 해 줌, 그리고 ml5.js로는 머신러닝도 가능  

 

7. Replit.com은 브라우저에서 코딩을 가능케 해주는 툴

 

8. 크롬에서 우클릭하면 '검사(inspect)'클릭하면 콘솔 나온다, 콘솔에서 alert("hi")하면 브라우저에 영향을 미친다, 이걸 function이라고 함, JS is just there waiting for you to use it! 

 

9. 다만 콘솔은 긴 코드를 위한 게 아니고, one line only라 프로그램 쓰려면 그걸로 하면 안 되고 파일을 만들어야 한다 

 

10. 폴더를 만들고 VSC에서 연다, index.html, style.css, app(이름은 아무거나 상관없어).js 파일을 각 만든다 

 

11. Html이 CSS와 JS 모두를 연결하는 접착제이자 허브가 된다, 브라우저는 html을 열고 html이 JS와 CSS를 가져오는 거다 

 

12. 브라우저에서는 index.html을 여는 거지, css나 js파일을 여는 게 아니다 

 

13. JS파일은 앞에서 끌어오지 않는다 주로 뒤에다가 링크를 건다 (css는 헤드 안에, js는 바디 마지막에)

<head>

   <link rel="style sheet" href="style.css" />

</head>

<body>

   <script src="app.js"></script>

</body>

 

14. 코드 짜다가 잘못 짤 수도 있지, css도 잘 뜨는데 js 안 되면 브라우저 우클릭 후 검사 -> 콘솔 가면 "~~ is not defined"라고 뜰 수 있다 그러면 오류난 거야 (css는 element 우측에 코드가 뜸)

 

15. 즉 브라우저는 엘리멘트로 html, css를 얘기하고 console은 자바스크립트 얘기를 해준다 

 

16. 코드 짜면서 콘솔을 계속 열어놔! 

'tech > JS' 카테고리의 다른 글

JS에서 functions 등  (4) 2024.10.17
브라우저에서 콘솔 여는 법, 그리고 JS 기초(string, const/let, Boolean, etc.)  (1) 2024.10.12
HTML, CSS 기타  (7) 2024.10.08
BEM, 아이콘, css import  (0) 2024.10.02
HTML/CSS, 깃, 깃헙  (0) 2024.10.01

댓글