12일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL

서론

큰일났다

 

개인적인 사정 + 귀차니즘으로 미뤘던 나머지 며칠 치 분량이나 밀리게 되었다. 그나마 다행인 점은 실습으로 넘어가고 있는지라 쓸 것이 그리 많지 않다는 점이다. 그래도 당장 밀린 것은 변치 않으니 향후 서론과 사족은 가능한 한 최소화할 생각이다.

 

참고로 당분간은 실습 내용이 주를 이룬다. 코드를 여기에 작성했다간 화끈하게 삭제 조치가 이뤄질 가능성이 크다. 개발 지식보다는 정석적인 TIL(학습 주제, 주요 메모 사항 소개, 공부하며 어려웠던 내용) 혹은 팁이 대부분 내용을 이룰 예정이다.

 

이번 일자의 프로그래머스 데브코스는 가계부 구현하기 & 자바스크립트 기초이다.

 

 

느낌표 두 개(!!)

true //true
!true //false
!!true //true

false //false
!false //true
!!false //false

Boolean(value)
!!value

논리 연산자 NOT이다. 피연산자의 값을 Boolean으로 변환한다. 더 자세히 말하자면 다른 타입의 데이터를 Boolean 타입으로 명시적 타입 변환한다는 뜻이다. 그리고 위의 예시를 보면 알겠지만, 이 연산자는 항상 Boolean 값을 반환한다. 사실 Boolean(변수명)을 하는 것과 비슷하다고 보면 된다.

 

 

데이터 매핑

innerHTML을 통해 HTML 내에 문자열을 넣을 수 있다. 해당 문자열을 넣는 것을 통해 HTML을 자바스크립트 내에서 마음대로 제어할 수 있다. 당연하지만, 특정 부분만 동적으로 제어할 수도 있다. 매핑할 부분 끝에 .join("")으로 문자열로 바꾸는 것도 잊지 말자.

 

참고로 여기서 매핑이라는 말은 '해당 값이 다른 값을 가리키도록 하는 것' 정도로 요약할 수 있다. 그리고 자바스크립트에서는 매핑된 결과를 새로운 배열로 반환하는(배열을 처리해서 새로운 배열로 반환) 함수로 map()이 존재한다.

숫자 현지화

.toLocaleString()를 이용하면 각종 수치를 현지화할 수 있다.

• date 값
  사용자의 문화권에 맞는 시간표기법으로 시간을 반환
• number 값
  3자리 숫자마다 콤마 (예시: 100,000)
• array 값
  배열의 요소를 나타내는 문자열을 반환

한국의 경우에는 ko-kr를 사용한다.

return num.toLocaleString('ko-KR'); 처럼 말이다.

 

 

정렬

let arr = [4, 78, 9, 31, 23, 56];

// 문자열 유니코드 코드포인트 값 순서 (맨 앞자리의 영향이 큼)
console.log(arr.sort()); // [23, 31, 4, 56, 78, 9]

// 오름차순
console.log(arr.sort((a, b) => a - b)); // [4, 9, 23, 31, 56, 78]
console.log(arr.sort((a, b) => { return a - b; })); // [4, 9, 23, 31, 56, 78]

// 내림차순
console.log(arr.sort((a, b) => b - a)); // [78, 56, 31, 23, 9, 4]
console.log(arr.sort((a, b) => { return b - a; })); // [78, 56, 31, 23, 9, 4]

간단한 정렬을 통해 오름차순 및 내림차순을 구현할 수 있다. 다만, sort만 사용시 유니코드 코드포인트 값 순서를 기준으로 정렬하기에 주의해야 한다. 이러한 정렬은 화살표 함수를 통해 간단하게 구현할 수 있다.

 

 

User Story

유저의 목표 달성을 위한 인터렉션을 하나의 문장으로 정리한 것.

한 줄로 요약하자면, '사용자'는 '무언가'를 위해 '무언가'를 할 수 있다고 할 수 있다.

 

이러한 User Story는 main 컨셉에서 디테일하게 세분화할 경우 개발이 조금 더 수월해질 수 있다.

 

 

User Flow

User story를 기준으로 구현 시나리오를 정의한 것이다.

• 원칙
  • 유저의 행동을 시작으로 시나리오가 시작
  • 유저의 행동에 따른 피드백을 제공해야 함

시나리오 성공 케이스를 먼저 작성해야 하며, 이후에 시나리오 실패 케이스를 나열하면 다양한 상황을 누락없이 정리할 수 있다. 참고로 실패 케이스는 엣지 케이스라고도 한다. 이러한 실패 케이스는 시나리오의 조건들을 나열하고 조건 별로 실패 가능한 케이스들을 정리하면 된다.

 

이후에는 다이어그램 시각화를 통해 보다 더 직관적인 구현 시나리오를 진행하도록 하자.

 

 

의사코드

의사코드(Pseudocode)는 일반적인 언어로 코드를 흉내내어 알고리즘으로 써놓은 코드이다.

흉내만 낸 코드로 모델링하는데 주로 쓰인다.

 

 

사족

신기방기

CRUD의 진짜 기초를 배웠다. 그런데 여전히 이해가 안 되는 부분...이라기보다는 내가 앞으로 이걸 구현할 수 있을까 하는 내용들이 많다. 아무래도 이런 건 여러 번 해봐야 내 능력으로 습득이 되지 않을까 싶다.

 

참고로 이번 내용 중 가장 어려웠던 것은 다름이 아니고 예상치 못한 오류 수정이었다. 살다살다 IDE 문제로 인한 오류가 발생할 줄은 상상도 못했다... 다들 확장자를 잘 기입해놓도록 하자.