Part 01. Hello world : 자료와 변수

> 주절주절

원래 어제 알바 후 집에 가서 공부를 더 하려고 했는데.. 카페들려서 다른 일하고 집에 가니 기절해버렸따.. O<ㅡ<...

알바하면서라도 좀 해놔서 다행 ㅎㅎㅋㅋ ;;

 

1. Js 기본

- Js 사용

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

- <script> 태그는 src 속성과 내부 코드를 동시에 가지지 못함. 즉, <script> 태그 내 코드는 실행되지 않음(이렇게 쓸 일도 없겠지만..)

 

https://ko.javascript.info/hello-world

Hello, world!

2. 코드구조

- 에러예제

1) [...] 앞에는 세미콜론이 있다고 가정하지 않음

alert("에러가 발생합니다.")

[1, 2].forEach(alert)

그렇기에 위에 코드에서는 alert만 제대로 출력되게 됨

 

// 앞서서 정리했던 내용과 중복이라 더 적지 않음

 

https://ko.javascript.info/structure

코드 구조

 

3. 엄격모드

//앞서서 정리했던 내용과 중복 22

https://ko.javascript.info/strict-mode

엄격 모드

 

4. alert, prompt, confirm을 이용한 상호작용

- 최소한의 사용자 인터페이스 기능들

 

1) alert

- 사용자가 확인(OK) 버튼을 누를 때까지 메시지를 보여주는 창(모달 창)이 떠있게 됨

alert("Hello");

실행결과

- 모달 : 페이지의 나머지 부분과 상호작용이 불가능하다는 의미 내포

 

2) prompt

result = prompt(title, [default]);

let age = prompt('나이를 입력해주세요.', 100);

alert(`당신의 나이는 ${age}살 입니다.`); // 당신의 나이는 100살입니다.

 

- title : 사용자에게 보여줄 문자열

- default : 입력필드의 초깃값(선택값) // 인수를 감싸는 [...] 가 default 는 필수가 아닌 선택값이라는 걸 보여주고 있는 거임

- 사용자는 프롬프트 대화상자의 입력필드에 원하는 값을 입력하고 확인을 누를 수 있음.

- 값을 입력하길 원하지 않으면 취소 / Esc 를 눌러 빠져나가면 됨

- prompt 함수는 사용자가 입력 필드에 기재한 문자열을 반환함. 사용자가 입력을 취소한 경우 null 반환

 

// Internet Explorer(IE) 에서는 항상 '기본값' 넣어주기

 

3) confirm 대화상자

result = confirm(question);

let isBoss = confirm("당신이 주인인가요?");

alert( isBoss ); // 확인 버튼을 눌렀다면 true가 출력됩니다.

- confirm 함수는 매개변수로 받은 question(질문)과 확인 및 취소 버튼이 있는 모달 창을 보여줌. 사용자가 확인을 누르면 true, 그 외의 경우는 false 를 반환

 

https://ko.javascript.info/alert-prompt-confirm

alert, prompt, confirm을 이용한 상호작용

 

5. 주석

// 여기부분은 문서 참고 추천. 코드 예제가 많기 때문에 이를 통한 이해가 더 빠름

- 좋은 코드란? 설명이 담긴 주석이 많아선 안됨. 주석 없이 코드 자체만으로 코드가 무슨 일을 하는지 쉽게 이해할 수 있어야함.

- 이와 관련된 규칙 "코드가 불분명해서 주석 작성이 불가피하다면 코드를 다시 작성해야하는 지경에 이른 걸 수 있습니다."

 

1) 리팩토링 팁 1 : 함수 분리

- 잘 분리하면, 각각의 함수들만 보고도 무슨 일을 하는 지 깔끔하게 알 수 있게 됨. 이 때, 함수의 이름 자체가 주석 역할을 하게 되기도 하는데 이런 코드를 '자기 설명적인 코드'라고 부름.

2) 리팩토링 팁 2 : 함수 만들기

- 함수가 아래로 죽 늘어져 있는 경우, 새로운 함수를 만들어 코드 일부를 새로 만든 함수에 옮기는 것이 좋음. 

 

- 좋은 주석이란?

1) 아키텍처를 설명하는 주석

: 고차원 수준 컴포넌트 개요, 컴포넌트 간 상호작용에 대한 설명, 상황에 따른 제어 흐름 등은 주석에 넣는 것이 좋음(UML 공부 추천)

2) 함수 용례와 매개변수 정보를 담고 있는 주석

3) 왜 이런 방법으로 문제를 해결했는지를 설명하는 주석

4) 미묘한 기능이 있고, 이 기능이 어디에 쓰이는지를 설명하는 주석

 

https://ko.javascript.info/comments

주석