TIL_javascript 22년 11월10일

Suding·2022년 11월 10일

항해99 10기 (TIL, WIL)

목록 보기

4/10

4일차 스터디 목표

어제 배운내용 복습하기
챕터 4완강, 확인 문제 풀기, 오답 정리 하기
책에 나온 손코드 따라하기 배운 내용으로 내가 직접 코딩 짜보기
셀프 평가, 잘한점, 개선할점, 내일 시도할 것 기록하기

회고

셀프 평가:
- 오늘 학습은 책으로 새로운 개념을 훑고 유트브 강의를 다시 봤더니 학습진도가 훨신 빨랐다.
잘한 점
- 입과 시험에서 짠 코드리뷰를 하자고 제안했다.
  - 팀원들이 전부 다른 코드를 썼는데 전반적으로 클라이언에서 가격 계산을 시키는것과 서버에서 계산한 값을 저장해서 클라이언트로 값을 보내주는 방법으로 나뉘었다.
  - 나는 클라이언트에 기능을 구현을 했는데 서버에 구현한 팀원의 코드를 보고 아 서버에서 계산해서 DB에 가격 데이터를 넣어줄수 있고 나중에 데이터 활용에 더 유용하고 안전한 코드구나 하고 깨닳았고 후자가 더 좋은 코드 같다고 피드백을 했다.
- 튜터님께도 코드리뷰 제안을 했고 개발자의 마인드로 벌써부터 임한다고 칭찬을 받았다. 실전 프로젝트를 진행하는 8~13주차 때에 가도 어디서부터 어디까지가 프론트, 백의 영역인지 구분하기 어려울텐데 0주차에서 부터 고민을 하는 3조에 감탄하셨다.
- 3조가 협업을 적극적으로 하고 있다는 피드백을 받았다.
개선할 점
- 오류가 생기면 오타부터 확인하자 !
내일 시도 해볼 것
- 챕터 3,4 문제 해답안보고 풀어보기

새로배운 개념, 기능

배열 splice() 메소드 사용 예시
- 배열의 특정 요소를 제거 하는 경우
  - array.splice(index, number of deleting element )
```
const alphabet = ['a','b','c','d']
alphabet.splice(2,1) 
> 
['c']
>alphabet
(3) ['a','b','d']
```
- 값으로 요소 제거하는 경우
  - indexof(element) 메소드 사용
  - index를 const index = array.indexof(element) 로 지정해 주고
  - index의 번호를 array.splice(index, number of deleting element) 에 넣어서 돌리면 된다
```
const alphabet = ['a','b','c','d']
const index = alphabet.indexof('c')
>index 
2 
alphabet.splice(index,1)
>
'c'
>alaphbet
['a','b','d']
> alphabet.indexof('c')
-1 // 배열에 없는 값을 호출하면 -1을 리턴한다 
```
- 배열에 내부에서 특정 값을 가진 모든 요소를 제거 할때
  - filter () 메소드 사용
  - 필터에 맞지 않는 조건을 출력한다
```
const fruits = ['apple', 'pear', 'banana'] 
fruits.filter((fruit)=> fruit !== 'pear')
> (2) ['apple','banana']
```
- 배열의 요소 중간에 특정 요소를 넣을 경우
  - array.splice(index,0,element)
  - splice 메소드의 2번째 매개변수에 0을 입력하면 아무것도 제거하지 않고 3번째 매게면수에 추가하고 싶은 요소를 입력하게 된다 (fruits 배열의 2번째 인덱스 사이에 ‘kiwi’를 추가하라)
```
const fruits = ['apple', 'pear', 'banana'] 
fruits.splice(2,0,'kiwi')
> (4) ['apple', 'pear', 'kiwi', 'banana']
```
- 영문 이름 짚고 넘어가기:
  - 배열 = array 한글= [ ㄱ,ㄴ,ㄷ]
  - 요소 = element ‘ㄱ’, ‘ㄴ’, ‘ㄷ’
  - 요소의 순서= index [ 0번째, 1번째, 2번째]
메소드의 파괴적 처리 vs 비파괴적 처리 이해하기
- 파괴적 처리 : 처리 후 원본 내용이 변경 됨
  - ex) array.push() 처리 후 array 안에 새로운 요소가 추가 됨
- 비파괴적 처리: 처리 후 원본이 변경되지 않음
  - ex) const a = ‘안녕’, const b= ‘하세요’ const c = a +b // ‘안녕하세요’ 출력 a 와 b의 값은 변경되지 않음

for in, for of, for 반복문 차이첨 이해하기

for in : 반복변수에 요소의 인덱스가 들어 간다 (for in= 인덱스 )

const orders = ['skirt','tshirt','pants','sweater']
for (const i in orders) {
	console.log(`${i}번째 주문은 ${orders[i]}입니다`)}
> 
0번째 주문은 skirt입니다
1번째 주문은 tshirt입니다
2번째 주문은 pants입니다
3번째 주문은 sweater입니다
// 요소의 인덱스 값을 과 요소를 알려준다

for of: 반복변수에 요소가 들어간다 (for of= 요소)

const orders = ['skirt','tshirt','pants','sweater']
for (const order of orders) {
	console.log(`주문된 아이템은 ${order}입니다`)}
>
주문된 아이템은 skirt입니다
주문된 아이템은 tshirt입니다
주문된 아이템은 pants입니다
주문된 아이템은 sweater입니다
//배열에 있는 요소를 알려준다

for: 특정 횟수 만큼 반복한다

for (let i=0; i< 반복회수 ; i++){ 문장}

const orders = ['skirt','tshirt','pants','sweater']
for (let i = 0; i < 2 ; i++){
	console.log(`주문 번호는 ${i} 입니다`)}
>
주문 번호는 0 입니다
주문 번호는 1 입니다
// 0부터 시작해서 2 미만이면 반복한다, 1번째 인덱스값 까지만 출력한다 

//1부터 N까지 더하기 (100번째 까지)
let output =0 
for (let i=0; i <= 100; i++) {
	output += i } // i가 1부터 시작해야 하니가 += 를 사용해서 i의 값을 1로 만들어 준다
console.log(`1~100까지 더하면 ${output}입니다`)

//배열 사용하기 
const orders = ['skirt','tshirt','pants','sweater']
for (let i=0; i<orders.length; i++){
	console.log(`${i}번째 주문은 ${orders[i]} 입니다`)
}
>
0번째 주문은 skirt입니다
1번째 주문은 tshirt입니다
2번째 주문은 pants입니다
3번째 주문은 sweater입니다

//배열을 반대로 출력하기 
const orders = ['skirt','tshirt','pants','sweater']
for (let i=orders.length -1; i>=0; i--){
	console.log(`${i}번째 주문은 ${orders[i]} 입니다`)
}
>
3번째 주문은 sweater 입니다
2번째 주문은 pants 입니다
1번째 주문은 tshirt 입니다
0번째 주문은 skirt 입니다

while 반복문과 break , continue

while 반복문은 조건에 큰 비중이 있을 때 사용한다
- 특정 시간까지
- 결과가 나올 때 까지
- 파일을 읽으며 특정 단어를 찾을 때 까지

break 키워드 사용 예시

while 반복문은 불표현식이 true 면 무한 반복이 될 수 있기 때문에 break를 사용해서 무한반복을 벗어나야 한다

for (let i=0; true; i++){
	alert(i + '번째 반복입니다')
const isContinue= confirm('계속 하시겠습니까?')
if (!isContinue){
	break
	}
}
alert ('프로그램 종료') 

//confirm() 을 사용해서 "확인" 를 누르면 true, "취소" 누르면 false 리턴하기
// break 키워드로 false 면 반복문에서 빠져나오고 프로그램 종료 알럿을 보낸다

continue 사용 예시

반복문 안의 반복작업을 멈추고 반복문의 처음으로 돌아가게 한다

//1~10까지 짝수의 합을 구할때 
//변수 선언
let output=0
//반복문
for (let i=0; i<=10; i++){
	//조건문
    if (i%2 ===1){
	//홀수면 반복을 중지하고 다음 반복을 수행
        continue}
    output += i 
}
// 출력
alert(output)
>30

VS Code 기능 문제점: 파이참을 사용하다 VS Code를 사용하려니 여러 시행착오가 발생했다
1. node 패키지를 다운 받아서 토이프로젝트 때도 썼는데, 왜 갑자기 js 파일이 node 로 명령했을 때 실행되지 않는 걸까?
```
```jsx
  node:internal/modules/cjs/loader:959
  throw err;
  ^
  
  Error: Cannot find module '/Users/subinbaek/sparta/hello.js'
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:956:15)
      at Function.Module._load (node:internal/modules/cjs/loader:804:27)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
      at node:internal/main/run_main_module:17:47 {
    code: 'MODULE_NOT_FOUND',
    requireStack: []
```
```
  구글링을 하다보니 path 설정에 문제가 있었다. 내가 열려는 hello.js 파일이 담긴 폴더를 먼저 vscode에서 열고 그담에 파일을 열어야 했다.
```
[Running] node "/Users/subinbaek/Desktop/bookprac/prac.js"
```
2. html 파일을 크롬에서 실행하려는데 에러코드가 났다. 왜 또… 이런 시련이;; 구글링해서 vs code 에 파일 실행을 위한 패키지들을 설치하고 세팅에서 chrome 으로 html을 열수 있도록 설정했다
  
  레퍼런스
튜터 질문

챕터3 switch 조건문 사용하기 손코딩

input을 입력하지 않아도 default break 되지 않고 case 0가 실행되는 이유는?
숫자가 아닌 input이 들어가면 default 가 진행되지만 alert는 뜨지 않는다
이걸 보완하려면 어떻게 코딩을 수정하면 좋을까?

<script>

const input = Number(prompt('enter a number',''))

switch (input %2 ) {
    case 0: 
        alert ('even number')
        break
    case 1: 
        alert('odd number')
        break
    defualt:
        alert('not a number')
        break
}

//빈값을 입력하면 '' 빈 문자열이 입력된다, 빈문자열은 숫자변환 하면 0, 0%2 =0 그래서 짝수입니다가 출력됨 
// 문자를 넣어도 default 알럿이 안뜬 이유는 default 에 오타가 있어서!
// input 값이 없을때 입력하세요 라른 알럿을 띄우려면 
const input = prompt('enter a number','') // 인풋값이 숫자가 아닐때를 검증하기 때문에 Number를 지워준다
if (input ==='') {
	alert('enter a number')
} else{
switch (Number(input) %2 ) {. // Number () 안에 input을 넣어서 input값은 숫자라고 알려준다
    case 0: 
        alert ('even number')
        break
    case 1: 
        alert('odd number')
        break
    defualt:
        alert('not a number')
        break
}
}
</script>

Suding

웹개발자가 되고 싶은 수딩의 코딩 일지

이전 포스트

TIL_javascript 22년 11월9일

다음 포스트

TIL_javascript 22년 11월10일

항해99 10기 (TIL, WIL)

4일차 스터디 목표

회고

새로배운 개념, 기능

튜터 질문

TIL_javascript 22년 11월9일

TIL_javascript 22년 11월11일

0개의 댓글