앞으로의 목표 👍
- javascript 능력 및 고난도 알고리즘 풀이 능력
- Nest, Graphql등 최신 기술 스택 활용 능력
- 기초 미니프로젝트 포트폴리오
- 로그인, 결제기반 심화프로젝트 포트폴리오
- 배포를 위한 네트워크 및 CI/CD 배포자동화 능력
- 120% 백엔드 개발 지식
오늘부터 꾸준히 해야할 일 👍
- 영타실력 늘리기
- 단축키 사용 익숙해지기
- 코드리딩 실력 키우기
- 데일리 퀴즈
- 포트폴리오 작성
- 독스에 친숙해지기
- MDN 보는 연습하기
오늘의 수업 👍
📝 변수와 상수
- 웹페이지의 기본은 데이터 관리
- 변수와 상수를 이용 어딘가에 저장하고 출력하여 정제가 가능
- 변수와 상수는 데이터를 담고, 꺼내 쓰는 상자
▷ 변수
- 변수를 선언하는 키워드는 총 세가지 입니다.
- var, let, const
let result;
let이라는 키워드를 이용해 result 라는 변수를 생성▷ 할당
- 변수에 데이터를 담아주는 행위
result = 10+20;
result라는 변수에 10+20 라는 데이터가 담김▷ 변수 + 할당
선언 + 할당
let box = 10+20
선언부 할당부 - 자바스크립트의 등호(=)는 같다의 의미가 아닌 할당의 의미
▷ 변수와 상수의 종류와 특징
- let (변수) => 변수명 중복(재선언) X, 데이터 수정(재할당) O
- const(상수) => 변수명 중복(재선언) X, 데이터 수정(재할당) X
- var (변수) => 변수명 중복(재선언) O, 데이터 수정(재할당) O 사용안함
▷ 변수명
- 변수명은 동사가 아닌 명사
- 알파벳 위주
- 예약어 변수를 선언할때는 예약어를 제외한 변수명을 선언 new, else, do, if, break, case, finally, catch, this …
- 공백을 사용하지 않는 작성방법 camelCase* PascalCase snake_case
📝 데이터 타입의 종류
- String(문자열) - “” , ‘’ 안에 입력된 데이터는 문자열 데이터로 표시
- Number(숫자) - 산술연산자
덧셈 : 1 + 2 뺄셈 : 2 - 1 곱셈 : 2 * 1 나눗셈 : 2 / 1 나머지 : 2 % 1 숫자가 아닌 값으로 연산을 시도했을 경우엔 NaN - String(문자열) + Number(숫자) === String(문자열)
📝 배열(Array)
- 여러개의 데이터를 순서와 함께 저장하고 싶을때 사용하는 저장 창고
let array = [“이것”,“하나하나를”,“요소라고”,“합니다”]- index - 각 요소에 순서를 부여 할 뿐만 아니라 해당 요소에 접근이 가능
-
index는 0번 부터 시작
array[2] = “요소라고”
-
▷ 배열의 property
- 고유한 property, 속성 을 가지고 있음
array.length => 4- length는 1번 부터 시작
▷ 배열의 Method
- 어떠한 기능을 가지고 있는 명령어
- array.push() - 배열의 가장 뒤의 데이터를 추가
- push의 괄호 안에 추가할 데이터 입력
- array.pop() - 배열의 가장 뒤의 데이터를 삭제
- pop의 괄호 안에는 데이터를 넣지 않아도 됨
- array.includes() - 특정 배열에 데이터가 포함되어있는지 확인
- 포함되어 있는지에 따라 boolean값을 반환
- array.indexOf() : 특정 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환
- 찾을 수 없으면 -1을 반환 합니다.
📝 객체(object)
let userData = { name:“홍길동”, age:24, height:180, }- key : value ⇒ name : “홍길동”
▷ 객체 프로퍼티(property)
▶ Dot notation(점 표기법)
- key값에 접근시, 점( . )을 이용해서 접근
userData.name = “홍길동”
▶ Bracket notation(괄호 표기법)
- key값에 접근시, 괄호[ ]를 이용해서 접근
userData[“name”] = “홍길동” - Bracket notation을 사용하실 때 “”를 붙여주지 않으면, 안의 key값이 아닌 변수로 인식됨
▷ 객체(object) Method
▶ Object.keys()
- 객체의 key만을 가져와 배열에 담아주는 메서드
Object.keys(userData) => [ “name”, “age”, “hight” ]
▶ Object.values()
- 객체의 value만을 가져와 배열에 담아주는 메서드
Object.values(userData) => [ “홍길동”, 24, 180 ]
오늘의 마무리 👍
오늘은 자바스크립트에 대해 배웠는데 내가 느끼기엔 HTML, CSS 보다 JS가 어려운 것 같다 그 이유는 HTML,CSS는 코드를 입력하면 바로바로 보이지만 JS는 result값이 나오기는 하지만 익숙하지 않아서 어렵게 다가오는 것 같다. 꾸준히 실습하고 고민해보면 언젠가는 JS가 익숙해지는 날이 올 것이다. 열심히 하자
- 복습
- github 공부
- 블로그 포스팅
- 데일리 퀴즈
- 알고리즘 문제 풀기
항상 겸손한 자세로 배우면서 성장하자, 할 수 있다!! 💪
출처 : 코드캠프
개발자 블로그 / 항상 겸손한 자세로 배우면서 성장하자 할 수 있다!