자바 스크립트 기초 1일차 221018

개발자님과 저녁에 스터디를 하기로 했다. 11월까지. 

1단계가 25일은 걸리니까 적어도 한달은 잡고 있을텐데? 11월부터는 시간이 달라질 것 같다. 주말이 되지 않을까... 

 

[스터디를 하는 이유] 

나: 개발 지식이 전무해서 개발자들과 소통이 힘듬. 

that girl: 커리어를 위해 저걸 배울 필요가 있음. 

내 목적에 대해서 좀더 얘기하자면, 올해 3달 간 아무것도 모르는 상태에서 사이드 프로젝트를 시작했었는데 
진짜 어후 나 기본적인 지식이 없으니 뭐가 개발이 가능한지, 대체 수단은 뭔지, 저들이 무슨 말 하는지 아예 못 알아듣겠더라. 파이썬 기초 조금 들어보고 실습 찔끔 해본 게 다여서 그냥 백지 상태에 가깝다. 

 

개인적인 사유 또 하나 말하면 개발자 친구들이 많아서 그들을 이해하고 싶었다. 보이니 얘들아 내 사랑이? 

내가 이렇게 사람을 사랑한다. 

 

 

[학습 내용과 목표]

목표는 이렇다. 

베스트: 잘~ 익혀서 html랑 css만 배우면 프론트할 수 있는 수준 되기 ㅋㅋ (프론트 능력) 

최소 성공: 전보다 개발 영역이 더 그려지고 파악이 됨. 다음에 한번더 개발 지식을 접할 때 아 알지알지라는 말이 절로 나옴.  (개발 영역 이해도 상승) 

 

https://youtube.com/playlist?list=PLZKTXPmaJk8JDicsOyY2cTcwXmBa-ZceI 

왕 초보 자바스크립트

오늘은 그 girl가 추천해준 여기 재생목록 7탄까지 봤다! 

 

파이썬이랑 비슷한 게 많아서 이해는 잘된다. 다음에 기록해둔 거랑 비교해봐야겠다. 

기초라고 무시하지 말고 그 틀? 체계? 깊게 이해할 수 있도록 복습해야지. 

 

 

다음에 개발 용어 강의도 봐야겠다... 

 

 

[오늘치 학습 내용] 

자세한 메모는 런핏 비공개 학습노트에 따로 해뒀으니까 

간단히 정리해야겠다. 간단한진 모르겠음 

 

 

자바스크립트란? 레이아웃, 스타일 외 모든 것을 하게 하는 언어. 

https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript 

JavaScript가 뭔가요? - Web 개발 학습하기 | MDN

콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가할 수 있습니다. 

 

 

#1. 변수 

뭐뭐는 뭐뭐다 값을 할당해서 정보를 저장하는 것. 

이미 있는 예약어(class, let 등)는 오류 나서 못 씀. 

 

변수 값을 변경하면 오류가 나니까, 협업할 때는 특정 변수명이 있는지 확인해야 한다.

최초 선언하는 값을 넣을 때 let이나 const을 넣는다. 

 

변하지 않는 값은 const: 수정이 불가능해서 생일, 파이값 등 고정적인 변수에 사용. 

변하는 값은 let: 

let name = " ㅇㅇ" 이러고

다음에 let name = " ㄹㄹ" 하면 에러 뜸.

근데? 값 바꾸고 싶으면 걍 let 안붙이면 됨.

 

console.log(ㅇㅇ) = 출력 함수 (파이썬의print) 

 

 

 

#2. 자료형 
문자형: " " / ' ' / ` ` 3가지로 감싸준다. 여기 있는 기호를 문자로 써야할때는 \를 앞에 붙이거나 다른 따옴표를 쓴다. 

숫자형: + ,  - , *(곱) , %(나머지) , /(나누기)

Boolean: 논리연산자. true, false 

typeof: 객체의 자료타입을 알 수 있는 것. 협업할 때, 딥한 데이터 처리에 씀. 

그 외 객체형, 심볼형

 

문자열에 변수 넣을 땐 ${변수명}

 

NaN: Not a number. 숫자가 아니라는 뜻

null: 존재안하는 값. 존재하지 않는다고 할당할 수 있음. 

undefined: 할당되지 않은 값 

 

 

#3. 형 변환 

문자형 String( ) ->문자열로 전환

숫자형 Number( ) -> false는 0 true는 1

논리형 Boolean( ) -> 숫자 0 , ""(공백조차 없음), [undefined, Not a number, null] = false

 

자료형 다른데 + 하면 오류난다.

문자 + 값이 숫자인 변수 + 문자 하면 숫자형이 문자형으로 변환되긴 한다. (예: "문자" + 변수명 -> 문자26) 

 

프롬포트로 입력 받은 값은 무조건 문자형이기 때문에 형변환을 쓴다. 

단, 나누기는 숫자로 자동 형변환 됨. 

 

 

 

#4. 대화상자 

 

https://wook-2124.tistory.com/m/515?category=977924 

IT 실무용어 파헤치기 18 - 팝업창(Popup) vs 모달창(Modal)

https://brunch.co.kr/@bcc5736f7b26444/1 

02. 팝업과 모달, 페이지 이동의 구분

이거 모달이냐 팝업이냐?? 

 

alert: 경고, 내용 고지. 확인 버튼만 있다. 예) 이름은 필수값입니다! , 오류났습니다! 

prompt: 사용자한테 값을 받는 것. 취소를 누르면 null이 뜬다. 숫자형으로 변환해두면 0으로 처리된다. 

인수는 "입력 메세지", "디폴트값" 순서

confirm: 사용자한테 확인을 요구하는 것. 취소는 false, 확인은 true. 

 

[예] 

const 변수명 = 프롬프트("머적으라")

알렛("문자" + 프롬포트 지정한 변수로 입력 받은 값 + "문자")
알렛('문자 ${프롬포트 지정한 변수로 입력 받은 값} 문자')

 

이럼 이제 그거야 

뭐 적으라고 안내된 입력창에 값을 넣으면 문자+값+문자 합쳐져서 얼럿 뜬다. 

 

 

 

#5. 연산자

연산자 줄여 쓰기 : -=  *=   /=

** 거듭제곱

 

증가 연산자, 감소 연산자: 1씩 와리가리. 

숫자로 지정된 변수명 앞에 ++나 -- 넣고 다른 변수 만들어서 출력하면 값을 볼 수 있다. 

 

 

 

#6.비교 연산자, 조건문 (if, else)

비교 연산자: <= / >= / == / !=(다르다) 

= : 할당 

== : 동등 연산자. "1"과 1도 같다고 쳐서 오류 날 수 있음. 

=== : 일치 연산자. 타입까지 비교해준다. 

false, true 판별

 

if문 예시: 군대 갔다온 남자라면 예비군 아저씨라고 출력하고 복역 중이라면 군인 아저씨, 그게 아니라면 어린 친구라고 출력하라. 

if (조건) {

내용

} else if (조건) {

내용

} else {

내용

}

 

 

#7. 논리 연산자

AND &&: 조건이 다 맞아야 true라서 초반에 false 뜨면 평가 멈춤. 

OR ||:조건이 하나라도 맞으면 true라서 초반에 true 뜨면 평가 멈춤. 

NOT !: 트루 펄쓰 바꿔줌. 

 

조건이 많을 때는 앞부분에 폴스나 트루 많이 뜨는 걸 넣어야 성능 최적화 된다 ㅇㅇ . 

 

활용: if (조건 || 조건) {

 

and랑 or 같이 쓰고 막 그래서 조건이 많고 복잡할 땐 괄호를 잘 쳐야 돼. 사칙연산과 같다. 

내용 && ( 내용 || 내용 ) 이케

 

 

 

https://school.programmers.co.kr/learn/challenges/beginner?page=1&languages=javascript 

코딩테스트 입문 | 프로그래머스 스쿨

오늘치 했는데 

1일차는 너무 쉬워서 황당했다. 나 왜 쫄았냐? 

갑자기 얼마나 어려워지려고 1일차를 이렇게 쉽게 만들었냐? 

모레부터 겁먹어야겠다. 

 

 

내일은 못함 모레부터 다시 씀!