앞으로의 목표 👍
- javascript 능력 및 고난도 알고리즘 풀이 능력
- Nest, Graphql등 최신 기술 스택 활용 능력
- 기초 미니프로젝트 포트폴리오
- 로그인, 결제기반 심화프로젝트 포트폴리오
- 배포를 위한 네트워크 및 CI/CD 배포자동화 능력
- 120% 백엔드 개발 지식
오늘부터 꾸준히 해야할 일 👍
- 영타실력 늘리기
- 단축키 사용 익숙해지기
- 코드리딩 실력 키우기
- 데일리 퀴즈
- 포트폴리오 작성
- 독스에 친숙해지기
- MDN 보는 연습하기
오늘의 수업 👍
📝 선언과 할당
- 선언
- 변수의 이름을 알려주는 행위
- ex) let name
- 할당
- 변수에 데이터를 담아주는 행위
- ex) name = “철수”
- 선언 + 할당
- ex) let name = “철수”
- 선언부 = 할당부
📝 변수와 상수
| var(변수) | let(변수) | const(상수) | |
|---|---|---|---|
| 이름 중복(재선언) | O | X | X |
| 데이터 수정(재할당) | O | O | X |
- 변수, 상수 - 데이터를 담는 공간
- 변수 - 변할 수 있음
- 상수 - 변할 수 없음
- 작명 규칙
- camelCase - JS에서 주로 사용
- snake_case -Python에서 주로 사용
📝 JS와 HTML 연결
<head>
<script src="경로"/>
</head>📝 JS 실습공간 - 개발자 도구 열기
-
불러오는 법 = F12 혹은 오른쪽 클릭 후 검사
-
요소(Elements) - HTML을분석하고 수정
-
콘솔(Console) - 자바스크립트를시험, 로그/오류메세지 확인
-
소스(Resources) - 사용된리소스를 열람
-
네트워크(Network) - 서버와의 통신 내역
-
성능(Audits) - 성능을 향상시킬 방법을 컨설팅
📝 배열(Array)
- 여러개의 데이터를 한번에 담을 수 있음
- 대괄호안에 데이터를 쉼표로 구분 ex)
let students = [“길동”,”철수”,”영희”,”준석”]
▷ 배열의 특징
- index는 0부터 시작
- length는 1부터 시작
let students = [“길동”,”철수”,”영희”,”준석”]index = 0 1 2 3 ... length = 1 2 3 4 ...
▷ 배열의 다양한 기능
- 배열의 다양한 기능 const array = [“배열”]
- 초급
- 배열의 길이 구하기 – array.length
- 배열의 값 꺼내기 – array[숫자(인덱스)]
- 배열 맨 뒤에 값 추가 – array.push()
- 배열 맨 마지막 값 삭제 – array.pop()
- 배열 요소 정렬 – array.sort()
- 배열 데이터 확인 – array.incoudes(값)
- 중급
- 배열 2개 연결 – array.concat(array2)
- 배열을 문자로 만들기 – array.join()
- 배열 분리 – array.slice()
- 배열에서 원하는 요소 뽑기 – array.filter()
- 배열의 모든 요소 변경 – array.map()
- 초급
▷ 배열 예시
- 연습 01
let classmates = ["철수'","영희","훈이"] // undefined classmates // (3) ["철수'", '영희', '훈이'] classmates[0] // "철수'" classmates[1] // '영희' classmates[3] // undefined classmates[2] // '훈이' classmates.includes("훈이") // true classmates.includes("맹구") // false classmates.length // 3 classmates.push("맹구") // 4 classmates.includes("맹구") // true classmates.pop("맹구") // '맹구' classmates.length // 3 - 연습 02
let developer = ["의지","끈기","노력","공부","겸손"] // undefined developer // (5) ['의지', '끈기', '노력', '공부', '겸손'] developer[1] // '끈기' let dream = ["커리어점프","성공","할수있다"] // undefined dream // (3) ['커리어점프', '성공', '할수있다'] developer.concat(dream) // (8) ['의지', '끈기', '노력', '공부', '겸손', '커리어점프', '성공', '할수있다'] let result = developer.concat(dream) // undefined result // (8) ['의지', '끈기', '노력', '공부', '겸손', '커리어점프', '성공', '할수있다']
📝 문자열
- 문자열(배열)
const classmates = "철수" classmates[0] // "철" classmates[1] // "수" - 문자열 쪼개기
const classmates2 = "철수&영희" classmates2.split("&") // ["철수", "영희"]
▷ 문자열 예시
- ****표시하기
- 연습 03
let email = "codecamp@gmail.com" email.includes("@") email.split("@") // 결과 ["codecamp" , "gmail.com"] let userMail = email.slit("@")[0] // "codecamp" let company = email.slit("@")[1] // "gmail.com" // userMail을 한글자씩 넣어주기 위한 빈배열 let maskingMail = [] maskingMail.push(userMail[0]) maskingMail.push(userMail[1]) maskingMail.push(userMail[2]) maskingMail.push(userMail[3]) maskingMail.push(*) maskingMail.push(*) maskingMail.push(*) maskingMail.push(*) // maskingMail = ["c","o","d","e","*","*","*","*"] let emailMasking = maskingMain.join("")+"@"+company
📝 객체
- 각각의 데이터를 키와 값으로 연결
- 성격이 다른 데이터의 모음은 객체에 저장
- 중괄호안에 키와 값을 쉼표로 구분
▷ 객체의 특징
- 객체 선언하기
const classmate = { name: "철수", age: 8, school: "코끼리초등학교" } - 객체의 값 꺼내기
classmate.name // 철수 - 객체의 키와 값 삭제하기
delete classmate.name classmate = { age:8, school: "강아지초등학교" }
📝 객체와 배열 같이쓰기
- 실무에서 많이 사용하는 방법
- 객체 선언
const classmates = [
{ name: "철수", age: 8, school: "코끼리초등학교" },
{ name: "영희", age: 8, school: "토끼초등학교" },
{ name: "훈이", age: 7, school: "다람쥐초등학교" }
]- 배열안의 객체 꺼내기
classmates[0].name // 철수
classmates[1].age // 8
classmates[2].school // 다람쥐초등학교▷ 객체와 배열 같이쓰기 예시
- 연습 04
let friend = { name: "철수", age: "13", camp: "코드캠프" } // undefined friend // {name: '철수', age: '13', camp: '코드캠프'} friend.name // '철수' friend.age // '13' friend.camp // '코드캠프' friend.gender // undefined - 연습 05
let classmates = [ { name : "철수", age : 13, school: "다람쥐초" }, { name : "영희", age : 11, school: "청설모초" }, { name : "훈이", age : 9, school: "사랑초"} ] // undefined classmates // (3) [{…}, {…}, {…}] classmates.length // 3 classmates[0].school // '다람쥐초' classmates[2].name // '훈이'
오늘의 마무리 👍
- github 공부
- 공부하면서 메모장에 마크다운 문법 사용해서 정리
- 복습
- 블로그 포스팅
- 데일리 퀴즈
- 알고리즘 문제 풀기
항상 겸손한 자세로 배우면서 성장하자, 할 수 있다!! 💪
출처 : 코드캠프
개발자 블로그 / 항상 겸손한 자세로 배우면서 성장하자 할 수 있다!