개발괭발메모장

Chrome으로 디버깅하기 🐞

디버깅. 버그를 찾는건 중요한 것 같다. 크롬 디버깅 도구 사용법을 가르치고 있다.

맞다. 실행 단계마다 코드 단위로 추적할 수 있는 부분이 장점이다.

Sources 패널 사용법

링크 : ko.javascript.info/article/debugging-chrome/debugging/index.html

위에 링크로 테스트 페이지를 가라고 하니 따라가서 켜보자.

확인 버튼을 누르면 An example for debugging. 라는 문구가 출력된다.
디버깅은 어떻게 하는가...보통 빈페이지에서 마우스 우클릭 후 '검사'를 누르게되면 나오는 창(패널들)에서 진행한다.

보통 이런식으로 생겼다.🎉

Sources 탭 부터 설명을 하니까 위에 잘 보면 소스를 까볼 수 있다.

영역을 3부분으로 나누네.

'오픈소스즈' 라고 좌측상단에 토글버튼을 누르면 디렉토리 트리 구조로 파일탐색영역이 나온다.

리소스를 저장한다던가, JS파일을 웹에서 별도로 탭으로 열어본다던가에 유용.

리소스는 편집이 안되지만, 드래그해서 저장가능.

좀있다가 자세히 살펴본다고... 😭넘어가자... 양이 많다는 소리겠지.😭

Console 사용법

콘솔탭이다. 다른탭에서 ESC키를 누르면 하단에 퀵 호출로 탭이동을 안하고도 쓸 수 있다. 안보인다면 잘 살펴보자. 펼쳐 볼 수 있다.

표현식을 입력하고 엔타를 딱 때리면 즉시 실행해준다.🔥

하지만 쉬프트+엔타를 동시에 누르면 줄바꿈이되고, 여러 줄 입력 가능.🔥

화살표를 위로 올리면 직전 및 이전에 입력한 내용들을 불러올 수 있다. (우클릭을해서 히스토리를 지우기전까지)

중단점(breakpoints) 사용법

콘솔 사용법을 이야기하곤 다시 소스탭으로 돌아간다.

아까 위에 예제페이지 링크열어둔걸로 돌아가서 실습해야함...

코드를 고치지 않았다고 가정하고, 페이지를 새로고치기 전에 중단점을 박아두면 (왜냐면 코드를 고치면 중단점도 바뀔 수 있다.)

해당 코드를 불러오기 전 지정해둔 곳에서 중단점이 걸린다. 말이 좀 이상한데, 지정해둔 '점'에서 '중단'이 걸린다.

뭐 다양한 기능을 설명하고 있으니, 눌러보자. 잘못 세팅했을땐 초기화도 할 수 있다. 걱정말고 가지고놀자.

debugger 명령어

특별히 쓸 말이 없다 어쩐다.🥺

멈추면 비로소 보이는것들

자, 브레이크 걸고 새로고침 하면 중단점이 걸리고, 디버그 창 영역에서 컨트롤을 추가적으로 가능해졌다. 

왓치 부분은 잘 안쓰지만 가끔 쓰면 유용하고, (코드에 적기 싫을 때)

콜 스택은 콜백함수라던지 어디서 실행되어 실행되고 타고 들어왔는지 구분할 때 좋다. (사실 직접 짠 구조가아니면 구분이 잘 안되지만🥺)

스코프 영역은 해당 코드범위영역에서 접근 가능한 레벨의 변수를 보여준다.

🌈

실행추적하기

브레이크를 걸었다면 resume (f8키) 버튼을 많이 쓸거고 

보통은 Step (f9키나) Step over(f10)을 많이 쓴다.

f9를 좀 더 많이 사용할텐데, 하나하나 까보는경우 소중하게 참고하자.

F11과 쉬프트+F11은 일단 넘어가고 사용할 때 한번 더 보자.

✨ (또 새로운 꽃인 비동기호출쯤에서...)

console.log

출력 : 미리 구현되어있는 함수인 console.log를 이용하는 방법이다. 콘솔창에서 안써도 묵시적으로 출력되긴하지만 코드상에선 써야지..🥺

ESC키를 누르면 어떤 패널에서도 하단에 console 패널을 소환할 수 있단걸 알고 있으니, 적절히 잘 소환해서 써보고

친구들로 console.dir console.error 등이 있다. console.log 말고 한번 써보자.

콘솔.dir은 object형을 한번 써보고

콘솔.error는 한번 이것저것 해보고, 콘솔창을 잘 살펴볼 것.

코딩스타일

인정한다. 개발자는 간결하고 읽기 쉬운 코드가 최고다.

성능도 좋고 간결해서 라인수도 짧지만 다른사람이 봤을 때, 못알아보는 급의 코드는 협업시 유지보수가 힘들고다.

와... 추천할만한 규칙 시트를 설명했다.

확실히 이 스타일 선호도는 팀에따라, 프로젝트에따라, 개인에따라 달라질 수 있으니 만능뿅망치가 아님을..

탭 vs 2스페이스 vs 4스페이스 등으로 싸우지말자.

ㅋㅋㅋ

문법

중괄호

상세하게 잘 설명해두었다. 나는 요약을 하지.

) {

이렇게 시작하는걸 권장하자. 라는 이야기다.

if (n < 0) {
  alert(`이것을 기본 형식으로 받을자.`);
}

최종 결론은 짧아도 간단해도 이렇게 만들자.🥺

가로길이

요즘은 그래도 4:3 모니터가 많이 사라졌네.. 노트북의 경우 조금 문제될 수 있겠다.

들여쓰기

종류가 여러가지가 있는데, 이것도 팀별로 최신 에디터나 IDE를 쓰고, 통일하자고 맞추면된다.

가로들여쓰기

🌸 스페이스 개수가 몇개인가 탭을 사용하는걸로  싸우지말자.

세로들여쓰기

🌸 가능하면 어떤 일을 행했는지 주석에 남기는게 좋은데, 여기도 재미있는 포인트는 주석의 다음 행에 해당되는 코드를 쓸 지, 아니면 코드 다음에 적을지는 팀별로 미리 협의하도록 하자.

세미콜론

모든 구문 끝에는 세미콜론을 써야 모던하지만, 특정 룰이 적용되면, 안쓰는 경우도 있다는걸 알아두면된다.

절대적인건 없다. 모던한건 꼭 써야한다고 해둘 뿐. (사용할 순 있다 가독성에 나쁠 뿐......)

중첩레벨

한번에 너무 많은 if 로 들어가거나, 중첩해서 함수를 작성하지 말자는 내용

함수의 위치

"헬퍼함수 여러개를 만들어 사용하고 있다면" 이라고 써놓고 있다.

❓ 헬퍼함수에 대해서는 설명을 안해두어서 

-> 다른 함수에 추가적으로 들어가 함수가 하고자 하는 해당 기능을 완성하기 위해 도움을 주는 함수를 말한다.

createElement 가 핸들러를 세팅하기 위해서 elem으로 표현, 할당된 후, setHendler에 파라메터로 들어가고 있다. 들어가서 엘리먼트생성하는 일을 배치받아 담당자로 업무를 시작하겠지.

스타일가이드

이제서야 스타일 가이드에 대한 내용이 시작되었다. 프로젝트 시작시에 만들어두면 좋은 스타일 가이드이다.

혼자할때는 거의 만들지 않지만 만들어두면 익숙해져서 좋다.

내 주변엔 보통은 airbnb 많이 쓰더라.

* 저거 직접 다 만들면 시간 엄청 오래걸림...

Linter

스타일 가이드 검사기다. 💙 마이너한 linter의 경우, 정보가 잘 없다. 사람들이 많이 쓰는데는 이유가 있겠지?
가능하면 유명한 ESlint를 쓰는걸 추천한다.

여기서부터 2갈래 갈림길이 적용된다.

1. 에디터에서 사용하는 외부 확장형 설치형 lint 를 설치하고 빠르게 넘어가기

💚 스크롤을 쭉 내려서 airbnb가 보이는 링크를 바로 누르자. 1.1 부분만 해도 일단 문제없을것이다.

2. 일단 매운맛을 한번 보기.

일단, 맘에드는 걸 하나 잡고, ESLint 같은것 (Ecma Script + Lint)

- 개발에선 문제가 있는 코드에 표시를 달아두는걸 의미한다.

eslint.org/docs/user-guide/getting-started

일단 지금레벨에서 추천은

next steps 까지 들여다볼 필요는 없을 것 같고, 

eslint.org/docs/user-guide/configuring 이거 영어로 되어있어서 일단 패스하거나 진짜로 패스했다면 ㅠㅠㅠ

이 블로그의 글을 읽자.

velog.io/@kyusung/eslint-config-2

그래도 처음하는거라서 한번에 안와닿을 수 있다. 이것만 머릿속에 기억하자.
아 나는 일단 최소한 eslintrc 라는 이름을 가진 설정 파일을 만들어야 쓸 수 있구나. (아니면 웹팩 모듈번들러 package.json에서 eslintCongif를 만들어야하는구나.) 하고 외워두자.

용어가 많이 나온다. 파서, 프로세서, 환경, 플러그인 등등

기본 가이드를 익힌 후 아래와같은 글 등으로 환경을 설정하는게 가장 빠르고 좋다.

velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

요즘은 그래도 2-3년전보다 정리가 잘 되어있는 곳들이 많다. 위에글은 리엑트 포함이 있는데 필요한거만 살펴보자.
살짝 감이오면

github.com/James-Curran/pure-es6-boilerplate

이 프로젝트를 참고해서, 아 최소한 이건 있어야겠구나. 정도만 알아두고 넘어가자. 아님 지금은 바로 위 프로젝트 깃헙주소의 파일을 받아서 자신의 기본프로젝트로 설정하고 바꾸거나 개발해나가자.
왜냐면 JS가 문제가 아니라, 웹팩이니, 빌드니, node package manager 니...
(아니 JS를 빌드한다고?)의문을 가지며 설정 대해서도 공부해야 하기 때문.

(3년전에 작성된 이 보일러플레이트도 심플하네, 버전이 낮아서그렇지.. github.com/jluccisano/webpack-es6-boilerplate )

Prettier

일단 위에서 linter만 이야기하고 모던JS 가이드에서 프리티어에 대한 설명이 없어서 추가.
위에서 서타일 가이드를 열심히 만들어서 스타일 잡고았으면, 바로 위에서 lint로 아 이거 스타일이랑 안맞다고 뿅뿅 표시해주었다.

그럼 프리티어는 이걸 💝프리티~하게💝 어여쁘게 자동으로 수정해주는것을 말한다.

주석

주석이란 무인가. 중x의 국가 주석 말고..

그럼 JS개발에서 주석(코멘트)를 달려면 어찌 해야하나는 이전에 배웠다.
여기선 코드 품질을 높히기 위해 어떤 주석을 써야하는지 알아보자.

좋지않은 주석

풀어서 쓰고있는데 짧게 말하면 명확한 코드엔 주석을 쓸 필요가 없다. 복잡하면 하나의 기능을하는 함수 이름으로 묶어 볼 것.

// 변수 선언을 썸으로 하고, 숫자형 1234 더하기 5를 문자열로 연결한 코드이다.
let sum = 1234 + '5';
// 라고 쓸 필요가 없다는 말이다.

좋은 주석

예시를 들어 잘 설명을 해 두었다. "함수 용례와 매개변수 정보를 담고 있는 주석" 부분은 익혀두자.

- 왜? 이걸로 해결했는가? 개발 아키텍처 등.

- 왜 이런 이름인가😇😇😇😇😇😇😇😇😇😇

- 왜 여기에 이 코드를 썼는가. 저걸 쓰면 되는데, 이유가 뭔가?

- ......

등등..

닌자코드

기억하고 있습니까

최강닌자 닌자 닌자! 은둔술!! 은닉술!! 최강의 나루토가 되는 방법!!!!!
아... 진짜 싫다. 스파게티 코드도 아니다.
여기 나오는 내용의 의미는 절반이상은 비꼬는 내용이다. 잘 구분해서 보자.

코드 짧게 쓰기 + 글자 하나만 사용하기

가독성이 문제가 아니라 그냥 의미불명의 수준으로 난독화를 해둔 수준이다. 이렇게 작성하지말자.

이름 만드는게 제일 어렵지만 의미있는 변수명과 함수명을 만들도록 노력하고 가독성을 높히자.

약어사용하기

보통 팀 내에 약어를 공유하는 wiki나, 가이드를 만들어둔다. 꼭 가이드를 쓰도록하자.

아니 제발 가이드 만들었으면 가이드에 적는걸 까먹지말라고

아무 이야기도 없이 멋대로 변수명이 짧으면... 정말 곤란하다.

ua가 뭐야 ua가 영웅이야? 울트라 아카데미야? ㅠㅠㅠㅠ

포괄적인 명사 사용하기

아 진짜 data라고 해두는거진짜 싫다...

그래... prefix 나 postfix로 다음의 obj, data, value, item, elem 일단 좋다. campaignObj 아... 그래 캠페인 오브젝트구나.

responseUserData...? 아... 그래 뭐... 응답받은 사용자 데이터인가보다.

그.런.데... 뭐? "data" 만 딸랑 써두면 안에 뭐 들어있는지 어떻게아냐고 ㅠㅠㅠㅠㅠㅠ 호카게 닌자야? 🥺

... data1, data2, data3 (속에 내용 다 다름 다 열어봐야함)

다음으로 나오는 내용은

let num = 'gogo sing.';
let string = 3.1492349532;

철자가 유사한 단어

let IlikeNinja
// 개발 코드 하이라이터라서 이렇지

이미지로 만들거나 이렇게 그냥 쓰면 let IlikeNinja = 'I lika NInje'; 대문자 아이인지 엘인지 뭐가 뭔지 헷갈린다.

동의어 사용하기

스타일 가이드 만들 때, 변수명 작성에 대한 가이드도 부족하지 않았나 살펴볼 것. 😂

이름 재사용하기

정말 정말 무섭다ㅋㅋㅋ  적당히를 모르는 내용이다.
😊 적절히 상황에 맞게... 잘 만들어 드세요..... 제발...

재미로 언더스코어 막 남발하면서 쓰지말자

모든 코드작성엔 이유가 있는것이 좋다.

// 왜 언더스코어를 남발하며 썼는지 이곳에 남기려했지만 여백이 없어 남기지 않았다.

미칠듯한 과장 형용사 사용하지 않기

let 킹갓제네럴엠페러충무공마제스티하이퍼울트라판타스틱익스트림지니어스화룡정점마스터문자열변수 = 'Piyo!';

let chickSound

가 좋겠지?

외부변수덮어쓰기

...악마다 진짜 너무한다

부작용이 있는 코드 작성하기

클린코드 책 저자가 보면 거품을 물 내용 / 평생유지보수하는법 저자가 보면 아 선넘었네 하는 내용.
아. 책 영업해야지.

Javascript 내용은 아니다. 사놓고 머리맡에서 베고자면 좋다. (물론 읽다가)

자. 빨리빨리 넘어가자...

함수에 다양한 기능넣기

✨ ^ㅡ^ 노자라는 사람 참 대단하다 싶다.

일단... 하나의 기능을 하는 함수(function)을 만드는것이 좋긴 하다. 그런데 이게 꼭 "법"은 아니다. 어긴다고 벌받지 않는다.

그렇게 된 경우 주석으로 이유를 써주고, 이 커다란 함수가 하는 목적을 잘 작성해두자.

*** 너무 많이 함수를 쪼개면 이게 개발을 하는건지 함수 인수 분해를 하는건지 도저히 알 수 없을것이다.

** 편법을 모두 사용하면 후배 개발자들에게 저렇게 살진 말아야지 하고 영감을 심어줄 수 있다.

* 해당 챕터도 쫌 적당히 하자.

끝. 다음 포스트에 테스트 자동화와 모카 폴리필을 메모해두련다.

테스트자동화와 모카

모카보다 나는 제스트파인데

폴리필

아이고 구브라우저

if 와 '?'를 사용한 조건 처리 ❤️

문서를 다시 읽어봐도
조건문이라는 친구를 알아보는 과정이라고 소개해야 할 것  것 같지만, 조건을 평가하는데 아래 내용을 쓰면 된다고 훅 치고 들어온다.

즉, if 문과 ? 연산자를 사용하면 된다고 말하고 있다.

조건문은 🐈 만약 (조건이❓이러이러) 하다면, (다음과 같이 반짝반짝🌟) 하게 행동 하라... 라고 하는 개발의 꽃이다.

'if'문

설명에서 if(조건식) 문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true 이면 코드 블록이 실행된다.
- 라고 if 라는 조건 문법을 사용해, 괄호안의 조건식을 평가해서 결과가 참한녀석이면, 코드를 실행하는구나! 하고 이해하면 되는 간단한 친구다. (뭐가 다른데?)

if (year === 2021) {
  alert( "백색소의해라고합니다! 한우맛있쩡" );
}

실행 부분은 짥게 줄여서 중괄호를 안쓰고 한줄로 쓰기도하는데, 가능하면 가독성을 위해서 한줄이라도 묶어주자.🥺

year === 2021

이라고 표현한 부분이 조건식인가? 조건과 조건문 조건식은 다른가? 이라는 부분을 헷갈릴 수 있는데, 이렇게 보고 본문을 읽어보자.

조건문에 조건식을 넣으면 참/거짓을 평가해서 동작한다고 설명하려 한 것 같다고 느꼈다 🤔

구글 검색해보면 사람들이 조건문이랑 조건식이랑 섞어쓰는것 같으니까 이것도 헷갈릴 수 있을지도 모르겠고...

조건식(표현식)이라 써 두었는데, 표현식으로 confirm() 정도는 쓸 수 있지만 가능하면 이렇게 즉시즉시 받아서는 가독성이 떨어지니 안하는편이 좋다고 생각되었다.

'else'절

언어의 문법이니까 절이 나온다.

기본적으로 상단의 조건식과 반대되는 조건인 false 경우 실행된다.

if (year === 2021) {
  alert( '백색소의해라고합니다! 한우맛있쩡' );
} else {
  alert( '돼지가 맛있는 연도 입니다.' );
}

조건부 연산자 '?'

물음표가 나왔다. 조건부 연산자, 혹은 혼자 쓸 수 없고 3개의 항이 필요하다해서 삼항연산자로 불려진다.

let 결과를담을변수 = 조건식이나조건 ? 참일경우실행할내용 : 거짓인경우실행할내용;
// 물론 위 코드는 돌리면 동작이 안된다.

한글로 써 본 예제이다.

상당히 많은 코드에서 이 조건부 연산자로 처리하는 경우가 제법 있으니 눈에 익혀두자.

다중'?' 는 가급적 가독성을 위해서 안쓰는게 좋고, 부적절한 '?' 부분도 봐 두면 좋다.

논리연산자

자주 쓰는 쓸만한 친구인 논리연산자가 나왔다.

세가지 종류가 있다고 소개 중.

|| (OR)

오아 연산자는 보통 엔터키위에 쉬프트키를 눌러 입력한다. 버티컬바 라고 불리던가 그랬다. 두개를 쓰자.

if같은 조건문에서 쓰면 평가후 바로 참한 내용에 대해서 사용하고,

"✨전통적인프로그래밍에서✨"
불린값을 조작하는데 쓰이고, 둘중 하나라도 참이면 참(true)을 반환한다.

두번째의 아주 큰 특징으로 

첫번째 트루씌(참한녀석)를 찾는 오아연산자 '||'

왼쪽부터 체크를 시작해서 첫번째 참한 값이 나오면 즉시 평가 된, 참 결과 평가에 따라 동작의 오리지널 타입 결과 값을 반환한다.

* 즉, 조건문에서 사용할때랑, 표현식으로 일반적으로 할당연산자(=)와 섞어서 쓸때랑 다르단걸 말한다.

나머지 변수 표현식으로 구성된 목록이나 단락평가는 응용법이니 알아두면된다.

a값이 없는경우 b값을 세팅하고 c값도 없는경우 기본값으로 "테스트값" 이렇게 할 때 쓰기도 했었..(아래 복선으로 남겨두자)

&& (AND)

두개의 앰퍼샌드를 연달아 쓰면 AND 연산자를 만들 수 있다고 하네. 쉬프트+7

다시나온✨"전통적인프로그래밍"✨에서 모두 '참'인 경우 참(true)을, 그외엔 거짓(false)를 반환한다. 라고 설명 중.
조건을 모두 만족해야하니, 엄격하다.

두번째 아주 큰 특징으로

첫번째의 펄씌(거짓된친구들)를 찾는 AND 연산자 '&&'

이라고 설명하고있다.

위에 나온 오아연산자의 두번째 큰 특징과 반대되는 조건이다.

거짓된친구들 falsy 라는 의미를 가진 친구들을 한번 생각해보자.

false, null, 0, undefined 이런 친구들이 나오면 먼저 반환한다.

가끔 정말 이런코드를 쓰는 사람들도 있으니, 코드리뷰에서 이렇게 쓰지않으면 좋을 것 같아요. 라고 해주자.
취향이니까.. 생각이 있어 썼겠지. 강제는 하지말고 크게 싸우지는 말자. 회사나 팀의 코드 규약룰이 있으면 지켜달라고 하자.

! (NOT)

참/거짓으로 평가한 후 뒤집어주는 연산자이다.

두번쓰면 불린형으로 변환할 수 있다고 설명하는 예시까지 사용해봤다.

아, 모든 논리 연산자 우선순위 중 높다는것도 꼭 알아두자.

'null'병합연산자

사실 이거 정리할 때 까지 있었어? 라고 생각할 정도였다. 최근에 추가되어 폴리필이 필요하다고.

삼항연산자의 고급버전으로 생각하면 좋으며, 비어있고 선언된 변수는 걸러주는 좋은 연산자구나.🥺

위에서 복선을 회수해서, 요즘은 이 연산자를 사용하면 짧고 간결하게 선언이나 아무것도 없다면 기본 값을 정해줄 수 있고

선언된게 있다면 그 값을 먼저 반환하는 동작을 한다.

우선순위는 저 - 밑에 있어서 (5) 나- 중에 동작한다. 괄호로 잘 묶어서 먼저 평가되도록 쓰는걸 권장한다.

while 과 for 반복문

한바퀴 돌고 한바퀴 또 도는 이터레이션이라고 부르는 뺑뺑이를 도와주는 반복문의 시간이 왔다. 🔥

(루프문, loop문 이렇게 부르기도 했던거같아.)

'while' 반복문

문법을 소개하는데, if에서 조건식에 대해 잘 했을테니 쉽게 할 수 있을거다.

조건식을 평가해서 참인경우 본문을 실행해주는 구조다.

* 한줄짜리 예시가 있는데, 가능하면 쓰지말자.

'do ... while' 반복문

조건식 평가를 뒤로 미루었다. 즉, 일단 일을 딱 한번 저질러놓고 아래에서 한번 더 할지 말지 고민을 해보는 구조다.

😂정말 잘 안씀.

'for' 반복문

많이 쓰임. 구조가 조금 독특해보여서 첨언을...

for (처음실행되는구문.인데ㅡ보통은여기에초기값을넣기도한다; 평가식; 증가식) {
  // ... 반복문 본문 ...
}

(세미콜론;두개;들어가있다)

세미콜론이 두개 들어가있다. 순서대로 보통은 초기식, 평가식, 증가식 이렇게 부르기도 하는데

반복을 위해서 초기값 설정은 외부에서도 할 수 있다. 이 경우 비워두기도한다.

for ( ; i < 10; i++) 이렇게 될 수 있다는것. 정도까지. 그리고 초기식에 인라인 변수선언, 그리고 앞에서 쉼표연산자로 인라인 변수선언을 여러번 할 수 있단것도 기억해내면 될듯.

반복문 탈출

반복을 하다가 종료를 해야하는 경우 사용하는 break 키워드가 있다.

그냥 바로 써버리면 반복문이 바로 종료되니, 반복문 안에 조건문을 넣고 잘 가꾸어 이를 통해 실행하도록 한다.💬

다음 반복으로 넘어가기

break 하기는 그렇고, 다음 식은 전부 실행하는건 낭비일 것 같은 경우, continue 를 사용해서 코드의 뺑뺑이 시작점을 위로 돌려준다.🧡

break/continue와 레이블

중첩반복문을 사용하는 경우 사용할 수 있다.

가끔 사용하는데, 이게뭔지 찾아보는 사람이 있었으니 기억해두자.

(그게나였다. 이게 무슨문법이야 처음본다? 하고 잊어버려서 찾은적이있었다.)

반복문 앞에 콜론으로 붙여주고있다.

Switch문

조건문 반복분에 이어 스위치문이라는 큰 문법이 나왔다. 강력하게 타입체크등을 가지고 엄격한 조건판별을 하기 때문에 구체적으로 다룬다고 느껴졌다.

문법

디폴트는 필수가 아니지만 break는 써주세요 제발... 안쓰면 안쓰는 이유를 적어두면 협업시 의도 해석에 도움이 된다.

생각보다 쉽다. 케이스에 써 있는 예시☣️를 보면 타입까지 체크하기 때문에 prompt 같은걸로 입력받으면 string이니까 주의해서 case에 케이스를 입력(?) 정의(!) 해주는 것 말고 실수하지않으면 된다.

케이스에 표현식을 넣는건.. 되는거긴한데 가능하면 밖에서 정리하고 넣어주자.

여러 개의 "case"문 묶기

문법은 아니고 break를 사용하지 않고 쓰는 편법인듯.

자료형의 중요성

위에서 자료형까지 일치 시키게 된다고 예시☣️를 한번 언급했다.

함수

자바스크립트의 꽃 함수다. 💮꽃이 너무많다. 뒤에 객체도 꽃인데...프로톹ㅌ

일단 이미 자연스럽게 각종 브라우저에 들어있는 내장 함수를 사용해 본적이 있으니 익숙하다.

직접 만들어서 써 보자.

함수 선언

약간 선서! 같은 느낌으로 대중들에게 이 함수를 쓰겠다고 선언하노라. 하는 방식이다.

function showMessage() {
  alert( '안녕하세요!' );
}

예시 샘플은 간단하게 잘 되어있다. 복붙했다.

function 이라는 함수 선언 키워드, showMessage 라고 선언한 함수이름, 매개변수를 넣을 공간( ), { 본문내용 } 

선언은 했는데 사용은 해본적이 없다.

showMessage();

이렇게 사용한다.

지역변수/외부변수

도튜먼트 내용으로 특별한 무리는 없는 것 같다.

전역변수라고 변수밖에 선언된 외부 변수 중 하나인데, 글로벌로 선언한 변수의 관리를 잘 해야한다는 점 정도 기억해두자.

매개변수

변수긴 변수인데, 함수안에서 전달받는 매개변수(파라메터 parameter)라고 하는 변수이다. 

function useParaPara(catName, insamal) {
  alert( catName + ' - ' + insamal ); // 좌측에 고양이이름 - 인사말을이어두었다.
}
useParaPara('나비', '야옹아안녕?');

예제에서 매개변수를 넘겨주는걸 봤다. 본문을 마음껏 수정해서 변경할 수 있다.

기본값

매개변수의 기본값을 설정해 줄 수 있는 부분도 참고해두자. 아무것도 않들어오는 경우, 코드가 오류날 수 있으니 이런 경우를 막아준다.

매개변수 기본값을 설정할 수 있는 또 다른 방법

오래된코드 등 보통은 저렇게 많이 구현을 해 둔다.

반환값

함수는 반환값이라는것을 결과물로 생성한다.🌺 파라메터로 받은 내용을 연산하고 그 결과를 내어준다.

반환값에따라 변수 이름도 잘 지어주면 좋다.

return 키워드를 사용해서 반환 할 변수를 지정해주자.

return을 안하거나 변수를 지정안하면 undifined 인 것을 알아둘ㄱ것

함수이름짓기

언제나 이름짓는게 젤 힘들어..

규칙예시를 잘 해뒀는데, 해당 룰을 기반으로 만들고, 언제나 부득이한 경우가 생기면 주석을 활용하자.

함수는 동작 하나만 담당해야하는데, 어쩔 수 없는 경우 두개가 될 수 있다. 왜 그렇게 되었는지 꼭 써두자.

함수==주석

한줄로 요약하면 함수를 기능을 잘 나눠서 이쁘게 잘 만들면 주석과 같다는 의미이다.

함수 표현식🌺

앞에는 선언이라고 했고, 뒤에는 표현식이다. 개인적으로 표현식의 '표' 가 = 랑 느낌이 비슷해서 = 로 할당하고 구문의 끝을 알리는 ; 세미콜론이 있으면 표현식이구나 하고 외웠다.

let sayHiPyoHyun = function() {
  alert( "Hello" );
};

alert( sayHiPyoHyun ); // 함수 코드가 보임

선언문이랑 다른 특징은 끝에 세미콜론도 있고, 미리 선언해두지 않는다인데, 문서의 코드 보면서 진행해보면 알 수 있을것이다.

선언은 미리 선언이고 표현식은 다음과 같다.

내가 그의 이름을 불러주기 전에는 그는 다만 하나의 몸짓에 지나지 않았다. 내가 그의 이름을 불러주었을 때, 그는 나에게로 와서 꽃🌺이 되었다.
내가 그 함수를 불러주기 전에는 그건 다만 하나의 표현식에 지나지 않았다. 내가 그 함수명을 호출했었을 때, 그건 나에게로 와서 실행🌺 되었다.

표현은 해당 위치에 코드가 🌺닿아야 표현되어 불러주어야 온다. 😂 쓰고나니 오글거린다. 사람이 잠을안자고 정리하면 이렇다.

콜백함수

예문을 기반으로 공부하자. 교과서기반으로 따라가자.

매개변수 3개를 제시하고 있다.

첫번째 코드라인부터 보면 ask 애스크라는 질문을 받는 함수하나가 1-4줄에 있다. 

파라메터로 question을 받는데, 2번줄을 보면 한줄짜리 짧은 if문으로 조건식에 컨펌으로 질문을 받고있다.
뒤에 바로 yes 라고 파라메터로 받은 yes를 ()를 써서 호출(실행)하고 있다. yes()를 부른것이다.

이런 방식을 콜백방식(나중에 부름)이라고 부른다.

yes는 어디에있나? 

함수의 인자 순서는 실행할 때와 같으니
15번째 줄에 두번째 파라메타로 showOK 로 yes에 해당된다.

두번째 예제는 너무 짧게 썼는데.. 솔직히 이렇게 쓰면 가독성이 떨어진다.

함수표현식 vs 함수 선언문

차이에 대해 위에서 간단하게🌺 설명하긴했다. 이곳에서 좀 더 상세하게 다루고 있다.

1. 문법차이

선언문 - 코드 중간에 독자적인 구문... JS 코드 어딘가에 당당하게 쨘 하고 선언되어있다.

표현식 - 할당연산자 우측에 구문이 잘 표현되어 있음.

2. 생성차이

선언문 함수선언문이 정의되기 전에 호출이된다고 써두었는데, 호이스팅 개념이 없다면 일단 넘어가고 

간단하게는 선언문은 순서상관없이 어디서든 코드 저 밑에 선언을 해두어도 위에서 호출해서 쓸 수있다.

표현식은 할당되고, 그 부분에 닿아야 실행되기 때문에🌺

복잡한 개발에서는 표현식을 룰로 권장해서 개발하는 경우도 있다.

선언문을 여기저기 선언 후 호출하면 못찾기도 해서 그렇다.

화살표 함수 기본

그렇다는건 심화가 있다는거겠지?

정식 명칭은 화살표 함수 표현식🌺이다.

심플 문법부터 보자. 두번째줄은 실행안된다. 첫줄과 매칭을하려고 씀.

let func = (arg1, arg2, ...argN) => expression
선언 함수명 = (인자1, 매개2, 많은인자들) => 실행할표현식과반환을값을적는곳

큰 특징은

function 이라는 키워드를 써야하는 번거로운 부분, return 키워드 쓰는 부분이 사라졌단걸 주목하자.

let sayHi = () => alert("안녕하세요!");

줄이고 줄이는데 최적화 할 수 있기 때문에, 너무 간단하게 줄이는 경우도 있다.

선언문으로 쓸 수 없는게 지금 할당 한 우측을 보면서 선언문으로 바꿔 만들고자 하여도
이름이 없는 익명함수가 되어버리기 때문이다.

🌺화살표 🌺함수 🌺표현식이다.

여러줄인 경우 중괄호로 묶는것도 다른방식들과 같다만 알아두면 될 것 같다.

体力的にやばいね。

今もam04:5ｘ分のに…

整理なければならないので続きます。

つかれた。
思ったより、良く出来なくって悲しかった。子供の時から今まで努力しかなければなれないのに、最近はちょっと力かれてっかもしらね。時間もないし、仕事もたくさんあるし頭が複雑でもう休みたいと思いました。

なんで日本語で日記を書くとかをするのは。正直、私が考えたことを形ける目的もあり日本語の練習もあります。まぁ、韓国人がよく読めない、目的もあります、例えば会社の仲間とか。

とにかく最近寝不足時間不足ですね、未来のあたし大丈夫かな？ほんと？死ぬかもしれませんと考えた最近。

いつかこの永遠な努力が終わった時、私は自由かなぁ……

もう夜明けのに眠れない。

code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048

JS ^ㅁ^ JS 고오오오오오오급 객체지향언어

기본타입 - call by value (원시타입(Primitive Type))

객체타입 - call by reference

숫자형

이친구 java 64비트 부동소수점 double 비슷

문자형

16비트 유니코드 문자셋

불린형

...

언디파인드

값 할당(선언)이 안된 경우, 객체내에 존재 하지 않는 값을 참조할 때.

null

없다. 비어있는걸 나타낼 때.

객체

리터럴 표현법에 의해 객체를 생성

객체란 뭘까

• 일단 숫자, 문자, 불린형은 유사객체
• prototype 집합
• key - value 
• 내장 객체들은 Object 객체(상위 포식자)의 일원