241210 TIL - Promise.all, 터미널기본명령어, UTF, 트러블슈팅

Promise 기본구조 복습 (베이직반 염탐)

const openBox = new Promise((resolve, reject) => {
  setTimeout(() => {
		const success = Math.random() > 0.5;
		if (success) {
			resolve("성공");
		} else {
			reject("실패");
		}
  }, 2000); // 2초 후에 결과 공개
});

// 보물 상자 열기 실행
openBox
  .then((message) => {
    console.log(message); // "성공"
  })
  .catch((error) => {
    console.log(error); // "실패" 
  });

상자를 2초 뒤에 여는데, 50% 확률로 성공하거나 실패함. 

openBox 함수는 성공하면 resolve() 내부를 반환하고, 실패하면 reject() 내부를 반환함

그리고 then은 성공할 경우 실행되고, then의 콜백함수의 매개변수로 resolve() 내부를 넘겨줌

(매개변수의 이름은 중요하지 않음!!! 메세지든 마사지든 소시지든 중요하지 않음!! ) 

반면 catch는 실패할 경우 실행되고, catch의 콜백함수의 매개변수로 reject() 내부를 넘겨줌

(마찬가지로 error든 err든 e만 쓰든 상관없음!!)

염탐 성능 확실하구만!! 역시 시간만 허락한다면 베이직반도 듣고싶다...

 

Promise.all 쉽게 이해해보기

1. 친구 세 명이 서로 다른 피자를 주문한다!!

    = 서로 다른 세 개의 Promise가 있다!!

2. 피자가 전부 오지 않으면 아무도 식사를 시작할 수 없다!!

    = 모든 Promise가 종료되지 않으면 all은 완료되지 않음!!

3. 모든 피자가 도착하기 전이거나, 한 명이라도 피자 배달에 실패하면 식사 불가능!! 

    = 모든 Promise가 성공(fulfilled)해야만 결과를 반환하고, 하나라도 실패(rejected)하면 all 모두가 실패함!!

 

터미널 기본 명령어

1. pwd

Print Working Directory, 지금 작업중인 디렉토리를 나에게도 보여다오!! 현재 위치한 디렉토리 경로 보여줌

Path 하고 알려준다!

 

2. cd

Change Directory, 말 그대로 디렉토리 변경

cd 디렉토리명으로 원하는 하위 디렉토리에 갈 수 있고

cd ..으로 바로 상위 디렉토리로

cd ~로 최상위 디렉토리로 이동

cd로 폴더 왔다갔다~

 

3. ls

LiSt, 그냥 ls하면 현재 디렉토리 파일 및 폴더 리스트 보여주고

ls .. 하면 상위 디렉토리의 리스트 보여줌

내용물을 다 보여준다!!

 

4. mkdir

MaKe DIRectory, 현재 위치에 새 디렉토리 생성 이어서 쭉쭉 생성할 수도 있음

test폴더 안에 test폴더 안에 test폴더!!

 

5. rm

ReMove, 파일 삭제 ← 알아만 두고 쓰진 말자

6. rmdir

ReMove DIRectory, 디렉토리 삭제 ← 알아만 두고 쓰진 말자 

 

UTF 

Unicode Transformation Format

유니코드 문자를 데이터로 인코딩하는 방법을 말함

뒤에 붙는 숫자는 데이터의 크기를 뜻함. UTF-8은 8바이트 값으로 바꾸고, UTF-16은 16바이트 값으로 바꾼다는 뜻

 

charCodeAt(index)

문자열 메서드, 매개변수로 입력된 인덱스 위치를 UTF-16 코드 단위를 표현하는 0과 65535 사이의 정수로 반환함

• index가 입력되지 않으면 0번째 문자 변환 값 반환
• 만약 index가 문자열 길이를 벗어나는 값이면 NaN반환

/* 기본구조 */
"STRING".charCodeAt(index)

 

String.fromCharCode()

UTF-16 코드 데이터를 문자열로 변환해 반환, 쉼표로 여러 개 한꺼번에 반환 가능함

/* 기본구조 */
String.fromCharCode(num1[, ...[, numN]])
/* 예시 */
String.fromCharCode(65, 66, 67); // "ABC"

 

오늘의 소소한 트러블슈팅

1. 공백 문자열은 truthy한 값이다!!

공백이 왜 달러로 변하는 겨!!

알고리즘 문제를 풀던 중 만났던 소소한 문제! 오늘도 이론상 완벽하다 자만하던 중 역시 빨간 글씨를 만나게 됐고,

보아하니 공백 부분이 문제인 게 분명했다!!! 근데 나름 공백을 거르겠답시고 사진의 조건문을 준비했었는디,

의도대로 걸리지 않는단 건 공백이 falsy하지 않다는 거겠지!! 바로 console.log(" ")를 찍었고, 예상대로 true 등장...

바로 수정해주었다!!

성공!!!

 

2. 디버깅 연습

새로운 강의를 받고 진도를 슉슉 나가며 (사실 코드 따라치기 바빴음...) 무튼 실습을 마치고 테스트를 이것저것 해보는데,

접속 후 첫 플레이에서 스테이지가 바뀔 때 "fail" 메세지가 뜨는 문제를 발견했다!! 게임오버 후 다음 회차부턴 그런 문제가 없었기 때문에, 변수 초기화가 잘 안 되나? 생각이 들어 함수를 따라따라 출처를 찾아가기 시작했다!

다음 회차부턴 success!!

우선 Current stage mismatch를 뱉는 위치로 이동해보았다!!

바로 여기인디!!

이 메세지를 만난다는 건 저 조건이 달성됐단 소리니, 두 녀석을 뜯어보기로 했다!!

오늘도 찍는다 콘솔 로그!!

문제 발견!!!!!!!!!!!! 현재 currentStage에 들어가는 값은 숫자인디, 조건문에선 currentStage.id라는 존재하지 않는 프로퍼티에 접근하고 있으니, 당연히 페이로드에 있는 현재 스테이지와 값이 다를 것이고, 항상 발동이 되었겠지!!!

하지만 이대로면 매 회차 발생해야 하는데, 그러지 않았던 이유는, 강의 실습 파일에선 스테이지를 한 번 바뀌는 정도까지만 구현했기 때문이다. 미리 발견해서!! 운이 좋았단 겨!!!

잘 수정해주었다!

애초에 변수명도 잘 못 봤더라고!! 강의 내용대로 잘 바꿔주었고, 변수 자체 비교될 수 있도록 id도 빼주었다!!

해결 완료!!

사실 이건 코드 문제라기 보단 내 개인의 부주의로 인한 오류였지만, 기록하는 이유는!!

기존이었다면 원인도 찾지 못한 채 어버버하고 있었을 텐데, 프로젝트 경험들을 통해 디버깅 연습을 좀 한 덕인지

문제 해결을 스스로 할 수 있었던 게 뿌듯해서 적어봤다!! 낼도 열심히 공부하자!!