[프리온보딩] 220523 그룹과제 #3

그룹과제 #3

공식적인 내생각

프론트엔드 공부하면서 어려운건 마크업이나 자바스크립트 뭐 이런것보다 API나 JSON 데이터와의 싸움이 아닐까.. 하하하

일단 레이아웃이랑 디자인, 광고 데이터 출력까진 끝났고 드랍다운만 만지면 될 것 같다

드랍다운 좀 귀찮네

작업 내용

숫자 3자리마다 쉼표 찍어주기

n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')

데이터의 값은 일반 number 형식인데 이걸 세자리마다 콤마도 찍고 자리수마다 ~천 ~만도 출력해야 했다

천의자리랑 만의자리에 천, 만 문자열 넣어주는 건 C언어 예외 잡듯이 숫자를 그냥 나눠서 조건문 분기 처리로 진행했다

3자리마다 쉼표 찍는 건 굳이 split 하고 join할 필요 없이 정규식을 사용했다

• \B: \b의 반대 경우를 모두 찾는다
  • \b는 단어의 양 끝을 의미하므로, \B는 단어의 양 끝이 아닌 글자를 선택한다
  • 숫자의 양 끝에 쉼표가 들어가면 안 되므로 일차적으로 위치를 걸러준 것
• 조건A(?=(조건B)): 조건A 중 뒤따라오는 글자가 조건B를 만족하는 경우를 모두 찾되, 조건A의 범위만 포함한다
  • a(?=b)는 a 중에서 오른쪽에 b가 따라오는 경우를 모두 찾지만, b를 포함하진 않는다
  • 만약 문자열이 dabac 라면, 두 번째 글자 a에 매칭된다
• \d: 숫자만 찾는다 (0 ~ 9)
• {3}: 앞의 조건에 해당하는 케이스를 3개 찾는다
• 조건A+조건B: 조건A에 맞는 케이스 중 뒤따라오는 글자가 조건B에 해당하는 경우를 찾는다
• 조건A(?!(조건B)): 조건A 중 뒤따라오는 글자가 조건B를 만족하지 않는 경우를 모두 찾되, 조건A의 범위만 포함한다
  • a(?!b)는 a 중에서 오른쪽에 b 외의 다른 글자들이 따라오는 경우를 모두 찾되, a만 포함한다
  • 만약 문자열이 dabac 라면, 네 번째 글자 a에 매칭된다
• /g: 문자열 내에서 조건에 해당하는 모든 케이스를 찾는다

결론은 단어의 양 끝이 아닌 범위 내에서 숫자가 3개씩 이어질 때마다 조건에 매치하여 쉼표를 추가하는 정규식이라고 할 수 있겠다

정규식은 너무 어렵다…

display: flex일 때 박스 다음줄로 래핑하기

flex-wrap: wrap;

다음 줄로 래핑하지 않으면 div들끼리 한 줄에 낑기려고 하다가 폭이 제멋대로 줄어드는 대참사가 발생한다

flex-wrap을 통해 다음 줄로 래핑해주자

부분문자열 추출하기: substring

let text = "가나다라";
console.log(text.substring(1, 3);

// 나다

start 인덱스의 글자부터 end 인덱스의 글자 전까지 잘라준다

오늘 정리한 강의내용

과제하다가 강의 정리만 계속 늦어졌다…

220517 강의 - 코드 예시

220517 강의 - 코드 예시

[프리온보딩] 220517 강의 메모 02 (코드 예시)